@tft/crispr-forms 13.0.15 → 13.0.18

package/fesm2020/tft-crispr-forms.mjs

@@ -1565,22 +1565,22 @@ const FIELD_COMPONENTS = {
     unitConversion: Promise.resolve().then(function () { return index$2; }).then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent)
 };
 function isControlComponent(component) {
-    return isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
+    return component && isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
 }
 function isControlOrButtonComponent(component) {
     return isControlComponent(component) || component.config.controlType === ControlType.BUTTON;
 }
 
 class CrisprFieldDirective {
-    constructor(container, renderer) {
+    constructor(container, renderer, cdr) {
         this.container = container;
         this.renderer = renderer;
+        this.cdr = cdr;
     }
     set value(value) {
         this._value = value;
-        if (this.component && isControlComponent(this.component)) {
-            this.component.value = value;
-        }
+        // This is needed to keep the group list from resetting control values to the initial input value
+        this.updateComponentValue(value);
     }
     ;
     get value() {
@@ -1597,6 +1597,7 @@ class CrisprFieldDirective {
         if (isControlOrButtonComponent(this.component)) {
             this.component.group = this.group;
         }
+        this.updateComponentValue(this.value);
         // adds any config classes to the dynamically generated component
         // doing this here keeps us from having to extend a base component into each field component individually
         if (!this.config.classes)
@@ -1611,15 +1612,22 @@ class CrisprFieldDirective {
             }
         });
     }
+    updateComponentValue(value) {
+        if (isControlComponent(this.component)) {
+            this.component.value = value;
+            // SubGroups won't populate without this detectChanges
+            this.cdr.detectChanges();
+        }
+    }
 }
-CrisprFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+CrisprFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 CrisprFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: CrisprFieldDirective, selector: "[crisprField]", inputs: { config: "config", group: "group", value: "value" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[crisprField]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], group: [{
                 type: Input
@@ -1673,7 +1681,6 @@ class CrisprFormComponent {
         // proxy value and status change events through to consuming component
         this.valueChanges = this.form.valueChanges;
         this.statusChanges = this.form.statusChanges;
-        this.subs = [];
     }
     ngOnInit() {
         // build out the form, note that we pass in the form as the third argument and the function modifies it
@@ -1688,10 +1695,10 @@ class CrisprFormComponent {
     }
 }
 CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CrisprFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: CrisprFormComponent, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+CrisprFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: CrisprFormComponent, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
+            args: [{ selector: 'crispr-form', template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], form: [{
@@ -1719,11 +1726,15 @@ class FormGroupListComponent extends FormGroupListMixin {
         super();
         this.cdr = cdr;
         this.defaultConfig = defaultConfig;
+        /**
+         * By setting this to true when adding/removing items from array,
+         * we can block original values from overwriting form values
+         * */
+        this.blockValue = false;
     }
     ngOnInit() {
         super.ngOnInit();
         // TODO: this is required to ngFor of controls in template, must be a better way
-        this.formArray = this.control;
     }
     setControlValue(values) {
         if (this.control) {
@@ -1738,8 +1749,20 @@ class FormGroupListComponent extends FormGroupListMixin {
             else if (this.config.displayInitialItem) {
                 this.addGroup();
             }
+            // needed to ensure new array items render
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            });
         }
     }
+    clickDelete(index) {
+        this.blockValue = true;
+        this.deleteGroup(index);
+    }
+    clickAdd() {
+        this.blockValue = true;
+        this.addGroup();
+    }
     addGroup(value = null) {
         this.control.push(createControlForType(this.config.itemConfig, value));
         // needed to ensure new array items render
@@ -1752,10 +1775,10 @@ class FormGroupListComponent extends FormGroupListMixin {
     }
 }
 FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FormGroupListComponent, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let control of formArray?.controls; let i = index\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\" *ngIf=\"config.itemLabelBuilder\"> {{  config.itemLabelBuilder(i) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"deleteGroup(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroupName]=\"i\">\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [config]=\"field\"\n          [value]=\"control.value | initialControlValue : field\"\n          [group]=\"control\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"addGroup()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i4$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FormGroupListComponent, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let con of control?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroup]=\"con\">\n        <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n          [config]=\"field\"\n          [group]=\"con\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i4$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let control of formArray?.controls; let i = index\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\" *ngIf=\"config.itemLabelBuilder\"> {{  config.itemLabelBuilder(i) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"deleteGroup(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroupName]=\"i\">\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [config]=\"field\"\n          [value]=\"control.value | initialControlValue : field\"\n          [group]=\"control\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"addGroup()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"] }]
+            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let con of control?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroup]=\"con\">\n        <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n          [config]=\"field\"\n          [group]=\"con\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class CrisprPipesModule {