@3kles/kles-material-dynamicforms 1.0.4 → 1.0.8
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 +59 -19
- 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/directive/dynamic-field.directive.js +4 -2
- package/esm2015/lib/fields/button-toogle-group.component.js +37 -0
- package/esm2015/lib/fields/buttonchecker-form.component.js +3 -2
- package/esm2015/lib/fields/input.component.js +1 -3
- package/esm2015/lib/fields/select.component.js +7 -12
- package/esm2015/lib/fields/select.search.component.js +22 -20
- package/esm2015/lib/forms/buttonchecker-control.component.js +4 -2
- package/esm2015/lib/interfaces/field.config.interface.js +1 -1
- package/esm2015/lib/kles-material-dynamicforms.module.js +4 -2
- package/esm2015/lib/modules/material.module.js +6 -3
- package/esm2015/public-api.js +2 -1
- package/esm5/lib/directive/dynamic-field.directive.js +4 -2
- package/esm5/lib/fields/button-toogle-group.component.js +33 -0
- package/esm5/lib/fields/buttonchecker-form.component.js +2 -2
- package/esm5/lib/fields/input.component.js +1 -3
- package/esm5/lib/fields/select.component.js +3 -5
- package/esm5/lib/fields/select.search.component.js +15 -4
- package/esm5/lib/forms/buttonchecker-control.component.js +2 -2
- package/esm5/lib/interfaces/field.config.interface.js +1 -1
- package/esm5/lib/kles-material-dynamicforms.module.js +4 -2
- package/esm5/lib/modules/material.module.js +6 -3
- package/esm5/public-api.js +2 -1
- package/fesm2015/3kles-kles-material-dynamicforms.js +74 -39
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +56 -16
- package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
- package/lib/fields/button-toogle-group.component.d.ts +7 -0
- package/lib/fields/select.component.d.ts +0 -1
- package/lib/interfaces/field.config.interface.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/slider'), require('@angular/material/button'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/sidenav'), require('@angular/material/badge'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/form-field'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/radio'), require('@angular/material/chips'), require('@angular/material/tooltip'), require('@angular/material/table'), require('@angular/material/paginator'), require('@angular/material/card'), require('@angular/material/menu'), require('@angular/cdk/table'), require('@angular/material/tabs'), require('@angular/material/progress-spinner'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/material/progress-bar'), require('@angular/material/sort'), require('@angular/material/expansion'), require('@angular/material/snack-bar'), require('@angular/material/tree'), require('@angular/material/slide-toggle'), require('ngx-color-picker'), require('@angular/flex-layout'), require('@ngx-translate/core'), require('ngx-mat-select-search')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@3kles/kles-material-dynamicforms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/slider', '@angular/material/button', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/sidenav', '@angular/material/badge', '@angular/material/list', '@angular/material/grid-list', '@angular/material/form-field', '@angular/material/datepicker', '@angular/material/input', '@angular/material/select', '@angular/material/radio', '@angular/material/chips', '@angular/material/tooltip', '@angular/material/table', '@angular/material/paginator', '@angular/material/card', '@angular/material/menu', '@angular/cdk/table', '@angular/material/tabs', '@angular/material/progress-spinner', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/material/progress-bar', '@angular/material/sort', '@angular/material/expansion', '@angular/material/snack-bar', '@angular/material/tree', '@angular/material/slide-toggle', 'ngx-color-picker', '@angular/flex-layout', '@ngx-translate/core', 'ngx-mat-select-search'], factory) :
|
|
4
|
-
(global = global || self, factory((global['3kles'] = global['3kles'] || {}, global['3kles']['kles-material-dynamicforms'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.slider, global.ng.material.button, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.sidenav, global.ng.material.badge, global.ng.material.list, global.ng.material.gridList, global.ng.material.formField, global.ng.material.datepicker, global.ng.material.input, global.ng.material.select, global.ng.material.radio, global.ng.material.chips, global.ng.material.tooltip, global.ng.material.table, global.ng.material.paginator, global.ng.material.card, global.ng.material.menu, global.ng.cdk.table, global.ng.material.tabs, global.ng.material.progressSpinner, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.material.progressBar, global.ng.material.sort, global.ng.material.expansion, global.ng.material.snackBar, global.ng.material.tree, global.ng.material.slideToggle, global.ngxColorPicker, global.ng.flexLayout, global.core$2, global.ngxMatSelectSearch));
|
|
5
|
-
}(this, (function (exports, core, common, forms, rxjs, operators, scrolling, core$1, slider, button, toolbar, icon, sidenav, badge, list, gridList, formField, datepicker, input, select, radio, chips, tooltip, table, paginator, card, menu, table$1, tabs, progressSpinner, checkbox, dialog, autocomplete, progressBar, sort, expansion, snackBar, tree, slideToggle, ngxColorPicker, flexLayout, core$2, ngxMatSelectSearch) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/slider'), require('@angular/material/button'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/sidenav'), require('@angular/material/badge'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/form-field'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/radio'), require('@angular/material/chips'), require('@angular/material/tooltip'), require('@angular/material/table'), require('@angular/material/paginator'), require('@angular/material/card'), require('@angular/material/menu'), require('@angular/cdk/table'), require('@angular/material/tabs'), require('@angular/material/progress-spinner'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/material/progress-bar'), require('@angular/material/sort'), require('@angular/material/expansion'), require('@angular/material/snack-bar'), require('@angular/material/tree'), require('@angular/material/slide-toggle'), require('ngx-color-picker'), require('@angular/material/button-toggle'), require('@angular/flex-layout'), require('@ngx-translate/core'), require('ngx-mat-select-search')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@3kles/kles-material-dynamicforms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/slider', '@angular/material/button', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/sidenav', '@angular/material/badge', '@angular/material/list', '@angular/material/grid-list', '@angular/material/form-field', '@angular/material/datepicker', '@angular/material/input', '@angular/material/select', '@angular/material/radio', '@angular/material/chips', '@angular/material/tooltip', '@angular/material/table', '@angular/material/paginator', '@angular/material/card', '@angular/material/menu', '@angular/cdk/table', '@angular/material/tabs', '@angular/material/progress-spinner', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/material/progress-bar', '@angular/material/sort', '@angular/material/expansion', '@angular/material/snack-bar', '@angular/material/tree', '@angular/material/slide-toggle', 'ngx-color-picker', '@angular/material/button-toggle', '@angular/flex-layout', '@ngx-translate/core', 'ngx-mat-select-search'], factory) :
|
|
4
|
+
(global = global || self, factory((global['3kles'] = global['3kles'] || {}, global['3kles']['kles-material-dynamicforms'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.slider, global.ng.material.button, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.sidenav, global.ng.material.badge, global.ng.material.list, global.ng.material.gridList, global.ng.material.formField, global.ng.material.datepicker, global.ng.material.input, global.ng.material.select, global.ng.material.radio, global.ng.material.chips, global.ng.material.tooltip, global.ng.material.table, global.ng.material.paginator, global.ng.material.card, global.ng.material.menu, global.ng.cdk.table, global.ng.material.tabs, global.ng.material.progressSpinner, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.material.progressBar, global.ng.material.sort, global.ng.material.expansion, global.ng.material.snackBar, global.ng.material.tree, global.ng.material.slideToggle, global.ngxColorPicker, global.ng.material.buttonToggle, global.ng.flexLayout, global.core$2, global.ngxMatSelectSearch));
|
|
5
|
+
}(this, (function (exports, core, common, forms, rxjs, operators, scrolling, core$1, slider, button, toolbar, icon, sidenav, badge, list, gridList, formField, datepicker, input, select, radio, chips, tooltip, table, paginator, card, menu, table$1, tabs, progressSpinner, checkbox, dialog, autocomplete, progressBar, sort, expansion, snackBar, tree, slideToggle, ngxColorPicker, buttonToggle, flexLayout, core$2, ngxMatSelectSearch) { 'use strict';
|
|
6
6
|
|
|
7
7
|
/*! *****************************************************************************
|
|
8
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -578,11 +578,9 @@
|
|
|
578
578
|
.pipe(operators.startWith(''),
|
|
579
579
|
// map(data => data ? this.filterData(data) : this.field.options.slice())
|
|
580
580
|
operators.switchMap(function (data) { return data ? _this.filterData(data) : _this.options$; }));
|
|
581
|
-
console.log('this.field.maxLength=', this.field.maxLength);
|
|
582
581
|
if (!this.field.maxLength) {
|
|
583
582
|
this.field.maxLength = 524288; // Max default input W3C
|
|
584
583
|
}
|
|
585
|
-
console.log('this.field.maxLength After=', this.field.maxLength);
|
|
586
584
|
_super.prototype.ngOnInit.call(this);
|
|
587
585
|
};
|
|
588
586
|
KlesFormInputComponent.prototype.isPending = function () {
|
|
@@ -647,9 +645,7 @@
|
|
|
647
645
|
var KlesFormSelectComponent = /** @class */ (function (_super) {
|
|
648
646
|
__extends(KlesFormSelectComponent, _super);
|
|
649
647
|
function KlesFormSelectComponent() {
|
|
650
|
-
|
|
651
|
-
_this.selected = [];
|
|
652
|
-
return _this;
|
|
648
|
+
return _super.call(this) || this;
|
|
653
649
|
}
|
|
654
650
|
KlesFormSelectComponent.prototype.ngOnInit = function () {
|
|
655
651
|
_super.prototype.ngOnInit.call(this);
|
|
@@ -677,7 +673,7 @@
|
|
|
677
673
|
KlesFormSelectComponent = __decorate([
|
|
678
674
|
core.Component({
|
|
679
675
|
selector: 'kles-form-select',
|
|
680
|
-
template: "\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n (openedChange)=\"openChange($event)\"\n [ngClass]=\"field.ngClass\" [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\"></ng-container>\n </mat-select-trigger>\n\n\n <ng-container *ngIf=\"!field.virtualScroll\">\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *ngFor=\"let item of options$ | async\" [value]=\"item\">{{(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 options$ | async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"field.virtualScroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=5*48>\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\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 {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf=\"!field.multiple\">\n
|
|
676
|
+
template: "\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n (openedChange)=\"openChange($event)\"\n [ngClass]=\"field.ngClass\" [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\"></ng-container>\n </mat-select-trigger>\n\n\n <ng-container *ngIf=\"!field.virtualScroll\">\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *ngFor=\"let item of options$ | async\" [value]=\"item\">{{(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 options$ | async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"field.virtualScroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=5*48>\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\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 {{(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 options$ | async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\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\"></ng-container>\n </mat-option>\n </ng-container>\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\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\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",
|
|
681
677
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
682
678
|
})
|
|
683
679
|
], KlesFormSelectComponent);
|
|
@@ -905,8 +901,19 @@
|
|
|
905
901
|
return _this.options$.pipe(operators.map(function (options) {
|
|
906
902
|
return options
|
|
907
903
|
.filter(function (option) {
|
|
908
|
-
if (_this.field.
|
|
909
|
-
return
|
|
904
|
+
if (_this.field.searchKeys && _this.field.searchKeys.length) {
|
|
905
|
+
return _this.field.searchKeys.some(function (searchKey) {
|
|
906
|
+
if (option[searchKey]) {
|
|
907
|
+
return option[searchKey].toString().toLowerCase().indexOf(search_1) > -1;
|
|
908
|
+
}
|
|
909
|
+
return false;
|
|
910
|
+
}) || (_this.field.property ?
|
|
911
|
+
option[_this.field.property].toString().toLowerCase().indexOf(search_1) > -1 : false);
|
|
912
|
+
}
|
|
913
|
+
else {
|
|
914
|
+
if (_this.field.property) {
|
|
915
|
+
return option[_this.field.property].toString().toLowerCase().indexOf(search_1) > -1;
|
|
916
|
+
}
|
|
910
917
|
}
|
|
911
918
|
return option.toString().toLowerCase().indexOf(search_1) > -1;
|
|
912
919
|
});
|
|
@@ -965,7 +972,7 @@
|
|
|
965
972
|
KlesFormSelectSearchComponent = __decorate([
|
|
966
973
|
core.Component({
|
|
967
974
|
selector: 'kles-form-select-search',
|
|
968
|
-
template: "\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n (openedChange)=\"openChange($event)\" \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\"></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 <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' | translate}}\n </mat-checkbox>\n <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\">{{(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
|
|
975
|
+
template: "\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n (openedChange)=\"openChange($event)\" \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\"></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 <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' | translate}}\n </mat-checkbox>\n <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\">{{(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\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></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\"></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\"></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\">{{(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\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></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",
|
|
969
976
|
styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
|
|
970
977
|
})
|
|
971
978
|
], KlesFormSelectSearchComponent);
|
|
@@ -1029,6 +1036,34 @@
|
|
|
1029
1036
|
return KlesFormSelectionListComponent;
|
|
1030
1037
|
}(KlesFieldAbstract));
|
|
1031
1038
|
|
|
1039
|
+
var KlesFormButtonToogleGroupComponent = /** @class */ (function (_super) {
|
|
1040
|
+
__extends(KlesFormButtonToogleGroupComponent, _super);
|
|
1041
|
+
function KlesFormButtonToogleGroupComponent() {
|
|
1042
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
1043
|
+
}
|
|
1044
|
+
KlesFormButtonToogleGroupComponent.prototype.ngOnInit = function () {
|
|
1045
|
+
_super.prototype.ngOnInit.call(this);
|
|
1046
|
+
if (!(this.field.options instanceof rxjs.Observable)) {
|
|
1047
|
+
this.options$ = rxjs.of(this.field.options);
|
|
1048
|
+
}
|
|
1049
|
+
else {
|
|
1050
|
+
this.options$ = this.field.options;
|
|
1051
|
+
}
|
|
1052
|
+
};
|
|
1053
|
+
KlesFormButtonToogleGroupComponent = __decorate([
|
|
1054
|
+
core.Component({
|
|
1055
|
+
selector: 'kles-form-button-toogle-group',
|
|
1056
|
+
template: "\n <div [formGroup]=\"group\" class=\"form-element\">\n <mat-button-toggle-group [formControlName]=\"field.name\" [multiple]=\"field.multiple\"\n [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n <mat-button-toggle *ngFor=\"let item of options$ | async\" [value]=\"item\">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n"
|
|
1057
|
+
})
|
|
1058
|
+
], KlesFormButtonToogleGroupComponent);
|
|
1059
|
+
return KlesFormButtonToogleGroupComponent;
|
|
1060
|
+
}(KlesFieldAbstract));
|
|
1061
|
+
// <mat-button-toggle-group [formControlName]="field.name">
|
|
1062
|
+
// <mat-button-toggle value="bold">Bold</mat-button-toggle>
|
|
1063
|
+
// <mat-button-toggle value="italic">Italic</mat-button-toggle>
|
|
1064
|
+
// <mat-button-toggle value="underline">Underline</mat-button-toggle>
|
|
1065
|
+
// </mat-button-toggle-group>
|
|
1066
|
+
|
|
1032
1067
|
var componentMapper = {
|
|
1033
1068
|
label: KlesFormLabelComponent,
|
|
1034
1069
|
input: KlesFormInputComponent,
|
|
@@ -1045,7 +1080,8 @@
|
|
|
1045
1080
|
selectSearch: KlesFormSelectSearchComponent,
|
|
1046
1081
|
lineBreak: KlesFormLineBreakComponent,
|
|
1047
1082
|
link: KlesFormLinkComponent,
|
|
1048
|
-
selectionList: KlesFormSelectionListComponent
|
|
1083
|
+
selectionList: KlesFormSelectionListComponent,
|
|
1084
|
+
buttonToogleGroup: KlesFormButtonToogleGroupComponent
|
|
1049
1085
|
};
|
|
1050
1086
|
var KlesDynamicFieldDirective = /** @class */ (function () {
|
|
1051
1087
|
function KlesDynamicFieldDirective(resolver, container) {
|
|
@@ -1154,7 +1190,8 @@
|
|
|
1154
1190
|
slider.MatSliderModule,
|
|
1155
1191
|
button.MatButtonModule,
|
|
1156
1192
|
slideToggle.MatSlideToggleModule,
|
|
1157
|
-
ngxColorPicker.ColorPickerModule
|
|
1193
|
+
ngxColorPicker.ColorPickerModule,
|
|
1194
|
+
buttonToggle.MatButtonToggleModule
|
|
1158
1195
|
],
|
|
1159
1196
|
exports: [
|
|
1160
1197
|
button.MatButtonModule,
|
|
@@ -1192,7 +1229,8 @@
|
|
|
1192
1229
|
slideToggle.MatSlideToggleModule,
|
|
1193
1230
|
ngxColorPicker.ColorPickerModule,
|
|
1194
1231
|
scrolling.ScrollingModule,
|
|
1195
|
-
scrolling.CdkScrollable
|
|
1232
|
+
scrolling.CdkScrollable,
|
|
1233
|
+
buttonToggle.MatButtonToggleModule
|
|
1196
1234
|
],
|
|
1197
1235
|
providers: [
|
|
1198
1236
|
datepicker.MatDatepickerModule,
|
|
@@ -1330,7 +1368,7 @@
|
|
|
1330
1368
|
KlesButtonCheckerComponent = KlesButtonCheckerComponent_1 = __decorate([
|
|
1331
1369
|
core.Component({
|
|
1332
1370
|
selector: 'kles-button-checker',
|
|
1333
|
-
template: "\n <span *ngIf=\"value.error && !value.busy\">\n <kles-button \n [classButton]=\"classButton\" \n [name]=\"name\" [label]=\"label\" [color]=\"color\" \n [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n [value]=\"value\" matBadge=\"{{countError()}}\" (click)=\"click($event)\">\n </kles-button>\n </span>\n <span style=\"text-align: center;\" *ngIf=\"value.busy||false\">\n <span style=\"text-align: center;margin-right: 10px\">\n <mat-spinner [diameter]=\"25\"></mat-spinner>\n </span>\n <span *ngIf=\"value.message\" style=\"margin-right: 10px\">\n {{value.message|translate}}...\n </span>\n </span>\n ",
|
|
1371
|
+
template: "\n <span *ngIf=\"value.error && !value.busy\">\n <kles-button \n [classButton]=\"classButton\" \n [name]=\"name\" [label]=\"label\" [color]=\"color\" \n [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n [value]=\"value\" \n [tooltip]=\"tooltip\"\n matBadge=\"{{countError()}}\" (click)=\"click($event)\">\n </kles-button>\n </span>\n <span style=\"text-align: center;\" *ngIf=\"value.busy||false\">\n <span style=\"text-align: center;margin-right: 10px\">\n <mat-spinner [diameter]=\"25\"></mat-spinner>\n </span>\n <span *ngIf=\"value.message\" style=\"margin-right: 10px\">\n {{value.message|translate}}...\n </span>\n </span>\n ",
|
|
1334
1372
|
providers: [
|
|
1335
1373
|
{
|
|
1336
1374
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1354,7 +1392,7 @@
|
|
|
1354
1392
|
KlesFormButtonCheckerComponent = __decorate([
|
|
1355
1393
|
core.Component({
|
|
1356
1394
|
selector: 'kles-form-button-checker',
|
|
1357
|
-
template: "\n <div [formGroup]=\"group\">\n <kles-button-checker\n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\">\n </kles-button-checker>\n </div>\n "
|
|
1395
|
+
template: "\n <div [formGroup]=\"group\">\n <kles-button-checker\n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\"\n [tooltip]=\"field.tooltip\">\n </kles-button-checker>\n </div>\n "
|
|
1358
1396
|
})
|
|
1359
1397
|
], KlesFormButtonCheckerComponent);
|
|
1360
1398
|
return KlesFormButtonCheckerComponent;
|
|
@@ -1650,7 +1688,8 @@
|
|
|
1650
1688
|
KlesFormLineBreakComponent,
|
|
1651
1689
|
KlesFormLinkComponent,
|
|
1652
1690
|
KlesFormSlideToggleComponent,
|
|
1653
|
-
KlesFormSelectionListComponent
|
|
1691
|
+
KlesFormSelectionListComponent,
|
|
1692
|
+
KlesFormButtonToogleGroupComponent
|
|
1654
1693
|
];
|
|
1655
1694
|
var directives = [KlesDynamicFieldDirective, KlesComponentDirective];
|
|
1656
1695
|
var pipes = [KlesTransformPipe, ArrayFormatPipe];
|
|
@@ -1728,6 +1767,7 @@
|
|
|
1728
1767
|
exports.KlesFormButtonCheckerComponent = KlesFormButtonCheckerComponent;
|
|
1729
1768
|
exports.KlesFormButtonComponent = KlesFormButtonComponent;
|
|
1730
1769
|
exports.KlesFormButtonFileComponent = KlesFormButtonFileComponent;
|
|
1770
|
+
exports.KlesFormButtonToogleGroupComponent = KlesFormButtonToogleGroupComponent;
|
|
1731
1771
|
exports.KlesFormCheckboxComponent = KlesFormCheckboxComponent;
|
|
1732
1772
|
exports.KlesFormChipComponent = KlesFormChipComponent;
|
|
1733
1773
|
exports.KlesFormColorComponent = KlesFormColorComponent;
|