@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
|
@@ -1572,15 +1572,14 @@ function isControlOrButtonComponent(component) {
|
|
|
1572
1572
|
}
|
|
1573
1573
|
|
|
1574
1574
|
class CrisprFieldDirective {
|
|
1575
|
-
constructor(container, renderer) {
|
|
1575
|
+
constructor(container, renderer, cdr) {
|
|
1576
1576
|
this.container = container;
|
|
1577
1577
|
this.renderer = renderer;
|
|
1578
|
+
this.cdr = cdr;
|
|
1578
1579
|
}
|
|
1579
1580
|
set value(value) {
|
|
1580
1581
|
this._value = value;
|
|
1581
|
-
|
|
1582
|
-
this.component.value = value;
|
|
1583
|
-
}
|
|
1582
|
+
this.updateComponentValue(value);
|
|
1584
1583
|
}
|
|
1585
1584
|
;
|
|
1586
1585
|
get value() {
|
|
@@ -1597,6 +1596,7 @@ class CrisprFieldDirective {
|
|
|
1597
1596
|
if (isControlOrButtonComponent(this.component)) {
|
|
1598
1597
|
this.component.group = this.group;
|
|
1599
1598
|
}
|
|
1599
|
+
this.updateComponentValue(this.value);
|
|
1600
1600
|
// adds any config classes to the dynamically generated component
|
|
1601
1601
|
// doing this here keeps us from having to extend a base component into each field component individually
|
|
1602
1602
|
if (!this.config.classes)
|
|
@@ -1611,15 +1611,22 @@ class CrisprFieldDirective {
|
|
|
1611
1611
|
}
|
|
1612
1612
|
});
|
|
1613
1613
|
}
|
|
1614
|
+
updateComponentValue(value) {
|
|
1615
|
+
if (this.component && isControlComponent(this.component)) {
|
|
1616
|
+
this.component.value = value;
|
|
1617
|
+
// SubGroups won't populate without this
|
|
1618
|
+
this.cdr.detectChanges();
|
|
1619
|
+
}
|
|
1620
|
+
}
|
|
1614
1621
|
}
|
|
1615
|
-
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 });
|
|
1622
|
+
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 });
|
|
1616
1623
|
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 });
|
|
1617
1624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
|
|
1618
1625
|
type: Directive,
|
|
1619
1626
|
args: [{
|
|
1620
1627
|
selector: '[crisprField]'
|
|
1621
1628
|
}]
|
|
1622
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { config: [{
|
|
1629
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
1623
1630
|
type: Input
|
|
1624
1631
|
}], group: [{
|
|
1625
1632
|
type: Input
|
|
@@ -1673,7 +1680,6 @@ class CrisprFormComponent {
|
|
|
1673
1680
|
// proxy value and status change events through to consuming component
|
|
1674
1681
|
this.valueChanges = this.form.valueChanges;
|
|
1675
1682
|
this.statusChanges = this.form.statusChanges;
|
|
1676
|
-
this.subs = [];
|
|
1677
1683
|
}
|
|
1678
1684
|
ngOnInit() {
|
|
1679
1685
|
// build out the form, note that we pass in the form as the third argument and the function modifies it
|
|
@@ -1688,10 +1694,10 @@ class CrisprFormComponent {
|
|
|
1688
1694
|
}
|
|
1689
1695
|
}
|
|
1690
1696
|
CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1691
|
-
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 },
|
|
1697
|
+
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 });
|
|
1692
1698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
|
|
1693
1699
|
type: Component,
|
|
1694
|
-
args: [{ selector: 'crispr-form',
|
|
1700
|
+
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"] }]
|
|
1695
1701
|
}], propDecorators: { config: [{
|
|
1696
1702
|
type: Input
|
|
1697
1703
|
}], form: [{
|
|
@@ -1723,33 +1729,42 @@ class FormGroupListComponent extends FormGroupListMixin {
|
|
|
1723
1729
|
ngOnInit() {
|
|
1724
1730
|
super.ngOnInit();
|
|
1725
1731
|
// TODO: this is required to ngFor of controls in template, must be a better way
|
|
1726
|
-
this.formArray = this.control;
|
|
1727
1732
|
}
|
|
1728
1733
|
setControlValue(values) {
|
|
1729
1734
|
if (this.control) {
|
|
1730
1735
|
if (values?.length > 0) {
|
|
1736
|
+
// clear any existing values so that new values don't concatenate onto the old
|
|
1737
|
+
const currentValues = this.control.value;
|
|
1738
|
+
if (currentValues.length) {
|
|
1739
|
+
this.control.clear();
|
|
1740
|
+
}
|
|
1731
1741
|
values.forEach(value => this.addGroup(value));
|
|
1732
|
-
setTimeout(() => {
|
|
1733
|
-
this.cdr.detectChanges();
|
|
1734
|
-
});
|
|
1735
1742
|
}
|
|
1736
1743
|
else if (this.config.displayInitialItem) {
|
|
1737
1744
|
this.addGroup();
|
|
1738
1745
|
}
|
|
1746
|
+
// needed to ensure new array items render
|
|
1747
|
+
setTimeout(() => {
|
|
1748
|
+
this.cdr.detectChanges();
|
|
1749
|
+
});
|
|
1739
1750
|
}
|
|
1740
1751
|
}
|
|
1741
1752
|
addGroup(value = null) {
|
|
1742
1753
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
1754
|
+
// needed to ensure new array items render
|
|
1755
|
+
setTimeout(() => {
|
|
1756
|
+
this.cdr.detectChanges();
|
|
1757
|
+
});
|
|
1743
1758
|
}
|
|
1744
1759
|
deleteGroup(index) {
|
|
1745
1760
|
this.control.removeAt(index);
|
|
1746
1761
|
}
|
|
1747
1762
|
}
|
|
1748
1763
|
FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1749
|
-
FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FormGroupListComponent, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [formGroup]=\"group\">\n\n <div [formArrayName]=\"config.controlName\">\n <!--
|
|
1764
|
+
FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FormGroupListComponent, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [formGroup]=\"group\">\n\n <div [formArrayName]=\"config.controlName\">\n <!-- Don't add trackBy function, it confuses the state of the array -->\n <div *ngFor=\"let control of 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 });
|
|
1750
1765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
1751
1766
|
type: Component,
|
|
1752
|
-
args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [formGroup]=\"group\">\n\n <div [formArrayName]=\"config.controlName\">\n <!--
|
|
1767
|
+
args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [formGroup]=\"group\">\n\n <div [formArrayName]=\"config.controlName\">\n <!-- Don't add trackBy function, it confuses the state of the array -->\n <div *ngFor=\"let control of 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"] }]
|
|
1753
1768
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1754
1769
|
|
|
1755
1770
|
class CrisprPipesModule {
|