@tft/crispr-forms 13.0.17 → 13.0.18
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-component-map.const.mjs +2 -2
- package/esm2020/lib/field.directive.mjs +4 -3
- package/esm2020/lib/form-group-list/form-group-list.component.mjs +16 -3
- package/fesm2015/tft-crispr-forms.mjs +19 -5
- package/fesm2015/tft-crispr-forms.mjs.map +1 -1
- package/fesm2020/tft-crispr-forms.mjs +19 -5
- package/fesm2020/tft-crispr-forms.mjs.map +1 -1
- package/lib/field.directive.d.ts +1 -1
- package/lib/form-group-list/form-group-list.component.d.ts +7 -0
- package/package.json +1 -1
- package/tft-crispr-forms-13.0.18.tgz +0 -0
- package/tft-crispr-forms-13.0.17.tgz +0 -0
|
@@ -1565,7 +1565,7 @@ const FIELD_COMPONENTS = {
|
|
|
1565
1565
|
unitConversion: Promise.resolve().then(function () { return index$2; }).then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent)
|
|
1566
1566
|
};
|
|
1567
1567
|
function isControlComponent(component) {
|
|
1568
|
-
return isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
|
|
1568
|
+
return component && isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
|
|
1569
1569
|
}
|
|
1570
1570
|
function isControlOrButtonComponent(component) {
|
|
1571
1571
|
return isControlComponent(component) || component.config.controlType === ControlType.BUTTON;
|
|
@@ -1579,6 +1579,7 @@ class CrisprFieldDirective {
|
|
|
1579
1579
|
}
|
|
1580
1580
|
set value(value) {
|
|
1581
1581
|
this._value = value;
|
|
1582
|
+
// This is needed to keep the group list from resetting control values to the initial input value
|
|
1582
1583
|
this.updateComponentValue(value);
|
|
1583
1584
|
}
|
|
1584
1585
|
;
|
|
@@ -1612,9 +1613,9 @@ class CrisprFieldDirective {
|
|
|
1612
1613
|
});
|
|
1613
1614
|
}
|
|
1614
1615
|
updateComponentValue(value) {
|
|
1615
|
-
if (
|
|
1616
|
+
if (isControlComponent(this.component)) {
|
|
1616
1617
|
this.component.value = value;
|
|
1617
|
-
// SubGroups won't populate without this
|
|
1618
|
+
// SubGroups won't populate without this detectChanges
|
|
1618
1619
|
this.cdr.detectChanges();
|
|
1619
1620
|
}
|
|
1620
1621
|
}
|
|
@@ -1725,6 +1726,11 @@ class FormGroupListComponent extends FormGroupListMixin {
|
|
|
1725
1726
|
super();
|
|
1726
1727
|
this.cdr = cdr;
|
|
1727
1728
|
this.defaultConfig = defaultConfig;
|
|
1729
|
+
/**
|
|
1730
|
+
* By setting this to true when adding/removing items from array,
|
|
1731
|
+
* we can block original values from overwriting form values
|
|
1732
|
+
* */
|
|
1733
|
+
this.blockValue = false;
|
|
1728
1734
|
}
|
|
1729
1735
|
ngOnInit() {
|
|
1730
1736
|
super.ngOnInit();
|
|
@@ -1749,6 +1755,14 @@ class FormGroupListComponent extends FormGroupListMixin {
|
|
|
1749
1755
|
});
|
|
1750
1756
|
}
|
|
1751
1757
|
}
|
|
1758
|
+
clickDelete(index) {
|
|
1759
|
+
this.blockValue = true;
|
|
1760
|
+
this.deleteGroup(index);
|
|
1761
|
+
}
|
|
1762
|
+
clickAdd() {
|
|
1763
|
+
this.blockValue = true;
|
|
1764
|
+
this.addGroup();
|
|
1765
|
+
}
|
|
1752
1766
|
addGroup(value = null) {
|
|
1753
1767
|
this.control.push(createControlForType(this.config.itemConfig, value));
|
|
1754
1768
|
// needed to ensure new array items render
|
|
@@ -1761,10 +1775,10 @@ class FormGroupListComponent extends FormGroupListMixin {
|
|
|
1761
1775
|
}
|
|
1762
1776
|
}
|
|
1763
1777
|
FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
1778
|
+
FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FormGroupListComponent, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [formGroup]=\"group\">\n\n <div [formArrayName]=\"config.controlName\">\n <!-- Don't add trackBy function, it confuses the state of the array -->\n <div *ngFor=\"let con of control?.controls; let i = index;\">\n <!-- TODO: use content projection to allow custom item label component -->\n <div class=\"item-header\">\n <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n <button\n mat-icon-button\n type=\"button\"\n *ngIf=\"i + 1 > config.minListLength\">\n <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n </button>\n </div>\n <div\n [formGroup]=\"con\">\n <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n <ng-container\n *ngFor=\"let field of config.itemConfig.fields;\"\n crisprField\n [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n [config]=\"field\"\n [group]=\"con\">\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"group-footer\">\n <button\n type=\"button\"\n class=\"add\"\n mat-raised-button\n [color]=\"config.addButtonColor\"\n (click)=\"clickAdd()\">\n {{config.addItemLabel || config.addButtonLabel}}\n </button>\n </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i4$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
|
|
1765
1779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
|
|
1766
1780
|
type: Component,
|
|
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
|
|
1781
|
+
args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [formGroup]=\"group\">\n\n <div [formArrayName]=\"config.controlName\">\n <!-- Don't add trackBy function, it confuses the state of the array -->\n <div *ngFor=\"let con of control?.controls; let i = index;\">\n <!-- TODO: use content projection to allow custom item label component -->\n <div class=\"item-header\">\n <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n <button\n mat-icon-button\n type=\"button\"\n *ngIf=\"i + 1 > config.minListLength\">\n <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n </button>\n </div>\n <div\n [formGroup]=\"con\">\n <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n <ng-container\n *ngFor=\"let field of config.itemConfig.fields;\"\n crisprField\n [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n [config]=\"field\"\n [group]=\"con\">\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"group-footer\">\n <button\n type=\"button\"\n class=\"add\"\n mat-raised-button\n [color]=\"config.addButtonColor\"\n (click)=\"clickAdd()\">\n {{config.addItemLabel || config.addButtonLabel}}\n </button>\n </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"] }]
|
|
1768
1782
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1769
1783
|
|
|
1770
1784
|
class CrisprPipesModule {
|