@tft/crispr-forms 21.0.16 → 21.0.18

package/fesm2022/{tft-crispr-forms-index-D9XpYXkk.mjs → tft-crispr-forms-index-UX-Wdyk1.mjs}

@@ -8,7 +8,7 @@ import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@tft/form-validation-handler';
 import { FormValidationHandlerModule } from '@tft/form-validation-handler';
-import { a as CrisprControlComponent, I as InfoComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-C0bqWzUB.mjs';
+import { a as CrisprControlComponent, I as InfoComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-8liD7eof.mjs';
 import { MatIconModule } from '@angular/material/icon';
 
 /* eslint-disable @nx/enforce-module-boundaries */
@@ -37,4 +37,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         }], ctorParameters: () => [] });
 
 export { InputFieldComponent };
-//# sourceMappingURL=tft-crispr-forms-index-D9XpYXkk.mjs.map
+//# sourceMappingURL=tft-crispr-forms-index-UX-Wdyk1.mjs.map

package/fesm2022/{tft-crispr-forms-index-D9XpYXkk.mjs.map → tft-crispr-forms-index-UX-Wdyk1.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"tft-crispr-forms-index-D9XpYXkk.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/input-field/input-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/input-field/input-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport { InfoComponent } from '../info';\nimport { InputFieldConfig } from '../../utils';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\n@Component({\n    selector: 'crispr-input-field',\n    templateUrl: './input-field.component.html',\n    styleUrls: ['./input-field.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n      InfoComponent,\n      ReactiveFormsModule,\n      FieldContainerComponent,\n      MatFormFieldModule,\n      MatInputModule,\n      FormValidationHandlerModule,\n      MatIconModule\n    ]\n})\nexport class InputFieldComponent extends CrisprControlComponent<InputFieldConfig> implements OnInit {\n\n  defaultConfig: Partial<InputFieldConfig> = {inputType: 'text'};\n  constructor() {\n    super();\n  }\n\n  ngOnInit() {\n    super.ngOnInit();\n  }\n}\n","<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    <mat-label>\n      {{config().label}}\n    </mat-label>\n    <input [type]=\"config().inputType\" matInput [placeholder]=\"config().placeholder\"\n      [formControlName]=\"config().controlName\" [min]=\"config().min\" [max]=\"config().max\"\n      [maxlength]=\"config().maxLength\" [step]=\"config().step\" [autofocus]=\"config().autofocus\"\n      [pattern]=\"config().pattern\" [spellcheck]=\"config().spellcheck\" [autocomplete]=\"config().autoComplete\"\n      [autocapitalize]=\"config().autoCapitalize\">\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n\n</crispr-field-container>"],"names":[],"mappings":"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"}
+{"version":3,"file":"tft-crispr-forms-index-UX-Wdyk1.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/input-field/input-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/input-field/input-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport { InfoComponent } from '../info';\nimport { InputFieldConfig } from '../../utils';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\n@Component({\n    selector: 'crispr-input-field',\n    templateUrl: './input-field.component.html',\n    styleUrls: ['./input-field.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n      InfoComponent,\n      ReactiveFormsModule,\n      FieldContainerComponent,\n      MatFormFieldModule,\n      MatInputModule,\n      FormValidationHandlerModule,\n      MatIconModule\n    ]\n})\nexport class InputFieldComponent extends CrisprControlComponent<InputFieldConfig> implements OnInit {\n\n  defaultConfig: Partial<InputFieldConfig> = {inputType: 'text'};\n  constructor() {\n    super();\n  }\n\n  ngOnInit() {\n    super.ngOnInit();\n  }\n}\n","<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    <mat-label>\n      {{config().label}}\n    </mat-label>\n    <input [type]=\"config().inputType\" matInput [placeholder]=\"config().placeholder\"\n      [formControlName]=\"config().controlName\" [min]=\"config().min\" [max]=\"config().max\"\n      [maxlength]=\"config().maxLength\" [step]=\"config().step\" [autofocus]=\"config().autofocus\"\n      [pattern]=\"config().pattern\" [spellcheck]=\"config().spellcheck\" [autocomplete]=\"config().autoComplete\"\n      [autocapitalize]=\"config().autoCapitalize\">\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n\n</crispr-field-container>"],"names":[],"mappings":"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"}

package/fesm2022/{tft-crispr-forms-index-BOV5FHpK.mjs → tft-crispr-forms-index-bTdYHJPk.mjs}

