@tft/crispr-forms 20.0.0 → 21.0.1

package/fesm2022/tft-crispr-forms.mjs

@@ -328,21 +328,21 @@ const FIELD_COMPONENTS = {
     groupList: () => Promise.resolve().then(function () { return index$1; }).then(({ FormGroupListComponent }) => FormGroupListComponent),
     subGroup: () => Promise.resolve().then(function () { return index; }).then(({ SubGroupComponent }) => SubGroupComponent),
     button: () => import('./tft-crispr-forms-index-joNvlmny.mjs').then(({ ButtonComponent }) => ButtonComponent),
-    input: () => import('./tft-crispr-forms-index-UvEVbwnf.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
-    select: () => import('./tft-crispr-forms-index-LX0Bvkjk.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
+    input: () => import('./tft-crispr-forms-index-BkCdLt5V.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
+    select: () => import('./tft-crispr-forms-index-DcrZSpdk.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
     radio: () => import('./tft-crispr-forms-index-BQFuEW6x.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
-    autocomplete: () => import('./tft-crispr-forms-index-BWsxn34Q.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
-    autocompleteChiplist: () => import('./tft-crispr-forms-index-ClPQl_5D.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
-    map: () => import('./tft-crispr-forms-index-DCRLl0jR.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
-    textarea: () => import('./tft-crispr-forms-index-Dx-HIAiX.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
-    checkbox: () => import('./tft-crispr-forms-index-Bh8kDfe4.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
-    slider: () => import('./tft-crispr-forms-index-BHv9E1Y2.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
-    datepicker: () => import('./tft-crispr-forms-index-BIhGbdgn.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
+    autocomplete: () => import('./tft-crispr-forms-index-DEctfeGr.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
+    autocompleteChiplist: () => import('./tft-crispr-forms-index-Bypm5YtY.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
+    map: () => import('./tft-crispr-forms-index-Hsgr_WHO.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
+    textarea: () => import('./tft-crispr-forms-index-BZ9V1Ec-.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
+    checkbox: () => import('./tft-crispr-forms-index-lrhnilye.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
+    slider: () => import('./tft-crispr-forms-index-gORcx6V1.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
+    datepicker: () => import('./tft-crispr-forms-index-DmaDlaNf.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
     fileUpload: () => Promise.resolve().then(function () { return index$3; }).then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
     imageUpload: () => import('./tft-crispr-forms-index-C9gYJRzb.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
     heading: () => Promise.resolve().then(function () { return index$2; }).then(({ HeadingComponent }) => HeadingComponent),
     divider: () => import('./tft-crispr-forms-index-kjMTlZoq.mjs').then(({ DividerComponent }) => DividerComponent),
-    unitConversion: () => import('./tft-crispr-forms-index-Dyx5SqHu.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
+    unitConversion: () => import('./tft-crispr-forms-index-CFwkbxFk.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
 };
 function isControlComponent(component) {
     return component && isControlConfig(component.config()) && 'value' in component;
@@ -374,7 +374,7 @@ class CrisprFieldDirective {
             (await FIELD_COMPONENTS[this.config.controlType]());
         const componentRef = this.container.createComponent(component);
         this.component = componentRef.instance;
-        this.component.config.set(this.config);
+        componentRef.setInput('config', this.config);
         if (isControlOrButtonComponent(this.component)) {
             componentRef.setInput('group', this.group);
         }
@@ -469,6 +469,7 @@ class CrisprFormComponent {
         buildFormGroupFromConfig(this.config, this.value, this.form);
     }
     handleSubmit() {
+        console.log('submitting');
         this.form.markAllAsTouched();
         this.submitted.emit(this.form);
     }
@@ -476,7 +477,7 @@ class CrisprFormComponent {
         this.submitTrigger.nativeElement.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: CrisprFormComponent, isStandalone: true, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config.fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: CrisprFormComponent, isStandalone: true, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config.fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormComponent, decorators: [{
             type: Component,
@@ -486,7 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         ReactiveFormsModule,
                         FormValidationHandlerModule,
                         CrisprPipesModule,
-                    ], template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config.fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
+                    ], template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config.fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], form: [{
@@ -662,7 +663,7 @@ class FileUploadFieldComponent extends CrisprControlComponent {
             disableOnUpload: true,
         };
         this.selectedFiles = signal(null, ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
-        this.selectedFilesArray = computed(() => Array.from(this.selectedFiles()), ...(ngDevMode ? [{ debugName: "selectedFilesArray" }] : []));
+        this.selectedFilesArray = computed(() => this.selectedFiles() ? Array.from(this.selectedFiles()) : [], ...(ngDevMode ? [{ debugName: "selectedFilesArray" }] : []));
         this.isUploaded = false;
         this.fileProgress = [];
         if (this.ngControl != null) {
@@ -704,7 +705,7 @@ class FileUploadFieldComponent extends CrisprControlComponent {
     }
     registerOnTouched(fn) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileUploadFieldComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", 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    @if ((selectedFiles()?.length === 0)) {\n      <div  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    } @else {\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          @for (file of selectedFilesArray(); track file; let i = $index) {\n            <crispr-selected-file\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          }\n        </div>\n      </div>\n    }\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  @if ((selectedFiles())?.length > 0) {\n    <div class=\"button-container\">\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      @if (!!config().uploadFiles) {\n        <button\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  }\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", 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    [attr.data-testid]=\"config().controlName\"\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    @if (!selectedFiles() || selectedFiles().length === 0) {\n      <div  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    } @else {\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          @for (file of selectedFilesArray(); track file; let i = $index) {\n            <crispr-selected-file\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          }\n        </div>\n      </div>\n    }\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  @if ((selectedFiles())?.length > 0) {\n    <div class=\"button-container\">\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      @if (!!config().uploadFiles) {\n        <button\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  }\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
             type: Component,
@@ -719,7 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         SelectedFileComponent,
                         FormValidationHandlerModule,
                         FileDropzoneDirective,
-                    ], standalone: true, 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    @if ((selectedFiles()?.length === 0)) {\n      <div  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    } @else {\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          @for (file of selectedFilesArray(); track file; let i = $index) {\n            <crispr-selected-file\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          }\n        </div>\n      </div>\n    }\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  @if ((selectedFiles())?.length > 0) {\n    <div class=\"button-container\">\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      @if (!!config().uploadFiles) {\n        <button\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  }\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-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"] }]
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field floatLabel=\"always\"\n    [attr.data-testid]=\"config().controlName\"\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    @if (!selectedFiles() || selectedFiles().length === 0) {\n      <div  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    } @else {\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          @for (file of selectedFilesArray(); track file; let i = $index) {\n            <crispr-selected-file\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          }\n        </div>\n      </div>\n    }\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  @if ((selectedFiles())?.length > 0) {\n    <div class=\"button-container\">\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      @if (!!config().uploadFiles) {\n        <button\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  }\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-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: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -854,7 +855,7 @@ class FormGroupListComponent extends CrisprControlComponent {
         this.selectedIndex = index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FormGroupListComponent, isStandalone: true, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config\" [group]=\"group()\" [formGroup]=\"group()\">\n\n  <div [formArrayName]=\"config().controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    @for (itemControl of control()?.controls; track itemControl; let i = $index; let last = $last) {\n    @if (!config().displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true)) {\n    <!-- TODO: use content projection to allow custom item label component -->\n    <div class=\"item-header\">\n      <span class=\"mat-h2\"> {{ config().itemLabelBuilder ? config().itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n      @if (i + 1 > config().minListLength) {\n      <button mat-icon-button type=\"button\">\n        <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n      </button>\n      }\n    </div>\n    <div [formGroup]=\"itemControl\">\n      <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n      @for (field of config().itemConfig.fields; track field) {\n      <ng-container crisprField [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\">\n      </ng-container>\n      }\n    </div>\n    } @else {\n    <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n      [value]=\"itemControl.value\" [index]=\"i\">\n      <button mat-icon-button (click)=\"clickEditItem(i)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    }\n    <ng-template #display>\n      <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n        [value]=\"itemControl.value\" [index]=\"i\">\n        <button mat-icon-button (click)=\"clickEditItem(i)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </ng-template>\n    }\n  </div>\n  <div class=\"group-footer\">\n    <button type=\"button\" class=\"add\" mat-raised-button [color]=\"config().addButtonColor\" (click)=\"clickAdd()\">\n      {{config().addItemLabel || config().addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "directive", type: CrisprDisplayFieldDirective, selector: "[crisprDisplayField]", inputs: ["group", "value", "component", "index"] }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FormGroupListComponent, isStandalone: true, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\" [formGroup]=\"group()\">\n\n  <div [formArrayName]=\"config().controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    @for (itemControl of control()?.controls; track itemControl; let i = $index; let last = $last) {\n    @if (!config().displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true)) {\n    <!-- TODO: use content projection to allow custom item label component -->\n    <div class=\"item-header\">\n      <span class=\"mat-h2\"> {{ config().itemLabelBuilder ? config().itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n      @if (i + 1 > config().minListLength) {\n      <button mat-icon-button type=\"button\">\n        <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n      </button>\n      }\n    </div>\n    <div [formGroup]=\"itemControl\">\n      <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n      @for (field of config().itemConfig.fields; track field) {\n      <ng-container crisprField [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\">\n      </ng-container>\n      }\n    </div>\n    } @else {\n    <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n      [value]=\"itemControl.value\" [index]=\"i\">\n      <button mat-icon-button (click)=\"clickEditItem(i)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    }\n    <ng-template #display>\n      <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n        [value]=\"itemControl.value\" [index]=\"i\">\n        <button mat-icon-button (click)=\"clickEditItem(i)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </ng-template>\n    }\n  </div>\n  <div class=\"group-footer\">\n    <button type=\"button\" class=\"add\" mat-raised-button [color]=\"config().addButtonColor\" (click)=\"clickAdd()\">\n      {{config().addItemLabel || config().addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "directive", type: CrisprDisplayFieldDirective, selector: "[crisprDisplayField]", inputs: ["group", "value", "component", "index"] }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FormGroupListComponent, decorators: [{
             type: Component,
@@ -867,7 +868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         CrisprDisplayFieldDirective,
                         CrisprPipesModule,
                         FormValidationHandlerModule
-                    ], standalone: true, template: "<crispr-field-container [config]=\"config\" [group]=\"group()\" [formGroup]=\"group()\">\n\n  <div [formArrayName]=\"config().controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    @for (itemControl of control()?.controls; track itemControl; let i = $index; let last = $last) {\n    @if (!config().displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true)) {\n    <!-- TODO: use content projection to allow custom item label component -->\n    <div class=\"item-header\">\n      <span class=\"mat-h2\"> {{ config().itemLabelBuilder ? config().itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n      @if (i + 1 > config().minListLength) {\n      <button mat-icon-button type=\"button\">\n        <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n      </button>\n      }\n    </div>\n    <div [formGroup]=\"itemControl\">\n      <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n      @for (field of config().itemConfig.fields; track field) {\n      <ng-container crisprField [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\">\n      </ng-container>\n      }\n    </div>\n    } @else {\n    <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n      [value]=\"itemControl.value\" [index]=\"i\">\n      <button mat-icon-button (click)=\"clickEditItem(i)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    }\n    <ng-template #display>\n      <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n        [value]=\"itemControl.value\" [index]=\"i\">\n        <button mat-icon-button (click)=\"clickEditItem(i)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </ng-template>\n    }\n  </div>\n  <div class=\"group-footer\">\n    <button type=\"button\" class=\"add\" mat-raised-button [color]=\"config().addButtonColor\" (click)=\"clickAdd()\">\n      {{config().addItemLabel || config().addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"] }]
+                    ], standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\" [formGroup]=\"group()\">\n\n  <div [formArrayName]=\"config().controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    @for (itemControl of control()?.controls; track itemControl; let i = $index; let last = $last) {\n    @if (!config().displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true)) {\n    <!-- TODO: use content projection to allow custom item label component -->\n    <div class=\"item-header\">\n      <span class=\"mat-h2\"> {{ config().itemLabelBuilder ? config().itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n      @if (i + 1 > config().minListLength) {\n      <button mat-icon-button type=\"button\">\n        <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n      </button>\n      }\n    </div>\n    <div [formGroup]=\"itemControl\">\n      <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n      @for (field of config().itemConfig.fields; track field) {\n      <ng-container crisprField [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\">\n      </ng-container>\n      }\n    </div>\n    } @else {\n    <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n      [value]=\"itemControl.value\" [index]=\"i\">\n      <button mat-icon-button (click)=\"clickEditItem(i)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    }\n    <ng-template #display>\n      <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n        [value]=\"itemControl.value\" [index]=\"i\">\n        <button mat-icon-button (click)=\"clickEditItem(i)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </ng-template>\n    }\n  </div>\n  <div class=\"group-footer\">\n    <button type=\"button\" class=\"add\" mat-raised-button [color]=\"config().addButtonColor\" (click)=\"clickAdd()\">\n      {{config().addItemLabel || config().addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -880,11 +881,11 @@ class SubGroupComponent extends CrisprControlComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SubGroupComponent, isStandalone: false, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : fieldConfig\"\n      [config]=\"fieldConfig\"\n      [group]=\"control\">\n    </ng-container>\n  }\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SubGroupComponent, isStandalone: false, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"control()\">\n  </ng-container>\n  }\n</crispr-field-container>", styles: [""], dependencies: [{ kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-sub-group', standalone: false, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : fieldConfig\"\n      [config]=\"fieldConfig\"\n      [group]=\"control\">\n    </ng-container>\n  }\n</crispr-field-container>\n\n" }]
+            args: [{ selector: 'crispr-sub-group', standalone: false, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"control()\">\n  </ng-container>\n  }\n</crispr-field-container>" }]
         }] });
 
 class SubGroupModule {