@tft/crispr-forms 12.2.20 → 13.0.1

package/bundles/tft-crispr-forms.umd.js

@@ -1,1719 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('@angular/forms'), require('rxjs/operators'), require('@angular/core'), require('@angular/material/autocomplete'), require('@angular/cdk/keycodes'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slide-toggle'), require('@angular/material/slider'), require('@angular/material/tooltip'), require('@angular/material/divider'), require('@angular/material/progress-bar'), require('@tft/form-validation-handler'), require('@angular/material-moment-adapter')) :
-    typeof define === 'function' && define.amd ? define('@tft/crispr-forms', ['exports', 'rxjs', '@angular/forms', 'rxjs/operators', '@angular/core', '@angular/material/autocomplete', '@angular/cdk/keycodes', '@angular/cdk/portal', '@angular/common', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/radio', '@angular/material/select', '@angular/material/slide-toggle', '@angular/material/slider', '@angular/material/tooltip', '@angular/material/divider', '@angular/material/progress-bar', '@tft/form-validation-handler', '@angular/material-moment-adapter'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.tft = global.tft || {}, global.tft['crispr-forms'] = {}), global.rxjs, global.ng.forms, global.rxjs.operators, global.ng.core, global.ng.material.autocomplete, global.ng.cdk.keycodes, global.ng.cdk.portal, global.ng.common, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.radio, global.ng.material.select, global.ng.material.slideToggle, global.ng.material.slider, global.ng.material.tooltip, global.ng.material.divider, global.ng.material.progressBar, global.formValidationHandler, global.ng.materialMomentAdapter));
-}(this, (function (exports, rxjs, forms, operators, core, autocomplete, keycodes, portal, common, button, buttonToggle, checkbox, chips, datepicker, formField, icon, input, radio, select, slideToggle, slider, tooltip, divider, progressBar, formValidationHandler, materialMomentAdapter) { 'use strict';
-
-    var DEFAULT_EMPTY_OPTIONS_MESSAGE = 'No Items';
-
-    // export type ControlType = keyof typeof FIELD_COMPONENTS;
-    exports.ControlType = void 0;
-    (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";
-    })(exports.ControlType || (exports.ControlType = {}));
-
-    ;
-
-    function valueIn(values) {
-        return operators.map(function (value) {
-            if (value) {
-                return values.some(function (v) {
-                    if (isRegex(v)) {
-                        var trimmedStringForRegex = v.substr(1, v.length - 2);
-                        var 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), operators.map(function (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 rxjs.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 rxjs.of(true);
-        }
-        // we run checkControlForValues on every control in the list of WatchConfigs creating
-        // an array of Observable watching fields for values
-        var fieldTriggers = config.watchConfigs.map(function (watchConfig) {
-            // resolves a boolean, true when field value matches a watched value, otherwise false
-            return checkControlForValues(group, watchConfig);
-        });
-        return rxjs.combineLatest(fieldTriggers).pipe(operators.startWith([true]), operators.map(function (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(function (bool) { return 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
-        var controlNamesToWatch = computeFieldsConfig.controlNamesToWatch;
-        //creates an observable listener for each control in the controlNamesToWatch array
-        return rxjs.combineLatest(controlNamesToWatch.map(function (controlNameToWatch) { return 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
-        operators.map(function (valuesArray) { return 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) {
-        var 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(function (obs, op) {
-                return obs.pipe(op);
-            }, observable);
-        }
-        catch (_a) {
-            console.error('Unable to pipe operators into observable');
-            return rxjs.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) {
-        var calledOptions = callOptionsIfFunction(options, parentGroup, searchString);
-        // if options are a promise
-        return calledOptions instanceof Promise
-            // convert to observable
-            ? rxjs.from(calledOptions)
-            // if array that isn't empty
-            : Array.isArray(calledOptions) && calledOptions.length
-                // convert to observable
-                ? rxjs.of(calledOptions)
-                // if observable
-                : rxjs.isObservable(calledOptions)
-                    // return it
-                    ? calledOptions
-                    // else an empty array
-                    : rxjs.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, group) {
-        if (value === void 0) { value = null; }
-        if (group === void 0) { group = new forms.FormGroup({}); }
-        config.fields.forEach(function (controlConfig) {
-            var _a;
-            if (isControlConfig(controlConfig)) {
-                // then add a control to the group using the controlName from configuration
-                var controlName = controlConfig.controlName;
-                // if there's a value object and it has a non-null/undefined value for this field use it.
-                // Otherwise, default to null
-                var 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) {
-        if (value === void 0) { value = null; }
-        // build form control out based on the control type
-        var control = controlConfig.controlType === exports.ControlType.SUB_GROUP
-            ? buildFormGroupFromConfig(controlConfig, value)
-            : controlConfig.controlType === exports.ControlType.GROUP_LIST
-                ? new forms.FormArray([], controlConfig.validators)
-                : new forms.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(function (option) {
-            return option.label && option.label.toLowerCase().includes(searchString.toLowerCase());
-        });
-    }
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    function crisprControlMixin(BaseClass) {
-        return /** @class */ (function (_super) {
-            __extends(class_1, _super);
-            function class_1() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            Object.defineProperty(class_1.prototype, "value", {
-                get: function () {
-                    return this._value;
-                },
-                set: function (value) {
-                    this.setControlValue(value);
-                    this._value = value;
-                },
-                enumerable: false,
-                configurable: true
-            });
-            class_1.prototype.ngOnInit = function () {
-                var _this = this;
-                _super.prototype.ngOnInit.call(this);
-                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(function () {
-                    _this.control.updateValueAndValidity();
-                });
-            };
-            class_1.prototype.setControlValue = function (value) {
-                if (value && this.control && this.config.controlType !== exports.ControlType.SUB_GROUP) {
-                    this.control.setValue(value);
-                }
-            };
-            return class_1;
-        }(BaseClass));
-    }
-
-    // eslint-disable-next-line @angular-eslint/directive-class-suffix
-    var CrisprFieldComponent = /** @class */ (function () {
-        function CrisprFieldComponent() {
-        }
-        CrisprFieldComponent.prototype.ngOnInit = function () {
-            this.applyDefaultConfig();
-        };
-        CrisprFieldComponent.prototype.applyDefaultConfig = function () {
-            this.config = this.defaultConfig ? Object.assign(Object.assign({}, this.defaultConfig), this.config) : this.config;
-        };
-        return CrisprFieldComponent;
-    }());
-    CrisprFieldComponent.decorators = [
-        { type: core.Directive }
-    ];
-
-    var AbstractAutocompleteFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    // eslint-disable-next-line @angular-eslint/directive-class-suffix
-    var AbstractAutocompleteComponent = /** @class */ (function (_super) {
-        __extends(AbstractAutocompleteComponent, _super);
-        function AbstractAutocompleteComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            // we need a separate control for the UI because of the way the material autocomplete chiplist works
-            _this.autocompleteInputControl = new forms.FormControl('');
-            return _this;
-        }
-        AbstractAutocompleteComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            _super.prototype.ngOnInit.call(this);
-            this.group.addControl(this.config.controlName, new forms.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
-            operators.startWith(''), operators.debounceTime(this.config.typeDebounceTime), operators.distinctUntilChanged(), operators.map(function (searchText) { return searchText || ''; }), operators.switchMap(function (searchText) { return observablifyOptions(_this.config.options, _this.group, searchText); }));
-        };
-        return AbstractAutocompleteComponent;
-    }(AbstractAutocompleteFieldMixin));
-    AbstractAutocompleteComponent.decorators = [
-        { type: core.Directive }
-    ];
-
-    var InputFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var InputFieldComponent = /** @class */ (function (_super) {
-        __extends(InputFieldComponent, _super);
-        function InputFieldComponent() {
-            var _this = _super.call(this) || this;
-            _this.defaultConfig = { inputType: 'text' };
-            return _this;
-        }
-        InputFieldComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return InputFieldComponent;
-    }(InputFieldMixin));
-    InputFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    InputFieldComponent.ctorParameters = function () { return []; };
-
-    var SelectFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var SelectFieldComponent = /** @class */ (function (_super) {
-        __extends(SelectFieldComponent, _super);
-        function SelectFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = {
-                enableToggleAll: false,
-                color: 'primary'
-            };
-            _this.allSelected = false;
-            return _this;
-        }
-        SelectFieldComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-            // 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);
-        };
-        SelectFieldComponent.prototype.ngAfterViewInit = function () {
-            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;
-            }
-        };
-        SelectFieldComponent.prototype.toggleAll = function (isSelected) {
-            if (isSelected) {
-                this.selectField.options.forEach(function (option) { return option.deselect(); });
-            }
-            else {
-                this.selectField.options.forEach(function (option) { return option.select(); });
-            }
-            this.allSelected = !this.allSelected;
-        };
-        return SelectFieldComponent;
-    }(SelectFieldMixin));
-    SelectFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: ["mat-checkbox{display:block;padding:16px}"]
-                },] }
-    ];
-    SelectFieldComponent.propDecorators = {
-        selectField: [{ type: core.ViewChild, args: ['selectField',] }]
-    };
-
-    var defaultConfig$8 = {
-        autoActiveFirstOption: true,
-        typeDebounceTime: 500,
-        emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE
-    };
-    var AutocompleteFieldComponent = /** @class */ (function (_super) {
-        __extends(AutocompleteFieldComponent, _super);
-        function AutocompleteFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig$8;
-            return _this;
-        }
-        AutocompleteFieldComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        AutocompleteFieldComponent.prototype.setControlValue = function (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
-         */
-        AutocompleteFieldComponent.prototype.displayLabel = function (options) {
-            return function (value) {
-                var _a;
-                return !!options && Array.isArray(options)
-                    ? (_a = options.find(function (option) { return option.value === value; })) === null || _a === void 0 ? void 0 : _a.label
-                    : value;
-            };
-        };
-        AutocompleteFieldComponent.prototype.handleSelect = function (event) {
-            this.control.setValue(event.option.value);
-            this.autoInputRef.nativeElement.blur();
-        };
-        return AutocompleteFieldComponent;
-    }(AbstractAutocompleteComponent));
-    AutocompleteFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    AutocompleteFieldComponent.propDecorators = {
-        autoInput: [{ type: core.ViewChild, args: ['autoInput', { read: autocomplete.MatAutocompleteTrigger },] }],
-        autoInputRef: [{ type: core.ViewChild, args: ['autoInput',] }]
-    };
-
-    var ɵ0 = function (chip, option) { return chip.value === option.value; };
-    var defaultConfig$7 = {
-        chipsSelectable: true,
-        areChipsRemovable: true,
-        tabToSelect: true,
-        autoActiveFirstOption: true,
-        imageUrlParam: 'image',
-        typeDebounceTime: 500,
-        allowDuplicates: false,
-        duplicateCompareFunction: ɵ0,
-        separatorKeyCodes: [keycodes.ENTER],
-        emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
-    };
-    var AutocompleteChiplistFieldComponent = /** @class */ (function (_super) {
-        __extends(AutocompleteChiplistFieldComponent, _super);
-        function AutocompleteChiplistFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig$7;
-            _this.chips$ = new rxjs.BehaviorSubject([]);
-            _this.controlValue$ = _this.chips$.pipe(operators.tap(function (chips) {
-                _this.control.setValue(chips.map(function (chip) { return chip.value; }));
-            }));
-            return _this;
-        }
-        AutocompleteChiplistFieldComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            _super.prototype.ngOnInit.call(this);
-            this.remainingOptions$ = rxjs.combineLatest([
-                this.chips$,
-                this.options$
-            ]).pipe(operators.map(function (_b) {
-                var _c = __read(_b, 2), chips = _c[0], options = _c[1];
-                return _this.config.allowDuplicates
-                    ? options
-                    : options === null || options === void 0 ? void 0 : options.filter(function (option) {
-                        return !chips.some(function (chip) { return _this.config.duplicateCompareFunction(chip, option); });
-                    });
-            }));
-        };
-        AutocompleteChiplistFieldComponent.prototype.setControlValue = function (value) {
-            if (value) {
-                this.chips$.next(value);
-            }
-        };
-        // handles mat selecting
-        AutocompleteChiplistFieldComponent.prototype.handleSelect = function (event) {
-            var _this = this;
-            var selectedOption = event.option.value;
-            this.chips$.next(__spreadArray(__spreadArray([], __read(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(function () { return _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
-         */
-        AutocompleteChiplistFieldComponent.prototype.handleTab = function (_event) {
-            if (this.chipInput.activeOption && (this.config.tabToSelect || this.config.addChipOnBlur)) {
-                var chip = this.chipInput.activeOption.value;
-                this.chips$.next(__spreadArray(__spreadArray([], __read(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
-         */
-        AutocompleteChiplistFieldComponent.prototype.handleTokenEnd = function (event) {
-            var _a;
-            if (this.chipInput.activeOption) {
-                this.chipInput.activeOption.select();
-            }
-            (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
-        };
-        AutocompleteChiplistFieldComponent.prototype.mapToLabel = function (option) {
-            return option ? option.label : '';
-        };
-        AutocompleteChiplistFieldComponent.prototype.removeChip = function (removedChip) {
-            var remainingChips = this.chips$.value.filter(function (chip) { return chip !== removedChip; });
-            this.chips$.next(remainingChips);
-        };
-        return AutocompleteChiplistFieldComponent;
-    }(AbstractAutocompleteComponent));
-    AutocompleteChiplistFieldComponent.decorators = [
-        { type: core.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: core.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: core.ViewChild, args: ['autoInput', { read: autocomplete.MatAutocompleteTrigger },] }],
-        chipInputRef: [{ type: core.ViewChild, args: ['autoInput',] }]
-    };
-
-    var defaultConfig$6 = {
-        labelPosition: 'after',
-        inline: false
-    };
-    var CheckboxFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var CheckboxFieldComponent = /** @class */ (function (_super) {
-        __extends(CheckboxFieldComponent, _super);
-        function CheckboxFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig$6;
-            return _this;
-        }
-        CheckboxFieldComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return CheckboxFieldComponent;
-    }(CheckboxFieldMixin));
-    CheckboxFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-
-    var defaultConfig$5 = { rows: 5 };
-    var TextareaFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var TextareaFieldComponent = /** @class */ (function (_super) {
-        __extends(TextareaFieldComponent, _super);
-        function TextareaFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig$5;
-            return _this;
-        }
-        TextareaFieldComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return TextareaFieldComponent;
-    }(TextareaFieldMixin));
-    TextareaFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-
-    var defaultConfig$4 = { displayLimits: true };
-    var SliderFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var SliderFieldComponent = /** @class */ (function (_super) {
-        __extends(SliderFieldComponent, _super);
-        function SliderFieldComponent() {
-            var _this = _super.call(this) || this;
-            _this.defaultConfig = defaultConfig$4;
-            return _this;
-        }
-        Object.defineProperty(SliderFieldComponent.prototype, "flexDirection", {
-            get: function () {
-                return this.config.vertical ? 'column' : 'row';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SliderFieldComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return SliderFieldComponent;
-    }(SliderFieldMixin));
-    SliderFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}"]
-                },] }
-    ];
-    SliderFieldComponent.ctorParameters = function () { return []; };
-
-    var ButtonComponent = /** @class */ (function (_super) {
-        __extends(ButtonComponent, _super);
-        function ButtonComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = { buttonType: 'raised', type: 'submit' };
-            return _this;
-        }
-        Object.defineProperty(ButtonComponent.prototype, "matButtonClass", {
-            get: function () {
-                return this.config.buttonType ? "mat-" + this.config.buttonType + "-button" : '';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ButtonComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-            this.formValid$ = this.group.statusChanges.pipe(operators.map(function (status) { return status === 'VALID'; }), operators.startWith(this.group.valid));
-        };
-        ButtonComponent.prototype.handleClick = function (group, event) {
-            if (this.config.callback) {
-                this.config.callback(group, event);
-            }
-        };
-        return ButtonComponent;
-    }(CrisprFieldComponent));
-    ButtonComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-
-    var defaultConfig$3 = {
-        startView: 'month',
-    };
-    var DatepickerFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var DatepickerFieldComponent = /** @class */ (function (_super) {
-        __extends(DatepickerFieldComponent, _super);
-        function DatepickerFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig$3;
-            return _this;
-            // handleSelectedChange(event, picker: MatDatepicker<unknown>) {
-            //   console.log({event, picker})
-            //   if(this.config.selectedChange) {
-            //     this.config.selectedChange(event, picker);
-            //   }
-            // }
-        }
-        DatepickerFieldComponent.prototype.ngOnInit = function () {
-            var _a, _b;
-            _super.prototype.ngOnInit.call(this);
-            this.startAt$ = this.config.startAt instanceof Date
-                ? rxjs.of(this.config.startAt)
-                : this.config.startAt instanceof Function
-                    ? this.config.startAt(this.group)
-                    : rxjs.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) : rxjs.of(function () { return ''; });
-        };
-        DatepickerFieldComponent.prototype.ngAfterContentInit = function () {
-            if (this.config.datepickerActions) {
-                this.calendarFooterPortal = new portal.ComponentPortal(this.config.datepickerActions);
-            }
-        };
-        return DatepickerFieldComponent;
-    }(DatepickerFieldMixin));
-    DatepickerFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-
-    var FileUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var FileUploadComponent = /** @class */ (function (_super) {
-        __extends(FileUploadComponent, _super);
-        // ngControl: NgControl = null;
-        function FileUploadComponent(ngControl) {
-            var _this = _super.call(this) || this;
-            _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;
-            }
-            return _this;
-        }
-        FileUploadComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-            this.disabled$ = this.config.disabledCallback
-                ? this.config.disabledCallback(this.group, this.config)
-                : rxjs.of(false);
-        };
-        FileUploadComponent.prototype.filesChanged = function (files) {
-            if (files && files.length > 0) {
-                this.selectedFiles = files;
-                this.control.patchValue(files);
-            }
-        };
-        FileUploadComponent.prototype.uploadFiles = function () {
-            if (this.selectedFiles && this.config.uploadFiles) {
-                this.isUploaded = true;
-                this.config.uploadFiles(this.group, this.selectedFiles, this);
-            }
-        };
-        FileUploadComponent.prototype.resetFileInput = function () {
-            this.fileInputRef.nativeElement.value = '';
-            this.control.patchValue(null);
-            this.isUploaded = false;
-        };
-        FileUploadComponent.prototype.writeValue = function (value) {
-            // clear file input
-            // this.host.nativeElement.value = '';
-            // this.file = null;
-        };
-        FileUploadComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        FileUploadComponent.prototype.registerOnTouched = function (fn) {
-        };
-        return FileUploadComponent;
-    }(FileUploadFieldMixin));
-    FileUploadComponent.decorators = [
-        { type: core.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: core.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 = function () { return [
-        { type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }] }
-    ]; };
-    FileUploadComponent.propDecorators = {
-        fileInputRef: [{ type: core.ViewChild, args: ['fileInput',] }]
-    };
-
-    var defaultConfig$2 = {
-        typographyClass: 'mat-h3'
-    };
-    var HeadingComponent = /** @class */ (function (_super) {
-        __extends(HeadingComponent, _super);
-        function HeadingComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig$2;
-            return _this;
-        }
-        return HeadingComponent;
-    }(CrisprFieldComponent));
-    HeadingComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:block}"]
-                },] }
-    ];
-    HeadingComponent.propDecorators = {
-        config: [{ type: core.Input }]
-    };
-
-    var DividerComponent = /** @class */ (function (_super) {
-        __extends(DividerComponent, _super);
-        function DividerComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            // TODO: pull in type after configs are better organized
-            _this.defaultConfig = {};
-            return _this;
-        }
-        DividerComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return DividerComponent;
-    }(CrisprFieldComponent));
-    DividerComponent.decorators = [
-        { type: core.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}"]
-                },] }
-    ];
-
-    var RadioFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var RadioFieldComponent = /** @class */ (function (_super) {
-        __extends(RadioFieldComponent, _super);
-        function RadioFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = {};
-            return _this;
-        }
-        RadioFieldComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-            // 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);
-        };
-        return RadioFieldComponent;
-    }(RadioFieldMixin));
-    RadioFieldComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: ["mat-radio-button{padding:12px}"]
-                },] }
-    ];
-
-    var defaultConfig$1 = {};
-    var UnitConversionFieldMixin = crisprControlMixin(CrisprFieldComponent);
-    var UnitConversionFieldComponent = /** @class */ (function (_super) {
-        __extends(UnitConversionFieldComponent, _super);
-        function UnitConversionFieldComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig$1;
-            _this.displayValueControl = new forms.FormControl();
-            _this.unitSelectControl = new forms.FormControl();
-            return _this;
-        }
-        UnitConversionFieldComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a, _b;
-            _super.prototype.ngOnInit.call(this);
-            // 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);
-            var controlValuePipeline = [
-                this.displayValueControl.valueChanges.pipe(operators.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(operators.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 = rxjs.combineLatest(controlValuePipeline).subscribe(function (_c) {
-                var _d = __read(_c, 2), displayValue = _d[0], unitValue = _d[1];
-                var computedValue = _this.config.storedValueConversion(displayValue, unitValue);
-                _this.control.setValue(computedValue);
-            });
-        };
-        UnitConversionFieldComponent.prototype.ngOnDestroy = function () {
-            this.transformationSubscription.unsubscribe();
-        };
-        UnitConversionFieldComponent.prototype.setInitialDisplayValue = function (storedValue, unit) {
-            var 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
-         */
-        UnitConversionFieldComponent.prototype.setControlValue = function (value) {
-            var _a;
-            var initialUnitValue = this.config.showUnitSelect ? (_a = this.config) === null || _a === void 0 ? void 0 : _a.initialDisplayUnit : null;
-            this.setInitialDisplayValue(value, initialUnitValue);
-        };
-        return UnitConversionFieldComponent;
-    }(UnitConversionFieldMixin));
-    UnitConversionFieldComponent.decorators = [
-        { type: core.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      [autocomplete]=\"config.autoComplete\">\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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}"]
-                },] }
-    ];
-
-    var FieldContainerComponent = /** @class */ (function () {
-        function FieldContainerComponent() {
-            // boolean whether field-container is inline
-            this.inlineField = false;
-            this.subs = [];
-        }
-        FieldContainerComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            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(operators.distinctUntilChanged(), operators.tap(function (computedValue) { return _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(operators.distinctUntilChanged(), operators.tap(function (computedValue) { return _this.group.get(_this.config.controlName).setValue(computedValue); })).subscribe());
-            }
-        };
-        FieldContainerComponent.prototype.ngOnDestroy = function () {
-            this.subs.forEach(function (sub) { return 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
-         */
-        FieldContainerComponent.prototype.connectDisabledCallback = function (group, config) {
-            if (config === void 0) { config = null; }
-            var 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
-                operators.tap(function (shouldDisable) { return shouldDisable ? control.disable() : control.enable(); }))
-                : rxjs.of(false);
-        };
-        return FieldContainerComponent;
-    }());
-    FieldContainerComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: ["::ng-deep mat-form-field.mat-form-field{display:block}.inline-field{display:inline-block}"]
-                },] }
-    ];
-    FieldContainerComponent.propDecorators = {
-        config: [{ type: core.Input }],
-        group: [{ type: core.Input }],
-        inlineField: [{ type: core.Input }]
-    };
-
-    var InfoComponent = /** @class */ (function () {
-        function InfoComponent() {
-        }
-        return InfoComponent;
-    }());
-    InfoComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: ["mat-icon{font-size:1.2em;width:1em;height:1em;opacity:.8}"]
-                },] }
-    ];
-    InfoComponent.propDecorators = {
-        info: [{ type: core.Input }]
-    };
-
-    var OptionComponent = /** @class */ (function () {
-        function OptionComponent() {
-        }
-        return OptionComponent;
-    }());
-    OptionComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    OptionComponent.propDecorators = {
-        option: [{ type: core.Input }]
-    };
-
-    var SelectedFileComponent = /** @class */ (function () {
-        function SelectedFileComponent() {
-        }
-        return SelectedFileComponent;
-    }());
-    SelectedFileComponent.decorators = [
-        { type: core.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: core.Input }],
-        progress: [{ type: core.Input }],
-        showProgress: [{ type: core.Input }],
-        color: [{ type: core.Input }]
-    };
-
-    var FileDropzoneDirective = /** @class */ (function () {
-        function FileDropzoneDirective() {
-            this.fileDrop = new core.EventEmitter();
-            this.crisprFileDropzone = true;
-        }
-        FileDropzoneDirective.prototype.onDrop = function ($event) {
-            if (this.crisprFileDropzone) {
-                $event.preventDefault();
-                this.fileDrop.emit($event.dataTransfer.files);
-            }
-        };
-        // Prevents DOM from trying to open file in browser
-        FileDropzoneDirective.prototype.onDragOver = function ($event) {
-            if (this.crisprFileDropzone) {
-                $event.preventDefault();
-            }
-        };
-        return FileDropzoneDirective;
-    }());
-    FileDropzoneDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[crisprFileDropzone]'
-                },] }
-    ];
-    FileDropzoneDirective.propDecorators = {
-        fileDrop: [{ type: core.Output }],
-        crisprFileDropzone: [{ type: core.Input }],
-        onDrop: [{ type: core.HostListener, args: ['drop', ['$event'],] }],
-        onDragOver: [{ type: core.HostListener, args: ['dragover', ['$event'],] }]
-    };
-
-    // TODO: Should we import UI library?
-    // Will the tree shaker shake the unused modules?
-    var MAT_DESIGN_MODULES = [
-        icon.MatIconModule,
-        autocomplete.MatAutocompleteModule,
-        datepicker.MatDatepickerModule,
-        input.MatInputModule,
-        radio.MatRadioModule,
-        select.MatSelectModule,
-        checkbox.MatCheckboxModule,
-        chips.MatChipsModule,
-        slider.MatSliderModule,
-        slideToggle.MatSlideToggleModule,
-        button.MatButtonModule,
-        buttonToggle.MatButtonToggleModule,
-        chips.MatChipsModule,
-        tooltip.MatTooltipModule,
-        formField.MatFormFieldModule,
-        materialMomentAdapter.MatMomentDateModule,
-        divider.MatDividerModule,
-        progressBar.MatProgressBarModule,
-        portal.PortalModule
-    ];
-    var CRISPR_FIELDS = [
-        FieldContainerComponent,
-        InputFieldComponent,
-        SelectFieldComponent,
-        RadioFieldComponent,
-        AutocompleteFieldComponent,
-        AutocompleteChiplistFieldComponent,
-        CheckboxFieldComponent,
-        TextareaFieldComponent,
-        DatepickerFieldComponent,
-        SliderFieldComponent,
-        ButtonComponent,
-        HeadingComponent,
-        DividerComponent,
-        FileUploadComponent,
-        UnitConversionFieldComponent
-    ];
-    var MaterialModule = /** @class */ (function () {
-        function MaterialModule() {
-        }
-        return MaterialModule;
-    }());
-    MaterialModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: __spreadArray([
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        formValidationHandler.FormValidationHandlerModule
-                    ], __read(MAT_DESIGN_MODULES)),
-                    exports: __spreadArray(__spreadArray([], __read(MAT_DESIGN_MODULES)), __read(CRISPR_FIELDS)),
-                    declarations: __spreadArray(__spreadArray([], __read(CRISPR_FIELDS)), [
-                        InfoComponent,
-                        OptionComponent,
-                        SelectedFileComponent,
-                        FileDropzoneDirective,
-                    ]),
-                    entryComponents: CRISPR_FIELDS
-                },] }
-    ];
-
-    var CrisprFormComponent = /** @class */ (function () {
-        function CrisprFormComponent() {
-            this.form = new forms.FormGroup({});
-            this.value = null;
-            this.submitted = new core.EventEmitter();
-            // proxy value and status change events through to consuming component
-            this.valueChanges = this.form.valueChanges;
-            this.statusChanges = this.form.statusChanges;
-            this.subs = [];
-        }
-        CrisprFormComponent.prototype.ngOnInit = function () {
-            // 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);
-        };
-        CrisprFormComponent.prototype.handleSubmit = function () {
-            this.form.markAllAsTouched();
-            this.submitted.emit(this.form);
-        };
-        return CrisprFormComponent;
-    }());
-    CrisprFormComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    CrisprFormComponent.propDecorators = {
-        config: [{ type: core.Input }],
-        form: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        submitted: [{ type: core.Output }],
-        valueChanges: [{ type: core.Output }],
-        statusChanges: [{ type: core.Output }]
-    };
-
-    var defaultConfig = {
-        addButtonLabel: 'ADD ITEM',
-        minListLength: 1,
-    };
-    var FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
-    var FormGroupListComponent = /** @class */ (function (_super) {
-        __extends(FormGroupListComponent, _super);
-        function FormGroupListComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.defaultConfig = defaultConfig;
-            return _this;
-        }
-        FormGroupListComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-            // TODO: this is required to ngFor of controls in template, must be a better way
-            this.formArray = this.control;
-        };
-        FormGroupListComponent.prototype.setControlValue = function (values) {
-            var _this = this;
-            if (this.control) {
-                if ((values === null || values === void 0 ? void 0 : values.length) > 0) {
-                    values.forEach(function (value) { return _this.addGroup(value); });
-                }
-                else if (this.config.displayInitialItem) {
-                    this.addGroup();
-                }
-            }
-        };
-        FormGroupListComponent.prototype.addGroup = function (value) {
-            if (value === void 0) { value = null; }
-            this.control.push(createControlForType(this.config.itemConfig, value));
-        };
-        FormGroupListComponent.prototype.deleteGroup = function (index) {
-            this.control.removeAt(index);
-        };
-        return FormGroupListComponent;
-    }(FormGroupListMixin));
-    FormGroupListComponent.decorators = [
-        { type: core.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: core.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}"]
-                },] }
-    ];
-
-    var FormGroupMixin = crisprControlMixin(CrisprFieldComponent);
-    var SubGroupComponent = /** @class */ (function (_super) {
-        __extends(SubGroupComponent, _super);
-        function SubGroupComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        SubGroupComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return SubGroupComponent;
-    }(FormGroupMixin));
-    SubGroupComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-
-    // tslint:disable-next-line: max-line-length
-    var 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 === exports.ControlType.BUTTON;
-    }
-
-    var CrisprFieldDirective = /** @class */ (function () {
-        function CrisprFieldDirective(resolver, container, renderer) {
-            this.resolver = resolver;
-            this.container = container;
-            this.renderer = renderer;
-        }
-        CrisprFieldDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            /**
-             * create component and set values from config on its instance
-             */
-            var component = this.config.component || FIELD_COMPONENTS[this.config.controlType];
-            var factory = this.resolver.resolveComponentFactory(component);
-            var 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(function (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);
-                }
-            });
-        };
-        return CrisprFieldDirective;
-    }());
-    CrisprFieldDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[crisprField]'
-                },] }
-    ];
-    CrisprFieldDirective.ctorParameters = function () { return [
-        { type: core.ComponentFactoryResolver },
-        { type: core.ViewContainerRef },
-        { type: core.Renderer2 }
-    ]; };
-    CrisprFieldDirective.propDecorators = {
-        config: [{ type: core.Input }],
-        group: [{ type: core.Input }],
-        value: [{ type: core.Input }]
-    };
-
-    var InitialControlValuePipe = /** @class */ (function () {
-        function InitialControlValuePipe() {
-        }
-        // TODO: does changing any to unknown break anything?
-        InitialControlValuePipe.prototype.transform = function (initialFormValue, fieldConfig) {
-            return (initialFormValue && isControlConfig(fieldConfig))
-                ? initialFormValue[fieldConfig.controlName] || null
-                : null;
-        };
-        return InitialControlValuePipe;
-    }());
-    InitialControlValuePipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'initialControlValue'
-                },] }
-    ];
-
-    var CrisprFormsModule = /** @class */ (function () {
-        function CrisprFormsModule() {
-        }
-        return CrisprFormsModule;
-    }());
-    CrisprFormsModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        formValidationHandler.FormValidationHandlerModule,
-                        MaterialModule
-                    ],
-                    declarations: [
-                        CrisprFieldDirective,
-                        CrisprFormComponent,
-                        FormGroupListComponent,
-                        InitialControlValuePipe,
-                        SubGroupComponent,
-                    ],
-                    exports: [
-                        CrisprFormComponent,
-                        MaterialModule
-                    ],
-                    entryComponents: [
-                        FormGroupListComponent,
-                        SubGroupComponent
-                    ],
-                },] }
-    ];
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.AbstractAutocompleteComponent = AbstractAutocompleteComponent;
-    exports.AutocompleteChiplistFieldComponent = AutocompleteChiplistFieldComponent;
-    exports.AutocompleteFieldComponent = AutocompleteFieldComponent;
-    exports.ButtonComponent = ButtonComponent;
-    exports.CheckboxFieldComponent = CheckboxFieldComponent;
-    exports.CrisprFieldComponent = CrisprFieldComponent;
-    exports.CrisprFormComponent = CrisprFormComponent;
-    exports.CrisprFormsModule = CrisprFormsModule;
-    exports.DEFAULT_EMPTY_OPTIONS_MESSAGE = DEFAULT_EMPTY_OPTIONS_MESSAGE;
-    exports.DatepickerFieldComponent = DatepickerFieldComponent;
-    exports.DividerComponent = DividerComponent;
-    exports.FileUploadComponent = FileUploadComponent;
-    exports.HeadingComponent = HeadingComponent;
-    exports.InputFieldComponent = InputFieldComponent;
-    exports.RadioFieldComponent = RadioFieldComponent;
-    exports.SelectFieldComponent = SelectFieldComponent;
-    exports.SliderFieldComponent = SliderFieldComponent;
-    exports.TextareaFieldComponent = TextareaFieldComponent;
-    exports.UnitConversionFieldComponent = UnitConversionFieldComponent;
-    exports.buildFormGroupFromConfig = buildFormGroupFromConfig;
-    exports.callOptionsIfFunction = callOptionsIfFunction;
-    exports.checkControlForValues = checkControlForValues;
-    exports.checkControlsForValues = checkControlsForValues;
-    exports.computeValueFromFields = computeValueFromFields;
-    exports.createControlForType = createControlForType;
-    exports.crisprControlMixin = crisprControlMixin;
-    exports.filterOptionsByLabel = filterOptionsByLabel;
-    exports.isControlConfig = isControlConfig;
-    exports.observablifyOptions = observablifyOptions;
-    exports.ɵ0 = ɵ0;
-    exports.ɵa = MaterialModule;
-    exports.ɵb = FieldContainerComponent;
-    exports.ɵc = InputFieldComponent;
-    exports.ɵd = SelectFieldComponent;
-    exports.ɵe = RadioFieldComponent;
-    exports.ɵf = AutocompleteFieldComponent;
-    exports.ɵg = AbstractAutocompleteComponent;
-    exports.ɵh = AutocompleteChiplistFieldComponent;
-    exports.ɵi = CheckboxFieldComponent;
-    exports.ɵj = TextareaFieldComponent;
-    exports.ɵk = DatepickerFieldComponent;
-    exports.ɵl = SliderFieldComponent;
-    exports.ɵm = ButtonComponent;
-    exports.ɵn = CrisprFieldComponent;
-    exports.ɵo = HeadingComponent;
-    exports.ɵp = DividerComponent;
-    exports.ɵq = FileUploadComponent;
-    exports.ɵr = UnitConversionFieldComponent;
-    exports.ɵs = InfoComponent;
-    exports.ɵt = OptionComponent;
-    exports.ɵu = SelectedFileComponent;
-    exports.ɵv = FileDropzoneDirective;
-    exports.ɵw = CrisprFieldDirective;
-    exports.ɵx = FormGroupListComponent;
-    exports.ɵy = InitialControlValuePipe;
-    exports.ɵz = SubGroupComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=tft-crispr-forms.umd.js.map