@@ -16,7 +16,7 @@ import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i6 from '@tft/form-validation-handler';
 import { FormValidationHandlerModule } from '@tft/form-validation-handler';
-import { a as CrisprControlComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-C0bqWzUB.mjs';
+import { a as CrisprControlComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-8liD7eof.mjs';
 
 /* eslint-disable @nx/enforce-module-boundaries */
 const defaultConfig = {
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         }] });
 
 export { DatepickerFieldComponent };
-//# sourceMappingURL=tft-crispr-forms-index-BOV5FHpK.mjs.map
+//# sourceMappingURL=tft-crispr-forms-index-bTdYHJPk.mjs.map

package/fesm2022/{tft-crispr-forms-index-BOV5FHpK.mjs.map → tft-crispr-forms-index-bTdYHJPk.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"tft-crispr-forms-index-BOV5FHpK.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/datepicker-field/datepicker-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/datepicker-field/datepicker-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport {\n  Component,\n  OnInit,\n  ChangeDetectionStrategy,\n  AfterContentInit,\n} from '@angular/core';\nimport {\n  MatCalendarCellClassFunction,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { MatDateFnsModule } from '@angular/material-date-fns-adapter';\nimport { Observable, of } from 'rxjs';\nimport { ComponentPortal, Portal, PortalModule } from '@angular/cdk/portal';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport {\n  DatepickerFieldConfig,\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\nconst defaultConfig: Partial<DatepickerFieldConfig> = {\n  startView: 'month',\n};\n\n@Component({\n    selector: 'crispr-datepicker-field',\n    templateUrl: './datepicker-field.component.html',\n    styleUrls: ['./datepicker-field.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        CommonModule,\n        FieldContainerComponent,\n        MatDatepickerModule,\n        MatFormFieldModule,\n        ReactiveFormsModule,\n        MatInputModule,\n        MatDateFnsModule,\n        PortalModule,\n        FormValidationHandlerModule,\n    ],\n    standalone: true\n})\nexport class DatepickerFieldComponent\n  extends CrisprControlComponent<DatepickerFieldConfig>\n  implements OnInit, AfterContentInit\n{\n  defaultConfig = defaultConfig;\n\n  dateClass: MatCalendarCellClassFunction<Date>;\n  dateClass$: Observable<MatCalendarCellClassFunction<Date>>;\n  startAt$: Observable<Date>;\n\n  /** A portal containing the footer component type for this calendar. */\n  calendarFooterPortal: Portal<any>;\n\n  ngOnInit() {\n    super.ngOnInit();\n    const config = this.config();\n    this.startAt$ =\n      config.startAt instanceof Date\n        ? of(config.startAt)\n        : config.startAt instanceof Function\n        ? config.startAt(this.group())\n        : of(null);\n    this.dateClass = config?.cellClassFunction || null;\n    this.dateClass$ = config.dateClass\n      ? config?.dateClass(this.group())\n      : of(() => '');\n  }\n\n  ngAfterContentInit() {\n    if (this.config().datepickerActions) {\n      this.calendarFooterPortal = new ComponentPortal(\n        this.config().datepickerActions\n      );\n    }\n  }\n\n  // handleSelectedChange(event, picker: MatDatepicker<unknown>) {\n  //   console.log({event, picker})\n  //   if(this.config.selectedChange) {\n  //     this.config.selectedChange(event, picker);\n  //   }\n  // }\n}\n","<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</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      @if (calendarFooterPortal) {\n        <mat-datepicker-actions>\n          <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n        </mat-datepicker-actions>\n      }\n    </mat-datepicker>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>\n\n"],"names":["i4","i7"],"mappings":"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"}
+{"version":3,"file":"tft-crispr-forms-index-bTdYHJPk.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/datepicker-field/datepicker-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/datepicker-field/datepicker-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport {\n  Component,\n  OnInit,\n  ChangeDetectionStrategy,\n  AfterContentInit,\n} from '@angular/core';\nimport {\n  MatCalendarCellClassFunction,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { MatDateFnsModule } from '@angular/material-date-fns-adapter';\nimport { Observable, of } from 'rxjs';\nimport { ComponentPortal, Portal, PortalModule } from '@angular/cdk/portal';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport {\n  DatepickerFieldConfig,\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\nconst defaultConfig: Partial<DatepickerFieldConfig> = {\n  startView: 'month',\n};\n\n@Component({\n    selector: 'crispr-datepicker-field',\n    templateUrl: './datepicker-field.component.html',\n    styleUrls: ['./datepicker-field.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        CommonModule,\n        FieldContainerComponent,\n        MatDatepickerModule,\n        MatFormFieldModule,\n        ReactiveFormsModule,\n        MatInputModule,\n        MatDateFnsModule,\n        PortalModule,\n        FormValidationHandlerModule,\n    ],\n    standalone: true\n})\nexport class DatepickerFieldComponent\n  extends CrisprControlComponent<DatepickerFieldConfig>\n  implements OnInit, AfterContentInit\n{\n  defaultConfig = defaultConfig;\n\n  dateClass: MatCalendarCellClassFunction<Date>;\n  dateClass$: Observable<MatCalendarCellClassFunction<Date>>;\n  startAt$: Observable<Date>;\n\n  /** A portal containing the footer component type for this calendar. */\n  calendarFooterPortal: Portal<any>;\n\n  ngOnInit() {\n    super.ngOnInit();\n    const config = this.config();\n    this.startAt$ =\n      config.startAt instanceof Date\n        ? of(config.startAt)\n        : config.startAt instanceof Function\n        ? config.startAt(this.group())\n        : of(null);\n    this.dateClass = config?.cellClassFunction || null;\n    this.dateClass$ = config.dateClass\n      ? config?.dateClass(this.group())\n      : of(() => '');\n  }\n\n  ngAfterContentInit() {\n    if (this.config().datepickerActions) {\n      this.calendarFooterPortal = new ComponentPortal(\n        this.config().datepickerActions\n      );\n    }\n  }\n\n  // handleSelectedChange(event, picker: MatDatepicker<unknown>) {\n  //   console.log({event, picker})\n  //   if(this.config.selectedChange) {\n  //     this.config.selectedChange(event, picker);\n  //   }\n  // }\n}\n","<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</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      @if (calendarFooterPortal) {\n        <mat-datepicker-actions>\n          <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n        </mat-datepicker-actions>\n      }\n    </mat-datepicker>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>\n\n"],"names":["i4","i7"],"mappings":"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"}

