@3kles/kles-material-dynamicforms 17.2.3 → 17.2.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.
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
1
2
|
import { Component } from '@angular/core';
|
|
2
3
|
import { Observable, of } from 'rxjs';
|
|
3
4
|
import { KlesFieldAbstract } from './field.abstract';
|
|
@@ -5,11 +6,14 @@ import * as i0 from "@angular/core";
|
|
|
5
6
|
import * as i1 from "@angular/common";
|
|
6
7
|
import * as i2 from "@angular/forms";
|
|
7
8
|
import * as i3 from "@angular/material/list";
|
|
8
|
-
import * as i4 from "
|
|
9
|
-
import * as i5 from "../
|
|
9
|
+
import * as i4 from "@angular/cdk/scrolling";
|
|
10
|
+
import * as i5 from "../directive/dynamic-component.directive";
|
|
11
|
+
import * as i6 from "../pipe/transform.pipe";
|
|
10
12
|
export class KlesFormSelectionListComponent extends KlesFieldAbstract {
|
|
11
13
|
ngOnInit() {
|
|
12
14
|
super.ngOnInit();
|
|
15
|
+
this.selection = new SelectionModel(this.field.multiple || false);
|
|
16
|
+
this.field.virtualScroll;
|
|
13
17
|
if (this.field.options instanceof Observable) {
|
|
14
18
|
this.options$ = this.field.options;
|
|
15
19
|
}
|
|
@@ -19,53 +23,104 @@ export class KlesFormSelectionListComponent extends KlesFieldAbstract {
|
|
|
19
23
|
else {
|
|
20
24
|
this.options$ = of(this.field.options);
|
|
21
25
|
}
|
|
26
|
+
this.selection.changed.subscribe(change => {
|
|
27
|
+
this.group.controls[this.field.name].patchValue(change.source.selected);
|
|
28
|
+
});
|
|
22
29
|
}
|
|
23
30
|
ngOnDestroy() {
|
|
24
31
|
super.ngOnDestroy();
|
|
25
32
|
}
|
|
33
|
+
onSelectionChange(selection) {
|
|
34
|
+
selection.options.forEach(option => {
|
|
35
|
+
option.selected ? this.selection.select(option.value)
|
|
36
|
+
: this.selection.deselect(option.value);
|
|
37
|
+
});
|
|
38
|
+
}
|
|
26
39
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: KlesFormSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
40
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.6", type: KlesFormSelectionListComponent, selector: "kles-form-selection-list", usesInheritance: true, ngImport: i0, template: `
|
|
28
41
|
<div class="margin-top" [formGroup]="group">
|
|
29
|
-
<mat-selection-list [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
42
|
+
<mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass"
|
|
43
|
+
(selectionChange)="onSelectionChange($event)">
|
|
44
|
+
|
|
45
|
+
@if(field.virtualScroll){
|
|
46
|
+
<cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
|
|
47
|
+
@if (!field.autocompleteComponent) {
|
|
48
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
49
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
50
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
51
|
+
</mat-list-option>
|
|
52
|
+
}
|
|
53
|
+
@else{
|
|
54
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
55
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
56
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
57
|
+
</mat-list-option>
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
</cdk-virtual-scroll-viewport>
|
|
36
61
|
}
|
|
37
|
-
@else
|
|
38
|
-
@
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
62
|
+
@else{
|
|
63
|
+
@if (!field.autocompleteComponent) {
|
|
64
|
+
@for (item of options$ | async; track item) {
|
|
65
|
+
<mat-list-option [value]="item">
|
|
66
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
67
|
+
</mat-list-option>
|
|
68
|
+
}
|
|
42
69
|
}
|
|
43
|
-
|
|
70
|
+
@else {
|
|
71
|
+
@for (item of options$ | async; track item) {
|
|
72
|
+
<mat-list-option [value]="item">
|
|
73
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
74
|
+
</mat-list-option>
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
44
78
|
</mat-selection-list>
|
|
45
79
|
</div>
|
|
46
|
-
`, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.
|
|
80
|
+
`, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\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: "component", type: i3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i5.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.KlesTransformPipe, name: "klesTransform" }] }); }
|
|
47
81
|
}
|
|
48
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: KlesFormSelectionListComponent, decorators: [{
|
|
49
83
|
type: Component,
|
|
50
84
|
args: [{ selector: 'kles-form-selection-list', template: `
|
|
51
85
|
<div class="margin-top" [formGroup]="group">
|
|
52
|
-
<mat-selection-list [
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
86
|
+
<mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass"
|
|
87
|
+
(selectionChange)="onSelectionChange($event)">
|
|
88
|
+
|
|
89
|
+
@if(field.virtualScroll){
|
|
90
|
+
<cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
|
|
91
|
+
@if (!field.autocompleteComponent) {
|
|
92
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
93
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
94
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
95
|
+
</mat-list-option>
|
|
96
|
+
}
|
|
97
|
+
@else{
|
|
98
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
99
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
100
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
101
|
+
</mat-list-option>
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
</cdk-virtual-scroll-viewport>
|
|
59
105
|
}
|
|
60
|
-
@else
|
|
61
|
-
@
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
106
|
+
@else{
|
|
107
|
+
@if (!field.autocompleteComponent) {
|
|
108
|
+
@for (item of options$ | async; track item) {
|
|
109
|
+
<mat-list-option [value]="item">
|
|
110
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
111
|
+
</mat-list-option>
|
|
112
|
+
}
|
|
65
113
|
}
|
|
66
|
-
|
|
114
|
+
@else {
|
|
115
|
+
@for (item of options$ | async; track item) {
|
|
116
|
+
<mat-list-option [value]="item">
|
|
117
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
118
|
+
</mat-list-option>
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
67
122
|
</mat-selection-list>
|
|
68
123
|
</div>
|
|
69
124
|
`, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"] }]
|
|
70
125
|
}] });
|
|
71
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
126
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvc2VsZWN0aW9uLWxpc3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsU0FBUyxFQUF1QyxNQUFNLGVBQWUsQ0FBQztBQUUvRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN0QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7Ozs7QUFpRHJELE1BQU0sT0FBTyw4QkFBK0IsU0FBUSxpQkFBaUI7SUFLakUsUUFBUTtRQUNKLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUVqQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksY0FBYyxDQUFNLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxJQUFJLEtBQUssQ0FBQyxDQUFDO1FBQ3ZFLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFBO1FBQ3hCLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLFlBQVksVUFBVSxFQUFFO1lBQzFDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUM7U0FDdEM7YUFDSSxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxZQUFZLFFBQVEsRUFBRTtZQUM3QyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDeEM7YUFDSTtZQUNELElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUM7U0FDMUM7UUFFRCxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDdEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUM1RSxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFDRCxXQUFXO1FBQ1AsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxTQUFpQztRQUMvQyxTQUFTLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRTtZQUMvQixNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDO2dCQUNqRCxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQy9DLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs4R0FqQ1EsOEJBQThCO2tHQUE5Qiw4QkFBOEIsdUZBN0M3Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQXdDYjs7MkZBS1ksOEJBQThCO2tCQS9DMUMsU0FBUzsrQkFDSSwwQkFBMEIsWUFDMUI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0F3Q2IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBTZWxlY3Rpb25Nb2RlbCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2xsZWN0aW9ucyc7XG5pbXBvcnQgeyBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0LCBWaWV3Q29udGFpbmVyUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRTZWxlY3Rpb25MaXN0Q2hhbmdlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvbGlzdCc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBvZiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgS2xlc0ZpZWxkQWJzdHJhY3QgfSBmcm9tICcuL2ZpZWxkLmFic3RyYWN0JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdrbGVzLWZvcm0tc2VsZWN0aW9uLWxpc3QnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cIm1hcmdpbi10b3BcIiBbZm9ybUdyb3VwXT1cImdyb3VwXCI+XG4gICAgICAgIDxtYXQtc2VsZWN0aW9uLWxpc3QgW2F0dHIuaWRdPVwiZmllbGQuaWRcIiBbbXVsdGlwbGVdPVwiZmllbGQubXVsdGlwbGVcIiBbbmdDbGFzc109XCJmaWVsZC5uZ0NsYXNzXCJcbiAgICAgICAgKHNlbGVjdGlvbkNoYW5nZSk9XCJvblNlbGVjdGlvbkNoYW5nZSgkZXZlbnQpXCI+XG5cbiAgICAgICAgICAgIEBpZihmaWVsZC52aXJ0dWFsU2Nyb2xsKXtcbiAgICAgICAgICAgICAgICA8Y2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0IFtpdGVtU2l6ZV09XCJmaWVsZC5pdGVtU2l6ZSB8fCAyMFwiIHN0eWxlPVwiaGVpZ2h0OjEwMCVcIj5cbiAgICAgICAgICAgICAgICAgICAgQGlmICghZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50KSB7XG4gICAgICAgICAgICAgICAgICAgICAgICA8bWF0LWxpc3Qtb3B0aW9uICpjZGtWaXJ0dWFsRm9yPVwibGV0IGl0ZW0gb2YgKG9wdGlvbnMkIHwgYXN5bmMpOyB0ZW1wbGF0ZUNhY2hlU2l6ZTogMFwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbdmFsdWVdPVwiaXRlbVwiIFtzZWxlY3RlZF09XCJzZWxlY3Rpb24uaXNTZWxlY3RlZChpdGVtKVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt7KGZpZWxkLnByb3BlcnR5ID8gaXRlbVtmaWVsZC5wcm9wZXJ0eV0gOiBpdGVtKSB8IGtsZXNUcmFuc2Zvcm06ZmllbGQucGlwZVRyYW5zZm9ybX19XG4gICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1saXN0LW9wdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICBAZWxzZXtcbiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXQtbGlzdC1vcHRpb24gKmNka1ZpcnR1YWxGb3I9XCJsZXQgaXRlbSBvZiAob3B0aW9ucyQgfCBhc3luYyk7IHRlbXBsYXRlQ2FjaGVTaXplOiAwXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFt2YWx1ZV09XCJpdGVtXCIgW3NlbGVjdGVkXT1cInNlbGVjdGlvbi5pc1NlbGVjdGVkKGl0ZW0pXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBrbGVzQ29tcG9uZW50IFtjb21wb25lbnRdPVwiZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCIgW3ZhbHVlXT1cIml0ZW1cIiBbZmllbGRdPVwiZmllbGRcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWF0LWxpc3Qtb3B0aW9uPlxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIFxuICAgICAgICAgICAgICAgIDwvY2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0PlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgQGVsc2V7XG4gICAgICAgICAgICAgICAgQGlmICghZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50KSB7XG4gICAgICAgICAgICAgICAgICAgIEBmb3IgKGl0ZW0gb2Ygb3B0aW9ucyQgfCBhc3luYzsgdHJhY2sgaXRlbSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgPG1hdC1saXN0LW9wdGlvbiBbdmFsdWVdPVwiaXRlbVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt7KGZpZWxkLnByb3BlcnR5ID8gaXRlbVtmaWVsZC5wcm9wZXJ0eV0gOiBpdGVtKSB8IGtsZXNUcmFuc2Zvcm06ZmllbGQucGlwZVRyYW5zZm9ybX19XG4gICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1saXN0LW9wdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICBAZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgIEBmb3IgKGl0ZW0gb2Ygb3B0aW9ucyQgfCBhc3luYzsgdHJhY2sgaXRlbSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgPG1hdC1saXN0LW9wdGlvbiBbdmFsdWVdPVwiaXRlbVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIga2xlc0NvbXBvbmVudCBbY29tcG9uZW50XT1cImZpZWxkLmF1dG9jb21wbGV0ZUNvbXBvbmVudFwiIFt2YWx1ZV09XCJpdGVtXCIgW2ZpZWxkXT1cImZpZWxkXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1saXN0LW9wdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0gICAgICAgICAgICBcbiAgICAgICAgPC9tYXQtc2VsZWN0aW9uLWxpc3Q+XG4gICAgPC9kaXY+XG5gLFxuICAgIHN0eWxlczogW2BcbiAgICAgICAgbWF0LXNlbGVjdGlvbi1saXN0IHt3aWR0aDogMTAwJTtoZWlnaHQ6IDI1MHB4OyBvdmVyZmxvdzphdXRvfWBcbiAgICBdLFxufSlcbmV4cG9ydCBjbGFzcyBLbGVzRm9ybVNlbGVjdGlvbkxpc3RDb21wb25lbnQgZXh0ZW5kcyBLbGVzRmllbGRBYnN0cmFjdCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIHNlbGVjdGlvbjogU2VsZWN0aW9uTW9kZWw8YW55PjtcbiAgICBvcHRpb25zJDogT2JzZXJ2YWJsZTxhbnlbXT47XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgc3VwZXIubmdPbkluaXQoKTtcblxuICAgICAgICB0aGlzLnNlbGVjdGlvbiA9IG5ldyBTZWxlY3Rpb25Nb2RlbDxhbnk+KHRoaXMuZmllbGQubXVsdGlwbGUgfHwgZmFsc2UpO1xuICAgICAgICB0aGlzLmZpZWxkLnZpcnR1YWxTY3JvbGxcbiAgICAgICAgaWYgKHRoaXMuZmllbGQub3B0aW9ucyBpbnN0YW5jZW9mIE9ic2VydmFibGUpIHtcbiAgICAgICAgICAgIHRoaXMub3B0aW9ucyQgPSB0aGlzLmZpZWxkLm9wdGlvbnM7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSBpZiAodGhpcy5maWVsZC5vcHRpb25zIGluc3RhbmNlb2YgRnVuY3Rpb24pIHtcbiAgICAgICAgICAgIHRoaXMub3B0aW9ucyQgPSB0aGlzLmZpZWxkLm9wdGlvbnMoKTtcbiAgICAgICAgfVxuICAgICAgICBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMub3B0aW9ucyQgPSBvZih0aGlzLmZpZWxkLm9wdGlvbnMpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5zZWxlY3Rpb24uY2hhbmdlZC5zdWJzY3JpYmUoY2hhbmdlID0+IHtcbiAgICAgICAgICAgIHRoaXMuZ3JvdXAuY29udHJvbHNbdGhpcy5maWVsZC5uYW1lXS5wYXRjaFZhbHVlKGNoYW5nZS5zb3VyY2Uuc2VsZWN0ZWQpO1xuICAgICAgICB9KTtcbiAgICB9XG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XG4gICAgfVxuXG4gICAgb25TZWxlY3Rpb25DaGFuZ2Uoc2VsZWN0aW9uOiBNYXRTZWxlY3Rpb25MaXN0Q2hhbmdlKSB7XG4gICAgICAgIHNlbGVjdGlvbi5vcHRpb25zLmZvckVhY2gob3B0aW9uID0+IHtcbiAgICAgICAgICAgIG9wdGlvbi5zZWxlY3RlZCA/IHRoaXMuc2VsZWN0aW9uLnNlbGVjdChvcHRpb24udmFsdWUpXG4gICAgICAgICAgICAgICAgOiB0aGlzLnNlbGVjdGlvbi5kZXNlbGVjdChvcHRpb24udmFsdWUpXG4gICAgICAgIH0pO1xuICAgIH1cbn1cbiJdfQ==
|
|
@@ -68,6 +68,7 @@ import { v4 } from 'uuid';
|
|
|
68
68
|
import * as i5$1 from '@angular/cdk/text-field';
|
|
69
69
|
import * as i10 from 'ngx-mat-select-search';
|
|
70
70
|
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
|
|
71
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
71
72
|
import * as i7$1 from '@3kles/kles-material-datepicker';
|
|
72
73
|
import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
|
|
73
74
|
|
|
@@ -3333,6 +3334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
|
|
|
3333
3334
|
class KlesFormSelectionListComponent extends KlesFieldAbstract {
|
|
3334
3335
|
ngOnInit() {
|
|
3335
3336
|
super.ngOnInit();
|
|
3337
|
+
this.selection = new SelectionModel(this.field.multiple || false);
|
|
3338
|
+
this.field.virtualScroll;
|
|
3336
3339
|
if (this.field.options instanceof Observable) {
|
|
3337
3340
|
this.options$ = this.field.options;
|
|
3338
3341
|
}
|
|
@@ -3342,51 +3345,102 @@ class KlesFormSelectionListComponent extends KlesFieldAbstract {
|
|
|
3342
3345
|
else {
|
|
3343
3346
|
this.options$ = of(this.field.options);
|
|
3344
3347
|
}
|
|
3348
|
+
this.selection.changed.subscribe(change => {
|
|
3349
|
+
this.group.controls[this.field.name].patchValue(change.source.selected);
|
|
3350
|
+
});
|
|
3345
3351
|
}
|
|
3346
3352
|
ngOnDestroy() {
|
|
3347
3353
|
super.ngOnDestroy();
|
|
3348
3354
|
}
|
|
3355
|
+
onSelectionChange(selection) {
|
|
3356
|
+
selection.options.forEach(option => {
|
|
3357
|
+
option.selected ? this.selection.select(option.value)
|
|
3358
|
+
: this.selection.deselect(option.value);
|
|
3359
|
+
});
|
|
3360
|
+
}
|
|
3349
3361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: KlesFormSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3350
3362
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.6", type: KlesFormSelectionListComponent, selector: "kles-form-selection-list", usesInheritance: true, ngImport: i0, template: `
|
|
3351
3363
|
<div class="margin-top" [formGroup]="group">
|
|
3352
|
-
<mat-selection-list [
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
3364
|
+
<mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass"
|
|
3365
|
+
(selectionChange)="onSelectionChange($event)">
|
|
3366
|
+
|
|
3367
|
+
@if(field.virtualScroll){
|
|
3368
|
+
<cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
|
|
3369
|
+
@if (!field.autocompleteComponent) {
|
|
3370
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
3371
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
3372
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
3373
|
+
</mat-list-option>
|
|
3374
|
+
}
|
|
3375
|
+
@else{
|
|
3376
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
3377
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
3378
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
3379
|
+
</mat-list-option>
|
|
3380
|
+
}
|
|
3381
|
+
|
|
3382
|
+
</cdk-virtual-scroll-viewport>
|
|
3359
3383
|
}
|
|
3360
|
-
@else
|
|
3361
|
-
@
|
|
3362
|
-
|
|
3363
|
-
<
|
|
3364
|
-
|
|
3384
|
+
@else{
|
|
3385
|
+
@if (!field.autocompleteComponent) {
|
|
3386
|
+
@for (item of options$ | async; track item) {
|
|
3387
|
+
<mat-list-option [value]="item">
|
|
3388
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
3389
|
+
</mat-list-option>
|
|
3390
|
+
}
|
|
3365
3391
|
}
|
|
3366
|
-
|
|
3392
|
+
@else {
|
|
3393
|
+
@for (item of options$ | async; track item) {
|
|
3394
|
+
<mat-list-option [value]="item">
|
|
3395
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
3396
|
+
</mat-list-option>
|
|
3397
|
+
}
|
|
3398
|
+
}
|
|
3399
|
+
}
|
|
3367
3400
|
</mat-selection-list>
|
|
3368
3401
|
</div>
|
|
3369
|
-
`, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.
|
|
3402
|
+
`, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
|
|
3370
3403
|
}
|
|
3371
3404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: KlesFormSelectionListComponent, decorators: [{
|
|
3372
3405
|
type: Component,
|
|
3373
3406
|
args: [{ selector: 'kles-form-selection-list', template: `
|
|
3374
3407
|
<div class="margin-top" [formGroup]="group">
|
|
3375
|
-
<mat-selection-list [
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3408
|
+
<mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass"
|
|
3409
|
+
(selectionChange)="onSelectionChange($event)">
|
|
3410
|
+
|
|
3411
|
+
@if(field.virtualScroll){
|
|
3412
|
+
<cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
|
|
3413
|
+
@if (!field.autocompleteComponent) {
|
|
3414
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
3415
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
3416
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
3417
|
+
</mat-list-option>
|
|
3418
|
+
}
|
|
3419
|
+
@else{
|
|
3420
|
+
<mat-list-option *cdkVirtualFor="let item of (options$ | async); templateCacheSize: 0"
|
|
3421
|
+
[value]="item" [selected]="selection.isSelected(item)">
|
|
3422
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
3423
|
+
</mat-list-option>
|
|
3424
|
+
}
|
|
3425
|
+
|
|
3426
|
+
</cdk-virtual-scroll-viewport>
|
|
3382
3427
|
}
|
|
3383
|
-
@else
|
|
3384
|
-
@
|
|
3385
|
-
|
|
3386
|
-
<
|
|
3387
|
-
|
|
3428
|
+
@else{
|
|
3429
|
+
@if (!field.autocompleteComponent) {
|
|
3430
|
+
@for (item of options$ | async; track item) {
|
|
3431
|
+
<mat-list-option [value]="item">
|
|
3432
|
+
{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
|
|
3433
|
+
</mat-list-option>
|
|
3434
|
+
}
|
|
3388
3435
|
}
|
|
3389
|
-
|
|
3436
|
+
@else {
|
|
3437
|
+
@for (item of options$ | async; track item) {
|
|
3438
|
+
<mat-list-option [value]="item">
|
|
3439
|
+
<ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
|
|
3440
|
+
</mat-list-option>
|
|
3441
|
+
}
|
|
3442
|
+
}
|
|
3443
|
+
}
|
|
3390
3444
|
</mat-selection-list>
|
|
3391
3445
|
</div>
|
|
3392
3446
|
`, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"] }]
|