@3kles/kles-material-dynamicforms 1.1.11 → 1.1.14
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 +8 -7
- 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/group.component.js +5 -3
- package/esm2015/lib/fields/input.clearable.component.js +2 -2
- package/esm2015/lib/fields/select.component.js +5 -5
- package/esm2015/lib/fields/select.search.component.js +7 -7
- package/esm5/lib/fields/group.component.js +4 -3
- package/esm5/lib/fields/input.clearable.component.js +2 -2
- package/esm5/lib/fields/select.component.js +2 -2
- package/esm5/lib/fields/select.search.component.js +4 -4
- package/fesm2015/3kles-kles-material-dynamicforms.js +15 -13
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +8 -7
- package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
- package/package.json +1 -1
|
@@ -562,7 +562,7 @@ var KlesFormSelectComponent = /** @class */ (function (_super) {
|
|
|
562
562
|
KlesFormSelectComponent = __decorate([
|
|
563
563
|
Component({
|
|
564
564
|
selector: 'kles-form-select',
|
|
565
|
-
template: "\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\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\" [field]=\"field\"></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\" [field]=\"field\"></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\" [field]=\"field\"></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\" [field]=\"field\"></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\" [field]=\"field\"></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",
|
|
565
|
+
template: "\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\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\" [field]=\"field\"></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\" [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 options$ | 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 <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\" [disabled]=\"item?.disabled\">\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\" [disabled]=\"item?.disabled\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></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\" [field]=\"field\"></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\" [field]=\"field\"></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",
|
|
566
566
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
567
567
|
})
|
|
568
568
|
], KlesFormSelectComponent);
|
|
@@ -762,10 +762,11 @@ var KlesFormGroupComponent = /** @class */ (function (_super) {
|
|
|
762
762
|
KlesFormGroupComponent = __decorate([
|
|
763
763
|
Component({
|
|
764
764
|
selector: 'kles-group',
|
|
765
|
-
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",
|
|
765
|
+
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 [ngClass]=\"field.direction === 'column' ? null: 'row'\" >\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",
|
|
766
766
|
styles: ['mat-form-field {width: calc(100%)}',
|
|
767
767
|
':host { display:flex; flex-direction: inherit}',
|
|
768
|
-
'.
|
|
768
|
+
'.row { gap:10px;}',
|
|
769
|
+
'.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}']
|
|
769
770
|
})
|
|
770
771
|
], KlesFormGroupComponent);
|
|
771
772
|
return KlesFormGroupComponent;
|
|
@@ -843,7 +844,7 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
|
|
|
843
844
|
})).subscribe(this.optionsFiltered$);
|
|
844
845
|
this.group.controls[this.field.name]
|
|
845
846
|
.valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.group.controls[this.field.name].value), switchMap(function (selected) {
|
|
846
|
-
return _this.optionsFiltered$.pipe(map(function (options) {
|
|
847
|
+
return _this.optionsFiltered$.pipe(map(function (options) { return options.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.disabled); }); }), map(function (options) {
|
|
847
848
|
if (!selected) {
|
|
848
849
|
return false;
|
|
849
850
|
}
|
|
@@ -865,7 +866,7 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
|
|
|
865
866
|
KlesFormSelectSearchComponent.prototype.toggleAllSelection = function (state) {
|
|
866
867
|
var _this = this;
|
|
867
868
|
if (state.checked) {
|
|
868
|
-
this.optionsFiltered$.pipe(take(1)).subscribe(function (options) {
|
|
869
|
+
this.optionsFiltered$.pipe(take(1), map(function (options) { return options.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.disabled); }); })).subscribe(function (options) {
|
|
869
870
|
if (options.length > 0) {
|
|
870
871
|
_this.group.controls[_this.field.name].patchValue(options.slice());
|
|
871
872
|
}
|
|
@@ -892,7 +893,7 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
|
|
|
892
893
|
KlesFormSelectSearchComponent = __decorate([
|
|
893
894
|
Component({
|
|
894
895
|
selector: 'kles-form-select-search',
|
|
895
|
-
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)\" [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 <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\" [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\">{{(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\" [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",
|
|
896
|
+
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)\" [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 <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\" [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",
|
|
896
897
|
styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
|
|
897
898
|
})
|
|
898
899
|
], KlesFormSelectSearchComponent);
|
|
@@ -1544,7 +1545,7 @@ var KlesFormInputClearableComponent = /** @class */ (function (_super) {
|
|
|
1544
1545
|
KlesFormInputClearableComponent = __decorate([
|
|
1545
1546
|
Component({
|
|
1546
1547
|
selector: 'kles-form-input-clearable',
|
|
1547
|
-
template: "\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n\n <ng-container *ngIf=\"field.autocomplete; else notAutoComplete\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf=\"field.autocompleteComponent\">\n <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n </ng-template>\n <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" type=\"button\"\n (click)=\"group.controls[field.name].reset();\">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\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 ",
|
|
1548
|
+
template: "\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n\n <ng-container *ngIf=\"field.autocomplete; else notAutoComplete\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n <ng-container *ngIf=\"!field.autocompleteComponent\">\n <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf=\"field.autocompleteComponent\">\n <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n </ng-template>\n <button *ngIf=\"!group.get(field.name).disabled\" mat-button matSuffix mat-icon-button aria-label=\"Clear\" type=\"button\"\n (click)=\"group.controls[field.name].reset();\">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\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 ",
|
|
1548
1549
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
1549
1550
|
})
|
|
1550
1551
|
], KlesFormInputClearableComponent);
|