ng-jvx-multiselect 17.0.3 → 17.0.5
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/directives/ng-jvx-disabled-option.directive.mjs +4 -4
- package/esm2022/lib/directives/ng-jvx-focus.directive.mjs +4 -4
- package/esm2022/lib/directives/ng-jvx-group-header.directive.mjs +4 -4
- package/esm2022/lib/directives/ng-jvx-options-template.directive.mjs +4 -4
- package/esm2022/lib/directives/ng-jvx-selection-template.directive.mjs +4 -4
- package/esm2022/lib/ng-jvx-multiselect.component.mjs +55 -13
- package/esm2022/lib/ng-jvx-multiselect.module.mjs +5 -5
- package/esm2022/lib/ng-jvx-multiselect.service.mjs +5 -5
- package/esm2022/lib/ng-jvx-option/ng-jvx-option.component.mjs +11 -8
- package/fesm2022/ng-jvx-multiselect.mjs +87 -42
- package/fesm2022/ng-jvx-multiselect.mjs.map +1 -1
- package/lib/ng-jvx-multiselect.component.d.ts +2 -0
- package/lib/ng-jvx-option/ng-jvx-option.component.d.ts +1 -1
- package/package.json +1 -1
- package/src/lib/ng-jvx-option/ng-jvx-option.component.scss +1 -1
|
@@ -27,30 +27,33 @@ import { MatOptionModule } from '@angular/material/core';
|
|
|
27
27
|
import { MatSelectModule } from '@angular/material/select';
|
|
28
28
|
|
|
29
29
|
class NgJvxOptionComponent {
|
|
30
|
+
// public isSelected = false;
|
|
30
31
|
constructor() {
|
|
31
32
|
this.isSelected = false;
|
|
32
33
|
}
|
|
33
34
|
ngOnInit() {
|
|
34
35
|
}
|
|
35
36
|
ngDoCheck() {
|
|
36
|
-
if (this.isSelected !== this.listOption.selected) {
|
|
37
|
-
|
|
38
|
-
}
|
|
37
|
+
// if (this.isSelected !== this.listOption.selected) {
|
|
38
|
+
// this.isSelected = this.listOption.selected;
|
|
39
|
+
// }
|
|
39
40
|
}
|
|
40
41
|
deselect() {
|
|
41
42
|
this.listOption.selected = false;
|
|
42
43
|
}
|
|
43
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
44
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: "value", isSelected: "isSelected" }, viewQueries: [{ propertyName: "listOption", first: true, predicate: ["listOption"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n <ng-content></ng-content>\r\n <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option.mat-list-single-selected-option{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option.mat-list-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
45
46
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
|
|
47
48
|
type: Component,
|
|
48
|
-
args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n <ng-content></ng-content>\r\n <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option
|
|
49
|
+
args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n <ng-content></ng-content>\r\n <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option.mat-list-single-selected-option{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option.mat-list-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"] }]
|
|
49
50
|
}], ctorParameters: () => [], propDecorators: { listOption: [{
|
|
50
51
|
type: ViewChild,
|
|
51
52
|
args: ['listOption', { static: true }]
|
|
52
53
|
}], value: [{
|
|
53
54
|
type: Input
|
|
55
|
+
}], isSelected: [{
|
|
56
|
+
type: Input
|
|
54
57
|
}] } });
|
|
55
58
|
|
|
56
59
|
class NgJvxOptionsTemplateDirective {
|
|
@@ -64,10 +67,10 @@ class NgJvxOptionsTemplateDirective {
|
|
|
64
67
|
this.vcRef.createEmbeddedView(this.template, { $implicit: item });
|
|
65
68
|
}
|
|
66
69
|
}
|
|
67
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
68
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
70
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
71
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
|
|
69
72
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
|
|
71
74
|
type: Directive,
|
|
72
75
|
args: [{
|
|
73
76
|
// tslint:disable-next-line:directive-selector
|
|
@@ -87,10 +90,10 @@ class NgJvxSelectionTemplateDirective {
|
|
|
87
90
|
this.vcRef.createEmbeddedView(this.template, { $implicit: item });
|
|
88
91
|
}
|
|
89
92
|
}
|
|
90
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
91
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
93
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
94
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
|
|
92
95
|
}
|
|
93
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
|
|
94
97
|
type: Directive,
|
|
95
98
|
args: [{
|
|
96
99
|
// tslint:disable-next-line:directive-selector
|
|
@@ -110,10 +113,10 @@ class NgJvxGroupHeaderDirective {
|
|
|
110
113
|
this.vcRef.createEmbeddedView(this.template, { $implicit: item });
|
|
111
114
|
}
|
|
112
115
|
}
|
|
113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
114
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
117
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
|
|
115
118
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
|
|
117
120
|
type: Directive,
|
|
118
121
|
args: [{
|
|
119
122
|
// tslint:disable-next-line:directive-selector
|
|
@@ -152,10 +155,10 @@ class NgJvxDisabledOptionDirective {
|
|
|
152
155
|
this.unsubs.next();
|
|
153
156
|
this.unsubs.complete();
|
|
154
157
|
}
|
|
155
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
156
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
158
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
159
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
|
|
157
160
|
}
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
|
|
159
162
|
type: Directive,
|
|
160
163
|
args: [{
|
|
161
164
|
// tslint:disable-next-line:directive-selector
|
|
@@ -182,7 +185,7 @@ class NgJvxMultiselectService {
|
|
|
182
185
|
.set('size', pageSize.toString());
|
|
183
186
|
}
|
|
184
187
|
const options = {
|
|
185
|
-
mode: 'no-cors',
|
|
188
|
+
mode: 'no-cors', // cors
|
|
186
189
|
headers: requestHeaders,
|
|
187
190
|
context: setJvxCall(),
|
|
188
191
|
// withCredentials: true,
|
|
@@ -197,10 +200,10 @@ class NgJvxMultiselectService {
|
|
|
197
200
|
return this.http.post(url, options);
|
|
198
201
|
}
|
|
199
202
|
}
|
|
200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
201
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
204
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
|
|
202
205
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
|
|
204
207
|
type: Injectable,
|
|
205
208
|
args: [{
|
|
206
209
|
providedIn: 'root'
|
|
@@ -221,10 +224,10 @@ class NgJvxFocusDirective {
|
|
|
221
224
|
this.el.nativeElement.focus();
|
|
222
225
|
}
|
|
223
226
|
}
|
|
224
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
225
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
227
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
228
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 }); }
|
|
226
229
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
|
|
228
231
|
type: Directive,
|
|
229
232
|
args: [{
|
|
230
233
|
// tslint:disable-next-line:directive-selector
|
|
@@ -240,14 +243,19 @@ class NgJvxMultiselectComponent {
|
|
|
240
243
|
return this.focused || !this.empty || this.value.length > 0 || !!this.isPlaceholderActive;
|
|
241
244
|
}
|
|
242
245
|
set value(value) {
|
|
243
|
-
this.
|
|
244
|
-
|
|
245
|
-
this.
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
246
|
+
if (!this.areArraysEqual(value, this.pValue)) {
|
|
247
|
+
this.pValue = value ?? [];
|
|
248
|
+
this.showList = !this.showList;
|
|
249
|
+
if (value) {
|
|
250
|
+
this.form.get('selectionValue').setValue(this.pValue.map(v => v[this.itemValue]));
|
|
251
|
+
}
|
|
252
|
+
else {
|
|
253
|
+
this.form.get('selectionValue').setValue(value);
|
|
254
|
+
}
|
|
255
|
+
this.changeDetectorRef.detectChanges();
|
|
256
|
+
this.showList = !this.showList;
|
|
257
|
+
this.stateChanges.next();
|
|
249
258
|
}
|
|
250
|
-
this.stateChanges.next();
|
|
251
259
|
}
|
|
252
260
|
get value() {
|
|
253
261
|
return this.pValue;
|
|
@@ -420,6 +428,40 @@ class NgJvxMultiselectComponent {
|
|
|
420
428
|
this.changeDetectorRef.markForCheck();
|
|
421
429
|
});
|
|
422
430
|
}
|
|
431
|
+
areArraysEqual(arr1, arr2) {
|
|
432
|
+
// Se entrambi sono null o undefined, sono uguali
|
|
433
|
+
if (!arr1 && !arr2) {
|
|
434
|
+
return true;
|
|
435
|
+
}
|
|
436
|
+
// Se solo uno dei due è null/undefined, sono diversi
|
|
437
|
+
if (!arr1 || !arr2) {
|
|
438
|
+
return false;
|
|
439
|
+
}
|
|
440
|
+
// Se hanno lunghezza diversa, sono diversi
|
|
441
|
+
if (arr1.length !== arr2.length) {
|
|
442
|
+
return false;
|
|
443
|
+
}
|
|
444
|
+
// Verifica che ogni elemento di arr1 abbia una corrispondenza in arr2
|
|
445
|
+
return arr1.every(item1 => {
|
|
446
|
+
return arr2.some(item2 => {
|
|
447
|
+
if (typeof item1 === 'object' && item1 !== null) {
|
|
448
|
+
// Se gli elementi sono oggetti, confronta i valori itemValue
|
|
449
|
+
return item1[this.itemValue] === item2[this.itemValue];
|
|
450
|
+
}
|
|
451
|
+
// Altrimenti confronta direttamente i valori
|
|
452
|
+
return item1 === item2;
|
|
453
|
+
});
|
|
454
|
+
}) &&
|
|
455
|
+
// Verifica anche il contrario per assicurarsi che non ci siano elementi extra
|
|
456
|
+
arr2.every(item2 => {
|
|
457
|
+
return arr1.some(item1 => {
|
|
458
|
+
if (typeof item2 === 'object' && item2 !== null) {
|
|
459
|
+
return item2[this.itemValue] === item1[this.itemValue];
|
|
460
|
+
}
|
|
461
|
+
return item2 === item1;
|
|
462
|
+
});
|
|
463
|
+
});
|
|
464
|
+
}
|
|
423
465
|
clientSearch() {
|
|
424
466
|
let obs;
|
|
425
467
|
if (this.url && this.url.length > 0) {
|
|
@@ -725,16 +767,19 @@ class NgJvxMultiselectComponent {
|
|
|
725
767
|
closeMenu() {
|
|
726
768
|
this.trigger.closeMenu();
|
|
727
769
|
}
|
|
728
|
-
|
|
729
|
-
|
|
770
|
+
optionsIsSelected(option) {
|
|
771
|
+
return this.form.get('selectionValue').value.some(s => s === option[this.itemValue]);
|
|
772
|
+
}
|
|
773
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: NgJvxMultiselectService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
774
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgJvxMultiselectComponent, selector: "ng-jvx-multiselect", inputs: { options: "options", multi: "multi", url: "url", requestType: "requestType", itemValue: "itemValue", itemText: "itemText", ignorePagination: "ignorePagination", clearable: "clearable", closeOnClick: "closeOnClick", hasErrors: "hasErrors", searchMode: "searchMode", searchInput: "searchInput", searchLabel: "searchLabel", listProp: "listProp", totalRowsProp: "totalRowsProp", panelClass: "panelClass", searchProp: "searchProp", closeButton: "closeButton", mapper: "mapper", multiMapper: "multiMapper", searchMapper: "searchMapper", groupBy: "groupBy", value: "value", requestHeaders: "requestHeaders", required: "required", disabled: "disabled", pageSize: "pageSize" }, outputs: { valueChange: "valueChange", jvxMultiselectOpen: "jvxMultiselectOpen", jvxMultiselectOpened: "jvxMultiselectOpened", jvxMultiselectClose: "jvxMultiselectClose", jvxMultiselectClosed: "jvxMultiselectClosed", scrollEnd: "scrollEnd" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat" } }, providers: [
|
|
730
775
|
{
|
|
731
776
|
provide: MatFormFieldControl,
|
|
732
777
|
useExisting: forwardRef(() => NgJvxMultiselectComponent),
|
|
733
778
|
multi: true,
|
|
734
779
|
}
|
|
735
|
-
], queries: [{ propertyName: "optionsTemplate", first: true, predicate: NgJvxOptionsTemplateDirective, descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: NgJvxSelectionTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: NgJvxGroupHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "jvxMultiselect", first: true, predicate: ["jvxMultiselect"], descendants: true, static: true }, { propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n <!-- START MENU -->\r\n <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n #trigger=\"matMenuTrigger\">\r\n <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n [yPosition]=\"yPosition\">\r\n <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"menu-list-container\"\r\n #menuLIstContainer\r\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n [ngJvxFocus]=\"isOpen\"\r\n (input)=\"onSearchValueChange($event)\"/>\r\n </div>\r\n <div\r\n [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n <ng-scrollbar style=\"width: 100%\"\r\n smoothScroll\r\n [visibility]=\"'hover'\"\r\n [appearance]=\"'compact'\"\r\n [sensorDisabled]=\"isLoading\"\r\n [autoHeightDisabled]=\"false\" #scrollbar>\r\n <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n <mat-selection-list #selection [multiple]=\"multi\"\r\n *ngIf=\"showList\"\r\n [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n (selectionChange)=\"onChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"selectionValue\">\r\n <ng-content></ng-content>\r\n <ng-container *ngIf=\"!!groupBy\">\r\n <ng-container *ngFor=\"let opt of orderedOptions\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!groupBy || groupBy.length === 0\">\r\n <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </mat-selection-list>\r\n </div>\r\n </ng-scrollbar>\r\n </div>\r\n\r\n </div>\r\n <div class=\"menu-footer\">\r\n <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n </div>\r\n\r\n </mat-menu>\r\n </div>\r\n <!-- END MENU -->\r\n <!-- START INPUT -->\r\n <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n (click)=\"clickOnMenuTrigger($event)\"\r\n #valueContainer>\r\n @if (value.length === 0) {\r\n <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n <ng-content select=\"[placeholder]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n <mat-icon style=\"font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\">clear\r\n </mat-icon>\r\n </div>\r\n <div class=\"ng-jvx-multiselect-arrow\">\r\n <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n <div style=\"max-width: 100%;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\">{{ option[itemText] }}\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n class=\"ng-jvx-multiselect-chip\"\r\n [removable]=\"true\" (removed)=\"deselect(val)\">\r\n <span class=\"chip-content\"\r\n [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"], dependencies: [{ kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i9.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
780
|
+
], queries: [{ propertyName: "optionsTemplate", first: true, predicate: NgJvxOptionsTemplateDirective, descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: NgJvxSelectionTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: NgJvxGroupHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "jvxMultiselect", first: true, predicate: ["jvxMultiselect"], descendants: true, static: true }, { propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n <!-- START MENU -->\r\n <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n #trigger=\"matMenuTrigger\">\r\n <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n [yPosition]=\"yPosition\">\r\n <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"menu-list-container\"\r\n #menuLIstContainer\r\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n [ngJvxFocus]=\"isOpen\"\r\n (input)=\"onSearchValueChange($event)\"/>\r\n </div>\r\n <div\r\n [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n <ng-scrollbar style=\"width: 100%\"\r\n smoothScroll\r\n [visibility]=\"'hover'\"\r\n [appearance]=\"'compact'\"\r\n [sensorDisabled]=\"isLoading\"\r\n [autoHeightDisabled]=\"false\" #scrollbar>\r\n <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n <mat-selection-list #selection [multiple]=\"multi\"\r\n *ngIf=\"showList\"\r\n [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n (selectionChange)=\"onChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"selectionValue\">\r\n\r\n <ng-content></ng-content>\r\n <ng-container *ngIf=\"!!groupBy\">\r\n <ng-container *ngFor=\"let opt of orderedOptions\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\" [isSelected]=\"optionsIsSelected(option)\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!groupBy || groupBy.length === 0\">\r\n <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\" [isSelected]=\"optionsIsSelected(option)\">\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </mat-selection-list>\r\n </div>\r\n </ng-scrollbar>\r\n </div>\r\n\r\n </div>\r\n <div class=\"menu-footer\">\r\n <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n </div>\r\n\r\n </mat-menu>\r\n </div>\r\n <!-- END MENU -->\r\n <!-- START INPUT -->\r\n <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n (click)=\"clickOnMenuTrigger($event)\"\r\n #valueContainer>\r\n @if (value.length === 0) {\r\n <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n <ng-content select=\"[placeholder]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n <mat-icon style=\"font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\">clear\r\n </mat-icon>\r\n </div>\r\n <div class=\"ng-jvx-multiselect-arrow\">\r\n <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n <div style=\"max-width: 100%;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\">{{ option[itemText] }}\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n class=\"ng-jvx-multiselect-chip\"\r\n [removable]=\"true\" (removed)=\"deselect(val)\">\r\n <span class=\"chip-content\"\r\n [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"], dependencies: [{ kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i9.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value", "isSelected"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
736
781
|
}
|
|
737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
782
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
|
|
738
783
|
type: Component,
|
|
739
784
|
args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
740
785
|
{
|
|
@@ -742,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
742
787
|
useExisting: forwardRef(() => NgJvxMultiselectComponent),
|
|
743
788
|
multi: true,
|
|
744
789
|
}
|
|
745
|
-
], template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n <!-- START MENU -->\r\n <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n #trigger=\"matMenuTrigger\">\r\n <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n [yPosition]=\"yPosition\">\r\n <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"menu-list-container\"\r\n #menuLIstContainer\r\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n [ngJvxFocus]=\"isOpen\"\r\n (input)=\"onSearchValueChange($event)\"/>\r\n </div>\r\n <div\r\n [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n <ng-scrollbar style=\"width: 100%\"\r\n smoothScroll\r\n [visibility]=\"'hover'\"\r\n [appearance]=\"'compact'\"\r\n [sensorDisabled]=\"isLoading\"\r\n [autoHeightDisabled]=\"false\" #scrollbar>\r\n <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n <mat-selection-list #selection [multiple]=\"multi\"\r\n *ngIf=\"showList\"\r\n [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n (selectionChange)=\"onChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"selectionValue\">\r\n <ng-content></ng-content>\r\n <ng-container *ngIf=\"!!groupBy\">\r\n <ng-container *ngFor=\"let opt of orderedOptions\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!groupBy || groupBy.length === 0\">\r\n <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </mat-selection-list>\r\n </div>\r\n </ng-scrollbar>\r\n </div>\r\n\r\n </div>\r\n <div class=\"menu-footer\">\r\n <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n </div>\r\n\r\n </mat-menu>\r\n </div>\r\n <!-- END MENU -->\r\n <!-- START INPUT -->\r\n <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n (click)=\"clickOnMenuTrigger($event)\"\r\n #valueContainer>\r\n @if (value.length === 0) {\r\n <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n <ng-content select=\"[placeholder]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n <mat-icon style=\"font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\">clear\r\n </mat-icon>\r\n </div>\r\n <div class=\"ng-jvx-multiselect-arrow\">\r\n <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n <div style=\"max-width: 100%;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\">{{ option[itemText] }}\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n class=\"ng-jvx-multiselect-chip\"\r\n [removable]=\"true\" (removed)=\"deselect(val)\">\r\n <span class=\"chip-content\"\r\n [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"] }]
|
|
790
|
+
], template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n <!-- START MENU -->\r\n <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n #trigger=\"matMenuTrigger\">\r\n <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n [yPosition]=\"yPosition\">\r\n <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"menu-list-container\"\r\n #menuLIstContainer\r\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n [ngJvxFocus]=\"isOpen\"\r\n (input)=\"onSearchValueChange($event)\"/>\r\n </div>\r\n <div\r\n [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n <ng-scrollbar style=\"width: 100%\"\r\n smoothScroll\r\n [visibility]=\"'hover'\"\r\n [appearance]=\"'compact'\"\r\n [sensorDisabled]=\"isLoading\"\r\n [autoHeightDisabled]=\"false\" #scrollbar>\r\n <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n <mat-selection-list #selection [multiple]=\"multi\"\r\n *ngIf=\"showList\"\r\n [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n (selectionChange)=\"onChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"selectionValue\">\r\n\r\n <ng-content></ng-content>\r\n <ng-container *ngIf=\"!!groupBy\">\r\n <ng-container *ngFor=\"let opt of orderedOptions\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\" [isSelected]=\"optionsIsSelected(option)\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!groupBy || groupBy.length === 0\">\r\n <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\" [isSelected]=\"optionsIsSelected(option)\">\r\n <div class=\"ng-jvx-option-wrapper\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </mat-selection-list>\r\n </div>\r\n </ng-scrollbar>\r\n </div>\r\n\r\n </div>\r\n <div class=\"menu-footer\">\r\n <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n </div>\r\n\r\n </mat-menu>\r\n </div>\r\n <!-- END MENU -->\r\n <!-- START INPUT -->\r\n <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n (click)=\"clickOnMenuTrigger($event)\"\r\n #valueContainer>\r\n @if (value.length === 0) {\r\n <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n <ng-content select=\"[placeholder]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n <mat-icon style=\"font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\">clear\r\n </mat-icon>\r\n </div>\r\n <div class=\"ng-jvx-multiselect-arrow\">\r\n <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n <div style=\"max-width: 100%;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\">{{ option[itemText] }}\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n class=\"ng-jvx-multiselect-chip\"\r\n [removable]=\"true\" (removed)=\"deselect(val)\">\r\n <span class=\"chip-content\"\r\n [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"] }]
|
|
746
791
|
}], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
|
|
747
792
|
type: Optional
|
|
748
793
|
}, {
|
|
@@ -857,8 +902,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
857
902
|
}] } });
|
|
858
903
|
|
|
859
904
|
class NgJvxMultiselectModule {
|
|
860
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
861
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
905
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
906
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectModule, declarations: [NgJvxMultiselectComponent,
|
|
862
907
|
NgJvxOptionComponent,
|
|
863
908
|
NgJvxOptionsTemplateDirective,
|
|
864
909
|
NgJvxSelectionTemplateDirective,
|
|
@@ -881,7 +926,7 @@ class NgJvxMultiselectModule {
|
|
|
881
926
|
NgJvxSelectionTemplateDirective,
|
|
882
927
|
NgJvxDisabledOptionDirective,
|
|
883
928
|
NgJvxGroupHeaderDirective] }); }
|
|
884
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
929
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectModule, imports: [MatButtonModule,
|
|
885
930
|
MatOptionModule,
|
|
886
931
|
MatSelectModule,
|
|
887
932
|
MatMenuModule,
|
|
@@ -893,7 +938,7 @@ class NgJvxMultiselectModule {
|
|
|
893
938
|
NgScrollbarModule,
|
|
894
939
|
FormsModule] }); }
|
|
895
940
|
}
|
|
896
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
941
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
|
|
897
942
|
type: NgModule,
|
|
898
943
|
args: [{
|
|
899
944
|
declarations: [
|