package/fesm2022/tft-crispr-forms-index-kah2HT_N.mjs

@@ -0,0 +1,54 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1$2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { map, startWith } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i6 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import { C as CrisprFieldComponent } from './tft-crispr-forms-tft-crispr-forms-8liD7eof.mjs';
+
+class ButtonComponent extends CrisprFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = {
+            buttonType: 'raised',
+            type: 'submit',
+        };
+        this.group = input(null, ...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    get matButtonClass() {
+        return this.config().buttonType ? `mat-${this.config().buttonType}-button` : '';
+    }
+    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);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ButtonComponent, isStandalone: true, selector: "crispr-button", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<button\n  [attr.data-testid]=\"testId()\"\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  @if (config().icon) {<mat-icon>{{ config().icon}}</mat-icon>}\n</button>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { 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: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ReactiveFormsModule,
+                        FormValidationHandlerModule,
+                    ], standalone: true, template: "<button\n  [attr.data-testid]=\"testId()\"\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  @if (config().icon) {<mat-icon>{{ config().icon}}</mat-icon>}\n</button>\n\n" }]
+        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }] } });
+
+export { ButtonComponent };
+//# sourceMappingURL=tft-crispr-forms-index-kah2HT_N.mjs.map

package/fesm2022/tft-crispr-forms-index-kah2HT_N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tft-crispr-forms-index-kah2HT_N.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/button/button.component.ts","../../../../libs/crispr-forms/src/lib/ui/button/button.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, OnInit } from '@angular/core';\nimport { ReactiveFormsModule, FormGroup } from '@angular/forms';\nimport { Observable } from 'rxjs';\nimport { map, startWith } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\n// eslint-disable-next-line @nx/enforce-module-boundaries\nimport { CrisprFieldComponent, ButtonConfig } from '../../utils';\n\n@Component({\n    selector: 'crispr-button',\n    templateUrl: './button.component.html',\n    styleUrls: ['./button.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        CommonModule,\n        MatButtonModule,\n        MatIconModule,\n        MatTooltipModule,\n        ReactiveFormsModule,\n        FormValidationHandlerModule,\n    ],\n    standalone: true\n})\nexport class ButtonComponent\n  extends CrisprFieldComponent<ButtonConfig>\n  implements OnInit\n{\n  defaultConfig: Partial<ButtonConfig> = {\n    buttonType: 'raised',\n    type: 'submit',\n  };\n  formValid$: Observable<boolean>;\n\n  group = input<FormGroup>(null);\n\n  get matButtonClass() {\n    return this.config().buttonType ? `mat-${this.config().buttonType}-button` : '';\n  }\n\n  ngOnInit() {\n    this.formValid$ = this.group().statusChanges.pipe(\n      map((status) => status === 'VALID'),\n      startWith(this.group().valid)\n    );\n  }\n\n  handleClick(group: FormGroup, event: MouseEvent) {\n    if (this.config().callback) {\n      this.config().callback(group, event);\n    }\n  }\n}\n","<button\n  [attr.data-testid]=\"testId()\"\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  @if (config().icon) {<mat-icon>{{ config().icon}}</mat-icon>}\n</button>\n\n"],"names":["i2","i3","i4"],"mappings":"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"}

