@tft/crispr-forms 13.0.13 → 13.0.16
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 +12 -13
- package/esm2020/lib/form/form.component.mjs +4 -5
- package/esm2020/lib/form-group-list/form-group-list.component.mjs +22 -9
- package/fesm2015/tft-crispr-forms.mjs +32 -21
- package/fesm2015/tft-crispr-forms.mjs.map +1 -1
- package/fesm2020/tft-crispr-forms.mjs +32 -21
- package/fesm2020/tft-crispr-forms.mjs.map +1 -1
- package/lib/field.directive.d.ts +3 -3
- package/lib/form/form.component.d.ts +1 -2
- package/lib/form-group-list/form-group-list.component.d.ts +3 -3
- package/package.json +1 -1
- package/tft-crispr-forms-13.0.16.tgz +0 -0
- package/tft-crispr-forms-13.0.13.tgz +0 -0
|
@@ -1,19 +1,16 @@
|
|
|
1
|
-
import { Directive, Input, ViewContainerRef, Renderer2, NgModule
|
|
1
|
+
import { Directive, Input, ViewContainerRef, Renderer2, NgModule } 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) {
|
|
8
8
|
this.container = container;
|
|
9
9
|
this.renderer = renderer;
|
|
10
|
-
this.cdr = cdr;
|
|
11
10
|
}
|
|
12
11
|
set value(value) {
|
|
13
12
|
this._value = value;
|
|
14
|
-
|
|
15
|
-
this.component.value = value;
|
|
16
|
-
}
|
|
13
|
+
this.updateComponentValue(value);
|
|
17
14
|
}
|
|
18
15
|
;
|
|
19
16
|
get value() {
|
|
@@ -30,10 +27,7 @@ export class CrisprFieldDirective {
|
|
|
30
27
|
if (isControlOrButtonComponent(this.component)) {
|
|
31
28
|
this.component.group = this.group;
|
|
32
29
|
}
|
|
33
|
-
|
|
34
|
-
this.component.value = this.value;
|
|
35
|
-
}
|
|
36
|
-
this.cdr.detectChanges();
|
|
30
|
+
this.updateComponentValue(this.value);
|
|
37
31
|
// adds any config classes to the dynamically generated component
|
|
38
32
|
// doing this here keeps us from having to extend a base component into each field component individually
|
|
39
33
|
if (!this.config.classes)
|
|
@@ -48,15 +42,20 @@ export class CrisprFieldDirective {
|
|
|
48
42
|
}
|
|
49
43
|
});
|
|
50
44
|
}
|
|
45
|
+
updateComponentValue(value) {
|
|
46
|
+
if (this.component && isControlComponent(this.component)) {
|
|
47
|
+
this.component.value = value;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
51
50
|
}
|
|
52
|
-
CrisprFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }
|
|
51
|
+
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 });
|
|
53
52
|
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 });
|
|
54
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
|
|
55
54
|
type: Directive,
|
|
56
55
|
args: [{
|
|
57
56
|
selector: '[crisprField]'
|
|
58
57
|
}]
|
|
59
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }
|
|
58
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { config: [{
|
|
60
59
|
type: Input
|
|
61
60
|
}], group: [{
|
|
62
61
|
type: Input
|
|
@@ -84,4 +83,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
|
|
|
84
83
|
]
|
|
85
84
|
}]
|
|
86
85
|
}] });
|
|
87
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
86
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jcmlzcHItZm9ybXMvc3JjL2xpYi9maWVsZC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0MsT0FBTyxFQUF3QixnQkFBZ0IsRUFBRSxrQkFBa0IsRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JJLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFLL0MsTUFBTSxPQUFPLG9CQUFvQjtJQWtCL0IsWUFDVSxTQUEyQixFQUMzQixRQUFtQjtRQURuQixjQUFTLEdBQVQsU0FBUyxDQUFrQjtRQUMzQixhQUFRLEdBQVIsUUFBUSxDQUFXO0lBQzFCLENBQUM7SUFaSixJQUFhLEtBQUssQ0FBQyxLQUEyQjtRQUM1QyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsb0JBQW9CLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUFBLENBQUM7SUFDRixJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQVFELEtBQUssQ0FBQyxRQUFRO1FBQ1o7O1dBRUc7UUFDSCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsSUFBSSxNQUFNLGdCQUFnQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDM0YsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxlQUFlLENBQXVCLFNBQVMsQ0FBQyxDQUFDO1FBRXJGLElBQUksQ0FBQyxTQUFTLEdBQUcsWUFBWSxDQUFDLFFBQVEsQ0FBQztRQUN2QyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3BDLElBQUksMEJBQTBCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFO1lBQzlDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7U0FDbkM7UUFDRCxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3RDLGlFQUFpRTtRQUNqRSx5R0FBeUc7UUFDekcsSUFBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTztZQUFFLE9BQU87UUFDaEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDcEMsMERBQTBEO1lBQzFELElBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRTtnQkFDdEIsTUFBTSxLQUFLLENBQUMsZ0NBQWdDLEtBQUssMEJBQTBCLENBQUMsQ0FBQzthQUM5RTtpQkFBTTtnQkFDTCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsQ0FBQzthQUNwRTtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELG9CQUFvQixDQUFDLEtBQTJCO1FBQzlDLElBQUcsSUFBSSxDQUFDLFNBQVMsSUFBSSxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDdkQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQzlCO0lBQ0gsQ0FBQzs7aUhBckRVLG9CQUFvQjtxR0FBcEIsb0JBQW9COzJGQUFwQixvQkFBb0I7a0JBSGhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7aUJBQzFCOytIQUdVLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBTU8sS0FBSztzQkFBakIsS0FBSzs7QUF5RFIsTUFBTSxPQUFPLGlCQUFpQjs7OEdBQWpCLGlCQUFpQjsrR0FBakIsaUJBQWlCLGlCQWxFakIsb0JBQW9CLGFBeUQ3QixZQUFZLGFBekRILG9CQUFvQjsrR0FrRXBCLGlCQUFpQixZQVZuQjtZQUNQLFlBQVk7U0FDYjsyRkFRVSxpQkFBaUI7a0JBWDdCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLG9CQUFvQjtxQkFDckI7b0JBQ0QsWUFBWSxFQUFFO3dCQUNaLG9CQUFvQjtxQkFDckI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0LCBWaWV3Q29udGFpbmVyUmVmLCBSZW5kZXJlcjIsIE5nTW9kdWxlLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB0eXBlIHsgQW55RmllbGRDb25maWcsIENvbnRyb2xWYWx1ZSB9IGZyb20gJy4vbW9kZWxzJztcbmltcG9ydCB7IENyaXNwckZpZWxkQ29tcG9uZW50LCBGSUVMRF9DT01QT05FTlRTLCBpc0NvbnRyb2xDb21wb25lbnQsIGlzQ29udHJvbE9yQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi9maWVsZC1jb21wb25lbnQtbWFwLmNvbnN0JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tjcmlzcHJGaWVsZF0nXG59KVxuZXhwb3J0IGNsYXNzIENyaXNwckZpZWxkRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKSBjb25maWc6IEFueUZpZWxkQ29uZmlnO1xuICBASW5wdXQoKSBncm91cDogRm9ybUdyb3VwO1xuXG4gIC8qKlxuICAgKiB2YWx1ZSBzZXR0ZXIgdXBkYXRlcyB0aGUgY29udHJvbCdzIHZhbHVlIGFzIHdlbGxcbiAgICovXG4gIF92YWx1ZTogQ29udHJvbFZhbHVlIHwgYW55W11cbiAgQElucHV0KCkgc2V0IHZhbHVlKHZhbHVlOiBDb250cm9sVmFsdWUgfCBhbnlbXSkge1xuICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy51cGRhdGVDb21wb25lbnRWYWx1ZSh2YWx1ZSk7XG4gIH07XG4gIGdldCB2YWx1ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5fdmFsdWU7XG4gIH1cbiAgY29tcG9uZW50OiBDcmlzcHJGaWVsZENvbXBvbmVudDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGNvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjJcbiAgKSB7fVxuXG4gIGFzeW5jIG5nT25Jbml0KCkge1xuICAgIC8qKlxuICAgICAqIGNyZWF0ZSBjb21wb25lbnQgYW5kIHNldCB2YWx1ZXMgZnJvbSBjb25maWcgb24gaXRzIGluc3RhbmNlXG4gICAgICovXG4gICAgY29uc3QgY29tcG9uZW50ID0gdGhpcy5jb25maWcuY29tcG9uZW50IHx8IGF3YWl0IEZJRUxEX0NPTVBPTkVOVFNbdGhpcy5jb25maWcuY29udHJvbFR5cGVdO1xuICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IHRoaXMuY29udGFpbmVyLmNyZWF0ZUNvbXBvbmVudDxDcmlzcHJGaWVsZENvbXBvbmVudD4oY29tcG9uZW50KTtcblxuICAgIHRoaXMuY29tcG9uZW50ID0gY29tcG9uZW50UmVmLmluc3RhbmNlO1xuICAgIHRoaXMuY29tcG9uZW50LmNvbmZpZyA9IHRoaXMuY29uZmlnO1xuICAgIGlmIChpc0NvbnRyb2xPckJ1dHRvbkNvbXBvbmVudCh0aGlzLmNvbXBvbmVudCkpIHtcbiAgICAgIHRoaXMuY29tcG9uZW50Lmdyb3VwID0gdGhpcy5ncm91cDtcbiAgICB9XG4gICAgdGhpcy51cGRhdGVDb21wb25lbnRWYWx1ZSh0aGlzLnZhbHVlKTtcbiAgICAvLyBhZGRzIGFueSBjb25maWcgY2xhc3NlcyB0byB0aGUgZHluYW1pY2FsbHkgZ2VuZXJhdGVkIGNvbXBvbmVudFxuICAgIC8vIGRvaW5nIHRoaXMgaGVyZSBrZWVwcyB1cyBmcm9tIGhhdmluZyB0byBleHRlbmQgYSBiYXNlIGNvbXBvbmVudCBpbnRvIGVhY2ggZmllbGQgY29tcG9uZW50IGluZGl2aWR1YWxseVxuICAgIGlmKCF0aGlzLmNvbmZpZy5jbGFzc2VzKSByZXR1cm47XG4gICAgdGhpcy5jb25maWcuY2xhc3Nlcy5mb3JFYWNoKChrbGFzcykgPT4ge1xuICAgICAgLy8gY2hlY2sgZm9yIHBhc3NpbmcgbXVsdGlwbGUgY2xhc3NlcyBpbiBvbmUgYXJyYXkgZWxlbWVudFxuICAgICAgaWYoa2xhc3MuaW5jbHVkZXMoJyAnKSkge1xuICAgICAgICB0aHJvdyBFcnJvcihgSW1wcm9wZXJseSBmb3JtYXR0ZWQgY2xhc3MuICcke2tsYXNzfScgY2Fubm90IGNvbnRhaW4gc3BhY2VzLmApO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyhjb21wb25lbnRSZWYubG9jYXRpb24ubmF0aXZlRWxlbWVudCwga2xhc3MpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgdXBkYXRlQ29tcG9uZW50VmFsdWUodmFsdWU6IENvbnRyb2xWYWx1ZSB8IGFueVtdKSB7XG4gICAgaWYodGhpcy5jb21wb25lbnQgJiYgaXNDb250cm9sQ29tcG9uZW50KHRoaXMuY29tcG9uZW50KSkge1xuICAgICAgdGhpcy5jb21wb25lbnQudmFsdWUgPSB2YWx1ZTtcbiAgICB9XG4gIH1cbn1cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBDcmlzcHJGaWVsZERpcmVjdGl2ZVxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBDcmlzcHJGaWVsZERpcmVjdGl2ZVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIENyaXNwckZpZWxkTW9kdWxlIHtcbn1cbiJdfQ==
|
|
@@ -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=
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
1
|
+
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
|
2
2
|
import { createControlForType } from '../form.helpers';
|
|
3
3
|
import { CrisprFieldComponent, crisprControlMixin } from '../abstracts';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -16,36 +16,49 @@ const defaultConfig = {
|
|
|
16
16
|
};
|
|
17
17
|
const FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
|
|
18
18
|
export class FormGroupListComponent extends FormGroupListMixin {
|
|
19
|
-
constructor() {
|
|
20
|
-
super(
|
|
19
|
+
constructor(cdr) {
|
|
20
|
+
super();
|
|
21
|
+
this.cdr = cdr;
|
|
21
22
|
this.defaultConfig = defaultConfig;
|
|
22
23
|
}
|
|
23
24
|
ngOnInit() {
|
|
24
25
|
super.ngOnInit();
|
|
25
26
|
// TODO: this is required to ngFor of controls in template, must be a better way
|
|
26
|
-
this.formArray = this.control;
|
|
27
27
|
}
|
|
28
28
|
setControlValue(values) {
|
|
29
29
|
if (this.control) {
|
|
30
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
|
+
}
|
|
31
36
|
values.forEach(value => this.addGroup(value));
|
|
32
37
|
}
|
|
33
38
|
else if (this.config.displayInitialItem) {
|
|
34
39
|
this.addGroup();
|
|
35
40
|
}
|
|
41
|
+
// needed to ensure new array items render
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
this.cdr.detectChanges();
|
|
44
|
+
});
|
|
36
45
|
}
|
|
37
46
|
}
|
|
38
47
|
addGroup(value = null) {
|
|
39
48
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
49
|
+
// needed to ensure new array items render
|
|
50
|
+
setTimeout(() => {
|
|
51
|
+
this.cdr.detectChanges();
|
|
52
|
+
});
|
|
40
53
|
}
|
|
41
54
|
deleteGroup(index) {
|
|
42
55
|
this.control.removeAt(index);
|
|
43
56
|
}
|
|
44
57
|
}
|
|
45
|
-
FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps:
|
|
46
|
-
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 <!--
|
|
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 });
|
|
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 });
|
|
47
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
48
61
|
type: Component,
|
|
49
|
-
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 <!--
|
|
50
|
-
}] });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
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"] }]
|
|
63
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1ncm91cC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY3Jpc3ByLWZvcm1zL3NyYy9saWIvZm9ybS1ncm91cC1saXN0L2Zvcm0tZ3JvdXAtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NyaXNwci1mb3Jtcy9zcmMvbGliL2Zvcm0tZ3JvdXAtbGlzdC9mb3JtLWdyb3VwLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUk5RixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7Ozs7Ozs7Ozs7QUFFeEUsTUFBTSxhQUFhLEdBQWlDO0lBQ2xELGNBQWMsRUFBRSxVQUFVO0lBQzFCLGFBQWEsRUFBRSxDQUFDO0NBQ2pCLENBQUM7QUFFRixNQUFNLGtCQUFrQixHQUFHLGtCQUFrQixDQUFzQixvQkFBb0IsQ0FBQyxDQUFDO0FBT3pGLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxrQkFBa0I7SUFLNUQsWUFBb0IsR0FBc0I7UUFDeEMsS0FBSyxFQUFFLENBQUM7UUFEVSxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUoxQyxrQkFBYSxHQUFHLGFBQWEsQ0FBQTtJQU03QixDQUFDO0lBRUQsUUFBUTtRQUNOLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQixnRkFBZ0Y7SUFDbEYsQ0FBQztJQUVELGVBQWUsQ0FBQyxNQUFhO1FBQzNCLElBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNmLElBQUcsTUFBTSxFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUU7Z0JBQ3JCLDhFQUE4RTtnQkFDOUUsTUFBTSxhQUFhLEdBQU0sSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUM7Z0JBQzVDLElBQUcsYUFBYSxDQUFDLE1BQU0sRUFBRTtvQkFDdkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQztpQkFDdEI7Z0JBQ0QsTUFBTSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQzthQUUvQztpQkFBTSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsa0JBQWtCLEVBQUU7Z0JBQ3pDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQTthQUNoQjtZQUNELDBDQUEwQztZQUMxQyxVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDM0IsQ0FBQyxDQUFDLENBQUE7U0FDSDtJQUNILENBQUM7SUFFRCxRQUFRLENBQUMsS0FBSyxHQUFHLElBQUk7UUFDbkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUN2RSwwQ0FBMEM7UUFDMUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0IsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWE7UUFDdkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQzs7bUhBNUNVLHNCQUFzQjt1R0FBdEIsc0JBQXNCLHFGQ25CbkMsKzJDQTJDQTsyRkR4QmEsc0JBQXNCO2tCQU5sQyxTQUFTOytCQUNFLHdCQUF3QixtQkFHakIsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ2hhbmdlRGV0ZWN0b3JSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Hcm91cCwgRm9ybUFycmF5IH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgdHlwZSB7IEZvcm1Hcm91cExpc3RDb25maWcgfSBmcm9tICcuLi9tb2RlbHMnO1xuaW1wb3J0IHsgY3JlYXRlQ29udHJvbEZvclR5cGUgfSBmcm9tICcuLi9mb3JtLmhlbHBlcnMnO1xuaW1wb3J0IHsgQ3Jpc3ByRmllbGRDb21wb25lbnQsIGNyaXNwckNvbnRyb2xNaXhpbiB9IGZyb20gJy4uL2Fic3RyYWN0cyc7XG5cbmNvbnN0IGRlZmF1bHRDb25maWc6IFBhcnRpYWw8Rm9ybUdyb3VwTGlzdENvbmZpZz4gPSB7XG4gIGFkZEJ1dHRvbkxhYmVsOiAnQUREIElURU0nLFxuICBtaW5MaXN0TGVuZ3RoOiAxLFxufTtcblxuY29uc3QgRm9ybUdyb3VwTGlzdE1peGluID0gY3Jpc3ByQ29udHJvbE1peGluPEZvcm1Hcm91cExpc3RDb25maWc+KENyaXNwckZpZWxkQ29tcG9uZW50KTtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NyaXNwci1mb3JtLWdyb3VwLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1ncm91cC1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZm9ybS1ncm91cC1saXN0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1Hcm91cExpc3RDb21wb25lbnQgZXh0ZW5kcyBGb3JtR3JvdXBMaXN0TWl4aW4gaW1wbGVtZW50cyBPbkluaXQge1xuICBkZWZhdWx0Q29uZmlnID0gZGVmYXVsdENvbmZpZ1xuICBncm91cDogRm9ybUdyb3VwO1xuICBjb250cm9sOiBGb3JtQXJyYXk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgLy8gVE9ETzogdGhpcyBpcyByZXF1aXJlZCB0byBuZ0ZvciBvZiBjb250cm9scyBpbiB0ZW1wbGF0ZSwgbXVzdCBiZSBhIGJldHRlciB3YXlcbiAgfVxuXG4gIHNldENvbnRyb2xWYWx1ZSh2YWx1ZXM6IGFueVtdKSB7XG4gICAgaWYodGhpcy5jb250cm9sKSB7XG4gICAgICBpZih2YWx1ZXM/Lmxlbmd0aCA+IDApIHtcbiAgICAgICAgLy8gY2xlYXIgYW55IGV4aXN0aW5nIHZhbHVlcyBzbyB0aGF0IG5ldyB2YWx1ZXMgZG9uJ3QgY29uY2F0ZW5hdGUgb250byB0aGUgb2xkXG4gICAgICAgIGNvbnN0IGN1cnJlbnRWYWx1ZXM6W10gPSB0aGlzLmNvbnRyb2wudmFsdWU7XG4gICAgICAgIGlmKGN1cnJlbnRWYWx1ZXMubGVuZ3RoKSB7XG4gICAgICAgICAgdGhpcy5jb250cm9sLmNsZWFyKCk7XG4gICAgICAgIH1cbiAgICAgICAgdmFsdWVzLmZvckVhY2godmFsdWUgPT4gdGhpcy5hZGRHcm91cCh2YWx1ZSkpO1xuXG4gICAgICB9IGVsc2UgaWYgKHRoaXMuY29uZmlnLmRpc3BsYXlJbml0aWFsSXRlbSkge1xuICAgICAgICB0aGlzLmFkZEdyb3VwKClcbiAgICAgIH1cbiAgICAgIC8vIG5lZWRlZCB0byBlbnN1cmUgbmV3IGFycmF5IGl0ZW1zIHJlbmRlclxuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH0pXG4gICAgfVxuICB9XG5cbiAgYWRkR3JvdXAodmFsdWUgPSBudWxsKSB7XG4gICAgdGhpcy5jb250cm9sLnB1c2goY3JlYXRlQ29udHJvbEZvclR5cGUodGhpcy5jb25maWcuaXRlbUNvbmZpZywgdmFsdWUpKTtcbiAgICAvLyBuZWVkZWQgdG8gZW5zdXJlIG5ldyBhcnJheSBpdGVtcyByZW5kZXJcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICB9KVxuICB9XG5cbiAgZGVsZXRlR3JvdXAoaW5kZXg6IG51bWJlcikge1xuICAgIHRoaXMuY29udHJvbC5yZW1vdmVBdChpbmRleCk7XG4gIH1cbn1cbiIsIlxuPGNyaXNwci1maWVsZC1jb250YWluZXJcbiAgW2NvbmZpZ109XCJjb25maWdcIlxuICBbZ3JvdXBdPVwiZ3JvdXBcIlxuICBbZm9ybUdyb3VwXT1cImdyb3VwXCI+XG5cbiAgPGRpdiBbZm9ybUFycmF5TmFtZV09XCJjb25maWcuY29udHJvbE5hbWVcIj5cbiAgICA8IS0tIERvbid0IGFkZCB0cmFja0J5IGZ1bmN0aW9uLCBpdCBjb25mdXNlcyB0aGUgc3RhdGUgb2YgdGhlIGFycmF5IC0tPlxuICAgIDxkaXYgKm5nRm9yPVwibGV0IGNvbnRyb2wgb2YgY29udHJvbD8uY29udHJvbHM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgIDwhLS0gVE9ETzogdXNlIGNvbnRlbnQgcHJvamVjdGlvbiB0byBhbGxvdyBjdXN0b20gaXRlbSBsYWJlbCBjb21wb25lbnQgLS0+XG4gICAgICA8ZGl2IGNsYXNzPVwiaXRlbS1oZWFkZXJcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJtYXQtaDJcIj4ge3sgY29uZmlnLml0ZW1MYWJlbEJ1aWxkZXIgPyBjb25maWcuaXRlbUxhYmVsQnVpbGRlcihpKSA6ICdJdGVtICcgKyAoaSArIDEpIH19IDwvc3Bhbj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICpuZ0lmPVwiaSArIDEgPiBjb25maWcubWluTGlzdExlbmd0aFwiPlxuICAgICAgICAgIDxtYXQtaWNvbiAoY2xpY2spPVwiZGVsZXRlR3JvdXAoaSlcIj5kZWxldGU8L21hdC1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdlxuICAgICAgICBbZm9ybUdyb3VwTmFtZV09XCJpXCI+XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAqbmdGb3I9XCJsZXQgZmllbGQgb2YgY29uZmlnLml0ZW1Db25maWcuZmllbGRzO1wiXG4gICAgICAgICAgY3Jpc3ByRmllbGRcbiAgICAgICAgICBbY29uZmlnXT1cImZpZWxkXCJcbiAgICAgICAgICBbdmFsdWVdPVwiY29udHJvbC52YWx1ZSB8IGluaXRpYWxDb250cm9sVmFsdWUgOiBmaWVsZFwiXG4gICAgICAgICAgW2dyb3VwXT1cImNvbnRyb2xcIj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJncm91cC1mb290ZXJcIj5cbiAgICA8YnV0dG9uXG4gICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgIGNsYXNzPVwiYWRkXCJcbiAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgICBbY29sb3JdPVwiY29uZmlnLmFkZEJ1dHRvbkNvbG9yXCJcbiAgICAgIChjbGljayk9XCJhZGRHcm91cCgpXCI+XG4gICAgICB7e2NvbmZpZy5hZGRJdGVtTGFiZWwgfHwgY29uZmlnLmFkZEJ1dHRvbkxhYmVsfX1cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG5cbjwvY3Jpc3ByLWZpZWxkLWNvbnRhaW5lcj5cbiJdfQ==
|
|
@@ -1579,16 +1579,13 @@ function isControlOrButtonComponent(component) {
|
|
|
1579
1579
|
}
|
|
1580
1580
|
|
|
1581
1581
|
class CrisprFieldDirective {
|
|
1582
|
-
constructor(container, renderer
|
|
1582
|
+
constructor(container, renderer) {
|
|
1583
1583
|
this.container = container;
|
|
1584
1584
|
this.renderer = renderer;
|
|
1585
|
-
this.cdr = cdr;
|
|
1586
1585
|
}
|
|
1587
1586
|
set value(value) {
|
|
1588
1587
|
this._value = value;
|
|
1589
|
-
|
|
1590
|
-
this.component.value = value;
|
|
1591
|
-
}
|
|
1588
|
+
this.updateComponentValue(value);
|
|
1592
1589
|
}
|
|
1593
1590
|
;
|
|
1594
1591
|
get value() {
|
|
@@ -1606,10 +1603,7 @@ class CrisprFieldDirective {
|
|
|
1606
1603
|
if (isControlOrButtonComponent(this.component)) {
|
|
1607
1604
|
this.component.group = this.group;
|
|
1608
1605
|
}
|
|
1609
|
-
|
|
1610
|
-
this.component.value = this.value;
|
|
1611
|
-
}
|
|
1612
|
-
this.cdr.detectChanges();
|
|
1606
|
+
this.updateComponentValue(this.value);
|
|
1613
1607
|
// adds any config classes to the dynamically generated component
|
|
1614
1608
|
// doing this here keeps us from having to extend a base component into each field component individually
|
|
1615
1609
|
if (!this.config.classes)
|
|
@@ -1625,15 +1619,20 @@ class CrisprFieldDirective {
|
|
|
1625
1619
|
});
|
|
1626
1620
|
});
|
|
1627
1621
|
}
|
|
1622
|
+
updateComponentValue(value) {
|
|
1623
|
+
if (this.component && isControlComponent(this.component)) {
|
|
1624
|
+
this.component.value = value;
|
|
1625
|
+
}
|
|
1626
|
+
}
|
|
1628
1627
|
}
|
|
1629
|
-
CrisprFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }
|
|
1628
|
+
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 });
|
|
1630
1629
|
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 });
|
|
1631
1630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
|
|
1632
1631
|
type: Directive,
|
|
1633
1632
|
args: [{
|
|
1634
1633
|
selector: '[crisprField]'
|
|
1635
1634
|
}]
|
|
1636
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }
|
|
1635
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { config: [{
|
|
1637
1636
|
type: Input
|
|
1638
1637
|
}], group: [{
|
|
1639
1638
|
type: Input
|
|
@@ -1687,7 +1686,6 @@ class CrisprFormComponent {
|
|
|
1687
1686
|
// proxy value and status change events through to consuming component
|
|
1688
1687
|
this.valueChanges = this.form.valueChanges;
|
|
1689
1688
|
this.statusChanges = this.form.statusChanges;
|
|
1690
|
-
this.subs = [];
|
|
1691
1689
|
}
|
|
1692
1690
|
ngOnInit() {
|
|
1693
1691
|
// build out the form, note that we pass in the form as the third argument and the function modifies it
|
|
@@ -1702,10 +1700,10 @@ class CrisprFormComponent {
|
|
|
1702
1700
|
}
|
|
1703
1701
|
}
|
|
1704
1702
|
CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1705
|
-
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 },
|
|
1703
|
+
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 });
|
|
1706
1704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
|
|
1707
1705
|
type: Component,
|
|
1708
|
-
args: [{ selector: 'crispr-form',
|
|
1706
|
+
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"] }]
|
|
1709
1707
|
}], propDecorators: { config: [{
|
|
1710
1708
|
type: Input
|
|
1711
1709
|
}], form: [{
|
|
@@ -1729,38 +1727,51 @@ const defaultConfig = {
|
|
|
1729
1727
|
};
|
|
1730
1728
|
const FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
|
|
1731
1729
|
class FormGroupListComponent extends FormGroupListMixin {
|
|
1732
|
-
constructor() {
|
|
1733
|
-
super(
|
|
1730
|
+
constructor(cdr) {
|
|
1731
|
+
super();
|
|
1732
|
+
this.cdr = cdr;
|
|
1734
1733
|
this.defaultConfig = defaultConfig;
|
|
1735
1734
|
}
|
|
1736
1735
|
ngOnInit() {
|
|
1737
1736
|
super.ngOnInit();
|
|
1738
1737
|
// TODO: this is required to ngFor of controls in template, must be a better way
|
|
1739
|
-
this.formArray = this.control;
|
|
1740
1738
|
}
|
|
1741
1739
|
setControlValue(values) {
|
|
1742
1740
|
if (this.control) {
|
|
1743
1741
|
if ((values === null || values === void 0 ? void 0 : values.length) > 0) {
|
|
1742
|
+
// clear any existing values so that new values don't concatenate onto the old
|
|
1743
|
+
const currentValues = this.control.value;
|
|
1744
|
+
if (currentValues.length) {
|
|
1745
|
+
this.control.clear();
|
|
1746
|
+
}
|
|
1744
1747
|
values.forEach(value => this.addGroup(value));
|
|
1745
1748
|
}
|
|
1746
1749
|
else if (this.config.displayInitialItem) {
|
|
1747
1750
|
this.addGroup();
|
|
1748
1751
|
}
|
|
1752
|
+
// needed to ensure new array items render
|
|
1753
|
+
setTimeout(() => {
|
|
1754
|
+
this.cdr.detectChanges();
|
|
1755
|
+
});
|
|
1749
1756
|
}
|
|
1750
1757
|
}
|
|
1751
1758
|
addGroup(value = null) {
|
|
1752
1759
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
1760
|
+
// needed to ensure new array items render
|
|
1761
|
+
setTimeout(() => {
|
|
1762
|
+
this.cdr.detectChanges();
|
|
1763
|
+
});
|
|
1753
1764
|
}
|
|
1754
1765
|
deleteGroup(index) {
|
|
1755
1766
|
this.control.removeAt(index);
|
|
1756
1767
|
}
|
|
1757
1768
|
}
|
|
1758
|
-
FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps:
|
|
1759
|
-
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 <!--
|
|
1769
|
+
FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1770
|
+
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 });
|
|
1760
1771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
1761
1772
|
type: Component,
|
|
1762
|
-
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 <!--
|
|
1763
|
-
}] });
|
|
1773
|
+
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"] }]
|
|
1774
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1764
1775
|
|
|
1765
1776
|
class CrisprPipesModule {
|
|
1766
1777
|
}
|