@3kles/kles-material-dynamicforms 14.0.2 → 14.0.4
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/README.md +24 -24
- package/esm2020/3kles-kles-material-dynamicforms.mjs +4 -4
- package/esm2020/lib/decorators/component.decorator.mjs +7 -7
- package/esm2020/lib/directive/dynamic-component.directive.mjs +44 -44
- package/esm2020/lib/directive/dynamic-field.directive.mjs +50 -50
- package/esm2020/lib/dynamic-form.component.mjs +251 -247
- package/esm2020/lib/enums/type.enum.mjs +19 -19
- package/esm2020/lib/fields/array.component.mjs +57 -53
- package/esm2020/lib/fields/badge.component.mjs +40 -40
- package/esm2020/lib/fields/button-form.component.mjs +44 -44
- package/esm2020/lib/fields/button-submit.component.mjs +38 -38
- package/esm2020/lib/fields/button-toogle-group.component.mjs +51 -51
- package/esm2020/lib/fields/buttonchecker-form.component.mjs +44 -44
- package/esm2020/lib/fields/buttonfile-form.component.mjs +42 -42
- package/esm2020/lib/fields/checkbox.component.mjs +50 -50
- package/esm2020/lib/fields/chip.component.mjs +41 -41
- package/esm2020/lib/fields/color.component.mjs +84 -84
- package/esm2020/lib/fields/date.component.mjs +52 -52
- package/esm2020/lib/fields/field.abstract.mjs +66 -66
- package/esm2020/lib/fields/group.component.mjs +48 -44
- package/esm2020/lib/fields/icon.component.mjs +28 -28
- package/esm2020/lib/fields/input.clearable.component.mjs +112 -112
- package/esm2020/lib/fields/input.component.mjs +158 -158
- package/esm2020/lib/fields/label.component.mjs +40 -40
- package/esm2020/lib/fields/line-break.component.mjs +23 -23
- package/esm2020/lib/fields/link.component.mjs +32 -32
- package/esm2020/lib/fields/list-field.component.mjs +114 -114
- package/esm2020/lib/fields/radio.component.mjs +49 -49
- package/esm2020/lib/fields/select.component.mjs +211 -211
- package/esm2020/lib/fields/select.search.component.mjs +307 -307
- package/esm2020/lib/fields/selection-list.component.mjs +63 -63
- package/esm2020/lib/fields/slide-toggle.component.mjs +43 -43
- package/esm2020/lib/fields/text.component.mjs +40 -40
- package/esm2020/lib/fields/textarea.component.mjs +56 -56
- package/esm2020/lib/forms/button-control.component.mjs +115 -115
- package/esm2020/lib/forms/buttonchecker-control.component.mjs +85 -85
- package/esm2020/lib/forms/buttonfile-control.component.mjs +118 -118
- package/esm2020/lib/interfaces/component.interface.mjs +2 -2
- package/esm2020/lib/interfaces/directive.interface.mjs +2 -2
- package/esm2020/lib/interfaces/field.config.interface.mjs +2 -2
- package/esm2020/lib/interfaces/field.interface.mjs +2 -2
- package/esm2020/lib/interfaces/validator.interface.mjs +2 -2
- package/esm2020/lib/kles-material-dynamicforms.module.mjs +196 -191
- package/esm2020/lib/matcher/form-error.matcher.mjs +16 -16
- package/esm2020/lib/modules/material.module.mjs +278 -278
- package/esm2020/lib/pipe/array.pipe.mjs +22 -22
- package/esm2020/lib/pipe/transform.pipe.mjs +27 -27
- package/esm2020/lib/validators/autocomplete.validator.mjs +23 -23
- package/esm2020/public-api.mjs +59 -59
- package/fesm2015/3kles-kles-material-dynamicforms.mjs +2696 -2679
- package/fesm2015/3kles-kles-material-dynamicforms.mjs.map +1 -1
- package/fesm2020/3kles-kles-material-dynamicforms.mjs +2692 -2675
- package/fesm2020/3kles-kles-material-dynamicforms.mjs.map +1 -1
- package/index.d.ts +5 -5
- package/lib/decorators/component.decorator.d.ts +8 -8
- package/lib/directive/dynamic-component.directive.d.ts +16 -16
- package/lib/directive/dynamic-field.directive.d.ts +18 -18
- package/lib/dynamic-form.component.d.ts +31 -31
- package/lib/enums/type.enum.d.ts +17 -17
- package/lib/fields/array.component.d.ts +11 -11
- package/lib/fields/badge.component.d.ts +9 -9
- package/lib/fields/button-form.component.d.ts +9 -9
- package/lib/fields/button-submit.component.d.ts +9 -9
- package/lib/fields/button-toogle-group.component.d.ts +11 -11
- package/lib/fields/buttonchecker-form.component.d.ts +9 -9
- package/lib/fields/buttonfile-form.component.d.ts +9 -9
- package/lib/fields/checkbox.component.d.ts +9 -9
- package/lib/fields/chip.component.d.ts +9 -9
- package/lib/fields/color.component.d.ts +10 -10
- package/lib/fields/date.component.d.ts +9 -9
- package/lib/fields/field.abstract.d.ts +21 -21
- package/lib/fields/group.component.d.ts +11 -11
- package/lib/fields/icon.component.d.ts +9 -9
- package/lib/fields/input.clearable.component.d.ts +8 -8
- package/lib/fields/input.component.d.ts +15 -15
- package/lib/fields/label.component.d.ts +9 -9
- package/lib/fields/line-break.component.d.ts +9 -9
- package/lib/fields/link.component.d.ts +9 -9
- package/lib/fields/list-field.component.d.ts +19 -19
- package/lib/fields/radio.component.d.ts +9 -9
- package/lib/fields/select.component.d.ts +19 -19
- package/lib/fields/select.search.component.d.ts +22 -22
- package/lib/fields/selection-list.component.d.ts +11 -11
- package/lib/fields/slide-toggle.component.d.ts +9 -9
- package/lib/fields/text.component.d.ts +9 -9
- package/lib/fields/textarea.component.d.ts +9 -9
- package/lib/forms/button-control.component.d.ts +36 -36
- package/lib/forms/buttonchecker-control.component.d.ts +14 -14
- package/lib/forms/buttonfile-control.component.d.ts +20 -20
- package/lib/interfaces/component.interface.d.ts +5 -5
- package/lib/interfaces/directive.interface.d.ts +3 -3
- package/lib/interfaces/field.config.interface.d.ts +58 -57
- package/lib/interfaces/field.interface.d.ts +7 -7
- package/lib/interfaces/validator.interface.d.ts +5 -5
- package/lib/kles-material-dynamicforms.module.d.ts +56 -47
- package/lib/matcher/form-error.matcher.d.ts +9 -9
- package/lib/modules/material.module.d.ts +42 -42
- package/lib/pipe/array.pipe.d.ts +7 -7
- package/lib/pipe/transform.pipe.d.ts +10 -10
- package/lib/validators/autocomplete.validator.d.ts +3 -3
- package/package.json +1 -1
- package/public-api.d.ts +54 -54
|
@@ -1,44 +1,48 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { Component } from '@angular/core';
|
|
3
|
-
import { FieldMapper } from '../decorators/component.decorator';
|
|
4
|
-
import { EnumType } from '../enums/type.enum';
|
|
5
|
-
import { KlesFieldAbstract } from './field.abstract';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
import * as i1 from "@angular/common";
|
|
8
|
-
import * as i2 from "@angular/forms";
|
|
9
|
-
import * as i3 from "@angular/flex-layout/extended";
|
|
10
|
-
import * as i4 from "../directive/dynamic-field.directive";
|
|
11
|
-
let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstract {
|
|
12
|
-
ngOnInit() {
|
|
13
|
-
this.subGroup = this.group.controls[this.field.name];
|
|
14
|
-
super.ngOnInit();
|
|
15
|
-
}
|
|
16
|
-
ngOnDestroy() {
|
|
17
|
-
super.ngOnDestroy();
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
KlesFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.
|
|
21
|
-
KlesFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.
|
|
22
|
-
<div [formGroup]="group" class="group-container">
|
|
23
|
-
<div [formGroupName]="field.name" class="group-container" [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.ngClass">
|
|
24
|
-
<ng-container *ngFor="let subfield of field.collections;"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { Component } from '@angular/core';
|
|
3
|
+
import { FieldMapper } from '../decorators/component.decorator';
|
|
4
|
+
import { EnumType } from '../enums/type.enum';
|
|
5
|
+
import { KlesFieldAbstract } from './field.abstract';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
import * as i2 from "@angular/forms";
|
|
9
|
+
import * as i3 from "@angular/flex-layout/extended";
|
|
10
|
+
import * as i4 from "../directive/dynamic-field.directive";
|
|
11
|
+
let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstract {
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
this.subGroup = this.group.controls[this.field.name];
|
|
14
|
+
super.ngOnInit();
|
|
15
|
+
}
|
|
16
|
+
ngOnDestroy() {
|
|
17
|
+
super.ngOnDestroy();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
KlesFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
+
KlesFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: KlesFormGroupComponent, selector: "kles-group", usesInheritance: true, ngImport: i0, template: `
|
|
22
|
+
<div [formGroup]="group" class="group-container">
|
|
23
|
+
<div [formGroupName]="field.name" class="group-container" [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.ngClass">
|
|
24
|
+
<ng-container *ngFor="let subfield of field.collections;">
|
|
25
|
+
<ng-container *ngIf="subfield.visible !== false" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
|
|
26
|
+
</ng-container>
|
|
27
|
+
</ng-container>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] });
|
|
31
|
+
KlesFormGroupComponent = __decorate([
|
|
32
|
+
FieldMapper({ type: EnumType.group })
|
|
33
|
+
], KlesFormGroupComponent);
|
|
34
|
+
export { KlesFormGroupComponent };
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: KlesFormGroupComponent, decorators: [{
|
|
36
|
+
type: Component,
|
|
37
|
+
args: [{ selector: 'kles-group', template: `
|
|
38
|
+
<div [formGroup]="group" class="group-container">
|
|
39
|
+
<div [formGroupName]="field.name" class="group-container" [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.ngClass">
|
|
40
|
+
<ng-container *ngFor="let subfield of field.collections;">
|
|
41
|
+
<ng-container *ngIf="subfield.visible !== false" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
|
|
42
|
+
</ng-container>
|
|
43
|
+
</ng-container>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
`, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"] }]
|
|
47
|
+
}] });
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvZ3JvdXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUU3RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDaEUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQzlDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7Ozs7SUFzQnhDLHNCQUFzQixTQUF0QixzQkFBdUIsU0FBUSxpQkFBaUI7SUFJekQsUUFBUTtRQUNKLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQXFCLENBQUM7UUFDekUsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXO1FBQ1AsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7Q0FDSixDQUFBO21IQVpZLHNCQUFzQjt1R0FBdEIsc0JBQXNCLHlFQWpCckI7Ozs7Ozs7OztDQVNiO0FBUVksc0JBQXNCO0lBcEJsQyxXQUFXLENBQUMsRUFBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssRUFBQyxDQUFDO0dBb0J2QixzQkFBc0IsQ0FZbEM7U0FaWSxzQkFBc0I7MkZBQXRCLHNCQUFzQjtrQkFuQmxDLFNBQVM7K0JBQ0ksWUFBWSxZQUNaOzs7Ozs7Ozs7Q0FTYiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVW50eXBlZEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgRmllbGRNYXBwZXIgfSBmcm9tICcuLi9kZWNvcmF0b3JzL2NvbXBvbmVudC5kZWNvcmF0b3InO1xyXG5pbXBvcnQgeyBFbnVtVHlwZSB9IGZyb20gJy4uL2VudW1zL3R5cGUuZW51bSc7XHJcbmltcG9ydCB7IEtsZXNGaWVsZEFic3RyYWN0IH0gZnJvbSAnLi9maWVsZC5hYnN0cmFjdCc7XHJcblxyXG5ARmllbGRNYXBwZXIoe3R5cGU6IEVudW1UeXBlLmdyb3VwfSlcclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2tsZXMtZ3JvdXAnLFxyXG4gICAgdGVtcGxhdGU6IGBcclxuICAgIDxkaXYgW2Zvcm1Hcm91cF09XCJncm91cFwiIGNsYXNzPVwiZ3JvdXAtY29udGFpbmVyXCI+XHJcbiAgICAgICAgPGRpdiBbZm9ybUdyb3VwTmFtZV09XCJmaWVsZC5uYW1lXCIgY2xhc3M9XCJncm91cC1jb250YWluZXJcIiBbc3R5bGUuZmxleC1kaXJlY3Rpb25dPVwiZmllbGQuZGlyZWN0aW9uIHx8ICdpbmhlcml0J1wiIFtuZ0NsYXNzXT1cImZpZWxkLm5nQ2xhc3NcIj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgc3ViZmllbGQgb2YgZmllbGQuY29sbGVjdGlvbnM7XCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwic3ViZmllbGQudmlzaWJsZSAhPT0gZmFsc2VcIiBrbGVzRHluYW1pY0ZpZWxkIFtmaWVsZF09XCJzdWJmaWVsZFwiIFtncm91cF09XCJzdWJHcm91cFwiIFtzaWJsaW5nRmllbGRzXT1cImZpZWxkLmNvbGxlY3Rpb25zXCI+XHJcbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuYCxcclxuICAgIHN0eWxlczogWydtYXQtZm9ybS1maWVsZCB7d2lkdGg6IGNhbGMoMTAwJSl9JyxcclxuICAgICAgICAnOmhvc3QgeyBkaXNwbGF5OmZsZXg7IGZsZXgtZGlyZWN0aW9uOiBpbmhlcml0fScsXHJcbiAgICAgICAgLy8gJy5yb3cgeyBnYXA6MTBweDt9JyxcclxuICAgICAgICAvLyAnLmdyb3VwLWNvbnRhaW5lciB7ZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjogaW5oZXJpdDsgd2lkdGg6IGluaGVyaXQ7IGZsZXgtd3JhcDogd3JhcH0nXHJcbiAgICAgICAgJy5ncm91cC1jb250YWluZXIge2Rpc3BsYXk6ZmxleDsgZmxleC1kaXJlY3Rpb246IGluaGVyaXQ7IHdpZHRoOiBpbmhlcml0O30nXHJcbiAgICBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBLbGVzRm9ybUdyb3VwQ29tcG9uZW50IGV4dGVuZHMgS2xlc0ZpZWxkQWJzdHJhY3QgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcblxyXG4gICAgc3ViR3JvdXA6IFVudHlwZWRGb3JtR3JvdXA7XHJcblxyXG4gICAgbmdPbkluaXQoKSB7XHJcbiAgICAgICAgdGhpcy5zdWJHcm91cCA9IHRoaXMuZ3JvdXAuY29udHJvbHNbdGhpcy5maWVsZC5uYW1lXSBhcyBVbnR5cGVkRm9ybUdyb3VwO1xyXG4gICAgICAgIHN1cGVyLm5nT25Jbml0KCk7XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICAgICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcclxuICAgIH1cclxufVxyXG4iXX0=
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { Component } from "@angular/core";
|
|
2
|
-
import { KlesFieldAbstract } from './field.abstract';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@angular/common";
|
|
5
|
-
import * as i2 from "@angular/flex-layout/extended";
|
|
6
|
-
import * as i3 from "@angular/material/icon";
|
|
7
|
-
import * as i4 from "@angular/material/tooltip";
|
|
8
|
-
export class KlesFormIconComponent extends KlesFieldAbstract {
|
|
9
|
-
ngOnInit() { super.ngOnInit(); }
|
|
10
|
-
ngOnDestroy() {
|
|
11
|
-
super.ngOnDestroy();
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
KlesFormIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.
|
|
15
|
-
KlesFormIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.
|
|
16
|
-
<mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
|
|
17
|
-
{{group.controls[field.name].value}}
|
|
18
|
-
</mat-icon>
|
|
19
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.
|
|
21
|
-
type: Component,
|
|
22
|
-
args: [{ selector: "kles-form-icon", template: `
|
|
23
|
-
<mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
|
|
24
|
-
{{group.controls[field.name].value}}
|
|
25
|
-
</mat-icon>
|
|
26
|
-
` }]
|
|
27
|
-
}] });
|
|
28
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
import { Component } from "@angular/core";
|
|
2
|
+
import { KlesFieldAbstract } from './field.abstract';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
import * as i2 from "@angular/flex-layout/extended";
|
|
6
|
+
import * as i3 from "@angular/material/icon";
|
|
7
|
+
import * as i4 from "@angular/material/tooltip";
|
|
8
|
+
export class KlesFormIconComponent extends KlesFieldAbstract {
|
|
9
|
+
ngOnInit() { super.ngOnInit(); }
|
|
10
|
+
ngOnDestroy() {
|
|
11
|
+
super.ngOnDestroy();
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
KlesFormIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
+
KlesFormIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: KlesFormIconComponent, selector: "kles-form-icon", usesInheritance: true, ngImport: i0, template: `
|
|
16
|
+
<mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
|
|
17
|
+
{{group.controls[field.name].value}}
|
|
18
|
+
</mat-icon>
|
|
19
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: KlesFormIconComponent, decorators: [{
|
|
21
|
+
type: Component,
|
|
22
|
+
args: [{ selector: "kles-form-icon", template: `
|
|
23
|
+
<mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
|
|
24
|
+
{{group.controls[field.name].value}}
|
|
25
|
+
</mat-icon>
|
|
26
|
+
` }]
|
|
27
|
+
}] });
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGVzLW1hdGVyaWFsLWR5bmFtaWNmb3Jtcy9zcmMvbGliL2ZpZWxkcy9pY29uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7O0FBV3JELE1BQU0sT0FBTyxxQkFBc0IsU0FBUSxpQkFBaUI7SUFDeEQsUUFBUSxLQUFLLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDaEMsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDOztrSEFKUSxxQkFBcUI7c0dBQXJCLHFCQUFxQiw2RUFQcEI7Ozs7Q0FJYjsyRkFHWSxxQkFBcUI7a0JBVGpDLFNBQVM7K0JBQ0ksZ0JBQWdCLFlBQ2hCOzs7O0NBSWIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgS2xlc0ZpZWxkQWJzdHJhY3QgfSBmcm9tICcuL2ZpZWxkLmFic3RyYWN0JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6IFwia2xlcy1mb3JtLWljb25cIixcclxuICAgIHRlbXBsYXRlOiBgXHJcbiAgICAgICAgPG1hdC1pY29uIFtjb2xvcl09XCJmaWVsZC5jb2xvclwiIG1hdFRvb2x0aXA9XCJ7e2ZpZWxkLnRvb2x0aXB9fVwiIFthdHRyLmlkXT1cImZpZWxkLmlkXCIgW25nQ2xhc3NdPVwiZmllbGQubmdDbGFzc1wiIFtuZ1N0eWxlXT1cImZpZWxkLm5nU3R5bGVcIj5cclxuICAgICAgICAgICAge3tncm91cC5jb250cm9sc1tmaWVsZC5uYW1lXS52YWx1ZX19XHJcbiAgICAgICAgPC9tYXQtaWNvbj5cclxuYCxcclxuICAgIHN0eWxlczogW11cclxufSlcclxuZXhwb3J0IGNsYXNzIEtsZXNGb3JtSWNvbkNvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gICAgbmdPbkluaXQoKSB7IHN1cGVyLm5nT25Jbml0KCk7IH1cclxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XHJcbiAgICB9XHJcbn1cclxuIl19
|
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import { KlesFormInputComponent } from './input.component';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@angular/common";
|
|
5
|
-
import * as i2 from "@angular/forms";
|
|
6
|
-
import * as i3 from "@angular/flex-layout/extended";
|
|
7
|
-
import * as i4 from "@angular/material/button";
|
|
8
|
-
import * as i5 from "@angular/material/icon";
|
|
9
|
-
import * as i6 from "@angular/material/form-field";
|
|
10
|
-
import * as i7 from "@angular/material/input";
|
|
11
|
-
import * as i8 from "@angular/material/core";
|
|
12
|
-
import * as i9 from "@angular/material/tooltip";
|
|
13
|
-
import * as i10 from "@angular/material/progress-spinner";
|
|
14
|
-
import * as i11 from "@angular/material/autocomplete";
|
|
15
|
-
import * as i12 from "../directive/dynamic-component.directive";
|
|
16
|
-
import * as i13 from "@ngx-translate/core";
|
|
17
|
-
export class KlesFormInputClearableComponent extends KlesFormInputComponent {
|
|
18
|
-
ngOnDestroy() {
|
|
19
|
-
super.ngOnDestroy();
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
KlesFormInputClearableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.
|
|
23
|
-
KlesFormInputClearableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.
|
|
24
|
-
<mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
|
|
25
|
-
|
|
26
|
-
<ng-container *ngIf="field.autocomplete; else notAutoComplete">
|
|
27
|
-
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
28
|
-
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
|
|
29
|
-
[matAutocomplete]="auto">
|
|
30
|
-
|
|
31
|
-
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
|
|
32
|
-
<ng-container *ngIf="!field.autocompleteComponent">
|
|
33
|
-
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
34
|
-
{{field.property ? option[field.property] : option}}
|
|
35
|
-
</mat-option>
|
|
36
|
-
</ng-container>
|
|
37
|
-
|
|
38
|
-
<ng-container *ngIf="field.autocompleteComponent">
|
|
39
|
-
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
40
|
-
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
|
|
41
|
-
</ng-container>
|
|
42
|
-
</mat-option>
|
|
43
|
-
</ng-container>
|
|
44
|
-
</mat-autocomplete>
|
|
45
|
-
</ng-container>
|
|
46
|
-
|
|
47
|
-
<ng-template #notAutoComplete>
|
|
48
|
-
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
49
|
-
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
|
|
50
|
-
</ng-template>
|
|
51
|
-
<button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
|
|
52
|
-
(click)="group.controls[field.name].reset();">
|
|
53
|
-
<mat-icon>close</mat-icon>
|
|
54
|
-
</button>
|
|
55
|
-
|
|
56
|
-
<mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
|
|
57
|
-
|
|
58
|
-
<ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
|
|
59
|
-
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
60
|
-
</ng-container>
|
|
61
|
-
<ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
|
|
62
|
-
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
63
|
-
</ng-container>
|
|
64
|
-
</mat-form-field>
|
|
65
|
-
`, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i12.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.
|
|
67
|
-
type: Component,
|
|
68
|
-
args: [{ selector: 'kles-form-input-clearable', template: `
|
|
69
|
-
<mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
|
|
70
|
-
|
|
71
|
-
<ng-container *ngIf="field.autocomplete; else notAutoComplete">
|
|
72
|
-
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
73
|
-
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
|
|
74
|
-
[matAutocomplete]="auto">
|
|
75
|
-
|
|
76
|
-
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
|
|
77
|
-
<ng-container *ngIf="!field.autocompleteComponent">
|
|
78
|
-
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
79
|
-
{{field.property ? option[field.property] : option}}
|
|
80
|
-
</mat-option>
|
|
81
|
-
</ng-container>
|
|
82
|
-
|
|
83
|
-
<ng-container *ngIf="field.autocompleteComponent">
|
|
84
|
-
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
85
|
-
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
|
|
86
|
-
</ng-container>
|
|
87
|
-
</mat-option>
|
|
88
|
-
</ng-container>
|
|
89
|
-
</mat-autocomplete>
|
|
90
|
-
</ng-container>
|
|
91
|
-
|
|
92
|
-
<ng-template #notAutoComplete>
|
|
93
|
-
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
94
|
-
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
|
|
95
|
-
</ng-template>
|
|
96
|
-
<button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
|
|
97
|
-
(click)="group.controls[field.name].reset();">
|
|
98
|
-
<mat-icon>close</mat-icon>
|
|
99
|
-
</button>
|
|
100
|
-
|
|
101
|
-
<mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
|
|
102
|
-
|
|
103
|
-
<ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
|
|
104
|
-
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
105
|
-
</ng-container>
|
|
106
|
-
<ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
|
|
107
|
-
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
108
|
-
</ng-container>
|
|
109
|
-
</mat-form-field>
|
|
110
|
-
`, styles: ["mat-form-field{width:100%}\n"] }]
|
|
111
|
-
}] });
|
|
112
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import { KlesFormInputComponent } from './input.component';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
import * as i2 from "@angular/forms";
|
|
6
|
+
import * as i3 from "@angular/flex-layout/extended";
|
|
7
|
+
import * as i4 from "@angular/material/button";
|
|
8
|
+
import * as i5 from "@angular/material/icon";
|
|
9
|
+
import * as i6 from "@angular/material/form-field";
|
|
10
|
+
import * as i7 from "@angular/material/input";
|
|
11
|
+
import * as i8 from "@angular/material/core";
|
|
12
|
+
import * as i9 from "@angular/material/tooltip";
|
|
13
|
+
import * as i10 from "@angular/material/progress-spinner";
|
|
14
|
+
import * as i11 from "@angular/material/autocomplete";
|
|
15
|
+
import * as i12 from "../directive/dynamic-component.directive";
|
|
16
|
+
import * as i13 from "@ngx-translate/core";
|
|
17
|
+
export class KlesFormInputClearableComponent extends KlesFormInputComponent {
|
|
18
|
+
ngOnDestroy() {
|
|
19
|
+
super.ngOnDestroy();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
KlesFormInputClearableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
+
KlesFormInputClearableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: KlesFormInputClearableComponent, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
|
|
24
|
+
<mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
|
|
25
|
+
|
|
26
|
+
<ng-container *ngIf="field.autocomplete; else notAutoComplete">
|
|
27
|
+
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
28
|
+
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
|
|
29
|
+
[matAutocomplete]="auto">
|
|
30
|
+
|
|
31
|
+
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
|
|
32
|
+
<ng-container *ngIf="!field.autocompleteComponent">
|
|
33
|
+
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
34
|
+
{{field.property ? option[field.property] : option}}
|
|
35
|
+
</mat-option>
|
|
36
|
+
</ng-container>
|
|
37
|
+
|
|
38
|
+
<ng-container *ngIf="field.autocompleteComponent">
|
|
39
|
+
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
40
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
|
|
41
|
+
</ng-container>
|
|
42
|
+
</mat-option>
|
|
43
|
+
</ng-container>
|
|
44
|
+
</mat-autocomplete>
|
|
45
|
+
</ng-container>
|
|
46
|
+
|
|
47
|
+
<ng-template #notAutoComplete>
|
|
48
|
+
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
49
|
+
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
|
|
50
|
+
</ng-template>
|
|
51
|
+
<button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
|
|
52
|
+
(click)="group.controls[field.name].reset();">
|
|
53
|
+
<mat-icon>close</mat-icon>
|
|
54
|
+
</button>
|
|
55
|
+
|
|
56
|
+
<mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
|
|
57
|
+
|
|
58
|
+
<ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
|
|
59
|
+
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
60
|
+
</ng-container>
|
|
61
|
+
<ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
|
|
62
|
+
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
63
|
+
</ng-container>
|
|
64
|
+
</mat-form-field>
|
|
65
|
+
`, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i12.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
|
|
67
|
+
type: Component,
|
|
68
|
+
args: [{ selector: 'kles-form-input-clearable', template: `
|
|
69
|
+
<mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
|
|
70
|
+
|
|
71
|
+
<ng-container *ngIf="field.autocomplete; else notAutoComplete">
|
|
72
|
+
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
73
|
+
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
|
|
74
|
+
[matAutocomplete]="auto">
|
|
75
|
+
|
|
76
|
+
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
|
|
77
|
+
<ng-container *ngIf="!field.autocompleteComponent">
|
|
78
|
+
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
79
|
+
{{field.property ? option[field.property] : option}}
|
|
80
|
+
</mat-option>
|
|
81
|
+
</ng-container>
|
|
82
|
+
|
|
83
|
+
<ng-container *ngIf="field.autocompleteComponent">
|
|
84
|
+
<mat-option *ngFor="let option of filteredOption | async" [value]="option">
|
|
85
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
|
|
86
|
+
</ng-container>
|
|
87
|
+
</mat-option>
|
|
88
|
+
</ng-container>
|
|
89
|
+
</mat-autocomplete>
|
|
90
|
+
</ng-container>
|
|
91
|
+
|
|
92
|
+
<ng-template #notAutoComplete>
|
|
93
|
+
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
94
|
+
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
|
|
95
|
+
</ng-template>
|
|
96
|
+
<button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
|
|
97
|
+
(click)="group.controls[field.name].reset();">
|
|
98
|
+
<mat-icon>close</mat-icon>
|
|
99
|
+
</button>
|
|
100
|
+
|
|
101
|
+
<mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
|
|
102
|
+
|
|
103
|
+
<ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
|
|
104
|
+
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
105
|
+
</ng-container>
|
|
106
|
+
<ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
|
|
107
|
+
<mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
|
|
108
|
+
</ng-container>
|
|
109
|
+
</mat-form-field>
|
|
110
|
+
`, styles: ["mat-form-field{width:100%}\n"] }]
|
|
111
|
+
}] });
|
|
112
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY2xlYXJhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tsZXMtbWF0ZXJpYWwtZHluYW1pY2Zvcm1zL3NyYy9saWIvZmllbGRzL2lucHV0LmNsZWFyYWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFVLFNBQVMsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O0FBaUQzRCxNQUFNLE9BQU8sK0JBQWdDLFNBQVEsc0JBQXNCO0lBRXZFLFdBQVc7UUFDUCxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDeEIsQ0FBQzs7NEhBSlEsK0JBQStCO2dIQUEvQiwrQkFBK0Isd0ZBN0M5Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBMENUOzJGQUdRLCtCQUErQjtrQkEvQzNDLFNBQVM7K0JBQ0ksMkJBQTJCLFlBQzNCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0EwQ1QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBPbkluaXQsIENvbXBvbmVudCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEtsZXNGb3JtSW5wdXRDb21wb25lbnQgfSBmcm9tICcuL2lucHV0LmNvbXBvbmVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAna2xlcy1mb3JtLWlucHV0LWNsZWFyYWJsZScsXHJcbiAgICB0ZW1wbGF0ZTogYFxyXG4gICAgPG1hdC1mb3JtLWZpZWxkIFtmb3JtR3JvdXBdPVwiZ3JvdXBcIiBbY29sb3JdPVwiZmllbGQuY29sb3JcIiBjbGFzcz1cImZvcm0tZWxlbWVudFwiPlxyXG5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZmllbGQuYXV0b2NvbXBsZXRlOyBlbHNlIG5vdEF1dG9Db21wbGV0ZVwiPlxyXG4gICAgICAgICAgICA8aW5wdXQgbWF0SW5wdXQgbWF0VG9vbHRpcD1cInt7ZmllbGQudG9vbHRpcH19XCIgW2F0dHIuaWRdPVwiZmllbGQuaWRcIiBbbmdDbGFzc109XCJmaWVsZC5uZ0NsYXNzXCIgW2Zvcm1Db250cm9sTmFtZV09XCJmaWVsZC5uYW1lXCIgW3BsYWNlaG9sZGVyXT1cImZpZWxkLnBsYWNlaG9sZGVyIHwgdHJhbnNsYXRlXCIgW3R5cGVdPVwiZmllbGQuaW5wdXRUeXBlXCJcclxuICAgICAgICAgICAgW21heExlbmd0aF09XCJmaWVsZC5tYXhMZW5ndGhcIiBbbWluXT1cImZpZWxkLm1pblwiIFttYXhdPVwiZmllbGQubWF4XCIgW3N0ZXBdPVwiZmllbGQuc3RlcFwiXHJcbiAgICAgICAgICAgIFttYXRBdXRvY29tcGxldGVdPVwiYXV0b1wiPlxyXG5cclxuICAgICAgICAgICAgPG1hdC1hdXRvY29tcGxldGUgI2F1dG89XCJtYXRBdXRvY29tcGxldGVcIiBbZGlzcGxheVdpdGhdPVwiZGlzcGxheUZuLmJpbmQodGhpcylcIiBbcGFuZWxXaWR0aF09XCJ0aGlzLmZpZWxkLnBhbmVsV2lkdGhcIj5cclxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPG1hdC1vcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBmaWx0ZXJlZE9wdGlvbiB8IGFzeW5jXCIgW3ZhbHVlXT1cIm9wdGlvblwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICB7e2ZpZWxkLnByb3BlcnR5ID8gb3B0aW9uW2ZpZWxkLnByb3BlcnR5XSA6IG9wdGlvbn19XHJcbiAgICAgICAgICAgICAgICAgICAgPC9tYXQtb3B0aW9uPlxyXG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpZWxkLmF1dG9jb21wbGV0ZUNvbXBvbmVudFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZmlsdGVyZWRPcHRpb24gfCBhc3luY1wiIFt2YWx1ZV09XCJvcHRpb25cIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBrbGVzQ29tcG9uZW50IFtjb21wb25lbnRdPVwiZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCIgW3ZhbHVlXT1cIm9wdGlvblwiIFtmaWVsZF09XCJmaWVsZFwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgICAgICAgICA8L21hdC1vcHRpb24+XHJcbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgPC9tYXQtYXV0b2NvbXBsZXRlPlxyXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgICAgICA8bmctdGVtcGxhdGUgI25vdEF1dG9Db21wbGV0ZT5cclxuICAgICAgICAgICAgPGlucHV0IG1hdElucHV0IG1hdFRvb2x0aXA9XCJ7e2ZpZWxkLnRvb2x0aXB9fVwiIFthdHRyLmlkXT1cImZpZWxkLmlkXCIgW25nQ2xhc3NdPVwiZmllbGQubmdDbGFzc1wiIFtmb3JtQ29udHJvbE5hbWVdPVwiZmllbGQubmFtZVwiIFtwbGFjZWhvbGRlcl09XCJmaWVsZC5wbGFjZWhvbGRlciB8IHRyYW5zbGF0ZVwiIFt0eXBlXT1cImZpZWxkLmlucHV0VHlwZVwiXHJcbiAgICAgICAgICAgIFttYXhMZW5ndGhdPVwiZmllbGQubWF4TGVuZ3RoXCIgW21pbl09XCJmaWVsZC5taW5cIiBbbWF4XT1cImZpZWxkLm1heFwiIFtzdGVwXT1cImZpZWxkLnN0ZXBcIj5cclxuICAgICAgICA8L25nLXRlbXBsYXRlPlxyXG4gICAgICAgIDxidXR0b24gKm5nSWY9XCIhZ3JvdXAuZ2V0KGZpZWxkLm5hbWUpLmRpc2FibGVkXCIgbWF0LWJ1dHRvbiBtYXRTdWZmaXggbWF0LWljb24tYnV0dG9uIGFyaWEtbGFiZWw9XCJDbGVhclwiIHR5cGU9XCJidXR0b25cIlxyXG4gICAgICAgICAgICAoY2xpY2spPVwiZ3JvdXAuY29udHJvbHNbZmllbGQubmFtZV0ucmVzZXQoKTtcIj5cclxuICAgICAgICAgICAgPG1hdC1pY29uPmNsb3NlPC9tYXQtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuXHJcbiAgICAgICAgPG1hdC1zcGlubmVyIG1hdFN1ZmZpeCBtb2RlPVwiaW5kZXRlcm1pbmF0ZVwiICpuZ0lmPVwiaXNQZW5kaW5nKClcIiBkaWFtZXRlcj1cIjE3XCI+PC9tYXQtc3Bpbm5lcj5cclxuXHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC52YWxpZGF0aW9ucztcIiBuZ1Byb2plY3RBcz1cIm1hdC1lcnJvclwiPlxyXG4gICAgICAgICAgICA8bWF0LWVycm9yICpuZ0lmPVwiZ3JvdXAuZ2V0KGZpZWxkLm5hbWUpLmhhc0Vycm9yKHZhbGlkYXRpb24ubmFtZSlcIj57e3ZhbGlkYXRpb24ubWVzc2FnZSB8IHRyYW5zbGF0ZX19PC9tYXQtZXJyb3I+XHJcbiAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC5hc3luY1ZhbGlkYXRpb25zO1wiIG5nUHJvamVjdEFzPVwibWF0LWVycm9yXCI+XHJcbiAgICAgICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJncm91cC5nZXQoZmllbGQubmFtZSkuaGFzRXJyb3IodmFsaWRhdGlvbi5uYW1lKVwiPnt7dmFsaWRhdGlvbi5tZXNzYWdlIHwgdHJhbnNsYXRlfX08L21hdC1lcnJvcj5cclxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XHJcbiAgICBgLFxyXG4gICAgc3R5bGVzOiBbJ21hdC1mb3JtLWZpZWxkIHt3aWR0aDogY2FsYygxMDAlKX0nXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgS2xlc0Zvcm1JbnB1dENsZWFyYWJsZUNvbXBvbmVudCBleHRlbmRzIEtsZXNGb3JtSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcblxyXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICAgICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcclxuICAgIH1cclxufVxyXG4iXX0=
|