package/fesm2022/{tft-crispr-forms-tft-crispr-forms-C0bqWzUB.mjs → tft-crispr-forms-tft-crispr-forms-8liD7eof.mjs}

@@ -220,11 +220,12 @@ class CrisprFieldComponent {
         }, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.testIdPrefix = input(undefined, ...(ngDevMode ? [{ debugName: "testIdPrefix" }] : []));
         this.testId = computed(() => {
-            const controlName = this.config()?.controlName;
-            if (!controlName)
+            const config = this.config();
+            const id = config?.testId || config?.controlName;
+            if (!id)
                 return undefined;
             const prefix = this.testIdPrefix();
-            return prefix ? `${prefix}.${controlName}` : controlName;
+            return prefix ? `${prefix}.${id}` : id;
         }, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -317,22 +318,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 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-K7Ecsl-N.mjs').then(({ ButtonComponent }) => ButtonComponent),
-    input: () => import('./tft-crispr-forms-index-D9XpYXkk.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
-    select: () => import('./tft-crispr-forms-index-DDmbulkK.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
-    radio: () => import('./tft-crispr-forms-index-CTtb80yI.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
-    autocomplete: () => import('./tft-crispr-forms-index-DWW8uD4i.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
-    autocompleteChiplist: () => import('./tft-crispr-forms-index-WIb0_UHp.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
-    map: () => import('./tft-crispr-forms-index-CcgQXC4a.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
-    textarea: () => import('./tft-crispr-forms-index-D-ZwydH8.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
-    checkbox: () => import('./tft-crispr-forms-index-BD0TGTEL.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
-    slider: () => import('./tft-crispr-forms-index-z95NpwT_.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
-    datepicker: () => import('./tft-crispr-forms-index-BOV5FHpK.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
+    button: () => import('./tft-crispr-forms-index-kah2HT_N.mjs').then(({ ButtonComponent }) => ButtonComponent),
+    input: () => import('./tft-crispr-forms-index-UX-Wdyk1.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
+    select: () => import('./tft-crispr-forms-index-DYWkX7D3.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
+    radio: () => import('./tft-crispr-forms-index-D99OHDPc.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
+    autocomplete: () => import('./tft-crispr-forms-index-B_lhA83w.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
+    autocompleteChiplist: () => import('./tft-crispr-forms-index-BawhjTMp.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
+    map: () => import('./tft-crispr-forms-index-CXXD0vdZ.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
+    textarea: () => import('./tft-crispr-forms-index-DysioRya.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
+    checkbox: () => import('./tft-crispr-forms-index-BFzx83fR.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
+    slider: () => import('./tft-crispr-forms-index-GlYQbbbv.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
+    datepicker: () => import('./tft-crispr-forms-index-bTdYHJPk.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
     fileUpload: () => Promise.resolve().then(function () { return index$3; }).then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
-    imageUpload: () => import('./tft-crispr-forms-index-IyuNneu2.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
+    imageUpload: () => import('./tft-crispr-forms-index-CoUwTugQ.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
     heading: () => Promise.resolve().then(function () { return index$2; }).then(({ HeadingComponent }) => HeadingComponent),
-    divider: () => import('./tft-crispr-forms-index-BDIWv-PS.mjs').then(({ DividerComponent }) => DividerComponent),
-    unitConversion: () => import('./tft-crispr-forms-index-BuSXb4-S.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
+    divider: () => import('./tft-crispr-forms-index-CmVahfkJ.mjs').then(({ DividerComponent }) => DividerComponent),
+    unitConversion: () => import('./tft-crispr-forms-index-BMZQakFs.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
 };
 function isControlComponent(component) {
     return component && isControlConfig(component.config()) && 'value' in component;
@@ -624,6 +625,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 
 /* eslint-disable @nx/enforce-module-boundaries */
 class FileUploadFieldComponent extends CrisprControlComponent {
+    /**
+     * Plain boolean view of `uploaded`, kept only for the public `AbstractUploadComponent` contract so
+     * consumers of the `uploadFiles` callback can still read and assign `isUploaded`.
+     * Internal code and the template use the `uploaded` signal directly.
+     */
+    get isUploaded() {
+        return this.uploaded();
+    }
+    set isUploaded(value) {
+        this.uploaded.set(value);
+    }
     // ngControl: NgControl = null;
     constructor() {
         super();
@@ -643,7 +655,11 @@ class FileUploadFieldComponent extends CrisprControlComponent {
         };
         this.selectedFiles = signal(null, ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
         this.selectedFilesArray = computed(() => this.selectedFiles() ? Array.from(this.selectedFiles()) : [], ...(ngDevMode ? [{ debugName: "selectedFilesArray" }] : []));
-        this.isUploaded = false;
+        /**
+         * Whether the files have been uploaded. A signal so that changes made asynchronously (e.g. from the
+         * `uploadFiles` callback once an upload finishes) re-render the OnPush/zoneless component.
+         */
+        this.uploaded = signal(false, ...(ngDevMode ? [{ debugName: "uploaded" }] : []));
         this.fileProgress = [];
         const ngControl = this.ngControl;
         if (this.ngControl != null) {
@@ -662,18 +678,19 @@ class FileUploadFieldComponent extends CrisprControlComponent {
         if (files && files.length > 0) {
             this.selectedFiles.set(files);
             this.control().patchValue(files);
+            this.config().filesChanged?.(this.group(), files);
         }
     }
     uploadFiles() {
         if (this.selectedFiles() && this.config().uploadFiles) {
-            this.isUploaded = true;
+            this.uploaded.set(true);
             this.config().uploadFiles(this.group(), this.selectedFiles(), this);
         }
     }
     resetFileInput() {
         this.fileInputRef.nativeElement.value = '';
         this.control().patchValue(null);
-        this.isUploaded = false;
+        this.uploaded.set(false);
     }
     writeValue(value) {
         // clear file input
@@ -685,7 +702,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: [], 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    [attr.data-testid]=\"testId()\"\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 }); }
+    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]=\"testId()\"\n    [color]=\"config().color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config().disableOnUpload && uploaded())\"\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 && uploaded()\"\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 && uploaded())\"\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 && uploaded())\"\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,
@@ -700,7 +717,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    [attr.data-testid]=\"testId()\"\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"] }]
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field floatLabel=\"always\"\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config().disableOnUpload && uploaded())\"\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 && uploaded()\"\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 && uploaded())\"\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 && uploaded())\"\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: () => [], propDecorators: { fileInputRef: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -812,7 +829,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: null, 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\" [testIdPrefix]=\"testId() + '[' + i + ']'\">\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", "testIdPrefix", "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()?.[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\" [testIdPrefix]=\"testId() + '[' + i + ']'\">\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", "testIdPrefix", "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,
@@ -825,7 +842,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\" [testIdPrefix]=\"testId() + '[' + i + ']'\">\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()?.[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\" [testIdPrefix]=\"testId() + '[' + i + ']'\">\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"] }]
         }] });
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -923,4 +940,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
  */
 
 export { AbstractAutocompleteComponent as A, CrisprFieldComponent as C, DEFAULT_EMPTY_OPTIONS_MESSAGE as D, FieldContainerComponent as F, HeadingComponent as H, InfoComponent as I, SelectedFileComponent as S, CrisprControlComponent as a, buildFormGroupFromConfig as b, CrisprFieldDirective as c, ControlType as d, convertBytesToMb as e, FileDropzoneDirective as f, CrisprDisplayFieldComponent as g, CrisprFormComponent as h, CrisprFormsModule as i, FileUploadFieldComponent as j, allowedFileExtValidator as k, allowedFileType as l, callOptionsIfFunction as m, createControlForType as n, observablifyOptions as o, filterOptionsByLabel as p, isControlConfig as q, maxFileSizeValidator as r, valueIn as v };
-//# sourceMappingURL=tft-crispr-forms-tft-crispr-forms-C0bqWzUB.mjs.map
+//# sourceMappingURL=tft-crispr-forms-tft-crispr-forms-8liD7eof.mjs.map