@tft/crispr-forms 13.0.23 → 14.0.1-rc.2

package/fesm2015/tft-crispr-forms-ui.mjs

@@ -0,0 +1,684 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, ViewChild, Optional, Self } from '@angular/core';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FieldContainerComponent } from '@tft/crispr-forms/ui/field-container';
+export * from '@tft/crispr-forms/ui/field-container';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { InfoComponent } from '@tft/crispr-forms/ui/info';
+export * from '@tft/crispr-forms/ui/info';
+import { crisprControlMixin, CrisprFieldComponent, observablifyOptions, DEFAULT_EMPTY_OPTIONS_MESSAGE, AbstractAutocompleteComponent } from '@tft/crispr-forms/utils';
+import * as i4$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i2$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$2 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import * as i3$1 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { tap, map, startWith } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, of } from 'rxjs';
+import { ENTER } from '@angular/cdk/keycodes';
+import * as i7 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i3$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$3 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i2$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4$3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
+import * as i6 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i2$4 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i3$4 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i7$1 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import { FileDropzoneDirective } from '@tft/crispr-forms/ui/file-dropzone';
+export * from '@tft/crispr-forms/ui/file-dropzone';
+import { SelectedFileComponent } from '@tft/crispr-forms/ui/selected-file';
+export * from '@tft/crispr-forms/ui/selected-file';
+export * from '@tft/crispr-forms/ui/heading';
+
+const InputFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class InputFieldComponent extends InputFieldMixin {
+    constructor() {
+        super();
+        this.defaultConfig = { inputType: 'text' };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+InputFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: InputFieldComponent, isStandalone: true, selector: "crispr-input-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label>\n      {{config.label}}\n    </mat-label>\n    <input\n      [type]=\"config.inputType\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [maxlength]=\"config.maxLength\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\"\n      [pattern]=\"config.pattern\"\n      [spellcheck]=\"config.spellcheck\"\n      [autocomplete]=\"config.autoComplete\"\n      [autocapitalize]=\"config.autoCapitalize\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n\n</crispr-field-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-input-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label>\n      {{config.label}}\n    </mat-label>\n    <input\n      [type]=\"config.inputType\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [maxlength]=\"config.maxLength\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\"\n      [pattern]=\"config.pattern\"\n      [spellcheck]=\"config.spellcheck\"\n      [autocomplete]=\"config.autoComplete\"\n      [autocapitalize]=\"config.autoCapitalize\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n\n</crispr-field-container>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class OptionComponent {
+}
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: OptionComponent, isStandalone: true, selector: "crispr-option", inputs: { option: "option" }, ngImport: i0, template: "<div>\n  <img\n    *ngIf=\"option.imageUrl\"\n    [src]=\"option.imageUrl\"\n    alt=\"image of {{option.label}}\"\n    style=\"vertical-align:middle;\"\n    aria-hidden\n    height=\"25\"/>\n  {{option.label}}\n</div>\n\n<crispr-info *ngIf=\"option.info as info\" [info]=\"info\">\n\n</crispr-info>\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-option', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                    ], template: "<div>\n  <img\n    *ngIf=\"option.imageUrl\"\n    [src]=\"option.imageUrl\"\n    alt=\"image of {{option.label}}\"\n    style=\"vertical-align:middle;\"\n    aria-hidden\n    height=\"25\"/>\n  {{option.label}}\n</div>\n\n<crispr-info *ngIf=\"option.info as info\" [info]=\"info\">\n\n</crispr-info>\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"] }]
+        }], propDecorators: { option: [{
+                type: Input
+            }] } });
+
+const SelectFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class SelectFieldComponent extends SelectFieldMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = {
+            enableToggleAll: false,
+            color: 'primary'
+        };
+        this.allSelected = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // options$ can be passed as an array, promise that resolves array, or observable that resolves array
+        // this functions accounts for all possibilities and converts to observable that resolves array
+        this.options$ = observablifyOptions(this.config.options, this.group);
+    }
+    ngAfterViewInit() {
+        var _a, _b;
+        if (this.config.multiple
+            && this.config.enableToggleAll
+            && ((_a = this.selectField.options) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length)) {
+            this.allSelected = true;
+        }
+    }
+    toggleAll(isSelected) {
+        if (isSelected) {
+            this.selectField.options.forEach(option => option.deselect());
+        }
+        else {
+            this.selectField.options.forEach(option => option.select());
+        }
+        this.allSelected = !this.allSelected;
+    }
+}
+SelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SelectFieldComponent, isStandalone: true, selector: "crispr-select-field", viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControlName]=\"config.controlName\"\n      [placeholder]=\"config.placeholder\"\n      [multiple]=\"config.multiple\">\n\n      <mat-checkbox\n        [color]=\"config.color\"\n        [checked]=\"allSelected\"\n        *ngIf=\"config?.multiple && config.enableToggleAll\"\n        (click)=\"toggleAll(allSelected)\">\n        Select All\n      </mat-checkbox>\n      <mat-option\n        *ngFor=\"let option of options$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"], dependencies: [{ kind: "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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
+            // CrisprFieldDirective,
+            FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-select-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        MatCheckboxModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        // CrisprFieldDirective,
+                        FieldContainerComponent,
+                        MatFormFieldModule,
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControlName]=\"config.controlName\"\n      [placeholder]=\"config.placeholder\"\n      [multiple]=\"config.multiple\">\n\n      <mat-checkbox\n        [color]=\"config.color\"\n        [checked]=\"allSelected\"\n        *ngIf=\"config?.multiple && config.enableToggleAll\"\n        (click)=\"toggleAll(allSelected)\">\n        Select All\n      </mat-checkbox>\n      <mat-option\n        *ngFor=\"let option of options$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"] }]
+        }], propDecorators: { selectField: [{
+                type: ViewChild,
+                args: ['selectField']
+            }] } });
+
+const defaultConfig$6 = {
+    autoActiveFirstOption: true,
+    typeDebounceTime: 500,
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE
+};
+class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$6;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.clearFieldSubscription = this.autocompleteInputControl.valueChanges.subscribe((text) => {
+            if (typeof text === 'string' && (text === null || text === void 0 ? void 0 : text.trim()) === '') {
+                this.control.setValue(null);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.clearFieldSubscription.unsubscribe();
+    }
+    setControlValue(value) {
+        if (this.control && value) {
+            // sets the initial value on the control if one is passed
+            this.control.setValue(value.value || '');
+            this.autocompleteInputControl.setValue(value.label || '');
+        }
+    }
+    /**
+     * The material autocomplete defaults to displaying the options value instead of its label.
+     * We only have the value from the selected option to work with, so we have to pass the options
+     * through a function called in the template and return the function that the material displayWith
+     * input is expecting.
+     * @param options the array of options to search for option with corresponding value
+     */
+    displayLabel(options) {
+        if (this.config.displayWith) {
+            return this.config.displayWith(options);
+        }
+        return (value) => {
+            var _a;
+            const label = !!options && Array.isArray(options)
+                ? (_a = options.find((option) => JSON.stringify(option.value) === JSON.stringify(value))) === null || _a === void 0 ? void 0 : _a.label : value;
+            return label;
+        };
+    }
+    handleSelect(event) {
+        this.control.setValue(event.option.value);
+        this.autoInputRef.nativeElement.blur();
+    }
+}
+AutocompleteFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: AutocompleteFieldComponent, isStandalone: true, selector: "crispr-autocomplete-field", viewQueries: [{ propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "autoInputRef", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n    <input\n      matInput\n      [formControl]=\"autocompleteInputControl\"\n      [placeholder]=\"config.placeholder\"\n      [matAutocomplete]=\"auto\"\n      role=\"textbox\"\n      type=\"textbox\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      #autoInput>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info \">\n    </crispr-info>\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      <ng-container *ngIf=\"options$ | async as options; else emptyOption\">\n        <ng-container *ngIf=\"options.length > 0; else emptyOption\">\n          <mat-option\n            *ngFor=\"let option of options\"\n            [value]=\"option.value\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}\n"], dependencies: [{ kind: "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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatOptionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-autocomplete-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatOptionModule,
+                    ], template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n    <input\n      matInput\n      [formControl]=\"autocompleteInputControl\"\n      [placeholder]=\"config.placeholder\"\n      [matAutocomplete]=\"auto\"\n      role=\"textbox\"\n      type=\"textbox\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      #autoInput>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info \">\n    </crispr-info>\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      <ng-container *ngIf=\"options$ | async as options; else emptyOption\">\n        <ng-container *ngIf=\"options.length > 0; else emptyOption\">\n          <mat-option\n            *ngFor=\"let option of options\"\n            [value]=\"option.value\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}\n"] }]
+        }], propDecorators: { autoInput: [{
+                type: ViewChild,
+                args: ['autoInput', { read: MatAutocompleteTrigger }]
+            }], autoInputRef: [{
+                type: ViewChild,
+                args: ['autoInput']
+            }] } });
+
+const defaultConfig$5 = {
+    chipsSelectable: true,
+    areChipsRemovable: true,
+    tabToSelect: true,
+    autoActiveFirstOption: true,
+    imageUrlParam: 'image',
+    typeDebounceTime: 500,
+    allowDuplicates: false,
+    duplicateCompareFunction: (chip, option) => chip.value === option.value,
+    separatorKeyCodes: [ENTER],
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
+};
+class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$5;
+        this.chips$ = new BehaviorSubject([]);
+        this.controlValue$ = this.chips$.pipe(tap(chips => {
+            this.control.setValue(chips.map(chip => chip.value));
+        }));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.remainingOptions$ = combineLatest([
+            this.chips$,
+            this.options$
+        ]).pipe(map(([chips, options]) => {
+            return this.config.allowDuplicates
+                ? options
+                : options === null || options === void 0 ? void 0 : options.filter(option => {
+                    return !chips.some(chip => this.config.duplicateCompareFunction(chip, option));
+                });
+        }));
+    }
+    setControlValue(value) {
+        if (value) {
+            this.chips$.next(value);
+        }
+    }
+    // handles mat selecting
+    handleSelect(event) {
+        const selectedOption = event.option.value;
+        this.chips$.next([...this.chips$.value, selectedOption]);
+        this.chipInputRef.nativeElement.value = '';
+        this.autocompleteInputControl.setValue('');
+        // setTimeout needed because the panel thinks it's still open at this point
+        setTimeout(() => this.chipInput.openPanel());
+    }
+    /**
+     * To follow ARIA standards we want to select the active option on blur.
+     * matChipInputAddOnBlur should do this but it causes buggy behaviour
+     * @param event blur event that triggers the handle blur
+     */
+    handleTab(_event) {
+        if (this.chipInput.activeOption && (this.config.tabToSelect || this.config.addChipOnBlur)) {
+            const chip = this.chipInput.activeOption.value;
+            this.chips$.next([...this.chips$.value, chip]);
+        }
+    }
+    /**
+     * Handles selection via key tokens passed through separatorKeyCodes propert
+     * NOTE: If TAB is used focus does not move on to next component
+     * @param event
+     */
+    handleTokenEnd(event) {
+        var _a;
+        if (this.chipInput.activeOption) {
+            this.chipInput.activeOption.select();
+        }
+        (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
+    }
+    mapToLabel(option) {
+        return option ? option.label : '';
+    }
+    removeChip(removedChip) {
+        const remainingChips = this.chips$.value.filter(chip => chip !== removedChip);
+        this.chips$.next(remainingChips);
+    }
+}
+AutocompleteChiplistFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AutocompleteChiplistFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: AutocompleteChiplistFieldComponent, isStandalone: true, selector: "crispr-autocomplete-chiplist-field", viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "chipInputRef", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <mat-chip-list\n      #chipList>\n      <mat-chip\n        class=\"refinement-chip\"\n        *ngFor=\"let chip of controlValue$ | async\"\n        [selectable]=\"config.chipsSelectable\"\n        [removable]=\"config.areChipsRemovable\"\n        (removed)=\"removeChip(chip)\">\n        <span *ngIf=\"chip.imageUrl as imageUrl\" class=\"image-container\">\n          <img [src]=\"imageUrl\" alt=\"image of {{chip.label}}\">\n        </span>\n        {{chip.label}}\n        <mat-icon\n          matChipRemove\n          *ngIf=\"config.areChipsRemovable\">\n          cancel\n        </mat-icon>\n      </mat-chip>\n      <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n      <input\n        matInput\n        [formControl]=\"autocompleteInputControl\"\n        [placeholder]=\"config.placeholder\"\n        [matChipInputFor]=\"chipList\"\n        [matAutocomplete]=\"auto\"\n        (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeyCodes\"\n        (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        #autoInput/>\n      <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n      <crispr-info\n        *ngIf=\"config.info\"\n        matSuffix\n        [info]=\"config.info \">\n      </crispr-info>\n\n    </mat-chip-list>\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"mapToLabel\">\n      <ng-container *ngIf=\"remainingOptions$ | async as remainingOptions; else emptyOption\">\n        <ng-container *ngIf=\"remainingOptions.length > 0; else emptyOption\">\n           <mat-option\n            *ngFor=\"let option of remainingOptions$ | async\"\n            [value]=\"option\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}\n"], dependencies: [{ kind: "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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-autocomplete-chiplist-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        MatChipsModule,
+                        MatIconModule
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <mat-chip-list\n      #chipList>\n      <mat-chip\n        class=\"refinement-chip\"\n        *ngFor=\"let chip of controlValue$ | async\"\n        [selectable]=\"config.chipsSelectable\"\n        [removable]=\"config.areChipsRemovable\"\n        (removed)=\"removeChip(chip)\">\n        <span *ngIf=\"chip.imageUrl as imageUrl\" class=\"image-container\">\n          <img [src]=\"imageUrl\" alt=\"image of {{chip.label}}\">\n        </span>\n        {{chip.label}}\n        <mat-icon\n          matChipRemove\n          *ngIf=\"config.areChipsRemovable\">\n          cancel\n        </mat-icon>\n      </mat-chip>\n      <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n      <input\n        matInput\n        [formControl]=\"autocompleteInputControl\"\n        [placeholder]=\"config.placeholder\"\n        [matChipInputFor]=\"chipList\"\n        [matAutocomplete]=\"auto\"\n        (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeyCodes\"\n        (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        #autoInput/>\n      <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n      <crispr-info\n        *ngIf=\"config.info\"\n        matSuffix\n        [info]=\"config.info \">\n      </crispr-info>\n\n    </mat-chip-list>\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"mapToLabel\">\n      <ng-container *ngIf=\"remainingOptions$ | async as remainingOptions; else emptyOption\">\n        <ng-container *ngIf=\"remainingOptions.length > 0; else emptyOption\">\n           <mat-option\n            *ngFor=\"let option of remainingOptions$ | async\"\n            [value]=\"option\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}\n"] }]
+        }], propDecorators: { chipInput: [{
+                type: ViewChild,
+                args: ['autoInput', { read: MatAutocompleteTrigger }]
+            }], chipInputRef: [{
+                type: ViewChild,
+                args: ['autoInput']
+            }] } });
+
+const defaultConfig$4 = {
+    labelPosition: 'after',
+    inline: false
+};
+const CheckboxFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class CheckboxFieldComponent extends CheckboxFieldMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$4;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+CheckboxFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CheckboxFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: CheckboxFieldComponent, isStandalone: true, selector: "crispr-checkbox-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [inlineField]=\"config.inline\">\n  <div\n    [formGroup]=\"group\">\n    <mat-checkbox\n      [color]=\"config.color\"\n      [labelPosition]=\"config.labelPosition\"\n      [formControlName]=\"config.controlName\">\n      {{config.label}}\n      <crispr-info\n        matSuffix *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
+            // CrisprFieldDirective,
+            FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-checkbox-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        MatCheckboxModule,
+                        ReactiveFormsModule,
+                        // CrisprFieldDirective,
+                        FieldContainerComponent
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [inlineField]=\"config.inline\">\n  <div\n    [formGroup]=\"group\">\n    <mat-checkbox\n      [color]=\"config.color\"\n      [labelPosition]=\"config.labelPosition\"\n      [formControlName]=\"config.controlName\">\n      {{config.label}}\n      <crispr-info\n        matSuffix *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"] }]
+        }] });
+
+const defaultConfig$3 = { rows: 5 };
+const TextareaFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class TextareaFieldComponent extends TextareaFieldMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$3;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: TextareaFieldComponent, isStandalone: true, selector: "crispr-textarea-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <textarea\n      [rows]=\"config.rows\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\">\n    </textarea>\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && control.valid\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-textarea-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <textarea\n      [rows]=\"config.rows\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\">\n    </textarea>\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && control.valid\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n" }]
+        }] });
+
+const defaultConfig$2 = { displayLimits: true };
+const SliderFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class SliderFieldComponent extends SliderFieldMixin {
+    constructor() {
+        super();
+        this.defaultConfig = defaultConfig$2;
+    }
+    get flexDirection() {
+        return this.config.vertical ? 'column' : 'row';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+SliderFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SliderFieldComponent, isStandalone: true, selector: "crispr-slider-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <div\n    [formGroup]=\"group\">\n    <label *ngIf=\"config.label\">\n      {{config.label}}\n      <crispr-info\n        *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </label>\n    <div class=\"slider-container\"\n      [ngStyle]=\"{'flex-direction': flexDirection}\">\n      <span *ngIf=\"config.displayLimits\">\n        {{config.min}}\n      </span>\n      <mat-slider\n        class=\"example-margin\"\n        [formControlName]=\"config.controlName\"\n        [invert]=\"config.invert\"\n        [max]=\"config.max\"\n        [min]=\"config.min\"\n        [step]=\"config.step\"\n        [thumbLabel]=\"config.thumbLabel\"\n        [tickInterval]=\"config.tickInterval\"\n        [vertical]=\"config.vertical\">\n      </mat-slider>\n      <span *ngIf=\"config.displayLimits\">\n        {{config.max}}\n      </span>\n    </div>\n\n  </div>\n</crispr-field-container>\n\n", styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-slider-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        MatSliderModule
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <div\n    [formGroup]=\"group\">\n    <label *ngIf=\"config.label\">\n      {{config.label}}\n      <crispr-info\n        *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </label>\n    <div class=\"slider-container\"\n      [ngStyle]=\"{'flex-direction': flexDirection}\">\n      <span *ngIf=\"config.displayLimits\">\n        {{config.min}}\n      </span>\n      <mat-slider\n        class=\"example-margin\"\n        [formControlName]=\"config.controlName\"\n        [invert]=\"config.invert\"\n        [max]=\"config.max\"\n        [min]=\"config.min\"\n        [step]=\"config.step\"\n        [thumbLabel]=\"config.thumbLabel\"\n        [tickInterval]=\"config.tickInterval\"\n        [vertical]=\"config.vertical\">\n      </mat-slider>\n      <span *ngIf=\"config.displayLimits\">\n        {{config.max}}\n      </span>\n    </div>\n\n  </div>\n</crispr-field-container>\n\n", styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class ButtonComponent extends CrisprFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = { buttonType: 'raised', type: 'submit' };
+    }
+    get matButtonClass() {
+        return this.config.buttonType ? `mat-${this.config.buttonType}-button` : '';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.formValid$ = this.group.statusChanges.pipe(map(status => status === 'VALID'), startWith(this.group.valid));
+    }
+    handleClick(group, event) {
+        if (this.config.callback) {
+            this.config.callback(group, event);
+        }
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ButtonComponent, isStandalone: true, selector: "crispr-button", usesInheritance: true, ngImport: i0, template: "<button\n  [formGroup]=\"group\"\n  mat-button\n  [ngClass]=\"matButtonClass\"\n  [color]=\"config.color\"\n  [disabled]=\"config.disabledOnInvalidForm && !(formValid$ | async)\"\n  [type]=\"config.type\"\n  (click)=\"handleClick(group, $event)\"\n  [matTooltip]=\"config.info?.content\"\n  [matTooltipPosition]=\"config.info?.tooltipPosition || 'below'\">\n  {{ config.label }}\n  <mat-icon *ngIf=\"config.icon\">\n    {{ config.icon}}\n  </mat-icon>\n</button>\n\n", styles: [""], dependencies: [{ kind: "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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ReactiveFormsModule,
+                    ], 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" }]
+        }] });
+
+const defaultConfig$1 = {
+    startView: 'month',
+};
+const DatepickerFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class DatepickerFieldComponent extends DatepickerFieldMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$1;
+    }
+    ngOnInit() {
+        var _a, _b;
+        super.ngOnInit();
+        this.startAt$ = this.config.startAt instanceof Date
+            ? of(this.config.startAt)
+            : this.config.startAt instanceof Function
+                ? this.config.startAt(this.group)
+                : of(null);
+        this.dateClass = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.cellClassFunction) || null;
+        this.dateClass$ = this.config.dateClass ? (_b = this.config) === null || _b === void 0 ? void 0 : _b.dateClass(this.group) : of(() => '');
+    }
+    ngAfterContentInit() {
+        if (this.config.datepickerActions) {
+            this.calendarFooterPortal = new ComponentPortal(this.config.datepickerActions);
+        }
+    }
+}
+DatepickerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DatepickerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DatepickerFieldComponent, isStandalone: true, selector: "crispr-datepicker-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      matInput\n      [formControlName]=\"config.controlName\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [matDatepicker]=\"picker\"\n      [matDatepickerFilter]=\"config.datepickerFilter\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [touchUi]=\"config.touchUi\"\n      [startView]=\"config.startView\"\n      [startAt]=\"startAt$ | async\"\n      [dateClass]=\"dateClass || (dateClass$ | async)\"\n      #picker>\n      <mat-datepicker-actions *ngIf=\"calendarFooterPortal\">\n        <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDateFnsModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-datepicker-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FieldContainerComponent,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatDateFnsModule,
+                        PortalModule
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      matInput\n      [formControlName]=\"config.controlName\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [matDatepicker]=\"picker\"\n      [matDatepickerFilter]=\"config.datepickerFilter\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [touchUi]=\"config.touchUi\"\n      [startView]=\"config.startView\"\n      [startAt]=\"startAt$ | async\"\n      [dateClass]=\"dateClass || (dateClass$ | async)\"\n      #picker>\n      <mat-datepicker-actions *ngIf=\"calendarFooterPortal\">\n        <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n\n" }]
+        }] });
+
+class DividerComponent extends CrisprFieldComponent {
+    constructor() {
+        super(...arguments);
+        // TODO: pull in type after configs are better organized
+        this.defaultConfig = {};
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DividerComponent, isStandalone: true, selector: "crispr-divider", usesInheritance: true, ngImport: i0, template: "<mat-divider [ngClass]=\"config.classes\"></mat-divider>", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-divider', standalone: true, imports: [
+                        CommonModule,
+                        MatDividerModule
+                    ], template: "<mat-divider [ngClass]=\"config.classes\"></mat-divider>", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"] }]
+        }] });
+
+const RadioFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class RadioFieldComponent extends RadioFieldMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = {};
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // options$ can be passed as an array, promise that resolves array, or observable that resolves array
+        // this functions accounts for all possibilities and converts to observable that resolves array
+        this.options$ = observablifyOptions(this.config.options, this.group);
+    }
+}
+RadioFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: RadioFieldComponent, isStandalone: true, selector: "crispr-radio-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-radio-group\n    [formControl]=\"control\"\n    [color]=\"config.color\">\n    <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of options$ | async\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-radio-button>\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-radio-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatRadioModule,
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-radio-group\n    [formControl]=\"control\"\n    [color]=\"config.color\">\n    <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of options$ | async\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-radio-button>\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"] }]
+        }] });
+
+const defaultConfig = {};
+const UnitConversionFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class UnitConversionFieldComponent extends UnitConversionFieldMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig;
+        this.displayValueControl = new FormControl();
+        this.unitSelectControl = new FormControl();
+    }
+    ngOnInit() {
+        var _a, _b;
+        super.ngOnInit();
+        // TODO: Validators need work. validation is tricky because the input needs to be validated against but the validator will compare against the controls value
+        // this.displayValueControl.setValidators(this.config.validators);
+        const controlValuePipeline = [
+            this.displayValueControl.valueChanges.pipe(startWith(this.displayValueControl.value))
+        ];
+        // setup all required pieces when showing a field for selecting units
+        if (this.config.showUnitSelect) {
+            this.unitOptions$ = observablifyOptions(this.config.selectableUnits, this.group);
+            controlValuePipeline.push(this.unitSelectControl.valueChanges.pipe(startWith(((_a = this.config) === null || _a === void 0 ? void 0 : _a.initialDisplayUnit) || null)));
+            this.unitSelectControl.setValue(((_b = this.config) === null || _b === void 0 ? void 0 : _b.initialDisplayUnit) || null);
+        }
+        this.transformationSubscription = combineLatest(controlValuePipeline).subscribe(([displayValue, unitValue]) => {
+            const computedValue = this.config.storedValueConversion(displayValue, unitValue);
+            this.control.setValue(computedValue);
+        });
+    }
+    ngOnDestroy() {
+        this.transformationSubscription.unsubscribe();
+    }
+    setInitialDisplayValue(storedValue, unit) {
+        const initialDisplayValue = this.config.initialDisplayValueConversion(storedValue || null, unit);
+        this.displayValueControl.setValue(initialDisplayValue);
+    }
+    /**
+     * We override the 'setControlValue' we inherited from crisprControlMixin and add our custom logic,
+     * This function gets called onInit because were object oriented. it's so great, so great that I'm
+     * typing a paragraph to explain what the hell is going on...
+     * @param value the initial value for the control passed down from the form components input
+     */
+    setControlValue(value) {
+        var _a;
+        const initialUnitValue = this.config.showUnitSelect ? (_a = this.config) === null || _a === void 0 ? void 0 : _a.initialDisplayUnit : null;
+        this.setInitialDisplayValue(value, initialUnitValue);
+    }
+}
+UnitConversionFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+UnitConversionFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: UnitConversionFieldComponent, isStandalone: true, selector: "crispr-unit-conversion-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n    class=\"number-field\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      type=\"number\"\n      matInput\n      [formControl]=\"displayValueControl\"\n      [placeholder]=\"config.placeholder\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"config.showUnitSelect\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\"\n    class=\"unit-field\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControl]=\"unitSelectControl\">\n\n      <mat-option\n        *ngFor=\"let option of unitOptions$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"], dependencies: [{ kind: "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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-unit-conversion-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n    class=\"number-field\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      type=\"number\"\n      matInput\n      [formControl]=\"displayValueControl\"\n      [placeholder]=\"config.placeholder\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"config.showUnitSelect\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\"\n    class=\"unit-field\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControl]=\"unitSelectControl\">\n\n      <mat-option\n        *ngFor=\"let option of unitOptions$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"] }]
+        }] });
+
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
+const FileUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class FileUploadFieldComponent extends FileUploadFieldMixin {
+    // ngControl: NgControl = null;
+    constructor(ngControl) {
+        super();
+        this.ngControl = ngControl;
+        this.defaultConfig = {
+            allowMultipleFiles: false,
+            acceptedTypes: '*.*',
+            dropZoneText: 'DROP FILE HERE',
+            selectFilesButtonType: 'button',
+            selectButtonText: 'SELECT',
+            showClearFilesButton: true,
+            clearFilesButtonText: 'CLEAR',
+            uploadButtonText: 'UPLOAD',
+            uploadButtonType: 'button',
+            showUploadProgress: false,
+            disableOnUpload: true
+        };
+        this.isUploaded = false;
+        this.fileProgress = [];
+        if (this.ngControl != null) {
+            // Setting the value accessor directly (instead of using
+            // the providers) to avoid running into a circular import.
+            ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.disabled$ = this.config.disabledCallback
+            ? this.config.disabledCallback(this.group)
+            : of(false);
+    }
+    filesChanged(files) {
+        if (files && files.length > 0) {
+            this.selectedFiles = files;
+            this.control.patchValue(files);
+        }
+    }
+    uploadFiles() {
+        if (this.selectedFiles && this.config.uploadFiles) {
+            this.isUploaded = true;
+            this.config.uploadFiles(this.group, this.selectedFiles, this);
+        }
+    }
+    resetFileInput() {
+        this.fileInputRef.nativeElement.value = '';
+        this.control.patchValue(null);
+        this.isUploaded = false;
+    }
+    writeValue(value) {
+        // clear file input
+        // this.host.nativeElement.value = '';
+        // this.file = null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+    }
+}
+FileUploadFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldComponent, deps: [{ token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+FileUploadFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: FileUploadFieldComponent, isStandalone: true, selector: "crispr-file-upload-field", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config.color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n    [formGroup]=\"group\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config.acceptedTypes\"\n      [multiple]=\"config.allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config.label}}</mat-label>\n\n    <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\"  class=\"drop-info\">\n      <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n      <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n      or\n      <button\n        mat-raised-button\n        type=\"button\"\n        color=\"primary\"\n        [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n        (click)=\"fileInput.click()\"\n        [attr.aria-label]=\"config.controlName\">\n        {{config.selectButtonText}}\n      </button>\n    </div>\n    <ng-template #selectedFileList>\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          <crispr-selected-file\n            *ngFor=\"let file of selectedFiles; let i = index;\"\n            [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"file.name\"\n            [showProgress]=\"config.showUploadProgress\"\n            [progress]=\"fileProgress && (fileProgress[i] | async)\">\n          </crispr-selected-file>\n        </div>\n\n      </div>\n    </ng-template>\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n  </mat-form-field>\n  <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n    <button\n      mat-button\n      (click)=\"resetFileInput()\"\n      type=\"button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      aria-label=\"Remove Selected File(s)\">\n      {{config.clearFilesButtonText}}\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!!config.uploadFiles\"\n      mat-raised-button\n      type=\"button\"\n      color=\"accent\"\n      class=\"file-input-button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      (click)=\"uploadFiles()\"\n      [attr.aria-label]=\"config.uploadButtonText\">\n      {{ config.uploadButtonText }}\n    </button>\n\n  </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"], dependencies: [{ kind: "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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i7$1.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i7$1.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-file-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        SelectedFileComponent,
+                        FormValidationHandlerModule,
+                        FileDropzoneDirective
+                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config.color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n    [formGroup]=\"group\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config.acceptedTypes\"\n      [multiple]=\"config.allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config.label}}</mat-label>\n\n    <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\"  class=\"drop-info\">\n      <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n      <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n      or\n      <button\n        mat-raised-button\n        type=\"button\"\n        color=\"primary\"\n        [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n        (click)=\"fileInput.click()\"\n        [attr.aria-label]=\"config.controlName\">\n        {{config.selectButtonText}}\n      </button>\n    </div>\n    <ng-template #selectedFileList>\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          <crispr-selected-file\n            *ngFor=\"let file of selectedFiles; let i = index;\"\n            [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"file.name\"\n            [showProgress]=\"config.showUploadProgress\"\n            [progress]=\"fileProgress && (fileProgress[i] | async)\">\n          </crispr-selected-file>\n        </div>\n\n      </div>\n    </ng-template>\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n  </mat-form-field>\n  <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n    <button\n      mat-button\n      (click)=\"resetFileInput()\"\n      type=\"button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      aria-label=\"Remove Selected File(s)\">\n      {{config.clearFilesButtonText}}\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!!config.uploadFiles\"\n      mat-raised-button\n      type=\"button\"\n      color=\"accent\"\n      class=\"file-input-button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      (click)=\"uploadFiles()\"\n      [attr.aria-label]=\"config.uploadButtonText\">\n      {{ config.uploadButtonText }}\n    </button>\n\n  </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i2.NgControl, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Self
+                    }] }];
+    }, propDecorators: { fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteChiplistFieldComponent, AutocompleteFieldComponent, ButtonComponent, CheckboxFieldComponent, DatepickerFieldComponent, DividerComponent, FileUploadFieldComponent, InputFieldComponent, OptionComponent, RadioFieldComponent, SelectFieldComponent, SliderFieldComponent, TextareaFieldComponent, UnitConversionFieldComponent };
+//# sourceMappingURL=tft-crispr-forms-ui.mjs.map