@tft/crispr-forms 13.0.14 → 13.0.17
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/field.directive.mjs +15 -8
- package/esm2020/lib/form/form.component.mjs +4 -5
- package/esm2020/lib/form-group-list/form-group-list.component.mjs +16 -7
- package/fesm2015/tft-crispr-forms.mjs +30 -15
- package/fesm2015/tft-crispr-forms.mjs.map +1 -1
- package/fesm2020/tft-crispr-forms.mjs +30 -15
- package/fesm2020/tft-crispr-forms.mjs.map +1 -1
- package/lib/field.directive.d.ts +4 -2
- package/lib/form/form.component.d.ts +1 -2
- package/lib/form-group-list/form-group-list.component.d.ts +0 -1
- package/package.json +1 -1
- package/tft-crispr-forms-13.0.17.tgz +0 -0
- package/tft-crispr-forms-13.0.14.tgz +0 -0
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
import { Directive, Input, ViewContainerRef, Renderer2, NgModule } from '@angular/core';
|
|
1
|
+
import { Directive, Input, ViewContainerRef, Renderer2, NgModule, ChangeDetectorRef } from '@angular/core';
|
|
2
2
|
import { FormGroup } from '@angular/forms';
|
|
3
3
|
import { FIELD_COMPONENTS, isControlComponent, isControlOrButtonComponent } from './field-component-map.const';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export class CrisprFieldDirective {
|
|
7
|
-
constructor(container, renderer) {
|
|
7
|
+
constructor(container, renderer, cdr) {
|
|
8
8
|
this.container = container;
|
|
9
9
|
this.renderer = renderer;
|
|
10
|
+
this.cdr = cdr;
|
|
10
11
|
}
|
|
11
12
|
set value(value) {
|
|
12
13
|
this._value = value;
|
|
13
|
-
|
|
14
|
-
this.component.value = value;
|
|
15
|
-
}
|
|
14
|
+
this.updateComponentValue(value);
|
|
16
15
|
}
|
|
17
16
|
;
|
|
18
17
|
get value() {
|
|
@@ -29,6 +28,7 @@ export class CrisprFieldDirective {
|
|
|
29
28
|
if (isControlOrButtonComponent(this.component)) {
|
|
30
29
|
this.component.group = this.group;
|
|
31
30
|
}
|
|
31
|
+
this.updateComponentValue(this.value);
|
|
32
32
|
// adds any config classes to the dynamically generated component
|
|
33
33
|
// doing this here keeps us from having to extend a base component into each field component individually
|
|
34
34
|
if (!this.config.classes)
|
|
@@ -43,15 +43,22 @@ export class CrisprFieldDirective {
|
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
|
+
updateComponentValue(value) {
|
|
47
|
+
if (this.component && isControlComponent(this.component)) {
|
|
48
|
+
this.component.value = value;
|
|
49
|
+
// SubGroups won't populate without this
|
|
50
|
+
this.cdr.detectChanges();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
46
53
|
}
|
|
47
|
-
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 });
|
|
54
|
+
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 });
|
|
48
55
|
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 });
|
|
49
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
|
|
50
57
|
type: Directive,
|
|
51
58
|
args: [{
|
|
52
59
|
selector: '[crisprField]'
|
|
53
60
|
}]
|
|
54
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { config: [{
|
|
61
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
55
62
|
type: Input
|
|
56
63
|
}], group: [{
|
|
57
64
|
type: Input
|
|
@@ -79,4 +86,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
|
|
|
79
86
|
]
|
|
80
87
|
}]
|
|
81
88
|
}] });
|
|
82
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
89
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jcmlzcHItZm9ybXMvc3JjL2xpYi9maWVsZC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBVSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuSCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0MsT0FBTyxFQUF3QixnQkFBZ0IsRUFBRSxrQkFBa0IsRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JJLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFLL0MsTUFBTSxPQUFPLG9CQUFvQjtJQWtCL0IsWUFDVSxTQUEyQixFQUMzQixRQUFtQixFQUNuQixHQUFzQjtRQUZ0QixjQUFTLEdBQVQsU0FBUyxDQUFrQjtRQUMzQixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ25CLFFBQUcsR0FBSCxHQUFHLENBQW1CO0lBQzdCLENBQUM7SUFiSixJQUFhLEtBQUssQ0FBQyxLQUEyQjtRQUM1QyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsb0JBQW9CLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUFBLENBQUM7SUFDRixJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQVNELEtBQUssQ0FBQyxRQUFRO1FBQ1o7O1dBRUc7UUFDSCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsSUFBSSxNQUFNLGdCQUFnQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDM0YsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxlQUFlLENBQXVCLFNBQVMsQ0FBQyxDQUFDO1FBRXJGLElBQUksQ0FBQyxTQUFTLEdBQUcsWUFBWSxDQUFDLFFBQVEsQ0FBQztRQUN2QyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3BDLElBQUksMEJBQTBCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFO1lBQzlDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7U0FDbkM7UUFDRCxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3RDLGlFQUFpRTtRQUNqRSx5R0FBeUc7UUFDekcsSUFBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTztZQUFFLE9BQU87UUFDaEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDcEMsMERBQTBEO1lBQzFELElBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRTtnQkFDdEIsTUFBTSxLQUFLLENBQUMsZ0NBQWdDLEtBQUssMEJBQTBCLENBQUMsQ0FBQzthQUM5RTtpQkFBTTtnQkFDTCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsQ0FBQzthQUNwRTtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELG9CQUFvQixDQUFDLEtBQTJCO1FBQzlDLElBQUcsSUFBSSxDQUFDLFNBQVMsSUFBSSxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDdkQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1lBQzdCLHdDQUF3QztZQUN4QyxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQzFCO0lBQ0gsQ0FBQzs7aUhBeERVLG9CQUFvQjtxR0FBcEIsb0JBQW9COzJGQUFwQixvQkFBb0I7a0JBSGhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7aUJBQzFCOytKQUdVLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBTU8sS0FBSztzQkFBakIsS0FBSzs7QUE0RFIsTUFBTSxPQUFPLGlCQUFpQjs7OEdBQWpCLGlCQUFpQjsrR0FBakIsaUJBQWlCLGlCQXJFakIsb0JBQW9CLGFBNEQ3QixZQUFZLGFBNURILG9CQUFvQjsrR0FxRXBCLGlCQUFpQixZQVZuQjtZQUNQLFlBQVk7U0FDYjsyRkFRVSxpQkFBaUI7a0JBWDdCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLG9CQUFvQjtxQkFDckI7b0JBQ0QsWUFBWSxFQUFFO3dCQUNaLG9CQUFvQjtxQkFDckI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0LCBWaWV3Q29udGFpbmVyUmVmLCBSZW5kZXJlcjIsIE5nTW9kdWxlLCBPbkluaXQsIENoYW5nZURldGVjdG9yUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgdHlwZSB7IEFueUZpZWxkQ29uZmlnLCBDb250cm9sVmFsdWUgfSBmcm9tICcuL21vZGVscyc7XG5pbXBvcnQgeyBDcmlzcHJGaWVsZENvbXBvbmVudCwgRklFTERfQ09NUE9ORU5UUywgaXNDb250cm9sQ29tcG9uZW50LCBpc0NvbnRyb2xPckJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vZmllbGQtY29tcG9uZW50LW1hcC5jb25zdCc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbY3Jpc3ByRmllbGRdJ1xufSlcbmV4cG9ydCBjbGFzcyBDcmlzcHJGaWVsZERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KCkgY29uZmlnOiBBbnlGaWVsZENvbmZpZztcbiAgQElucHV0KCkgZ3JvdXA6IEZvcm1Hcm91cDtcblxuICAvKipcbiAgICogdmFsdWUgc2V0dGVyIHVwZGF0ZXMgdGhlIGNvbnRyb2wncyB2YWx1ZSBhcyB3ZWxsXG4gICAqL1xuICBfdmFsdWU6IENvbnRyb2xWYWx1ZSB8IGFueVtdXG4gIEBJbnB1dCgpIHNldCB2YWx1ZSh2YWx1ZTogQ29udHJvbFZhbHVlIHwgYW55W10pIHtcbiAgICB0aGlzLl92YWx1ZSA9IHZhbHVlO1xuICAgIHRoaXMudXBkYXRlQ29tcG9uZW50VmFsdWUodmFsdWUpO1xuICB9O1xuICBnZXQgdmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG4gIGNvbXBvbmVudDogQ3Jpc3ByRmllbGRDb21wb25lbnQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjb250YWluZXI6IFZpZXdDb250YWluZXJSZWYsXG4gICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgYXN5bmMgbmdPbkluaXQoKSB7XG4gICAgLyoqXG4gICAgICogY3JlYXRlIGNvbXBvbmVudCBhbmQgc2V0IHZhbHVlcyBmcm9tIGNvbmZpZyBvbiBpdHMgaW5zdGFuY2VcbiAgICAgKi9cbiAgICBjb25zdCBjb21wb25lbnQgPSB0aGlzLmNvbmZpZy5jb21wb25lbnQgfHwgYXdhaXQgRklFTERfQ09NUE9ORU5UU1t0aGlzLmNvbmZpZy5jb250cm9sVHlwZV07XG4gICAgY29uc3QgY29tcG9uZW50UmVmID0gdGhpcy5jb250YWluZXIuY3JlYXRlQ29tcG9uZW50PENyaXNwckZpZWxkQ29tcG9uZW50Pihjb21wb25lbnQpO1xuXG4gICAgdGhpcy5jb21wb25lbnQgPSBjb21wb25lbnRSZWYuaW5zdGFuY2U7XG4gICAgdGhpcy5jb21wb25lbnQuY29uZmlnID0gdGhpcy5jb25maWc7XG4gICAgaWYgKGlzQ29udHJvbE9yQnV0dG9uQ29tcG9uZW50KHRoaXMuY29tcG9uZW50KSkge1xuICAgICAgdGhpcy5jb21wb25lbnQuZ3JvdXAgPSB0aGlzLmdyb3VwO1xuICAgIH1cbiAgICB0aGlzLnVwZGF0ZUNvbXBvbmVudFZhbHVlKHRoaXMudmFsdWUpO1xuICAgIC8vIGFkZHMgYW55IGNvbmZpZyBjbGFzc2VzIHRvIHRoZSBkeW5hbWljYWxseSBnZW5lcmF0ZWQgY29tcG9uZW50XG4gICAgLy8gZG9pbmcgdGhpcyBoZXJlIGtlZXBzIHVzIGZyb20gaGF2aW5nIHRvIGV4dGVuZCBhIGJhc2UgY29tcG9uZW50IGludG8gZWFjaCBmaWVsZCBjb21wb25lbnQgaW5kaXZpZHVhbGx5XG4gICAgaWYoIXRoaXMuY29uZmlnLmNsYXNzZXMpIHJldHVybjtcbiAgICB0aGlzLmNvbmZpZy5jbGFzc2VzLmZvckVhY2goKGtsYXNzKSA9PiB7XG4gICAgICAvLyBjaGVjayBmb3IgcGFzc2luZyBtdWx0aXBsZSBjbGFzc2VzIGluIG9uZSBhcnJheSBlbGVtZW50XG4gICAgICBpZihrbGFzcy5pbmNsdWRlcygnICcpKSB7XG4gICAgICAgIHRocm93IEVycm9yKGBJbXByb3Blcmx5IGZvcm1hdHRlZCBjbGFzcy4gJyR7a2xhc3N9JyBjYW5ub3QgY29udGFpbiBzcGFjZXMuYCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKGNvbXBvbmVudFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50LCBrbGFzcyk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICB1cGRhdGVDb21wb25lbnRWYWx1ZSh2YWx1ZTogQ29udHJvbFZhbHVlIHwgYW55W10pIHtcbiAgICBpZih0aGlzLmNvbXBvbmVudCAmJiBpc0NvbnRyb2xDb21wb25lbnQodGhpcy5jb21wb25lbnQpKSB7XG4gICAgICB0aGlzLmNvbXBvbmVudC52YWx1ZSA9IHZhbHVlO1xuICAgICAgLy8gU3ViR3JvdXBzIHdvbid0IHBvcHVsYXRlIHdpdGhvdXQgdGhpc1xuICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH1cbiAgfVxufVxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIENyaXNwckZpZWxkRGlyZWN0aXZlXG4gIF0sXG4gIGRlY2xhcmF0aW9uczogW1xuICAgIENyaXNwckZpZWxkRGlyZWN0aXZlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQ3Jpc3ByRmllbGRNb2R1bGUge1xufVxuIl19
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input, Output, EventEmitter,
|
|
1
|
+
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
|
|
2
2
|
import { FormGroup } from '@angular/forms';
|
|
3
3
|
import { buildFormGroupFromConfig } from '../form.helpers';
|
|
4
4
|
import { Observable } from 'rxjs';
|
|
@@ -16,7 +16,6 @@ export class CrisprFormComponent {
|
|
|
16
16
|
// proxy value and status change events through to consuming component
|
|
17
17
|
this.valueChanges = this.form.valueChanges;
|
|
18
18
|
this.statusChanges = this.form.statusChanges;
|
|
19
|
-
this.subs = [];
|
|
20
19
|
}
|
|
21
20
|
ngOnInit() {
|
|
22
21
|
// build out the form, note that we pass in the form as the third argument and the function modifies it
|
|
@@ -31,10 +30,10 @@ export class CrisprFormComponent {
|
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
32
|
CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": i5.InitialControlValuePipe },
|
|
33
|
+
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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": i5.InitialControlValuePipe }, preserveWhitespaces: true });
|
|
35
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
|
|
36
35
|
type: Component,
|
|
37
|
-
args: [{ selector: 'crispr-form',
|
|
36
|
+
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"] }]
|
|
38
37
|
}], propDecorators: { config: [{
|
|
39
38
|
type: Input
|
|
40
39
|
}], form: [{
|
|
@@ -51,4 +50,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
|
|
|
51
50
|
type: ViewChild,
|
|
52
51
|
args: ['submitTrigger']
|
|
53
52
|
}] } });
|
|
54
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NyaXNwci1mb3Jtcy9zcmMvbGliL2Zvcm0vZm9ybS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NyaXNwci1mb3Jtcy9zcmMvbGliL2Zvcm0vZm9ybS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUEyQixTQUFTLEVBQUUsVUFBVSxFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUN6SixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0MsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0QsT0FBTyxFQUFnQixVQUFVLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7Ozs7QUFPaEQsTUFBTSxPQUFPLG1CQUFtQjtJQU5oQztRQVNXLFNBQUksR0FBYyxJQUFJLFNBQVMsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNwQyxVQUFLLEdBQXNCLElBQUksQ0FBQztRQUUvQixjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztRQUNwRCxzRUFBc0U7UUFDNUQsaUJBQVksR0FBb0IsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUM7UUFDdkQsa0JBQWEsR0FBdUIsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUM7S0FpQnZFO0lBYkMsUUFBUTtRQUNOLHVHQUF1RztRQUN2Ryx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQy9ELENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1FBQzdCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzNDLENBQUM7O2dIQXpCVSxtQkFBbUI7b0dBQW5CLG1CQUFtQixrVUNYaEMsMnlCQXNCQTsyRkRYYSxtQkFBbUI7a0JBTi9CLFNBQVM7K0JBQ0UsYUFBYTs4QkFPZCxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFFSSxTQUFTO3NCQUFsQixNQUFNO2dCQUVHLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csYUFBYTtzQkFBdEIsTUFBTTtnQkFFcUIsYUFBYTtzQkFBeEMsU0FBUzt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBWaWV3Q2hpbGQsIEVsZW1lbnRSZWYsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcywgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBDb250cm9sR3JvdXBWYWx1ZSwgRm9ybUNvbmZpZyB9IGZyb20gJy4uL21vZGVscyc7XG5pbXBvcnQgeyBidWlsZEZvcm1Hcm91cEZyb21Db25maWcgfSBmcm9tICcuLi9mb3JtLmhlbHBlcnMnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uLCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjcmlzcHItZm9ybScsXG4gIHN0eWxlVXJsczogWydmb3JtLmNvbXBvbmVudC5zY3NzJ10sXG4gIHRlbXBsYXRlVXJsOiAnZm9ybS5jb21wb25lbnQuaHRtbCcsXG4gIC8vIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIENyaXNwckZvcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAvLyBpZiBubyBmb3JtIGhhcyBiZWVuIHBhc3NlZCBpbiBieSBjb25zdW1pbmcgY29tcG9uZW50LCB3ZSBjcmVhdGUgYW4gZW1wdHkgZ3JvdXAgdG8gYnVpbGQgb3V0XG4gIEBJbnB1dCgpIGNvbmZpZzogRm9ybUNvbmZpZztcbiAgQElucHV0KCkgZm9ybTogRm9ybUdyb3VwID0gbmV3IEZvcm1Hcm91cCh7fSk7XG4gIEBJbnB1dCgpIHZhbHVlOiBDb250cm9sR3JvdXBWYWx1ZSA9IG51bGw7XG5cbiAgQE91dHB1dCgpIHN1Ym1pdHRlZCA9IG5ldyBFdmVudEVtaXR0ZXI8Rm9ybUdyb3VwPigpO1xuICAvLyBwcm94eSB2YWx1ZSBhbmQgc3RhdHVzIGNoYW5nZSBldmVudHMgdGhyb3VnaCB0byBjb25zdW1pbmcgY29tcG9uZW50XG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZXM6IE9ic2VydmFibGU8YW55PiA9IHRoaXMuZm9ybS52YWx1ZUNoYW5nZXM7XG4gIEBPdXRwdXQoKSBzdGF0dXNDaGFuZ2VzOiBPYnNlcnZhYmxlPHN0cmluZz4gPSB0aGlzLmZvcm0uc3RhdHVzQ2hhbmdlcztcblxuICBAVmlld0NoaWxkKCdzdWJtaXRUcmlnZ2VyJykgc3VibWl0VHJpZ2dlcjogRWxlbWVudFJlZjxIVE1MQnV0dG9uRWxlbWVudD47XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgLy8gYnVpbGQgb3V0IHRoZSBmb3JtLCBub3RlIHRoYXQgd2UgcGFzcyBpbiB0aGUgZm9ybSBhcyB0aGUgdGhpcmQgYXJndW1lbnQgYW5kIHRoZSBmdW5jdGlvbiBtb2RpZmllcyBpdFxuICAgIGJ1aWxkRm9ybUdyb3VwRnJvbUNvbmZpZyh0aGlzLmNvbmZpZywgdGhpcy52YWx1ZSwgdGhpcy5mb3JtKTtcbiAgfVxuXG4gIGhhbmRsZVN1Ym1pdCgpIHtcbiAgICB0aGlzLmZvcm0ubWFya0FsbEFzVG91Y2hlZCgpO1xuICAgIHRoaXMuc3VibWl0dGVkLmVtaXQodGhpcy5mb3JtKTtcbiAgfVxuXG4gIHRyaWdnZXJTdWJtaXQoKSB7XG4gICAgdGhpcy5zdWJtaXRUcmlnZ2VyLm5hdGl2ZUVsZW1lbnQuY2xpY2soKTtcbiAgfVxufVxuIiwiPGZvcm1cbiAgY2xhc3M9XCJjcmlzcHItZm9ybVwiXG4gIFtuZ0NsYXNzXT1cImNvbmZpZy5jbGFzc2VzXCJcbiAgW2Zvcm1Hcm91cF09XCJmb3JtXCJcbiAgKG5nU3VibWl0KT1cImhhbmRsZVN1Ym1pdCgpXCJcbiAgW2F1dG9jb21wbGV0ZV09XCJjb25maWcuYXV0b2NvbXBsZXRlIHx8ICdvZmYnXCJcbiAgW2Vycm9yRGljdGlvbmFyeV09XCJjb25maWcuZXJyb3JEaWN0aW9uYXJ5XCJcbiAgI25nRm9ybUVsZW1lbnQ9XCJuZ0Zvcm1cIj5cblxuICA8bmctY29udGFpbmVyXG4gICAgKm5nRm9yPVwibGV0IGZpZWxkIG9mIGNvbmZpZy5maWVsZHM7XCJcbiAgICBjcmlzcHJGaWVsZFxuICAgIFt2YWx1ZV09XCJ2YWx1ZSB8IGluaXRpYWxDb250cm9sVmFsdWUgOiBmaWVsZFwiXG4gICAgW2NvbmZpZ109XCJmaWVsZFwiXG4gICAgW2dyb3VwXT1cImZvcm1cIj5cbiAgPC9uZy1jb250YWluZXI+XG4gIDwhLS0gSGlkZGVuIGJ1dHRvbiwgcHJvZ3JhbW1hdGljYWxseSBjbGlja2VkIHdoZW4gY3Jpc3ByIGZvcm0gdHJpZ2dlclN1Ym1pdCBmdW5jdGlvbiBjYWxsZWQuXG4gICAgVXNlcyBhIGhpZGRlbiBidXR0b24gd2l0aCB0eXBlPVwic3VibWl0XCIgYmVjYXVzZSBpdCB3aWxsIHRyaWdnZXIgYm90aCBuYXRpdmUgZm9ybSBzdWJtaXQgZXZlbnRcbiAgICAod2hpY2ggdGhlIGVycm9yIGhhbmRsZXIgaGFzIHRvIGxpc3RlbiBmb3IpIGFuZCBuZ1N1Ym1pdCBldmVudCAgLS0+XG4gIDxidXR0b24gI3N1Ym1pdFRyaWdnZXIgY2xhc3M9XCJzdWJtaXQtdHJpZ2dlclwiIHR5cGU9XCJzdWJtaXRcIj5cbiAgPC9idXR0b24+XG48L2Zvcm0+XG4iXX0=
|
|
@@ -24,32 +24,41 @@ export class FormGroupListComponent extends FormGroupListMixin {
|
|
|
24
24
|
ngOnInit() {
|
|
25
25
|
super.ngOnInit();
|
|
26
26
|
// TODO: this is required to ngFor of controls in template, must be a better way
|
|
27
|
-
this.formArray = this.control;
|
|
28
27
|
}
|
|
29
28
|
setControlValue(values) {
|
|
30
29
|
if (this.control) {
|
|
31
30
|
if (values?.length > 0) {
|
|
31
|
+
// clear any existing values so that new values don't concatenate onto the old
|
|
32
|
+
const currentValues = this.control.value;
|
|
33
|
+
if (currentValues.length) {
|
|
34
|
+
this.control.clear();
|
|
35
|
+
}
|
|
32
36
|
values.forEach(value => this.addGroup(value));
|
|
33
|
-
setTimeout(() => {
|
|
34
|
-
this.cdr.detectChanges();
|
|
35
|
-
});
|
|
36
37
|
}
|
|
37
38
|
else if (this.config.displayInitialItem) {
|
|
38
39
|
this.addGroup();
|
|
39
40
|
}
|
|
41
|
+
// needed to ensure new array items render
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
this.cdr.detectChanges();
|
|
44
|
+
});
|
|
40
45
|
}
|
|
41
46
|
}
|
|
42
47
|
addGroup(value = null) {
|
|
43
48
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
49
|
+
// needed to ensure new array items render
|
|
50
|
+
setTimeout(() => {
|
|
51
|
+
this.cdr.detectChanges();
|
|
52
|
+
});
|
|
44
53
|
}
|
|
45
54
|
deleteGroup(index) {
|
|
46
55
|
this.control.removeAt(index);
|
|
47
56
|
}
|
|
48
57
|
}
|
|
49
58
|
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 <!--
|
|
59
|
+
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 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)=\"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
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
52
61
|
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 <!--
|
|
62
|
+
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 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)=\"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
63
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
55
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1ncm91cC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY3Jpc3ByLWZvcm1zL3NyYy9saWIvZm9ybS1ncm91cC1saXN0L2Zvcm0tZ3JvdXAtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NyaXNwci1mb3Jtcy9zcmMvbGliL2Zvcm0tZ3JvdXAtbGlzdC9mb3JtLWdyb3VwLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUk5RixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7Ozs7Ozs7Ozs7QUFFeEUsTUFBTSxhQUFhLEdBQWlDO0lBQ2xELGNBQWMsRUFBRSxVQUFVO0lBQzFCLGFBQWEsRUFBRSxDQUFDO0NBQ2pCLENBQUM7QUFFRixNQUFNLGtCQUFrQixHQUFHLGtCQUFrQixDQUFzQixvQkFBb0IsQ0FBQyxDQUFDO0FBT3pGLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxrQkFBa0I7SUFLNUQsWUFBb0IsR0FBc0I7UUFDeEMsS0FBSyxFQUFFLENBQUM7UUFEVSxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUoxQyxrQkFBYSxHQUFHLGFBQWEsQ0FBQTtJQU03QixDQUFDO0lBRUQsUUFBUTtRQUNOLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQixnRkFBZ0Y7SUFDbEYsQ0FBQztJQUVELGVBQWUsQ0FBQyxNQUFhO1FBQzNCLElBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNmLElBQUcsTUFBTSxFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUU7Z0JBQ3JCLDhFQUE4RTtnQkFDOUUsTUFBTSxhQUFhLEdBQU0sSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUM7Z0JBQzVDLElBQUcsYUFBYSxDQUFDLE1BQU0sRUFBRTtvQkFDdkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQztpQkFDdEI7Z0JBQ0QsTUFBTSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQzthQUUvQztpQkFBTSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsa0JBQWtCLEVBQUU7Z0JBQ3pDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQTthQUNoQjtZQUNELDBDQUEwQztZQUMxQyxVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDM0IsQ0FBQyxDQUFDLENBQUE7U0FDSDtJQUNILENBQUM7SUFFRCxRQUFRLENBQUMsS0FBSyxHQUFHLElBQUk7UUFDbkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUN2RSwwQ0FBMEM7UUFDMUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0IsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWE7UUFDdkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQzs7bUhBNUNVLHNCQUFzQjt1R0FBdEIsc0JBQXNCLHFGQ25CbkMsKzJDQTJDQTsyRkR4QmEsc0JBQXNCO2tCQU5sQyxTQUFTOytCQUNFLHdCQUF3QixtQkFHakIsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ2hhbmdlRGV0ZWN0b3JSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Hcm91cCwgRm9ybUFycmF5IH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgdHlwZSB7IEZvcm1Hcm91cExpc3RDb25maWcgfSBmcm9tICcuLi9tb2RlbHMnO1xuaW1wb3J0IHsgY3JlYXRlQ29udHJvbEZvclR5cGUgfSBmcm9tICcuLi9mb3JtLmhlbHBlcnMnO1xuaW1wb3J0IHsgQ3Jpc3ByRmllbGRDb21wb25lbnQsIGNyaXNwckNvbnRyb2xNaXhpbiB9IGZyb20gJy4uL2Fic3RyYWN0cyc7XG5cbmNvbnN0IGRlZmF1bHRDb25maWc6IFBhcnRpYWw8Rm9ybUdyb3VwTGlzdENvbmZpZz4gPSB7XG4gIGFkZEJ1dHRvbkxhYmVsOiAnQUREIElURU0nLFxuICBtaW5MaXN0TGVuZ3RoOiAxLFxufTtcblxuY29uc3QgRm9ybUdyb3VwTGlzdE1peGluID0gY3Jpc3ByQ29udHJvbE1peGluPEZvcm1Hcm91cExpc3RDb25maWc+KENyaXNwckZpZWxkQ29tcG9uZW50KTtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NyaXNwci1mb3JtLWdyb3VwLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1ncm91cC1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZm9ybS1ncm91cC1saXN0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1Hcm91cExpc3RDb21wb25lbnQgZXh0ZW5kcyBGb3JtR3JvdXBMaXN0TWl4aW4gaW1wbGVtZW50cyBPbkluaXQge1xuICBkZWZhdWx0Q29uZmlnID0gZGVmYXVsdENvbmZpZ1xuICBncm91cDogRm9ybUdyb3VwO1xuICBjb250cm9sOiBGb3JtQXJyYXk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgLy8gVE9ETzogdGhpcyBpcyByZXF1aXJlZCB0byBuZ0ZvciBvZiBjb250cm9scyBpbiB0ZW1wbGF0ZSwgbXVzdCBiZSBhIGJldHRlciB3YXlcbiAgfVxuXG4gIHNldENvbnRyb2xWYWx1ZSh2YWx1ZXM6IGFueVtdKSB7XG4gICAgaWYodGhpcy5jb250cm9sKSB7XG4gICAgICBpZih2YWx1ZXM/Lmxlbmd0aCA+IDApIHtcbiAgICAgICAgLy8gY2xlYXIgYW55IGV4aXN0aW5nIHZhbHVlcyBzbyB0aGF0IG5ldyB2YWx1ZXMgZG9uJ3QgY29uY2F0ZW5hdGUgb250byB0aGUgb2xkXG4gICAgICAgIGNvbnN0IGN1cnJlbnRWYWx1ZXM6W10gPSB0aGlzLmNvbnRyb2wudmFsdWU7XG4gICAgICAgIGlmKGN1cnJlbnRWYWx1ZXMubGVuZ3RoKSB7XG4gICAgICAgICAgdGhpcy5jb250cm9sLmNsZWFyKCk7XG4gICAgICAgIH1cbiAgICAgICAgdmFsdWVzLmZvckVhY2godmFsdWUgPT4gdGhpcy5hZGRHcm91cCh2YWx1ZSkpO1xuXG4gICAgICB9IGVsc2UgaWYgKHRoaXMuY29uZmlnLmRpc3BsYXlJbml0aWFsSXRlbSkge1xuICAgICAgICB0aGlzLmFkZEdyb3VwKClcbiAgICAgIH1cbiAgICAgIC8vIG5lZWRlZCB0byBlbnN1cmUgbmV3IGFycmF5IGl0ZW1zIHJlbmRlclxuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH0pXG4gICAgfVxuICB9XG5cbiAgYWRkR3JvdXAodmFsdWUgPSBudWxsKSB7XG4gICAgdGhpcy5jb250cm9sLnB1c2goY3JlYXRlQ29udHJvbEZvclR5cGUodGhpcy5jb25maWcuaXRlbUNvbmZpZywgdmFsdWUpKTtcbiAgICAvLyBuZWVkZWQgdG8gZW5zdXJlIG5ldyBhcnJheSBpdGVtcyByZW5kZXJcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICB9KVxuICB9XG5cbiAgZGVsZXRlR3JvdXAoaW5kZXg6IG51bWJlcikge1xuICAgIHRoaXMuY29udHJvbC5yZW1vdmVBdChpbmRleCk7XG4gIH1cbn1cbiIsIlxuPGNyaXNwci1maWVsZC1jb250YWluZXJcbiAgW2NvbmZpZ109XCJjb25maWdcIlxuICBbZ3JvdXBdPVwiZ3JvdXBcIlxuICBbZm9ybUdyb3VwXT1cImdyb3VwXCI+XG5cbiAgPGRpdiBbZm9ybUFycmF5TmFtZV09XCJjb25maWcuY29udHJvbE5hbWVcIj5cbiAgICA8IS0tIERvbid0IGFkZCB0cmFja0J5IGZ1bmN0aW9uLCBpdCBjb25mdXNlcyB0aGUgc3RhdGUgb2YgdGhlIGFycmF5IC0tPlxuICAgIDxkaXYgKm5nRm9yPVwibGV0IGNvbnRyb2wgb2YgY29udHJvbD8uY29udHJvbHM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgIDwhLS0gVE9ETzogdXNlIGNvbnRlbnQgcHJvamVjdGlvbiB0byBhbGxvdyBjdXN0b20gaXRlbSBsYWJlbCBjb21wb25lbnQgLS0+XG4gICAgICA8ZGl2IGNsYXNzPVwiaXRlbS1oZWFkZXJcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJtYXQtaDJcIj4ge3sgY29uZmlnLml0ZW1MYWJlbEJ1aWxkZXIgPyBjb25maWcuaXRlbUxhYmVsQnVpbGRlcihpKSA6ICdJdGVtICcgKyAoaSArIDEpIH19IDwvc3Bhbj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICpuZ0lmPVwiaSArIDEgPiBjb25maWcubWluTGlzdExlbmd0aFwiPlxuICAgICAgICAgIDxtYXQtaWNvbiAoY2xpY2spPVwiZGVsZXRlR3JvdXAoaSlcIj5kZWxldGU8L21hdC1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdlxuICAgICAgICBbZm9ybUdyb3VwTmFtZV09XCJpXCI+XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAqbmdGb3I9XCJsZXQgZmllbGQgb2YgY29uZmlnLml0ZW1Db25maWcuZmllbGRzO1wiXG4gICAgICAgICAgY3Jpc3ByRmllbGRcbiAgICAgICAgICBbY29uZmlnXT1cImZpZWxkXCJcbiAgICAgICAgICBbdmFsdWVdPVwiY29udHJvbC52YWx1ZSB8IGluaXRpYWxDb250cm9sVmFsdWUgOiBmaWVsZFwiXG4gICAgICAgICAgW2dyb3VwXT1cImNvbnRyb2xcIj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJncm91cC1mb290ZXJcIj5cbiAgICA8YnV0dG9uXG4gICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgIGNsYXNzPVwiYWRkXCJcbiAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgICBbY29sb3JdPVwiY29uZmlnLmFkZEJ1dHRvbkNvbG9yXCJcbiAgICAgIChjbGljayk9XCJhZGRHcm91cCgpXCI+XG4gICAgICB7e2NvbmZpZy5hZGRJdGVtTGFiZWwgfHwgY29uZmlnLmFkZEJ1dHRvbkxhYmVsfX1cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG5cbjwvY3Jpc3ByLWZpZWxkLWNvbnRhaW5lcj5cbiJdfQ==
|
|
@@ -1579,15 +1579,14 @@ function isControlOrButtonComponent(component) {
|
|
|
1579
1579
|
}
|
|
1580
1580
|
|
|
1581
1581
|
class CrisprFieldDirective {
|
|
1582
|
-
constructor(container, renderer) {
|
|
1582
|
+
constructor(container, renderer, cdr) {
|
|
1583
1583
|
this.container = container;
|
|
1584
1584
|
this.renderer = renderer;
|
|
1585
|
+
this.cdr = cdr;
|
|
1585
1586
|
}
|
|
1586
1587
|
set value(value) {
|
|
1587
1588
|
this._value = value;
|
|
1588
|
-
|
|
1589
|
-
this.component.value = value;
|
|
1590
|
-
}
|
|
1589
|
+
this.updateComponentValue(value);
|
|
1591
1590
|
}
|
|
1592
1591
|
;
|
|
1593
1592
|
get value() {
|
|
@@ -1605,6 +1604,7 @@ class CrisprFieldDirective {
|
|
|
1605
1604
|
if (isControlOrButtonComponent(this.component)) {
|
|
1606
1605
|
this.component.group = this.group;
|
|
1607
1606
|
}
|
|
1607
|
+
this.updateComponentValue(this.value);
|
|
1608
1608
|
// adds any config classes to the dynamically generated component
|
|
1609
1609
|
// doing this here keeps us from having to extend a base component into each field component individually
|
|
1610
1610
|
if (!this.config.classes)
|
|
@@ -1620,15 +1620,22 @@ class CrisprFieldDirective {
|
|
|
1620
1620
|
});
|
|
1621
1621
|
});
|
|
1622
1622
|
}
|
|
1623
|
+
updateComponentValue(value) {
|
|
1624
|
+
if (this.component && isControlComponent(this.component)) {
|
|
1625
|
+
this.component.value = value;
|
|
1626
|
+
// SubGroups won't populate without this
|
|
1627
|
+
this.cdr.detectChanges();
|
|
1628
|
+
}
|
|
1629
|
+
}
|
|
1623
1630
|
}
|
|
1624
|
-
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 });
|
|
1631
|
+
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 });
|
|
1625
1632
|
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 });
|
|
1626
1633
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
|
|
1627
1634
|
type: Directive,
|
|
1628
1635
|
args: [{
|
|
1629
1636
|
selector: '[crisprField]'
|
|
1630
1637
|
}]
|
|
1631
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { config: [{
|
|
1638
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
1632
1639
|
type: Input
|
|
1633
1640
|
}], group: [{
|
|
1634
1641
|
type: Input
|
|
@@ -1682,7 +1689,6 @@ class CrisprFormComponent {
|
|
|
1682
1689
|
// proxy value and status change events through to consuming component
|
|
1683
1690
|
this.valueChanges = this.form.valueChanges;
|
|
1684
1691
|
this.statusChanges = this.form.statusChanges;
|
|
1685
|
-
this.subs = [];
|
|
1686
1692
|
}
|
|
1687
1693
|
ngOnInit() {
|
|
1688
1694
|
// build out the form, note that we pass in the form as the third argument and the function modifies it
|
|
@@ -1697,10 +1703,10 @@ class CrisprFormComponent {
|
|
|
1697
1703
|
}
|
|
1698
1704
|
}
|
|
1699
1705
|
CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1700
|
-
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 },
|
|
1706
|
+
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 });
|
|
1701
1707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
|
|
1702
1708
|
type: Component,
|
|
1703
|
-
args: [{ selector: 'crispr-form',
|
|
1709
|
+
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"] }]
|
|
1704
1710
|
}], propDecorators: { config: [{
|
|
1705
1711
|
type: Input
|
|
1706
1712
|
}], form: [{
|
|
@@ -1732,33 +1738,42 @@ class FormGroupListComponent extends FormGroupListMixin {
|
|
|
1732
1738
|
ngOnInit() {
|
|
1733
1739
|
super.ngOnInit();
|
|
1734
1740
|
// TODO: this is required to ngFor of controls in template, must be a better way
|
|
1735
|
-
this.formArray = this.control;
|
|
1736
1741
|
}
|
|
1737
1742
|
setControlValue(values) {
|
|
1738
1743
|
if (this.control) {
|
|
1739
1744
|
if ((values === null || values === void 0 ? void 0 : values.length) > 0) {
|
|
1745
|
+
// clear any existing values so that new values don't concatenate onto the old
|
|
1746
|
+
const currentValues = this.control.value;
|
|
1747
|
+
if (currentValues.length) {
|
|
1748
|
+
this.control.clear();
|
|
1749
|
+
}
|
|
1740
1750
|
values.forEach(value => this.addGroup(value));
|
|
1741
|
-
setTimeout(() => {
|
|
1742
|
-
this.cdr.detectChanges();
|
|
1743
|
-
});
|
|
1744
1751
|
}
|
|
1745
1752
|
else if (this.config.displayInitialItem) {
|
|
1746
1753
|
this.addGroup();
|
|
1747
1754
|
}
|
|
1755
|
+
// needed to ensure new array items render
|
|
1756
|
+
setTimeout(() => {
|
|
1757
|
+
this.cdr.detectChanges();
|
|
1758
|
+
});
|
|
1748
1759
|
}
|
|
1749
1760
|
}
|
|
1750
1761
|
addGroup(value = null) {
|
|
1751
1762
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
1763
|
+
// needed to ensure new array items render
|
|
1764
|
+
setTimeout(() => {
|
|
1765
|
+
this.cdr.detectChanges();
|
|
1766
|
+
});
|
|
1752
1767
|
}
|
|
1753
1768
|
deleteGroup(index) {
|
|
1754
1769
|
this.control.removeAt(index);
|
|
1755
1770
|
}
|
|
1756
1771
|
}
|
|
1757
1772
|
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 <!--
|
|
1773
|
+
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 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)=\"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
1774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
1760
1775
|
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 <!--
|
|
1776
|
+
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 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)=\"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
1777
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1763
1778
|
|
|
1764
1779
|
class CrisprPipesModule {
|