@tft/crispr-forms 14.0.2 → 15.0.0

package/fesm2022/tft-crispr-forms.mjs

@@ -0,0 +1,848 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, Pipe, NgModule, EventEmitter, Component, Output, ViewChild, HostListener, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import { from, of, isObservable } from 'rxjs';
+import { map, startWith, debounceTime, distinctUntilChanged, switchMap, shareReplay, tap } from 'rxjs/operators';
+import * as i2$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2$1 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i3$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+function valueIn(values) {
+    return map((value) => {
+        if (value) {
+            return values.some(v => {
+                if (isRegex(v)) {
+                    const trimmedStringForRegex = v.substr(1, v.length - 2);
+                    const regex = new RegExp(trimmedStringForRegex);
+                    return regex.test(value);
+                }
+                else {
+                    return v === value;
+                }
+            });
+        }
+        else {
+            return false;
+        }
+    });
+}
+function isRegex(string) {
+    return string.startsWith('/') && string.endsWith('/');
+}
+
+const DEFAULT_EMPTY_OPTIONS_MESSAGE = 'No Items';
+
+// export type ControlType = keyof typeof FIELD_COMPONENTS;
+var ControlType;
+(function (ControlType) {
+    ControlType["AUTOCOMPLETE"] = "autocomplete";
+    ControlType["AUTOCOMPLETE_CHIPLIST"] = "autocompleteChiplist";
+    ControlType["BUTTON"] = "button";
+    ControlType["CHECKBOX"] = "checkbox";
+    ControlType["CUSTOM"] = "custom";
+    ControlType["DATEPICKER"] = "datepicker";
+    ControlType["DIVIDER"] = "divider";
+    ControlType["FILE_UPLOAD"] = "fileUpload";
+    ControlType["HEADING"] = "heading";
+    ControlType["INPUT"] = "input";
+    ControlType["IMAGE_UPLOAD"] = "imageUpload";
+    ControlType["GROUP_LIST"] = "groupList";
+    ControlType["RADIO"] = "radio";
+    ControlType["SELECT"] = "select";
+    ControlType["SLIDER"] = "slider";
+    ControlType["SUB_GROUP"] = "subGroup";
+    ControlType["TEXTAREA"] = "textarea";
+    ControlType["UNIT_CONVERSION"] = "unitConversion";
+})(ControlType || (ControlType = {}));
+
+;
+
+function crisprControlMixin(BaseClass) {
+    return class extends BaseClass {
+        set value(value) {
+            this.setControlValue(value);
+            this._value = value;
+        }
+        get value() {
+            return this._value;
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            this.control = this.group.get(this.config.controlName);
+            this.setControlValue(this.value);
+            // setTimeouts are ugly but this seems to be the only way to get the computed field to compute initial values
+            setTimeout(() => {
+                this.control.updateValueAndValidity();
+            });
+        }
+        setControlValue(value) {
+            if (value && this.control && this.config.controlType !== ControlType.SUB_GROUP) {
+                this.control.setValue(value);
+            }
+        }
+    };
+}
+
+class CrisprFieldComponent {
+    ngOnInit() {
+        this.applyDefaultConfig();
+    }
+    applyDefaultConfig() {
+        this.config = this.defaultConfig ? { ...this.defaultConfig, ...this.config } : this.config;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: CrisprFieldComponent, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFieldComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Analyze the config and build a form control to spec. Notice we don't use FormBuilder here
+ * as we want to keep this function pure.
+ * @param controlConfig the configuration object for the control to build
+ * @param value an initial value to use if passed in
+ */
+function createControlForType(controlConfig, value = null) {
+    // build form control out based on the control type
+    const control = controlConfig.controlType === ControlType.SUB_GROUP
+        ? buildFormGroupFromConfig(controlConfig, value)
+        : controlConfig.controlType === ControlType.GROUP_LIST
+            ? new FormArray([], controlConfig.validators)
+            : new FormControl(value || null, controlConfig.validators);
+    return control;
+}
+
+/**
+ * Determines if the field config is for a form control (not a divider, heading or other non-control field)
+ */
+function isControlConfig(fieldConfig) {
+    return 'controlName' in fieldConfig;
+}
+
+/**
+ * builds out form group based on config
+ * @param config a configuration for a form group
+ * @param value an object of initial values to pass in
+ * @param group the form group to modify and build out
+ */
+function buildFormGroupFromConfig(config, value = null, group = new FormGroup({})) {
+    config.fields.forEach((controlConfig) => {
+        if (isControlConfig(controlConfig)) {
+            // then add a control to the group using the controlName from configuration
+            const { controlName } = controlConfig;
+            if (group.get(controlName)) {
+                group.removeControl(controlName);
+            }
+            // if there's a value object and it has a non-null/undefined value for this field use it.
+            // Otherwise, default to null
+            const controlValue = (value && value[controlName]) ?? null;
+            const control = createControlForType(controlConfig, controlValue);
+            group.addControl(controlName, control);
+        }
+    });
+    group.setValidators(config.validators);
+    return group;
+}
+
+function callOptionsIfFunction(options, parentGroup, searchString) {
+    return options instanceof Function ? options(parentGroup, searchString) : options;
+}
+
+/**
+ * A basic filter function that filters the search string against the label of the options object
+ * @param options the array of options to filter
+ * @param searchString the string from the input
+ */
+function filterOptionsByLabel(options, searchString) {
+    return options.filter(option => {
+        return option.label && option.label.toLowerCase().includes(searchString.toLowerCase());
+    });
+}
+
+/**
+ * The user can give us select options as an array, a function that resolves to a promise,
+ * or an observable. This functions consumes any of those and returns an observable that
+ * resolves an array of options
+ *
+ * @param options the options passed in from the config
+ * @param emptyMessageOption the message to display when the array is empty
+ */
+function observablifyOptions(options, parentGroup, searchString) {
+    const calledOptions = callOptionsIfFunction(options, parentGroup, searchString);
+    // if options are a promise
+    const observableOptions = calledOptions instanceof Promise
+        // convert to observable
+        ? from(calledOptions)
+        // if array that isn't empty
+        : Array.isArray(calledOptions) && calledOptions.length
+            // convert to observable
+            ? of(calledOptions)
+            // if observable
+            : isObservable(calledOptions)
+                // return it
+                ? calledOptions
+                // else an empty array
+                : of([]);
+    return observableOptions;
+}
+
+function convertBytesToMb(bytes) {
+    return bytes / 1048576;
+}
+function maxFileSizeValidator(maxFileSize) {
+    return (control) => {
+        const controlValue = control.value;
+        if (!(controlValue instanceof File)) {
+            return null;
+        }
+        const actualFileSize = +convertBytesToMb(controlValue.size).toPrecision(3);
+        if (maxFileSize > actualFileSize)
+            return null;
+        return { maxFileSize: { maxFileSize, actualFileSize } };
+    };
+}
+function allowedFileExtValidator(allowedFileExtensions, onlyAllowFiles = true) {
+    return (control) => {
+        const controlValue = control.value;
+        const isFile = controlValue instanceof File;
+        if (!onlyAllowFiles && !isFile)
+            return null;
+        const actualExtension = isFile ? controlValue.name.split('.').pop().toLocaleLowerCase() : 'Not a file';
+        const isAllowedExtension = allowedFileExtensions.includes(actualExtension);
+        if (isAllowedExtension) {
+            return null;
+        }
+        return { allowedExtension: { allowedFileExtensions, actualExtension } };
+    };
+}
+function allowedFileType(matchExp) {
+    return (formControl) => {
+        const value = formControl.value;
+        if (!(value instanceof File))
+            return null;
+        const type = value.type;
+        const matches = type.match(matchExp);
+        if (!type || !matches?.length) {
+            return {
+                allowedFileType: {
+                    actualType: type,
+                    allowedTypeExp: matchExp
+                }
+            };
+        }
+        else {
+            return null;
+        }
+    };
+}
+
+const AbstractAutocompleteFieldMixin = crisprControlMixin(CrisprFieldComponent);
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class AbstractAutocompleteComponent extends AbstractAutocompleteFieldMixin {
+    constructor() {
+        super(...arguments);
+        // we need a separate control for the UI because of the way the material autocomplete chiplist works
+        this.autocompleteInputControl = new FormControl('');
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.group.addControl(this.config.controlName, new FormControl());
+        // filter options by the search string using either the default filter function or one passed in through config
+        this.options$ = this.autocompleteInputControl.valueChanges.pipe(
+        // this is needed to have the options panel to open on focus
+        startWith(''), debounceTime(this.config.typeDebounceTime), map((searchText) => typeof searchText === 'string' ? searchText?.trim() : ''), distinctUntilChanged(), switchMap((searchText) => observablifyOptions(this.config.options, this.group, searchText)), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AbstractAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: AbstractAutocompleteComponent, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AbstractAutocompleteComponent, decorators: [{
+            type: Directive
+        }] });
+
+const CrisprDisplayFieldMixin = crisprControlMixin(CrisprFieldComponent);
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class CrisprDisplayFieldComponent extends CrisprDisplayFieldMixin {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprDisplayFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: CrisprDisplayFieldComponent, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprDisplayFieldComponent, decorators: [{
+            type: Directive
+        }] });
+
+const FIELD_COMPONENTS = {
+    groupList: () => Promise.resolve().then(function () { return index$1; }).then(({ FormGroupListComponent }) => FormGroupListComponent),
+    subGroup: () => Promise.resolve().then(function () { return index; }).then(({ SubGroupComponent }) => SubGroupComponent),
+    button: () => import('./tft-crispr-forms-index-C_I9vjqf.mjs').then(({ ButtonComponent }) => ButtonComponent),
+    input: () => import('./tft-crispr-forms-index-C5X0mk3N.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
+    select: () => import('./tft-crispr-forms-index-CFUop3Cq.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
+    radio: () => import('./tft-crispr-forms-index-OLo2t0tl.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
+    autocomplete: () => import('./tft-crispr-forms-index-DE8VOdBd.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
+    autocompleteChiplist: () => import('./tft-crispr-forms-index-rRi6OMY6.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
+    textarea: () => import('./tft-crispr-forms-index-CZdi06Jj.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
+    checkbox: () => import('./tft-crispr-forms-index-OT7kkOgd.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
+    slider: () => import('./tft-crispr-forms-index-Ukk3WgS2.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
+    datepicker: () => import('./tft-crispr-forms-index-xAaInTLg.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
+    fileUpload: () => import('./tft-crispr-forms-index-BfR4XbYi.mjs').then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
+    imageUpload: () => import('./tft-crispr-forms-index-BXwiulEX.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
+    heading: () => Promise.resolve().then(function () { return index$2; }).then(({ HeadingComponent }) => HeadingComponent),
+    divider: () => import('./tft-crispr-forms-index-76UuF0AI.mjs').then(({ DividerComponent }) => DividerComponent),
+    unitConversion: () => import('./tft-crispr-forms-index-CFdMVgM0.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
+};
+function isControlComponent(component) {
+    return component && isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
+}
+function isControlOrButtonComponent(component) {
+    return (isControlComponent(component) ||
+        component.config.controlType === ControlType.BUTTON);
+}
+
+class CrisprFieldDirective {
+    set value(value) {
+        this._value = value;
+        // This is needed to keep the group list from resetting control values to the initial input value
+        this.updateComponentValue(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(container, renderer, cdr) {
+        this.container = container;
+        this.renderer = renderer;
+        this.cdr = cdr;
+    }
+    async ngOnInit() {
+        /**
+         * create component and set values from config on its instance
+         */
+        const component = this.config.component ||
+            (await FIELD_COMPONENTS[this.config.controlType]());
+        const componentRef = this.container.createComponent(component);
+        this.component = componentRef.instance;
+        this.component.config = this.config;
+        if (isControlOrButtonComponent(this.component)) {
+            this.component.group = this.group;
+        }
+        this.updateComponentValue(this.value);
+        // adds any config classes to the dynamically generated component
+        // doing this here keeps us from having to extend a base component into each field component individually
+        if (!this.config.classes)
+            return;
+        this.config.classes.forEach((klass) => {
+            // check for passing multiple classes in one array element
+            if (klass.includes(' ')) {
+                throw Error(`Improperly formatted class. '${klass}' cannot contain spaces.`);
+            }
+            else {
+                this.renderer.addClass(componentRef.location.nativeElement, klass);
+            }
+        });
+    }
+    updateComponentValue(value) {
+        if (isControlComponent(this.component)) {
+            this.component.value = value;
+            // SubGroups won't populate without this detectChanges
+            this.cdr.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: CrisprFieldDirective, isStandalone: true, selector: "[crisprField]", inputs: { config: "config", group: "group", value: "value" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[crisprField]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class InitialControlValuePipe {
+    // TODO: does changing any to unknown break anything?
+    transform(initialFormValue, fieldConfig) {
+        return initialFormValue && isControlConfig(fieldConfig)
+            ? initialFormValue[fieldConfig.controlName] || null
+            : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InitialControlValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: InitialControlValuePipe, name: "initialControlValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InitialControlValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'initialControlValue',
+                }]
+        }] });
+
+class CrisprPipesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: CrisprPipesModule, declarations: [InitialControlValuePipe], imports: [CommonModule], exports: [InitialControlValuePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprPipesModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        InitialControlValuePipe
+                    ],
+                    declarations: [
+                        InitialControlValuePipe
+                    ]
+                }]
+        }] });
+
+class CrisprFormComponent {
+    constructor() {
+        this.form = new FormGroup({});
+        this.value = null;
+        this.submitted = new EventEmitter();
+        // proxy value and status change events through to consuming component
+        this.valueChanges = this.form.valueChanges;
+        this.statusChanges = this.form.statusChanges;
+    }
+    ngOnInit() {
+        // build out the form, note that we pass in the form as the third argument and the function modifies it
+        buildFormGroupFromConfig(this.config, this.value, this.form);
+    }
+    handleSubmit() {
+        this.form.markAllAsTouched();
+        this.submitted.emit(this.form);
+    }
+    triggerSubmit() {
+        this.submitTrigger.nativeElement.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CrisprFormComponent, isStandalone: true, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i7.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i7.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-form', standalone: true, imports: [
+                        CommonModule,
+                        CrisprFieldDirective,
+                        ReactiveFormsModule,
+                        FormValidationHandlerModule,
+                        CrisprPipesModule,
+                    ], template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], submitted: [{
+                type: Output
+            }], valueChanges: [{
+                type: Output
+            }], statusChanges: [{
+                type: Output
+            }], submitTrigger: [{
+                type: ViewChild,
+                args: ['submitTrigger']
+            }] } });
+
+class FileDropzoneDirective {
+    constructor() {
+        this.fileDrop = new EventEmitter();
+        this.crisprFileDropzone = true;
+    }
+    onDrop($event) {
+        if (this.crisprFileDropzone) {
+            $event.preventDefault();
+            this.fileDrop.emit($event.dataTransfer.files);
+        }
+    }
+    // Prevents DOM from trying to open file in browser
+    onDragOver($event) {
+        if (this.crisprFileDropzone) {
+            $event.preventDefault();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FileDropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FileDropzoneDirective, isStandalone: true, selector: "[crisprFileDropzone]", inputs: { crisprFileDropzone: "crisprFileDropzone" }, outputs: { fileDrop: "fileDrop" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FileDropzoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[crisprFileDropzone]',
+                    standalone: true,
+                }]
+        }], propDecorators: { fileDrop: [{
+                type: Output
+            }], crisprFileDropzone: [{
+                type: Input
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }] } });
+
+class SelectedFileComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectedFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: SelectedFileComponent, isStandalone: true, selector: "crispr-selected-file", inputs: { fileName: "fileName", progress: "progress", showProgress: "showProgress", color: "color" }, ngImport: i0, template: "<h3 class=\"mat-h3\">{{ fileName }}</h3>\n<mat-progress-bar\n  *ngIf=\"showProgress\"\n  mode=\"determinate\"\n  [color]=\"color\"\n  [value]=\"progress\">\n</mat-progress-bar>\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i2$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectedFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-selected-file', standalone: true, imports: [
+                        CommonModule,
+                        MatProgressBarModule
+                    ], template: "<h3 class=\"mat-h3\">{{ fileName }}</h3>\n<mat-progress-bar\n  *ngIf=\"showProgress\"\n  mode=\"determinate\"\n  [color]=\"color\"\n  [value]=\"progress\">\n</mat-progress-bar>\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"] }]
+        }], propDecorators: { fileName: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }], showProgress: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class InfoComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: InfoComponent, isStandalone: true, selector: "crispr-info", inputs: { info: "info" }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"info\"\n  [matTooltip]=\"info.content\"\n  [matTooltipPosition]=\"info.tooltipPosition || 'below'\">\n  {{info.iconName || 'info'}}\n</mat-icon>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatTooltipModule
+                    ], template: "<mat-icon\n  *ngIf=\"info\"\n  [matTooltip]=\"info.content\"\n  [matTooltipPosition]=\"info.tooltipPosition || 'below'\">\n  {{info.iconName || 'info'}}\n</mat-icon>\n" }]
+        }], propDecorators: { info: [{
+                type: Input
+            }] } });
+
+const defaultConfig$1 = {
+    typographyClass: 'mat-h3',
+};
+class HeadingComponent extends CrisprFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: HeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: HeadingComponent, isStandalone: true, selector: "crispr-heading", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "  <label\n    *ngIf=\"!!config?.label\"\n    [ngClass]=\"config.typographyClass\">\n    {{ config.label }}\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n  </label>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: HeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-heading', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatFormFieldModule, InfoComponent], template: "  <label\n    *ngIf=\"!!config?.label\"\n    [ngClass]=\"config.typographyClass\">\n    {{ config.label }}\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n  </label>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class FieldContainerComponent {
+    constructor() {
+        // boolean whether field-container is inline
+        this.inlineField = false;
+        this.subs = [];
+    }
+    ngOnInit() {
+        this.disabled$ = this.connectDisabledCallback(this.group, this.config);
+        // we tried moving this into afterViewChecked and afterContentChecked lifecycle hooks without any luck
+        if (this.config.computeValue) {
+            this.subs.push(this.config
+                .computeValue(this.group)
+                .pipe(distinctUntilChanged(), tap((computedValue) => this.group.get(this.config.controlName).setValue(computedValue)))
+                .subscribe());
+        }
+    }
+    ngOnDestroy() {
+        this.subs.forEach((sub) => sub.unsubscribe);
+    }
+    /**
+     * Connects user defined disabledCallback function to the the view, so that the control is enabled/disabled
+     * appropriately. It also will hide disabled fields in the UI unless `hideDisabled` is set to
+     * false in the controls config
+     * @param group used to get valueChanges from control
+     * @param config configuration object used to
+     */
+    connectDisabledCallback(group, config = null) {
+        const control = group.get(config.controlName);
+        // If the disabled$ function exists on the field config then call it with the disabledCallbackConfig
+        // as a parameter otherwise return an observable of true.
+        return config?.disabledCallback &&
+            config.disabledCallback instanceof Function
+            ? config.disabledCallback(group).pipe(
+            // This enables/disables when callback conditions are met
+            tap((shouldDisable) => shouldDisable ? control.disable() : control.enable()))
+            : of(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FieldContainerComponent, isStandalone: true, selector: "crispr-field-container", inputs: { config: "config", group: "group", inlineField: "inlineField" }, ngImport: i0, template: "<div\n  *ngIf=\"(disabled$ | async) ? !config.hideDisabled : true\"\n  [ngClass]=\"config.classes\"\n  [class.inline-field]=\"inlineField\"\n  class=\"field-container\">\n\n  <crispr-heading\n    *ngIf=\"config.heading\"\n    [config]=\"config.heading\">\n  </crispr-heading>\n\n  <ng-content>\n  </ng-content>\n\n</div>\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: HeadingComponent, selector: "crispr-heading", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FieldContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-field-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, HeadingComponent], template: "<div\n  *ngIf=\"(disabled$ | async) ? !config.hideDisabled : true\"\n  [ngClass]=\"config.classes\"\n  [class.inline-field]=\"inlineField\"\n  class=\"field-container\">\n\n  <crispr-heading\n    *ngIf=\"config.heading\"\n    [config]=\"config.heading\">\n  </crispr-heading>\n\n  <ng-content>\n  </ng-content>\n\n</div>\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], inlineField: [{
+                type: Input
+            }] } });
+
+var index$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FieldContainerComponent: FieldContainerComponent,
+    FileDropzoneDirective: FileDropzoneDirective,
+    HeadingComponent: HeadingComponent,
+    InfoComponent: InfoComponent,
+    SelectedFileComponent: SelectedFileComponent
+});
+
+class CrisprDisplayFieldDirective {
+    set value(value) {
+        this._value = value;
+        // This is needed to keep the group list from resetting control values to the initial input value
+        this.updateComponentValue(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(container, cdr) {
+        this.container = container;
+        this.cdr = cdr;
+    }
+    async ngOnInit() {
+        if (this.component) {
+            /**
+             * create component and set values from config on its instance
+             */
+            const componentRef = this.container.createComponent(this.component);
+            this.componentInstance = componentRef.instance;
+            this.componentInstance.index = this.index;
+            this.updateComponentValue(this.value);
+        }
+    }
+    updateComponentValue(value) {
+        if (!this.componentInstance)
+            return;
+        this.componentInstance.value = value;
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprDisplayFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: CrisprDisplayFieldDirective, isStandalone: true, selector: "[crisprDisplayField]", inputs: { group: "group", value: "value", component: "component", index: "index" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprDisplayFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[crisprDisplayField]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { group: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+const defaultConfig = {
+    addButtonLabel: 'ADD ITEM',
+    minListLength: 1,
+};
+const FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
+class FormGroupListComponent extends FormGroupListMixin {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.defaultConfig = defaultConfig;
+        /**
+         * By setting this to true when adding/removing items from array,
+         * we can block original values from overwriting form values
+         * */
+        this.blockValue = false;
+        this.selectedIndex = null;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // TODO: this is required to ngFor of controls in template, must be a better way
+    }
+    setControlValue(values) {
+        if (this.control) {
+            if (values?.length > 0) {
+                // clear any existing values so that new values don't concatenate onto the old
+                const currentValues = this.control.value;
+                if (currentValues.length) {
+                    this.control.clear();
+                }
+                values.forEach((value) => this.addGroup(value));
+            }
+            else if (this.config.displayInitialItem) {
+                this.addGroup();
+            }
+            // needed to ensure new array items render
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            });
+        }
+    }
+    clickDelete(index) {
+        this.blockValue = true;
+        this.deleteGroup(index);
+    }
+    clickAdd() {
+        this.blockValue = true;
+        this.addGroup();
+    }
+    addGroup(value = null) {
+        this.control.push(createControlForType(this.config.itemConfig, value));
+        // needed to ensure new array items render
+        setTimeout(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    deleteGroup(index) {
+        this.control.removeAt(index);
+    }
+    clickEditItem(index) {
+        this.selectedIndex = index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FormGroupListComponent, isStandalone: true, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <ng-container *ngFor=\"let itemControl of control?.controls; let i = index; let last = last\">\n      <ng-container *ngIf=\"!config.displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true); else display\">\n        <!-- TODO: use content projection to allow custom item label component -->\n        <div  class=\"item-header\">\n          <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n          <button\n            mat-icon-button\n            type=\"button\"\n            *ngIf=\"i + 1 > config.minListLength\">\n            <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n          </button>\n        </div>\n        <div\n          [formGroup]=\"itemControl\">\n          <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n          <ng-container\n            *ngFor=\"let field of config.itemConfig.fields;\"\n            crisprField\n            [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n            [config]=\"field\"\n            [group]=\"itemControl\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #display>\n        <div\n          class=\"display-field-container\"\n          crisprDisplayField\n          [component]=\"config.displayItemComponent\"\n          [value]=\"itemControl.value\"\n          [index]=\"i\">\n          <button mat-icon-button (click)=\"clickEditItem(i)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "directive", type: CrisprDisplayFieldDirective, selector: "[crisprDisplayField]", inputs: ["group", "value", "component", "index"] }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i7.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FormGroupListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        CrisprFieldDirective,
+                        CrisprDisplayFieldDirective,
+                        CrisprPipesModule,
+                        FormValidationHandlerModule,
+                    ], template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <ng-container *ngFor=\"let itemControl of control?.controls; let i = index; let last = last\">\n      <ng-container *ngIf=\"!config.displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true); else display\">\n        <!-- TODO: use content projection to allow custom item label component -->\n        <div  class=\"item-header\">\n          <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n          <button\n            mat-icon-button\n            type=\"button\"\n            *ngIf=\"i + 1 > config.minListLength\">\n            <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n          </button>\n        </div>\n        <div\n          [formGroup]=\"itemControl\">\n          <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n          <ng-container\n            *ngFor=\"let field of config.itemConfig.fields;\"\n            crisprField\n            [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n            [config]=\"field\"\n            [group]=\"itemControl\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #display>\n        <div\n          class=\"display-field-container\"\n          crisprDisplayField\n          [component]=\"config.displayItemComponent\"\n          [value]=\"itemControl.value\"\n          [index]=\"i\">\n          <button mat-icon-button (click)=\"clickEditItem(i)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FormGroupListComponent: FormGroupListComponent
+});
+
+const FormGroupMixin = crisprControlMixin(CrisprFieldComponent);
+class SubGroupComponent extends FormGroupMixin {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SubGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: SubGroupComponent, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SubGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-sub-group', template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n" }]
+        }] });
+
+class SubGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SubGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: SubGroupModule, declarations: [SubGroupComponent], imports: [CommonModule,
+            CrisprFieldDirective,
+            FieldContainerComponent,
+            CrisprPipesModule,
+            // TODO: Does this need to be here?
+            FormValidationHandlerModule], exports: [SubGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SubGroupModule, imports: [CommonModule,
+            FieldContainerComponent,
+            CrisprPipesModule,
+            // TODO: Does this need to be here?
+            FormValidationHandlerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SubGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CrisprFieldDirective,
+                        FieldContainerComponent,
+                        CrisprPipesModule,
+                        // TODO: Does this need to be here?
+                        FormValidationHandlerModule
+                    ],
+                    exports: [
+                        SubGroupComponent
+                    ],
+                    declarations: [
+                        SubGroupComponent
+                    ]
+                }]
+        }] });
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SubGroupComponent: SubGroupComponent,
+    SubGroupModule: SubGroupModule
+});
+
+class CrisprFormsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FormValidationHandlerModule,
+            FormGroupListComponent,
+            FieldContainerComponent,
+            CrisprFieldDirective,
+            CrisprDisplayFieldDirective,
+            SubGroupModule,
+            CrisprPipesModule,
+            CrisprFormComponent], exports: [CrisprFormComponent, FieldContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FormValidationHandlerModule,
+            FormGroupListComponent,
+            FieldContainerComponent,
+            SubGroupModule,
+            CrisprPipesModule,
+            CrisprFormComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CrisprFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormValidationHandlerModule,
+                        FormGroupListComponent,
+                        FieldContainerComponent,
+                        CrisprFieldDirective,
+                        CrisprDisplayFieldDirective,
+                        SubGroupModule,
+                        CrisprPipesModule,
+                        CrisprFormComponent,
+                    ],
+                    exports: [CrisprFormComponent, FieldContainerComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractAutocompleteComponent, ControlType, CrisprDisplayFieldComponent, CrisprFieldComponent, CrisprFormComponent, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, FieldContainerComponent, FileDropzoneDirective, HeadingComponent, InfoComponent, SelectedFileComponent, allowedFileExtValidator, allowedFileType, buildFormGroupFromConfig, callOptionsIfFunction, convertBytesToMb, createControlForType, crisprControlMixin, filterOptionsByLabel, isControlConfig, maxFileSizeValidator, observablifyOptions, valueIn };
+//# sourceMappingURL=tft-crispr-forms.mjs.map