@3kles/kles-material-dynamicforms 1.1.17 → 1.1.20
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/3kles-kles-material-dynamicforms.metadata.json +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.js +30 -8
- package/bundles/3kles-kles-material-dynamicforms.umd.js.map +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js +2 -2
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js.map +1 -1
- package/esm2015/lib/fields/field.abstract.js +23 -4
- package/esm2015/lib/fields/group.component.js +2 -3
- package/esm2015/lib/fields/list-field.component.js +7 -5
- package/esm2015/lib/fields/select.component.js +8 -4
- package/esm2015/lib/fields/select.search.component.js +5 -5
- package/esm2015/lib/interfaces/directive.interface.js +1 -0
- package/esm2015/lib/interfaces/field.config.interface.js +1 -1
- package/esm2015/public-api.js +1 -1
- package/esm5/lib/fields/field.abstract.js +20 -2
- package/esm5/lib/fields/group.component.js +2 -2
- package/esm5/lib/fields/list-field.component.js +7 -5
- package/esm5/lib/fields/select.component.js +8 -4
- package/esm5/lib/fields/select.search.component.js +2 -2
- package/esm5/lib/interfaces/directive.interface.js +1 -0
- package/esm5/lib/interfaces/field.config.interface.js +1 -1
- package/esm5/public-api.js +1 -1
- package/fesm2015/3kles-kles-material-dynamicforms.js +36 -15
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +31 -9
- package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
- package/lib/fields/field.abstract.d.ts +4 -1
- package/lib/fields/list-field.component.d.ts +3 -2
- package/lib/fields/select.component.d.ts +3 -2
- package/lib/interfaces/directive.interface.d.ts +3 -0
- package/lib/interfaces/field.config.interface.d.ts +4 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -544,7 +544,8 @@
|
|
|
544
544
|
}());
|
|
545
545
|
|
|
546
546
|
var KlesFieldAbstract = /** @class */ (function () {
|
|
547
|
-
function KlesFieldAbstract() {
|
|
547
|
+
function KlesFieldAbstract(viewRef) {
|
|
548
|
+
this.viewRef = viewRef;
|
|
548
549
|
this._onDestroy = new rxjs.Subject();
|
|
549
550
|
}
|
|
550
551
|
KlesFieldAbstract.prototype.ngOnInit = function () {
|
|
@@ -560,10 +561,16 @@
|
|
|
560
561
|
}
|
|
561
562
|
// this.applyPipeTransform();
|
|
562
563
|
});
|
|
564
|
+
if (this.field.directive) {
|
|
565
|
+
this.directive = new this.field.directive(this.viewRef, this);
|
|
566
|
+
this.directive.ngOnInit();
|
|
567
|
+
}
|
|
563
568
|
};
|
|
564
569
|
KlesFieldAbstract.prototype.ngAfterViewInit = function () {
|
|
565
570
|
};
|
|
566
571
|
KlesFieldAbstract.prototype.ngOnDestroy = function () {
|
|
572
|
+
var _a;
|
|
573
|
+
(_a = this.directive) === null || _a === void 0 ? void 0 : _a.ngOnDestroy();
|
|
567
574
|
this._onDestroy.next();
|
|
568
575
|
this._onDestroy.complete();
|
|
569
576
|
};
|
|
@@ -589,6 +596,15 @@
|
|
|
589
596
|
}
|
|
590
597
|
}
|
|
591
598
|
};
|
|
599
|
+
KlesFieldAbstract.ctorParameters = function () { return [
|
|
600
|
+
{ type: core.ViewContainerRef }
|
|
601
|
+
]; };
|
|
602
|
+
__decorate([
|
|
603
|
+
core.HostBinding('attr.klesDirective')
|
|
604
|
+
], KlesFieldAbstract.prototype, "directive", void 0);
|
|
605
|
+
KlesFieldAbstract = __decorate([
|
|
606
|
+
core.Directive()
|
|
607
|
+
], KlesFieldAbstract);
|
|
592
608
|
return KlesFieldAbstract;
|
|
593
609
|
}());
|
|
594
610
|
|
|
@@ -702,8 +718,9 @@
|
|
|
702
718
|
|
|
703
719
|
var KlesFormSelectComponent = /** @class */ (function (_super) {
|
|
704
720
|
__extends(KlesFormSelectComponent, _super);
|
|
705
|
-
function KlesFormSelectComponent() {
|
|
706
|
-
var _this = _super.call(this) || this;
|
|
721
|
+
function KlesFormSelectComponent(viewRef) {
|
|
722
|
+
var _this = _super.call(this, viewRef) || this;
|
|
723
|
+
_this.viewRef = viewRef;
|
|
707
724
|
_this.compareFn = function (o1, o2) {
|
|
708
725
|
if (_this.field.property && o1 && o2) {
|
|
709
726
|
return o1[_this.field.property] === o2[_this.field.property];
|
|
@@ -732,6 +749,9 @@
|
|
|
732
749
|
}
|
|
733
750
|
}
|
|
734
751
|
};
|
|
752
|
+
KlesFormSelectComponent.ctorParameters = function () { return [
|
|
753
|
+
{ type: core.ViewContainerRef }
|
|
754
|
+
]; };
|
|
735
755
|
__decorate([
|
|
736
756
|
core.ViewChild(scrolling.CdkVirtualScrollViewport)
|
|
737
757
|
], KlesFormSelectComponent.prototype, "cdkVirtualScrollViewport", void 0);
|
|
@@ -804,9 +824,10 @@
|
|
|
804
824
|
|
|
805
825
|
var KlesFormListFieldComponent = /** @class */ (function (_super) {
|
|
806
826
|
__extends(KlesFormListFieldComponent, _super);
|
|
807
|
-
function KlesFormListFieldComponent(fb) {
|
|
808
|
-
var _this = _super.call(this) || this;
|
|
827
|
+
function KlesFormListFieldComponent(fb, viewRef) {
|
|
828
|
+
var _this = _super.call(this, viewRef) || this;
|
|
809
829
|
_this.fb = fb;
|
|
830
|
+
_this.viewRef = viewRef;
|
|
810
831
|
return _this;
|
|
811
832
|
}
|
|
812
833
|
KlesFormListFieldComponent.prototype.ngOnInit = function () {
|
|
@@ -852,7 +873,8 @@
|
|
|
852
873
|
_super.prototype.ngOnDestroy.call(this);
|
|
853
874
|
};
|
|
854
875
|
KlesFormListFieldComponent.ctorParameters = function () { return [
|
|
855
|
-
{ type: forms.FormBuilder }
|
|
876
|
+
{ type: forms.FormBuilder },
|
|
877
|
+
{ type: core.ViewContainerRef }
|
|
856
878
|
]; };
|
|
857
879
|
KlesFormListFieldComponent = __decorate([
|
|
858
880
|
core.Component({
|
|
@@ -941,7 +963,7 @@
|
|
|
941
963
|
KlesFormGroupComponent = __decorate([
|
|
942
964
|
core.Component({
|
|
943
965
|
selector: 'kles-group',
|
|
944
|
-
template: "\n <div [formGroup]=\"group\" class=\"group-container\">\n <div [formGroupName]=\"field.name\" class=\"group-container\" [style.flex-direction]=\"field.direction || 'inherit'\" [ngClass]=\"field.ngClass\"
|
|
966
|
+
template: "\n <div [formGroup]=\"group\" class=\"group-container\">\n <div [formGroupName]=\"field.name\" class=\"group-container\" [style.flex-direction]=\"field.direction || 'inherit'\" [ngClass]=\"field.ngClass\">\n <ng-container *ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n </ng-container>\n </div>\n </div>\n",
|
|
945
967
|
styles: ['mat-form-field {width: calc(100%)}',
|
|
946
968
|
':host { display:flex; flex-direction: inherit}',
|
|
947
969
|
// '.row { gap:10px;}',
|
|
@@ -1073,7 +1095,7 @@
|
|
|
1073
1095
|
KlesFormSelectSearchComponent = __decorate([
|
|
1074
1096
|
core.Component({
|
|
1075
1097
|
selector: 'kles-form-select-search',
|
|
1076
|
-
template: "\n <mat-form-field class=\"margin-top\" [color]=\"field.color\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\n [placeholder]=\"field.placeholder | translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n <mat-select-trigger *ngIf=\"field.triggerComponent\">\n <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n </mat-select-trigger>\n\n <ng-container *ngIf=\"field.virtualScroll\">\n <mat-option>\n <ngx-mat-select-search [formControl]=\"searchControl\"\n placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n </mat-option>\n \n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=4*48>\n <
|
|
1098
|
+
template: "\n <mat-form-field class=\"margin-top\" [color]=\"field.color\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\n [placeholder]=\"field.placeholder | translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n <mat-select-trigger *ngIf=\"field.triggerComponent\">\n <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n </mat-select-trigger>\n\n <ng-container *ngIf=\"field.virtualScroll\">\n <mat-option>\n <ngx-mat-select-search [formControl]=\"searchControl\"\n placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n </mat-option>\n \n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=4*48>\n <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' | translate}}\n </mat-checkbox>\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n \n <ng-container *ngIf=\"field.multiple\">\n <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"field.autocompleteComponent\">\n <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n\n <ng-container *ngIf=\"field.multiple\">\n <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n <ng-container *ngIf=\"!field.virtualScroll\">\n \n <mat-option>\n <ngx-mat-select-search [formControl]=\"searchControl\"\n placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n </mat-option>\n \n <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' | translate}}\n </mat-checkbox>\n\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *ngFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container *ngIf=\"field.autocompleteComponent\">\n <mat-option *ngFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n\n </mat-select>\n <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n",
|
|
1077
1099
|
styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
|
|
1078
1100
|
})
|
|
1079
1101
|
], KlesFormSelectSearchComponent);
|