@tft/crispr-forms 13.0.14 → 13.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/form-group-list/form-group-list.component.mjs +12 -6
- package/fesm2015/tft-crispr-forms.mjs +11 -5
- package/fesm2015/tft-crispr-forms.mjs.map +1 -1
- package/fesm2020/tft-crispr-forms.mjs +11 -5
- package/fesm2020/tft-crispr-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/tft-crispr-forms-13.0.15.tgz +0 -0
- package/tft-crispr-forms-13.0.14.tgz +0 -0
|
@@ -29,10 +29,12 @@ export class FormGroupListComponent extends FormGroupListMixin {
|
|
|
29
29
|
setControlValue(values) {
|
|
30
30
|
if (this.control) {
|
|
31
31
|
if (values?.length > 0) {
|
|
32
|
+
// clear any existing values so that new values don't concatenate onto the old
|
|
33
|
+
const currentValues = this.control.value;
|
|
34
|
+
if (currentValues.length) {
|
|
35
|
+
this.control.clear();
|
|
36
|
+
}
|
|
32
37
|
values.forEach(value => this.addGroup(value));
|
|
33
|
-
setTimeout(() => {
|
|
34
|
-
this.cdr.detectChanges();
|
|
35
|
-
});
|
|
36
38
|
}
|
|
37
39
|
else if (this.config.displayInitialItem) {
|
|
38
40
|
this.addGroup();
|
|
@@ -41,15 +43,19 @@ export class FormGroupListComponent extends FormGroupListMixin {
|
|
|
41
43
|
}
|
|
42
44
|
addGroup(value = null) {
|
|
43
45
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
46
|
+
// needed to ensure new array items render
|
|
47
|
+
setTimeout(() => {
|
|
48
|
+
this.cdr.detectChanges();
|
|
49
|
+
});
|
|
44
50
|
}
|
|
45
51
|
deleteGroup(index) {
|
|
46
52
|
this.control.removeAt(index);
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
55
|
FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
-
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 <!--
|
|
56
|
+
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: i1.FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i7.CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": i8.InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
|
|
51
57
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
52
58
|
type: Component,
|
|
53
|
-
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 <!--
|
|
59
|
+
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"] }]
|
|
54
60
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
55
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1ncm91cC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY3Jpc3ByLWZvcm1zL3NyYy9saWIvZm9ybS1ncm91cC1saXN0L2Zvcm0tZ3JvdXAtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NyaXNwci1mb3Jtcy9zcmMvbGliL2Zvcm0tZ3JvdXAtbGlzdC9mb3JtLWdyb3VwLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUk5RixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7Ozs7Ozs7Ozs7QUFFeEUsTUFBTSxhQUFhLEdBQWlDO0lBQ2xELGNBQWMsRUFBRSxVQUFVO0lBQzFCLGFBQWEsRUFBRSxDQUFDO0NBQ2pCLENBQUM7QUFFRixNQUFNLGtCQUFrQixHQUFHLGtCQUFrQixDQUFzQixvQkFBb0IsQ0FBQyxDQUFDO0FBT3pGLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxrQkFBa0I7SUFNNUQsWUFBb0IsR0FBc0I7UUFDeEMsS0FBSyxFQUFFLENBQUM7UUFEVSxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUwxQyxrQkFBYSxHQUFHLGFBQWEsQ0FBQTtJQU83QixDQUFDO0lBRUQsUUFBUTtRQUNOLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQixnRkFBZ0Y7UUFDaEYsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsT0FBb0IsQ0FBQztJQUM3QyxDQUFDO0lBRUQsZUFBZSxDQUFDLE1BQWE7UUFDM0IsSUFBRyxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2YsSUFBRyxNQUFNLEVBQUUsTUFBTSxHQUFHLENBQUMsRUFBRTtnQkFDckIsOEVBQThFO2dCQUM5RSxNQUFNLGFBQWEsR0FBTSxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQztnQkFDNUMsSUFBRyxhQUFhLENBQUMsTUFBTSxFQUFFO29CQUN2QixJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDO2lCQUN0QjtnQkFDRCxNQUFNLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO2FBRS9DO2lCQUFNLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsRUFBRTtnQkFDekMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFBO2FBQ2hCO1NBQ0Y7SUFDSCxDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQUssR0FBRyxJQUFJO1FBQ25CLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDdkUsMENBQTBDO1FBQzFDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9CLENBQUM7O21IQTFDVSxzQkFBc0I7dUdBQXRCLHNCQUFzQixxRkNuQm5DLHMyQ0EyQ0E7MkZEeEJhLHNCQUFzQjtrQkFObEMsU0FBUzsrQkFDRSx3QkFBd0IsbUJBR2pCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtR3JvdXAsIEZvcm1BcnJheSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHR5cGUgeyBGb3JtR3JvdXBMaXN0Q29uZmlnIH0gZnJvbSAnLi4vbW9kZWxzJztcbmltcG9ydCB7IGNyZWF0ZUNvbnRyb2xGb3JUeXBlIH0gZnJvbSAnLi4vZm9ybS5oZWxwZXJzJztcbmltcG9ydCB7IENyaXNwckZpZWxkQ29tcG9uZW50LCBjcmlzcHJDb250cm9sTWl4aW4gfSBmcm9tICcuLi9hYnN0cmFjdHMnO1xuXG5jb25zdCBkZWZhdWx0Q29uZmlnOiBQYXJ0aWFsPEZvcm1Hcm91cExpc3RDb25maWc+ID0ge1xuICBhZGRCdXR0b25MYWJlbDogJ0FERCBJVEVNJyxcbiAgbWluTGlzdExlbmd0aDogMSxcbn07XG5cbmNvbnN0IEZvcm1Hcm91cExpc3RNaXhpbiA9IGNyaXNwckNvbnRyb2xNaXhpbjxGb3JtR3JvdXBMaXN0Q29uZmlnPihDcmlzcHJGaWVsZENvbXBvbmVudCk7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjcmlzcHItZm9ybS1ncm91cC1saXN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Zvcm0tZ3JvdXAtbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvcm0tZ3JvdXAtbGlzdC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBGb3JtR3JvdXBMaXN0Q29tcG9uZW50IGV4dGVuZHMgRm9ybUdyb3VwTGlzdE1peGluIGltcGxlbWVudHMgT25Jbml0IHtcbiAgZGVmYXVsdENvbmZpZyA9IGRlZmF1bHRDb25maWdcbiAgZ3JvdXA6IEZvcm1Hcm91cDtcbiAgY29udHJvbDogRm9ybUFycmF5O1xuICBmb3JtQXJyYXk6IEZvcm1BcnJheTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgc3VwZXIubmdPbkluaXQoKTtcbiAgICAvLyBUT0RPOiB0aGlzIGlzIHJlcXVpcmVkIHRvIG5nRm9yIG9mIGNvbnRyb2xzIGluIHRlbXBsYXRlLCBtdXN0IGJlIGEgYmV0dGVyIHdheVxuICAgIHRoaXMuZm9ybUFycmF5ID0gdGhpcy5jb250cm9sIGFzIEZvcm1BcnJheTtcbiAgfVxuXG4gIHNldENvbnRyb2xWYWx1ZSh2YWx1ZXM6IGFueVtdKSB7XG4gICAgaWYodGhpcy5jb250cm9sKSB7XG4gICAgICBpZih2YWx1ZXM/Lmxlbmd0aCA+IDApIHtcbiAgICAgICAgLy8gY2xlYXIgYW55IGV4aXN0aW5nIHZhbHVlcyBzbyB0aGF0IG5ldyB2YWx1ZXMgZG9uJ3QgY29uY2F0ZW5hdGUgb250byB0aGUgb2xkXG4gICAgICAgIGNvbnN0IGN1cnJlbnRWYWx1ZXM6W10gPSB0aGlzLmNvbnRyb2wudmFsdWU7XG4gICAgICAgIGlmKGN1cnJlbnRWYWx1ZXMubGVuZ3RoKSB7XG4gICAgICAgICAgdGhpcy5jb250cm9sLmNsZWFyKCk7XG4gICAgICAgIH1cbiAgICAgICAgdmFsdWVzLmZvckVhY2godmFsdWUgPT4gdGhpcy5hZGRHcm91cCh2YWx1ZSkpO1xuXG4gICAgICB9IGVsc2UgaWYgKHRoaXMuY29uZmlnLmRpc3BsYXlJbml0aWFsSXRlbSkge1xuICAgICAgICB0aGlzLmFkZEdyb3VwKClcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBhZGRHcm91cCh2YWx1ZSA9IG51bGwpIHtcbiAgICB0aGlzLmNvbnRyb2wucHVzaChjcmVhdGVDb250cm9sRm9yVHlwZSh0aGlzLmNvbmZpZy5pdGVtQ29uZmlnLCB2YWx1ZSkpO1xuICAgIC8vIG5lZWRlZCB0byBlbnN1cmUgbmV3IGFycmF5IGl0ZW1zIHJlbmRlclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH0pXG4gIH1cblxuICBkZWxldGVHcm91cChpbmRleDogbnVtYmVyKSB7XG4gICAgdGhpcy5jb250cm9sLnJlbW92ZUF0KGluZGV4KTtcbiAgfVxufVxuIiwiXG48Y3Jpc3ByLWZpZWxkLWNvbnRhaW5lclxuICBbY29uZmlnXT1cImNvbmZpZ1wiXG4gIFtncm91cF09XCJncm91cFwiXG4gIFtmb3JtR3JvdXBdPVwiZ3JvdXBcIj5cblxuICA8ZGl2IFtmb3JtQXJyYXlOYW1lXT1cImNvbmZpZy5jb250cm9sTmFtZVwiPlxuICAgIDwhLS0gRG9uJ3QgYWRkIHRyYWNrQnkgZnVuY3Rpb24sIGl0IGNvbmZ1c2VzIHRoZSBzdGF0ZSBvZiB0aGUgYXJyYXkgLS0+XG4gICAgPGRpdiAqbmdGb3I9XCJsZXQgY29udHJvbCBvZiBmb3JtQXJyYXk/LmNvbnRyb2xzOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICA8IS0tIFRPRE86IHVzZSBjb250ZW50IHByb2plY3Rpb24gdG8gYWxsb3cgY3VzdG9tIGl0ZW0gbGFiZWwgY29tcG9uZW50IC0tPlxuICAgICAgPGRpdiBjbGFzcz1cIml0ZW0taGVhZGVyXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwibWF0LWgyXCIgKm5nSWY9XCJjb25maWcuaXRlbUxhYmVsQnVpbGRlclwiPiB7eyAgY29uZmlnLml0ZW1MYWJlbEJ1aWxkZXIoaSkgfX0gPC9zcGFuPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgbWF0LWljb24tYnV0dG9uXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgKm5nSWY9XCJpICsgMSA+IGNvbmZpZy5taW5MaXN0TGVuZ3RoXCI+XG4gICAgICAgICAgPG1hdC1pY29uIChjbGljayk9XCJkZWxldGVHcm91cChpKVwiPmRlbGV0ZTwvbWF0LWljb24+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgIFtmb3JtR3JvdXBOYW1lXT1cImlcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICpuZ0Zvcj1cImxldCBmaWVsZCBvZiBjb25maWcuaXRlbUNvbmZpZy5maWVsZHM7XCJcbiAgICAgICAgICBjcmlzcHJGaWVsZFxuICAgICAgICAgIFtjb25maWddPVwiZmllbGRcIlxuICAgICAgICAgIFt2YWx1ZV09XCJjb250cm9sLnZhbHVlIHwgaW5pdGlhbENvbnRyb2xWYWx1ZSA6IGZpZWxkXCJcbiAgICAgICAgICBbZ3JvdXBdPVwiY29udHJvbFwiPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImdyb3VwLWZvb3RlclwiPlxuICAgIDxidXR0b25cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgY2xhc3M9XCJhZGRcIlxuICAgICAgbWF0LXJhaXNlZC1idXR0b25cbiAgICAgIFtjb2xvcl09XCJjb25maWcuYWRkQnV0dG9uQ29sb3JcIlxuICAgICAgKGNsaWNrKT1cImFkZEdyb3VwKClcIj5cbiAgICAgIHt7Y29uZmlnLmFkZEl0ZW1MYWJlbCB8fCBjb25maWcuYWRkQnV0dG9uTGFiZWx9fVxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cblxuPC9jcmlzcHItZmllbGQtY29udGFpbmVyPlxuIl19
|
|
@@ -1737,10 +1737,12 @@ class FormGroupListComponent extends FormGroupListMixin {
|
|
|
1737
1737
|
setControlValue(values) {
|
|
1738
1738
|
if (this.control) {
|
|
1739
1739
|
if ((values === null || values === void 0 ? void 0 : values.length) > 0) {
|
|
1740
|
+
// clear any existing values so that new values don't concatenate onto the old
|
|
1741
|
+
const currentValues = this.control.value;
|
|
1742
|
+
if (currentValues.length) {
|
|
1743
|
+
this.control.clear();
|
|
1744
|
+
}
|
|
1740
1745
|
values.forEach(value => this.addGroup(value));
|
|
1741
|
-
setTimeout(() => {
|
|
1742
|
-
this.cdr.detectChanges();
|
|
1743
|
-
});
|
|
1744
1746
|
}
|
|
1745
1747
|
else if (this.config.displayInitialItem) {
|
|
1746
1748
|
this.addGroup();
|
|
@@ -1749,16 +1751,20 @@ class FormGroupListComponent extends FormGroupListMixin {
|
|
|
1749
1751
|
}
|
|
1750
1752
|
addGroup(value = null) {
|
|
1751
1753
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
1754
|
+
// needed to ensure new array items render
|
|
1755
|
+
setTimeout(() => {
|
|
1756
|
+
this.cdr.detectChanges();
|
|
1757
|
+
});
|
|
1752
1758
|
}
|
|
1753
1759
|
deleteGroup(index) {
|
|
1754
1760
|
this.control.removeAt(index);
|
|
1755
1761
|
}
|
|
1756
1762
|
}
|
|
1757
1763
|
FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1758
|
-
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 <!--
|
|
1764
|
+
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 });
|
|
1759
1765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
1760
1766
|
type: Component,
|
|
1761
|
-
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 <!--
|
|
1767
|
+
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"] }]
|
|
1762
1768
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1763
1769
|
|
|
1764
1770
|
class CrisprPipesModule {
|