@3kles/kles-material-dynamicforms 16.1.5 → 17.0.0
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/esm2022/lib/directive/dynamic-component.directive.mjs +5 -5
- package/esm2022/lib/directive/dynamic-field.directive.mjs +5 -5
- package/esm2022/lib/dynamic-form.component.mjs +19 -16
- package/esm2022/lib/fields/array.component.mjs +25 -21
- package/esm2022/lib/fields/badge.component.mjs +5 -5
- package/esm2022/lib/fields/button-form.component.mjs +3 -3
- package/esm2022/lib/fields/button-submit.component.mjs +5 -5
- package/esm2022/lib/fields/button-toogle-group.component.mjs +17 -15
- package/esm2022/lib/fields/buttonchecker-form.component.mjs +3 -3
- package/esm2022/lib/fields/buttonfile-form.component.mjs +3 -3
- package/esm2022/lib/fields/checkbox.component.mjs +33 -17
- package/esm2022/lib/fields/chip.component.mjs +11 -7
- package/esm2022/lib/fields/clear.component.mjs +4 -4
- package/esm2022/lib/fields/color.component.mjs +43 -23
- package/esm2022/lib/fields/date-time.component.mjs +39 -19
- package/esm2022/lib/fields/date.component.mjs +39 -19
- package/esm2022/lib/fields/field.abstract.mjs +5 -5
- package/esm2022/lib/fields/group.component.mjs +17 -13
- package/esm2022/lib/fields/icon.component.mjs +4 -4
- package/esm2022/lib/fields/input.clearable.component.mjs +97 -63
- package/esm2022/lib/fields/input.component.mjs +95 -61
- package/esm2022/lib/fields/label.component.mjs +4 -4
- package/esm2022/lib/fields/line-break.component.mjs +4 -4
- package/esm2022/lib/fields/link.component.mjs +4 -4
- package/esm2022/lib/fields/list-field.component.mjs +59 -38
- package/esm2022/lib/fields/radio.component.mjs +48 -16
- package/esm2022/lib/fields/range.component.mjs +33 -17
- package/esm2022/lib/fields/select.component.mjs +192 -136
- package/esm2022/lib/fields/select.lazy-search.component.mjs +194 -144
- package/esm2022/lib/fields/select.search.component.mjs +196 -138
- package/esm2022/lib/fields/selection-list.component.mjs +33 -27
- package/esm2022/lib/fields/slide-toggle.component.mjs +35 -17
- package/esm2022/lib/fields/text.component.mjs +5 -5
- package/esm2022/lib/fields/textarea.component.mjs +51 -25
- package/esm2022/lib/forms/button-control.component.mjs +21 -9
- package/esm2022/lib/forms/buttonchecker-control.component.mjs +57 -44
- package/esm2022/lib/forms/buttonfile-control.component.mjs +3 -3
- package/esm2022/lib/kles-material-dynamicforms.module.mjs +5 -5
- package/esm2022/lib/matcher/form-error.matcher.mjs +4 -4
- package/esm2022/lib/modules/material.module.mjs +4 -4
- package/esm2022/lib/pipe/array.pipe.mjs +3 -3
- package/esm2022/lib/pipe/transform.pipe.mjs +3 -3
- package/fesm2022/3kles-kles-material-dynamicforms.mjs +1409 -938
- package/fesm2022/3kles-kles-material-dynamicforms.mjs.map +1 -1
- package/lib/fields/radio.component.d.ts +2 -0
- package/package.json +12 -12
|
@@ -16,37 +16,41 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
|
|
|
16
16
|
ngOnDestroy() {
|
|
17
17
|
super.ngOnDestroy();
|
|
18
18
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.2", type: KlesFormGroupComponent, selector: "kles-group", usesInheritance: true, ngImport: i0, template: `
|
|
21
21
|
<div [formGroup]="group" class="group-container">
|
|
22
22
|
<div [formGroupName]="field.name" class="group-container"
|
|
23
23
|
[ngClass]="{'row': field.direction ==='row'}"
|
|
24
24
|
[style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.direction ==='row' ? (field.ngClass+' '+ 'row'): field.ngClass">
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
@for (subfield of field.collections; track subfield.name) {
|
|
26
|
+
@if (subfield.visible !== false) {
|
|
27
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
|
|
28
|
+
</ng-container>
|
|
29
|
+
}
|
|
30
|
+
}
|
|
29
31
|
</div>
|
|
30
32
|
</div>
|
|
31
|
-
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".row{align-items:baseline}\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:
|
|
33
|
+
`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".row{align-items:baseline}\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: 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.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] }); }
|
|
32
34
|
};
|
|
33
35
|
KlesFormGroupComponent = __decorate([
|
|
34
36
|
FieldMapper({ type: EnumType.group, factory: (field) => (new KlesFormGroup(field).create()) })
|
|
35
37
|
], KlesFormGroupComponent);
|
|
36
38
|
export { KlesFormGroupComponent };
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KlesFormGroupComponent, decorators: [{
|
|
38
40
|
type: Component,
|
|
39
41
|
args: [{ selector: 'kles-group', template: `
|
|
40
42
|
<div [formGroup]="group" class="group-container">
|
|
41
43
|
<div [formGroupName]="field.name" class="group-container"
|
|
42
44
|
[ngClass]="{'row': field.direction ==='row'}"
|
|
43
45
|
[style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.direction ==='row' ? (field.ngClass+' '+ 'row'): field.ngClass">
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
@for (subfield of field.collections; track subfield.name) {
|
|
47
|
+
@if (subfield.visible !== false) {
|
|
48
|
+
<ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
|
|
49
|
+
</ng-container>
|
|
50
|
+
}
|
|
51
|
+
}
|
|
48
52
|
</div>
|
|
49
53
|
</div>
|
|
50
54
|
`, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".row{align-items:baseline}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"] }]
|
|
51
55
|
}] });
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvZ3JvdXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUU3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7QUEwQjlDLElBQU0sc0JBQXNCLEdBQTVCLE1BQU0sc0JBQXVCLFNBQVEsaUJBQWlCO0lBSXpELFFBQVE7UUFDSixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFxQixDQUFDO1FBQ3pFLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDOzhHQVhRLHNCQUFzQjtrR0FBdEIsc0JBQXNCLHlFQXJCckI7Ozs7Ozs7Ozs7Ozs7Q0FhYjs7QUFRWSxzQkFBc0I7SUF4QmxDLFdBQVcsQ0FBQyxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQyxJQUFJLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUM7R0F3QmxGLHNCQUFzQixDQVlsQzs7MkZBWlksc0JBQXNCO2tCQXZCbEMsU0FBUzsrQkFDSSxZQUFZLFlBQ1o7Ozs7Ozs7Ozs7Ozs7Q0FhYiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFVudHlwZWRGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBLbGVzRm9ybUdyb3VwIH0gZnJvbSAnLi4vY29udHJvbHMvZ3JvdXAuY29udHJvbCc7XG5pbXBvcnQgeyBGaWVsZE1hcHBlciB9IGZyb20gJy4uL2RlY29yYXRvcnMvY29tcG9uZW50LmRlY29yYXRvcic7XG5pbXBvcnQgeyBFbnVtVHlwZSB9IGZyb20gJy4uL2VudW1zL3R5cGUuZW51bSc7XG5pbXBvcnQgeyBLbGVzRmllbGRBYnN0cmFjdCB9IGZyb20gJy4vZmllbGQuYWJzdHJhY3QnO1xuXG5ARmllbGRNYXBwZXIoeyB0eXBlOiBFbnVtVHlwZS5ncm91cCwgZmFjdG9yeTogKGZpZWxkKSA9PiAobmV3IEtsZXNGb3JtR3JvdXAoZmllbGQpLmNyZWF0ZSgpKSB9KVxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdrbGVzLWdyb3VwJyxcbiAgICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW2Zvcm1Hcm91cF09XCJncm91cFwiIGNsYXNzPVwiZ3JvdXAtY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgW2Zvcm1Hcm91cE5hbWVdPVwiZmllbGQubmFtZVwiIGNsYXNzPVwiZ3JvdXAtY29udGFpbmVyXCIgXG4gICAgICAgIFtuZ0NsYXNzXT1cInsncm93JzogZmllbGQuZGlyZWN0aW9uID09PSdyb3cnfVwiXG4gICAgICAgIFtzdHlsZS5mbGV4LWRpcmVjdGlvbl09XCJmaWVsZC5kaXJlY3Rpb24gfHwgJ2luaGVyaXQnXCIgW25nQ2xhc3NdPVwiZmllbGQuZGlyZWN0aW9uID09PSdyb3cnID8gKGZpZWxkLm5nQ2xhc3MrJyAnKyAncm93Jyk6IGZpZWxkLm5nQ2xhc3NcIj5cbiAgICAgICAgICAgIEBmb3IgKHN1YmZpZWxkIG9mIGZpZWxkLmNvbGxlY3Rpb25zOyB0cmFjayBzdWJmaWVsZC5uYW1lKSB7XG4gICAgICAgICAgICAgICAgQGlmIChzdWJmaWVsZC52aXNpYmxlICE9PSBmYWxzZSkge1xuICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIGtsZXNEeW5hbWljRmllbGQgW2ZpZWxkXT1cInN1YmZpZWxkXCIgW2dyb3VwXT1cInN1Ykdyb3VwXCIgW3NpYmxpbmdGaWVsZHNdPVwiZmllbGQuY29sbGVjdGlvbnNcIj5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbmAsXG4gICAgc3R5bGVzOiBbJ21hdC1mb3JtLWZpZWxkIHt3aWR0aDogY2FsYygxMDAlKX0nLFxuICAgICAgICAnOmhvc3QgeyBkaXNwbGF5OmZsZXg7IGZsZXgtZGlyZWN0aW9uOiBpbmhlcml0fScsXG4gICAgICAgICcucm93IHsgYWxpZ24taXRlbXM6IGJhc2VsaW5lIH0nLFxuICAgICAgICAvLyAnLmdyb3VwLWNvbnRhaW5lciB7ZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjogaW5oZXJpdDsgd2lkdGg6IGluaGVyaXQ7IGZsZXgtd3JhcDogd3JhcH0nXG4gICAgICAgICcuZ3JvdXAtY29udGFpbmVyIHtkaXNwbGF5OmZsZXg7IGZsZXgtZGlyZWN0aW9uOiBpbmhlcml0OyB3aWR0aDogaW5oZXJpdDt9J1xuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgS2xlc0Zvcm1Hcm91cENvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgc3ViR3JvdXA6IFVudHlwZWRGb3JtR3JvdXA7XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5zdWJHcm91cCA9IHRoaXMuZ3JvdXAuY29udHJvbHNbdGhpcy5maWVsZC5uYW1lXSBhcyBVbnR5cGVkRm9ybUdyb3VwO1xuICAgICAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn1cbiJdfQ==
|
|
@@ -9,14 +9,14 @@ export class KlesFormIconComponent extends KlesFieldAbstract {
|
|
|
9
9
|
ngOnDestroy() {
|
|
10
10
|
super.ngOnDestroy();
|
|
11
11
|
}
|
|
12
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: KlesFormIconComponent, selector: "kles-form-icon", usesInheritance: true, ngImport: i0, template: `
|
|
14
14
|
<mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
|
|
15
15
|
{{group.controls[field.name].value}}
|
|
16
16
|
</mat-icon>
|
|
17
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
17
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
18
18
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KlesFormIconComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
21
|
args: [{ selector: "kles-form-icon", template: `
|
|
22
22
|
<mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
|
|
@@ -17,95 +17,129 @@ export class KlesFormInputClearableComponent extends KlesFormInputComponent {
|
|
|
17
17
|
ngOnDestroy() {
|
|
18
18
|
super.ngOnDestroy();
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.2", type: KlesFormInputClearableComponent, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
|
|
22
22
|
<mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
@if (field.label) {
|
|
24
|
+
<mat-label>{{field.label}}</mat-label>
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@if (field.autocomplete) {
|
|
25
28
|
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
26
29
|
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
|
|
27
30
|
[matAutocomplete]="auto">
|
|
28
31
|
|
|
29
32
|
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
33
|
+
@if (!field.autocompleteComponent) {
|
|
34
|
+
@for (option of filteredOption | async; track option) {
|
|
35
|
+
<mat-option [value]="option">
|
|
36
|
+
{{field.property ? option[field.property] : option}}
|
|
37
|
+
</mat-option>
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
@else {
|
|
41
|
+
@for (option of filteredOption | async; track option) {
|
|
42
|
+
<mat-option [value]="option">
|
|
43
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
|
|
44
|
+
</ng-container>
|
|
45
|
+
</mat-option>
|
|
46
|
+
}
|
|
47
|
+
}
|
|
42
48
|
</mat-autocomplete>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<ng-template #notAutoComplete>
|
|
49
|
+
}
|
|
50
|
+
@else {
|
|
46
51
|
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
47
52
|
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<mat-icon
|
|
52
|
-
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@if (!group.get(field.name).disabled) {
|
|
56
|
+
<button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset();">
|
|
57
|
+
<mat-icon>close</mat-icon>
|
|
58
|
+
</button>
|
|
59
|
+
}
|
|
53
60
|
|
|
54
|
-
|
|
61
|
+
@if (isPending()) {
|
|
62
|
+
<mat-spinner matSuffix mode="indeterminate" diameter="17"></mat-spinner>
|
|
63
|
+
}
|
|
55
64
|
|
|
56
|
-
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
65
|
+
@for (validation of field.validations; track validation.name) {
|
|
66
|
+
<ng-container ngProjectAs="mat-error">
|
|
67
|
+
@if (group.get(field.name).hasError(validation.name)) {
|
|
68
|
+
<mat-error>{{validation.message | translate}}</mat-error>
|
|
69
|
+
}
|
|
70
|
+
</ng-container>
|
|
71
|
+
}
|
|
72
|
+
@for (validation of field.asyncValidations; track validation.name) {
|
|
73
|
+
<ng-container ngProjectAs="mat-error">
|
|
74
|
+
@if (group.get(field.name).hasError(validation.name)) {
|
|
75
|
+
<mat-error>{{validation.message | translate}}</mat-error>
|
|
76
|
+
}
|
|
77
|
+
</ng-container>
|
|
78
|
+
}
|
|
62
79
|
</mat-form-field>
|
|
63
|
-
`, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type:
|
|
80
|
+
`, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] }); }
|
|
64
81
|
}
|
|
65
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
|
|
66
83
|
type: Component,
|
|
67
84
|
args: [{ selector: 'kles-form-input-clearable', template: `
|
|
68
85
|
<mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
|
|
69
|
-
|
|
70
|
-
|
|
86
|
+
@if (field.label) {
|
|
87
|
+
<mat-label>{{field.label}}</mat-label>
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@if (field.autocomplete) {
|
|
71
91
|
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
72
92
|
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
|
|
73
93
|
[matAutocomplete]="auto">
|
|
74
94
|
|
|
75
95
|
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
96
|
+
@if (!field.autocompleteComponent) {
|
|
97
|
+
@for (option of filteredOption | async; track option) {
|
|
98
|
+
<mat-option [value]="option">
|
|
99
|
+
{{field.property ? option[field.property] : option}}
|
|
100
|
+
</mat-option>
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
@else {
|
|
104
|
+
@for (option of filteredOption | async; track option) {
|
|
105
|
+
<mat-option [value]="option">
|
|
106
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
|
|
107
|
+
</ng-container>
|
|
108
|
+
</mat-option>
|
|
109
|
+
}
|
|
110
|
+
}
|
|
88
111
|
</mat-autocomplete>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
<ng-template #notAutoComplete>
|
|
112
|
+
}
|
|
113
|
+
@else {
|
|
92
114
|
<input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
|
|
93
115
|
[maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<mat-icon
|
|
98
|
-
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@if (!group.get(field.name).disabled) {
|
|
119
|
+
<button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset();">
|
|
120
|
+
<mat-icon>close</mat-icon>
|
|
121
|
+
</button>
|
|
122
|
+
}
|
|
99
123
|
|
|
100
|
-
|
|
124
|
+
@if (isPending()) {
|
|
125
|
+
<mat-spinner matSuffix mode="indeterminate" diameter="17"></mat-spinner>
|
|
126
|
+
}
|
|
101
127
|
|
|
102
|
-
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
128
|
+
@for (validation of field.validations; track validation.name) {
|
|
129
|
+
<ng-container ngProjectAs="mat-error">
|
|
130
|
+
@if (group.get(field.name).hasError(validation.name)) {
|
|
131
|
+
<mat-error>{{validation.message | translate}}</mat-error>
|
|
132
|
+
}
|
|
133
|
+
</ng-container>
|
|
134
|
+
}
|
|
135
|
+
@for (validation of field.asyncValidations; track validation.name) {
|
|
136
|
+
<ng-container ngProjectAs="mat-error">
|
|
137
|
+
@if (group.get(field.name).hasError(validation.name)) {
|
|
138
|
+
<mat-error>{{validation.message | translate}}</mat-error>
|
|
139
|
+
}
|
|
140
|
+
</ng-container>
|
|
141
|
+
}
|
|
108
142
|
</mat-form-field>
|
|
109
143
|
`, styles: ["mat-form-field{width:100%}\n"] }]
|
|
110
144
|
}] });
|
|
111
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
145
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY2xlYXJhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tsZXMtbWF0ZXJpYWwtZHluYW1pY2Zvcm1zL3NyYy9saWIvZmllbGRzL2lucHV0LmNsZWFyYWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFVLFNBQVMsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7QUFrRTNELE1BQU0sT0FBTywrQkFBZ0MsU0FBUSxzQkFBc0I7SUFFdkUsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDOzhHQUpRLCtCQUErQjtrR0FBL0IsK0JBQStCLHdGQTlEOUI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBMkRUOzsyRkFHUSwrQkFBK0I7a0JBaEUzQyxTQUFTOytCQUNJLDJCQUEyQixZQUMzQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0EyRFQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBPbkluaXQsIENvbXBvbmVudCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLbGVzRm9ybUlucHV0Q29tcG9uZW50IH0gZnJvbSAnLi9pbnB1dC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2tsZXMtZm9ybS1pbnB1dC1jbGVhcmFibGUnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1mb3JtLWZpZWxkIFtmb3JtR3JvdXBdPVwiZ3JvdXBcIiBbY29sb3JdPVwiZmllbGQuY29sb3JcIiBjbGFzcz1cImZvcm0tZWxlbWVudFwiPlxuICAgICAgICBAaWYgKGZpZWxkLmxhYmVsKSB7XG4gICAgICAgICAgICA8bWF0LWxhYmVsPnt7ZmllbGQubGFiZWx9fTwvbWF0LWxhYmVsPlxuICAgICAgICB9XG5cbiAgICAgICAgQGlmIChmaWVsZC5hdXRvY29tcGxldGUpIHtcbiAgICAgICAgICAgIDxpbnB1dCBtYXRJbnB1dCBtYXRUb29sdGlwPVwie3tmaWVsZC50b29sdGlwfX1cIiBbYXR0ci5pZF09XCJmaWVsZC5pZFwiIFtuZ0NsYXNzXT1cImZpZWxkLm5nQ2xhc3NcIiBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkLm5hbWVcIiBbcGxhY2Vob2xkZXJdPVwiZmllbGQucGxhY2Vob2xkZXIgfCB0cmFuc2xhdGVcIiBbdHlwZV09XCJmaWVsZC5pbnB1dFR5cGVcIlxuICAgICAgICAgICAgW21heExlbmd0aF09XCJmaWVsZC5tYXhMZW5ndGhcIiBbbWluXT1cImZpZWxkLm1pblwiIFttYXhdPVwiZmllbGQubWF4XCIgW3N0ZXBdPVwiZmllbGQuc3RlcFwiXG4gICAgICAgICAgICBbbWF0QXV0b2NvbXBsZXRlXT1cImF1dG9cIj5cblxuICAgICAgICAgICAgPG1hdC1hdXRvY29tcGxldGUgI2F1dG89XCJtYXRBdXRvY29tcGxldGVcIiBbZGlzcGxheVdpdGhdPVwiZGlzcGxheUZuLmJpbmQodGhpcylcIiBbcGFuZWxXaWR0aF09XCJ0aGlzLmZpZWxkLnBhbmVsV2lkdGhcIj5cbiAgICAgICAgICAgICAgICBAaWYgKCFmaWVsZC5hdXRvY29tcGxldGVDb21wb25lbnQpIHtcbiAgICAgICAgICAgICAgICAgICAgQGZvciAob3B0aW9uIG9mIGZpbHRlcmVkT3B0aW9uIHwgYXN5bmM7IHRyYWNrIG9wdGlvbikge1xuICAgICAgICAgICAgICAgICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cIm9wdGlvblwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt7ZmllbGQucHJvcGVydHkgPyBvcHRpb25bZmllbGQucHJvcGVydHldIDogb3B0aW9ufX1cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWF0LW9wdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICBAZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgIEBmb3IgKG9wdGlvbiBvZiBmaWx0ZXJlZE9wdGlvbiB8IGFzeW5jOyB0cmFjayBvcHRpb24pIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCJvcHRpb25cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIGtsZXNDb21wb25lbnQgW2NvbXBvbmVudF09XCJmaWVsZC5hdXRvY29tcGxldGVDb21wb25lbnRcIiBbdmFsdWVdPVwib3B0aW9uXCIgW2ZpZWxkXT1cImZpZWxkXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1vcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L21hdC1hdXRvY29tcGxldGU+XG4gICAgICAgIH1cbiAgICAgICAgQGVsc2Uge1xuICAgICAgICAgICAgPGlucHV0IG1hdElucHV0IG1hdFRvb2x0aXA9XCJ7e2ZpZWxkLnRvb2x0aXB9fVwiIFthdHRyLmlkXT1cImZpZWxkLmlkXCIgW25nQ2xhc3NdPVwiZmllbGQubmdDbGFzc1wiIFtmb3JtQ29udHJvbE5hbWVdPVwiZmllbGQubmFtZVwiIFtwbGFjZWhvbGRlcl09XCJmaWVsZC5wbGFjZWhvbGRlciB8IHRyYW5zbGF0ZVwiIFt0eXBlXT1cImZpZWxkLmlucHV0VHlwZVwiXG4gICAgICAgICAgICBbbWF4TGVuZ3RoXT1cImZpZWxkLm1heExlbmd0aFwiIFttaW5dPVwiZmllbGQubWluXCIgW21heF09XCJmaWVsZC5tYXhcIiBbc3RlcF09XCJmaWVsZC5zdGVwXCI+XG4gICAgICAgIH1cblxuICAgICAgICBAaWYgKCFncm91cC5nZXQoZmllbGQubmFtZSkuZGlzYWJsZWQpIHtcbiAgICAgICAgICAgIDxidXR0b24gbWF0U3VmZml4IG1hdC1pY29uLWJ1dHRvbiBhcmlhLWxhYmVsPVwiQ2xlYXJcIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cImdyb3VwLmNvbnRyb2xzW2ZpZWxkLm5hbWVdLnJlc2V0KCk7XCI+XG4gICAgICAgICAgICAgICAgPG1hdC1pY29uPmNsb3NlPC9tYXQtaWNvbj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICB9XG5cbiAgICAgICAgQGlmIChpc1BlbmRpbmcoKSkge1xuICAgICAgICAgICAgPG1hdC1zcGlubmVyIG1hdFN1ZmZpeCBtb2RlPVwiaW5kZXRlcm1pbmF0ZVwiIGRpYW1ldGVyPVwiMTdcIj48L21hdC1zcGlubmVyPlxuICAgICAgICB9XG5cbiAgICAgICAgQGZvciAodmFsaWRhdGlvbiBvZiBmaWVsZC52YWxpZGF0aW9uczsgdHJhY2sgdmFsaWRhdGlvbi5uYW1lKSB7XG4gICAgICAgICAgICA8bmctY29udGFpbmVyIG5nUHJvamVjdEFzPVwibWF0LWVycm9yXCI+XG4gICAgICAgICAgICAgICAgQGlmIChncm91cC5nZXQoZmllbGQubmFtZSkuaGFzRXJyb3IodmFsaWRhdGlvbi5uYW1lKSkge1xuICAgICAgICAgICAgICAgICAgICA8bWF0LWVycm9yPnt7dmFsaWRhdGlvbi5tZXNzYWdlIHwgdHJhbnNsYXRlfX08L21hdC1lcnJvcj5cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgfVxuICAgICAgICBAZm9yICh2YWxpZGF0aW9uIG9mIGZpZWxkLmFzeW5jVmFsaWRhdGlvbnM7IHRyYWNrIHZhbGlkYXRpb24ubmFtZSkge1xuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBuZ1Byb2plY3RBcz1cIm1hdC1lcnJvclwiPlxuICAgICAgICAgICAgICAgIEBpZiAoZ3JvdXAuZ2V0KGZpZWxkLm5hbWUpLmhhc0Vycm9yKHZhbGlkYXRpb24ubmFtZSkpIHtcbiAgICAgICAgICAgICAgICAgICAgPG1hdC1lcnJvcj57e3ZhbGlkYXRpb24ubWVzc2FnZSB8IHRyYW5zbGF0ZX19PC9tYXQtZXJyb3I+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIH1cbiAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIGAsXG4gICAgc3R5bGVzOiBbJ21hdC1mb3JtLWZpZWxkIHt3aWR0aDogY2FsYygxMDAlKX0nXVxufSlcbmV4cG9ydCBjbGFzcyBLbGVzRm9ybUlucHV0Q2xlYXJhYmxlQ29tcG9uZW50IGV4dGVuZHMgS2xlc0Zvcm1JbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn1cbiJdfQ==
|