ng-jvx-multiselect 16.0.8 → 16.0.10

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.
Files changed (29) hide show
  1. package/esm2022/lib/directives/ng-jvx-disabled-option.directive.mjs +7 -1
  2. package/esm2022/lib/ng-jvx-multiselect.component.mjs +3 -3
  3. package/esm2022/lib/ng-jvx-option/ng-jvx-option.component.mjs +1 -1
  4. package/fesm2022/ng-jvx-multiselect.mjs +9 -3
  5. package/fesm2022/ng-jvx-multiselect.mjs.map +1 -1
  6. package/lib/directives/ng-jvx-disabled-option.directive.d.ts +1 -0
  7. package/package.json +1 -1
  8. package/src/lib/ng-jvx-multiselect.component.scss +3 -0
  9. package/src/lib/ng-jvx-option/ng-jvx-option.component.scss +2 -0
  10. package/esm2020/lib/directives/ng-jvx-disabled-option.directive.mjs +0 -49
  11. package/esm2020/lib/directives/ng-jvx-focus.directive.mjs +0 -29
  12. package/esm2020/lib/directives/ng-jvx-group-header.directive.mjs +0 -25
  13. package/esm2020/lib/directives/ng-jvx-options-template.directive.mjs +0 -26
  14. package/esm2020/lib/directives/ng-jvx-selection-template.directive.mjs +0 -25
  15. package/esm2020/lib/interfaces/ng-jvx-group-mapper.mjs +0 -2
  16. package/esm2020/lib/interfaces/ng-jvx-option-mapper.mjs +0 -2
  17. package/esm2020/lib/interfaces/ng-jvx-search-mapper.mjs +0 -2
  18. package/esm2020/lib/ng-jvx-multiselect.component.mjs +0 -933
  19. package/esm2020/lib/ng-jvx-multiselect.module.mjs +0 -97
  20. package/esm2020/lib/ng-jvx-multiselect.service.mjs +0 -44
  21. package/esm2020/lib/ng-jvx-option/ng-jvx-option.component.mjs +0 -47
  22. package/esm2020/lib/ng-jvx-panel/ng-jvx-panel.component.mjs +0 -60
  23. package/esm2020/lib/utils.mjs +0 -4
  24. package/esm2020/ng-jvx-multiselect.mjs +0 -5
  25. package/esm2020/public-api.mjs +0 -16
  26. package/fesm2015/ng-jvx-multiselect.mjs +0 -1414
  27. package/fesm2015/ng-jvx-multiselect.mjs.map +0 -1
  28. package/fesm2020/ng-jvx-multiselect.mjs +0 -1307
  29. package/fesm2020/ng-jvx-multiselect.mjs.map +0 -1
@@ -1,1307 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Component, ViewChild, Input, Directive, Injectable, EventEmitter, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Optional, Self, HostBinding, ViewChildren, ContentChild, Output, Inject, NgModule } from '@angular/core';
3
- import * as i4 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
5
- import * as i2 from '@angular/material/legacy-list';
6
- import { MatLegacyListModule } from '@angular/material/legacy-list';
7
- import { Subject, fromEvent, of, noop, timer, forkJoin } from 'rxjs';
8
- import { takeUntil, debounceTime, map, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
9
- import * as i1 from '@angular/common/http';
10
- import { HttpContextToken, HttpContext, HttpParams, HttpHeaders } from '@angular/common/http';
11
- import * as i1$1 from '@angular/forms';
12
- import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
13
- import { MatLegacyFormFieldControl } from '@angular/material/legacy-form-field';
14
- import { coerceBooleanProperty } from '@angular/cdk/coercion';
15
- import * as i3 from '@angular/material/legacy-menu';
16
- import { MAT_LEGACY_MENU_DEFAULT_OPTIONS, MAT_LEGACY_MENU_PANEL, matLegacyMenuAnimations, MatLegacyMenuModule } from '@angular/material/legacy-menu';
17
- import * as i5 from '@angular/material/icon';
18
- import { MatIconModule } from '@angular/material/icon';
19
- import * as i7 from '@angular/material/legacy-chips';
20
- import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
21
- import * as i8 from 'ngx-scrollbar';
22
- import { NgScrollbarModule } from 'ngx-scrollbar';
23
- import * as i9 from 'ngx-scrollbar/smooth-scroll';
24
- import { SmoothScrollModule } from 'ngx-scrollbar/smooth-scroll';
25
- import { MatLegacyButtonModule } from '@angular/material/legacy-button';
26
- import { MatLegacyOptionModule } from '@angular/material/legacy-core';
27
- import { MatLegacySelectModule } from '@angular/material/legacy-select';
28
- import { _MatMenuBase, MatMenu } from '@angular/material/menu';
29
-
30
- const _c0$2 = ["listOption"];
31
- const _c1$1 = function (a1) { return { "ng-jvx-option": true, "mat-list-single-selected-option": a1 }; };
32
- const _c2$1 = ["*"];
33
- class NgJvxOptionComponent {
34
- constructor() {
35
- this.isSelected = false;
36
- }
37
- ngOnInit() {
38
- }
39
- ngDoCheck() {
40
- if (this.isSelected !== this.listOption.selected) {
41
- this.isSelected = this.listOption.selected;
42
- }
43
- }
44
- deselect() {
45
- this.listOption.selected = false;
46
- }
47
- }
48
- NgJvxOptionComponent.ɵfac = function NgJvxOptionComponent_Factory(t) { return new (t || NgJvxOptionComponent)(); };
49
- NgJvxOptionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgJvxOptionComponent, selectors: [["ng-jvx-option"]], viewQuery: function NgJvxOptionComponent_Query(rf, ctx) { if (rf & 1) {
50
- i0.ɵɵviewQuery(_c0$2, 7);
51
- } if (rf & 2) {
52
- let _t;
53
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listOption = _t.first);
54
- } }, inputs: { value: "value" }, ngContentSelectors: _c2$1, decls: 4, vars: 4, consts: [[3, "value", "ngClass"], ["listOption", ""], [1, "list-option-background"]], template: function NgJvxOptionComponent_Template(rf, ctx) { if (rf & 1) {
55
- i0.ɵɵprojectionDef();
56
- i0.ɵɵelementStart(0, "mat-list-option", 0, 1);
57
- i0.ɵɵprojection(2);
58
- i0.ɵɵelement(3, "div", 2);
59
- i0.ɵɵelementEnd();
60
- } if (rf & 2) {
61
- i0.ɵɵproperty("value", ctx.value)("ngClass", i0.ɵɵpureFunction1(2, _c1$1, ctx.isSelected));
62
- } }, dependencies: [i4.NgClass, i2.MatLegacyListOption] });
63
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxOptionComponent, [{
64
- type: Component,
65
- args: [{ selector: 'ng-jvx-option', 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" }]
66
- }], function () { return []; }, { listOption: [{
67
- type: ViewChild,
68
- args: ['listOption', { static: true }]
69
- }], value: [{
70
- type: Input
71
- }] }); })();
72
-
73
- class NgJvxOptionsTemplateDirective {
74
- constructor(el, template, vcRef) {
75
- this.el = el;
76
- this.template = template;
77
- this.vcRef = vcRef;
78
- }
79
- set ngJvxOptionsTemplateOf(source) {
80
- for (const item of source) {
81
- this.vcRef.createEmbeddedView(this.template, { $implicit: item });
82
- }
83
- }
84
- }
85
- NgJvxOptionsTemplateDirective.ɵfac = function NgJvxOptionsTemplateDirective_Factory(t) { return new (t || NgJvxOptionsTemplateDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
86
- NgJvxOptionsTemplateDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxOptionsTemplateDirective, selectors: [["", "ngJvxOptionsTemplate", ""]], inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" } });
87
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxOptionsTemplateDirective, [{
88
- type: Directive,
89
- args: [{
90
- // tslint:disable-next-line:directive-selector
91
- selector: '[ngJvxOptionsTemplate]'
92
- }]
93
- }], function () { return [{ type: i0.ElementRef }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { ngJvxOptionsTemplateOf: [{
94
- type: Input
95
- }] }); })();
96
-
97
- class NgJvxSelectionTemplateDirective {
98
- constructor(template, vcRef) {
99
- this.template = template;
100
- this.vcRef = vcRef;
101
- }
102
- set ngJvxSelectionTemplateOf(source) {
103
- for (const item of source) {
104
- this.vcRef.createEmbeddedView(this.template, { $implicit: item });
105
- }
106
- }
107
- }
108
- NgJvxSelectionTemplateDirective.ɵfac = function NgJvxSelectionTemplateDirective_Factory(t) { return new (t || NgJvxSelectionTemplateDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
109
- NgJvxSelectionTemplateDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxSelectionTemplateDirective, selectors: [["", "ngJvxSelectionTemplate", ""]], inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" } });
110
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxSelectionTemplateDirective, [{
111
- type: Directive,
112
- args: [{
113
- // tslint:disable-next-line:directive-selector
114
- selector: '[ngJvxSelectionTemplate]'
115
- }]
116
- }], function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { ngJvxSelectionTemplateOf: [{
117
- type: Input
118
- }] }); })();
119
-
120
- class NgJvxGroupHeaderDirective {
121
- constructor(template, vcRef) {
122
- this.template = template;
123
- this.vcRef = vcRef;
124
- }
125
- set ngJvxGroupHeaderOf(source) {
126
- for (const item of source) {
127
- this.vcRef.createEmbeddedView(this.template, { $implicit: item });
128
- }
129
- }
130
- }
131
- NgJvxGroupHeaderDirective.ɵfac = function NgJvxGroupHeaderDirective_Factory(t) { return new (t || NgJvxGroupHeaderDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
132
- NgJvxGroupHeaderDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxGroupHeaderDirective, selectors: [["", "ngJvxGroupHeader", ""]], inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" } });
133
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxGroupHeaderDirective, [{
134
- type: Directive,
135
- args: [{
136
- // tslint:disable-next-line:directive-selector
137
- selector: '[ngJvxGroupHeader]'
138
- }]
139
- }], function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { ngJvxGroupHeaderOf: [{
140
- type: Input
141
- }] }); })();
142
-
143
- class NgJvxDisabledOptionDirective {
144
- set ngJvxDisabledOption(source) {
145
- this.isDisabled = source;
146
- if (this.isDisabled) {
147
- this.el.nativeElement.style.opacity = this.originalOpacity ? this.originalOpacity / 2 : 0.5;
148
- }
149
- else {
150
- this.el.nativeElement.style.opacity = this.originalOpacity;
151
- }
152
- }
153
- constructor(el) {
154
- this.el = el;
155
- this.isDisabled = false;
156
- this.originalOpacity = 1;
157
- this.unsubs = new Subject();
158
- this.originalOpacity = el.nativeElement.style.opacity;
159
- }
160
- ngOnInit() {
161
- fromEvent(this.el.nativeElement.closest('.mat-list-item-content'), 'click', {
162
- capture: true,
163
- }).pipe(takeUntil(this.unsubs)).subscribe((e) => {
164
- if (this.isDisabled) {
165
- e.stopImmediatePropagation();
166
- e.stopPropagation();
167
- e.preventDefault();
168
- }
169
- });
170
- }
171
- ngOnDestroy() {
172
- this.unsubs.next();
173
- this.unsubs.complete();
174
- }
175
- }
176
- NgJvxDisabledOptionDirective.ɵfac = function NgJvxDisabledOptionDirective_Factory(t) { return new (t || NgJvxDisabledOptionDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
177
- NgJvxDisabledOptionDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxDisabledOptionDirective, selectors: [["", "ngJvxDisabledOption", ""]], inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" } });
178
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxDisabledOptionDirective, [{
179
- type: Directive,
180
- args: [{
181
- // tslint:disable-next-line:directive-selector
182
- selector: '[ngJvxDisabledOption]'
183
- }]
184
- }], function () { return [{ type: i0.ElementRef }]; }, { ngJvxDisabledOption: [{
185
- type: Input
186
- }] }); })();
187
-
188
- const JVXMULTISELECT = new HttpContextToken(() => false);
189
- const setJvxCall = () => new HttpContext().set(JVXMULTISELECT, true);
190
-
191
- class NgJvxMultiselectService {
192
- constructor(http) {
193
- this.http = http;
194
- }
195
- getList({ url, ignorePagination = false, currentPage, pageSize, requestType = 'get', requestHeaders, search, searchProp = 'search', data }) {
196
- let params = new HttpParams();
197
- if (search && search.length > 0) {
198
- params = params.set(searchProp, search);
199
- }
200
- if (!ignorePagination) {
201
- params = params.set('page', currentPage.toString())
202
- .set('size', pageSize.toString());
203
- }
204
- const options = {
205
- mode: 'no-cors',
206
- headers: requestHeaders,
207
- context: setJvxCall(),
208
- // withCredentials: true,
209
- // credentials: 'same-origin', // cache: 'default',
210
- data,
211
- params
212
- };
213
- if (requestType === 'get') {
214
- return this.http.get(url, options);
215
- }
216
- else {
217
- return this.http.post(url, options);
218
- }
219
- }
220
- }
221
- NgJvxMultiselectService.ɵfac = function NgJvxMultiselectService_Factory(t) { return new (t || NgJvxMultiselectService)(i0.ɵɵinject(i1.HttpClient)); };
222
- NgJvxMultiselectService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: NgJvxMultiselectService, factory: NgJvxMultiselectService.ɵfac, providedIn: 'root' });
223
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxMultiselectService, [{
224
- type: Injectable,
225
- args: [{
226
- providedIn: 'root'
227
- }]
228
- }], function () { return [{ type: i1.HttpClient }]; }, null); })();
229
-
230
- class NgJvxFocusDirective {
231
- constructor(el) {
232
- this.el = el;
233
- }
234
- ngOnInit() {
235
- if (this.ngJvxFocus) {
236
- this.el.nativeElement.focus();
237
- }
238
- }
239
- ngOnChanges(changes) {
240
- if (changes.hasOwnProperty('ngJvxFocus') && changes.ngJvxFocus.currentValue === true) {
241
- this.el.nativeElement.focus();
242
- }
243
- }
244
- }
245
- NgJvxFocusDirective.ɵfac = function NgJvxFocusDirective_Factory(t) { return new (t || NgJvxFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
246
- NgJvxFocusDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxFocusDirective, selectors: [["", "ngJvxFocus", ""]], inputs: { ngJvxFocus: "ngJvxFocus" }, features: [i0.ɵɵNgOnChangesFeature] });
247
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxFocusDirective, [{
248
- type: Directive,
249
- args: [{
250
- // tslint:disable-next-line:directive-selector
251
- selector: '[ngJvxFocus]'
252
- }]
253
- }], function () { return [{ type: i0.ElementRef }]; }, { ngJvxFocus: [{
254
- type: Input
255
- }] }); })();
256
-
257
- const _c0$1 = ["jvxMultiselect"];
258
- const _c1 = ["selectionContainer"];
259
- const _c2 = ["selection"];
260
- const _c3 = ["trigger"];
261
- const _c4 = ["scrollbar"];
262
- const _c5 = ["multiContainer"];
263
- function NgJvxMultiselectComponent_div_6_Template(rf, ctx) { if (rf & 1) {
264
- i0.ɵɵelementStart(0, "div", 30)(1, "mat-icon");
265
- i0.ɵɵtext(2, "close");
266
- i0.ɵɵelementEnd()();
267
- } }
268
- const _c6 = function () { return { standalone: true }; };
269
- function NgJvxMultiselectComponent_div_9_Template(rf, ctx) { if (rf & 1) {
270
- const _r25 = i0.ɵɵgetCurrentView();
271
- i0.ɵɵelementStart(0, "div", 31);
272
- i0.ɵɵlistener("click", function NgJvxMultiselectComponent_div_9_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onSearchInputClick($event)); });
273
- i0.ɵɵelementStart(1, "input", 32);
274
- i0.ɵɵlistener("input", function NgJvxMultiselectComponent_div_9_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.onSearchValueChange($event)); });
275
- i0.ɵɵelementEnd()();
276
- } if (rf & 2) {
277
- const ctx_r5 = i0.ɵɵnextContext();
278
- i0.ɵɵadvance(1);
279
- i0.ɵɵproperty("placeholder", ctx_r5.searchLabel)("ngModel", ctx_r5.searchValue)("ngModelOptions", i0.ɵɵpureFunction0(4, _c6))("ngJvxFocus", ctx_r5.isOpen);
280
- } }
281
- const _c7 = function (a0) { return { $implicit: a0 }; };
282
- function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_ng_jvx_option_2_Template(rf, ctx) { if (rf & 1) {
283
- i0.ɵɵelementStart(0, "ng-jvx-option", 38)(1, "span", 39);
284
- i0.ɵɵelementContainer(2, 36);
285
- i0.ɵɵelementEnd()();
286
- } if (rf & 2) {
287
- const option_r33 = ctx.$implicit;
288
- const ctx_r32 = i0.ɵɵnextContext(4);
289
- const _r16 = i0.ɵɵreference(28);
290
- i0.ɵɵproperty("value", option_r33[ctx_r32.itemValue]);
291
- i0.ɵɵadvance(2);
292
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r32.optionsTemplate ? ctx_r32.optionsTemplate.template : _r16)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c7, option_r33));
293
- } }
294
- function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
295
- i0.ɵɵelementContainerStart(0);
296
- i0.ɵɵelementContainer(1, 36);
297
- i0.ɵɵtemplate(2, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_ng_jvx_option_2_Template, 3, 5, "ng-jvx-option", 37);
298
- i0.ɵɵelementContainerEnd();
299
- } if (rf & 2) {
300
- const opt_r31 = ctx.$implicit;
301
- const ctx_r30 = i0.ɵɵnextContext(3);
302
- const _r22 = i0.ɵɵreference(34);
303
- i0.ɵɵadvance(1);
304
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r30.groupHeaderTemplate ? ctx_r30.groupHeaderTemplate.template : _r22)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c7, opt_r31));
305
- i0.ɵɵadvance(1);
306
- i0.ɵɵproperty("ngForOf", opt_r31.options);
307
- } }
308
- function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_Template(rf, ctx) { if (rf & 1) {
309
- i0.ɵɵelementContainerStart(0);
310
- i0.ɵɵtemplate(1, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_Template, 3, 5, "ng-container", 35);
311
- i0.ɵɵelementContainerEnd();
312
- } if (rf & 2) {
313
- const ctx_r28 = i0.ɵɵnextContext(2);
314
- i0.ɵɵadvance(1);
315
- i0.ɵɵproperty("ngForOf", ctx_r28.orderedOptions);
316
- } }
317
- function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_ng_jvx_option_1_Template(rf, ctx) { if (rf & 1) {
318
- i0.ɵɵelementStart(0, "ng-jvx-option", 38);
319
- i0.ɵɵelementContainer(1, 36);
320
- i0.ɵɵelementEnd();
321
- } if (rf & 2) {
322
- const option_r35 = ctx.$implicit;
323
- const ctx_r34 = i0.ɵɵnextContext(3);
324
- const _r16 = i0.ɵɵreference(28);
325
- i0.ɵɵproperty("value", option_r35[ctx_r34.itemValue]);
326
- i0.ɵɵadvance(1);
327
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r34.optionsTemplate ? ctx_r34.optionsTemplate.template : _r16)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c7, option_r35));
328
- } }
329
- function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_Template(rf, ctx) { if (rf & 1) {
330
- i0.ɵɵelementContainerStart(0);
331
- i0.ɵɵtemplate(1, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_ng_jvx_option_1_Template, 2, 5, "ng-jvx-option", 37);
332
- i0.ɵɵelementContainerEnd();
333
- } if (rf & 2) {
334
- const ctx_r29 = i0.ɵɵnextContext(2);
335
- i0.ɵɵadvance(1);
336
- i0.ɵɵproperty("ngForOf", ctx_r29.selectableOptions);
337
- } }
338
- const _c8 = function (a1) { return { "padding": 0, "width": a1, "min-width.px": 112 }; };
339
- function NgJvxMultiselectComponent_mat_selection_list_15_Template(rf, ctx) { if (rf & 1) {
340
- const _r37 = i0.ɵɵgetCurrentView();
341
- i0.ɵɵelementStart(0, "mat-selection-list", 33, 34);
342
- i0.ɵɵlistener("selectionChange", function NgJvxMultiselectComponent_mat_selection_list_15_Template_mat_selection_list_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.onChange($event)); });
343
- i0.ɵɵprojection(2, 1);
344
- i0.ɵɵtemplate(3, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_Template, 2, 1, "ng-container", 24);
345
- i0.ɵɵtemplate(4, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_Template, 2, 1, "ng-container", 24);
346
- i0.ɵɵelementEnd();
347
- } if (rf & 2) {
348
- const ctx_r8 = i0.ɵɵnextContext();
349
- i0.ɵɵproperty("multiple", ctx_r8.multi)("ngStyle", i0.ɵɵpureFunction1(4, _c8, ctx_r8.listContainerSize.width));
350
- i0.ɵɵadvance(3);
351
- i0.ɵɵproperty("ngIf", !!ctx_r8.groupBy);
352
- i0.ɵɵadvance(1);
353
- i0.ɵɵproperty("ngIf", !ctx_r8.groupBy || ctx_r8.groupBy.length === 0);
354
- } }
355
- function NgJvxMultiselectComponent_div_20_Template(rf, ctx) { if (rf & 1) {
356
- i0.ɵɵelementStart(0, "div", 40);
357
- i0.ɵɵprojection(1, 2);
358
- i0.ɵɵelementEnd();
359
- } }
360
- function NgJvxMultiselectComponent_div_21_Template(rf, ctx) { if (rf & 1) {
361
- i0.ɵɵelementStart(0, "div", 41, 42);
362
- i0.ɵɵelementContainer(2, 36);
363
- i0.ɵɵelementEnd();
364
- } if (rf & 2) {
365
- const ctx_r11 = i0.ɵɵnextContext();
366
- const _r20 = i0.ɵɵreference(32);
367
- i0.ɵɵadvance(2);
368
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r11.selectionTemplate ? ctx_r11.selectionTemplate.template : _r20)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c7, ctx_r11.value));
369
- } }
370
- function NgJvxMultiselectComponent_div_22_div_1_Template(rf, ctx) { if (rf & 1) {
371
- i0.ɵɵelementStart(0, "div", 45);
372
- i0.ɵɵelementContainer(1, 36);
373
- i0.ɵɵelementEnd();
374
- } if (rf & 2) {
375
- const val_r40 = ctx.$implicit;
376
- const ctx_r39 = i0.ɵɵnextContext(2);
377
- const _r18 = i0.ɵɵreference(30);
378
- i0.ɵɵadvance(1);
379
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r39.selectionTemplate ? ctx_r39.selectionTemplate.template : _r18)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c7, val_r40));
380
- } }
381
- function NgJvxMultiselectComponent_div_22_Template(rf, ctx) { if (rf & 1) {
382
- i0.ɵɵelementStart(0, "div", 43);
383
- i0.ɵɵtemplate(1, NgJvxMultiselectComponent_div_22_div_1_Template, 2, 4, "div", 44);
384
- i0.ɵɵelementEnd();
385
- } if (rf & 2) {
386
- const ctx_r12 = i0.ɵɵnextContext();
387
- i0.ɵɵadvance(1);
388
- i0.ɵɵproperty("ngForOf", ctx_r12.value);
389
- } }
390
- function NgJvxMultiselectComponent_div_23_Template(rf, ctx) { if (rf & 1) {
391
- const _r42 = i0.ɵɵgetCurrentView();
392
- i0.ɵɵelementStart(0, "div", 46);
393
- i0.ɵɵlistener("click", function NgJvxMultiselectComponent_div_23_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.clear($event)); });
394
- i0.ɵɵelementStart(1, "mat-icon", 47);
395
- i0.ɵɵtext(2, "clear ");
396
- i0.ɵɵelementEnd()();
397
- } }
398
- function NgJvxMultiselectComponent_mat_icon_25_Template(rf, ctx) { if (rf & 1) {
399
- i0.ɵɵelementStart(0, "mat-icon");
400
- i0.ɵɵtext(1, "expand_more");
401
- i0.ɵɵelementEnd();
402
- } }
403
- function NgJvxMultiselectComponent_div_26_Template(rf, ctx) { if (rf & 1) {
404
- i0.ɵɵelementStart(0, "div", 48);
405
- i0.ɵɵelement(1, "div")(2, "div")(3, "div")(4, "div");
406
- i0.ɵɵelementEnd();
407
- } }
408
- function NgJvxMultiselectComponent_ng_template_27_Template(rf, ctx) { if (rf & 1) {
409
- i0.ɵɵelementStart(0, "div", 49);
410
- i0.ɵɵtext(1);
411
- i0.ɵɵelementEnd();
412
- } if (rf & 2) {
413
- const option_r43 = ctx.$implicit;
414
- const ctx_r17 = i0.ɵɵnextContext();
415
- i0.ɵɵadvance(1);
416
- i0.ɵɵtextInterpolate1("", option_r43[ctx_r17.itemText], " ");
417
- } }
418
- function NgJvxMultiselectComponent_ng_template_29_Template(rf, ctx) { if (rf & 1) {
419
- i0.ɵɵtext(0);
420
- } if (rf & 2) {
421
- const value_r44 = ctx.$implicit;
422
- const ctx_r19 = i0.ɵɵnextContext();
423
- i0.ɵɵtextInterpolate1(" ", value_r44[ctx_r19.itemText], "\n");
424
- } }
425
- const _c9 = function (a0) { return { "max-width": a0 }; };
426
- function NgJvxMultiselectComponent_ng_template_31_mat_chip_2_Template(rf, ctx) { if (rf & 1) {
427
- const _r50 = i0.ɵɵgetCurrentView();
428
- i0.ɵɵelementStart(0, "mat-chip", 53);
429
- i0.ɵɵlistener("removed", function NgJvxMultiselectComponent_ng_template_31_mat_chip_2_Template_mat_chip_removed_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r50); const val_r48 = restoredCtx.$implicit; const ctx_r49 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r49.deselect(val_r48)); });
430
- i0.ɵɵelementStart(1, "span", 54);
431
- i0.ɵɵtext(2);
432
- i0.ɵɵelementEnd();
433
- i0.ɵɵelementStart(3, "mat-icon", 55);
434
- i0.ɵɵtext(4, "cancel");
435
- i0.ɵɵelementEnd()();
436
- } if (rf & 2) {
437
- const val_r48 = ctx.$implicit;
438
- const ctx_r47 = i0.ɵɵnextContext(2);
439
- i0.ɵɵproperty("color", "primary")("selectable", false)("removable", true);
440
- i0.ɵɵadvance(1);
441
- i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c9, ctx_r47.multiContainerWidth - 50 + "px"));
442
- i0.ɵɵadvance(1);
443
- i0.ɵɵtextInterpolate(val_r48[ctx_r47.itemText]);
444
- } }
445
- function NgJvxMultiselectComponent_ng_template_31_Template(rf, ctx) { if (rf & 1) {
446
- i0.ɵɵelementStart(0, "mat-chip-list", 50, 51);
447
- i0.ɵɵtemplate(2, NgJvxMultiselectComponent_ng_template_31_mat_chip_2_Template, 5, 7, "mat-chip", 52);
448
- i0.ɵɵelementEnd();
449
- } if (rf & 2) {
450
- const value_r45 = ctx.$implicit;
451
- const ctx_r21 = i0.ɵɵnextContext();
452
- i0.ɵɵproperty("disabled", ctx_r21.disabled);
453
- i0.ɵɵadvance(2);
454
- i0.ɵɵproperty("ngForOf", value_r45);
455
- } }
456
- function NgJvxMultiselectComponent_ng_template_33_Template(rf, ctx) { if (rf & 1) {
457
- i0.ɵɵelementStart(0, "div", 56)(1, "strong");
458
- i0.ɵɵtext(2);
459
- i0.ɵɵelementEnd()();
460
- } if (rf & 2) {
461
- const opt_r51 = ctx.$implicit;
462
- i0.ɵɵadvance(2);
463
- i0.ɵɵtextInterpolate(opt_r51.group);
464
- } }
465
- const _c10 = [[["", "ng-jvx-footer", ""]], "*", [["", "placeholder", ""]]];
466
- const _c11 = function (a0, a1) { return { "disabled": a0, "has-errors": a1 }; };
467
- const _c12 = function (a1) { return ["jvx-multiselect-panel", a1]; };
468
- const _c13 = function (a1, a3, a4) { return { "overflow-y": "hidden", "width": a1, "max-height": "260px", "height": a3, "min-height": a4 }; };
469
- const _c14 = function (a0) { return { height: a0 }; };
470
- const _c15 = function (a1) { return { "ng-jvx-multiselect-value-container": true, "is-open": a1 }; };
471
- const _c16 = ["[ng-jvx-footer]", "*", "[placeholder]"];
472
- class NgJvxMultiselectComponent {
473
- get shouldLabelFloat() {
474
- return this.focused || !this.empty;
475
- }
476
- set value(value) {
477
- this.pValue = value ?? [];
478
- if (value) {
479
- this.form.get('selectionValue').setValue(this.pValue.map(v => v[this.itemValue]));
480
- }
481
- else {
482
- this.form.get('selectionValue').setValue(value);
483
- }
484
- this.stateChanges.next();
485
- }
486
- get value() {
487
- return this.pValue;
488
- }
489
- get required() {
490
- return this._required;
491
- }
492
- set required(req) {
493
- this._required = coerceBooleanProperty(req);
494
- this.stateChanges.next();
495
- }
496
- get disabled() {
497
- return this._disabled;
498
- }
499
- set disabled(value) {
500
- this._disabled = coerceBooleanProperty(value);
501
- this._disabled ? this.parts.disable() : this.parts.enable();
502
- this.stateChanges.next();
503
- }
504
- get pageSize() {
505
- return this.intPageSize;
506
- }
507
- set pageSize(val) {
508
- if (val < 15) {
509
- this.intPageSize = 15;
510
- }
511
- else {
512
- this.intPageSize = val;
513
- }
514
- }
515
- get errorState() {
516
- if (this.ngControl != null) {
517
- return this.ngControl.invalid && this.ngControl.touched;
518
- }
519
- else {
520
- return false;
521
- }
522
- }
523
- constructor(formBuilder, service, elementRef, changeDetectorRef, ngControl, fb) {
524
- this.formBuilder = formBuilder;
525
- this.service = service;
526
- this.elementRef = elementRef;
527
- this.changeDetectorRef = changeDetectorRef;
528
- this.ngControl = ngControl;
529
- this.id = `jvx-multiselect-${NgJvxMultiselectComponent.nextId++}`;
530
- this.optionsTemplate = null;
531
- this.selectionTemplate = null;
532
- this.groupHeaderTemplate = null;
533
- // @ContentChild(NgJvxOptionComponent) optionComp: NgJvxOptionComponent;
534
- // @ContentChild(TemplateRef) optionsTemplate: TemplateRef<any> | null = null;
535
- this.options = [];
536
- this.multi = false;
537
- this.url = '';
538
- this.requestType = 'get';
539
- this.itemValue = 'value';
540
- this.itemText = 'text';
541
- this.ignorePagination = false;
542
- this.clearable = false;
543
- this.closeOnClick = true;
544
- this.hasErrors = false;
545
- this.searchMode = null;
546
- this.searchInput = false;
547
- this.searchLabel = 'search';
548
- this.listProp = '';
549
- this.totalRowsProp = '';
550
- this.panelClass = '';
551
- this.searchProp = 'search';
552
- this.closeButton = false;
553
- this.mapper = {
554
- mapOption(source) {
555
- return of(source);
556
- }
557
- };
558
- this.multiMapper = {
559
- mapOptions(source) {
560
- return of(source);
561
- }
562
- };
563
- this.searchMapper = {
564
- mapSearch: (source, options) => {
565
- return of(options.filter(o => o[this.itemText].toString().toLowerCase().includes(source.toString().toLowerCase())));
566
- }
567
- };
568
- this.requestHeaders = new HttpHeaders();
569
- // tslint:disable-next-line:variable-name
570
- this._required = false;
571
- // tslint:disable-next-line:variable-name
572
- this._disabled = false;
573
- this.valueChange = new EventEmitter();
574
- this.jvxMultiselectOpen = new EventEmitter();
575
- this.jvxMultiselectOpened = new EventEmitter();
576
- this.jvxMultiselectClose = new EventEmitter();
577
- this.jvxMultiselectClosed = new EventEmitter();
578
- this.scrollEnd = new EventEmitter();
579
- this.controlType = 'ng-jvx-multiselect';
580
- this.document = document;
581
- this.window = window;
582
- this.isOpen = false;
583
- this.isLoading = false;
584
- this.showList = true;
585
- this.asyncOptions = [];
586
- this.selectableOptions = [];
587
- this.orderedOptions = [];
588
- this.searchValue = '';
589
- this.yPosition = 'above';
590
- this.stateChanges = new Subject();
591
- this.currentPage = 0;
592
- this.listContainerSize = { height: 'auto', minHeight: '0', width: '100%' };
593
- this.touched = false;
594
- this.focused = false;
595
- this.multiContainerWidth = 100;
596
- this.searchValueSubject = new Subject();
597
- this.searchValue$ = this.searchValueSubject.asObservable();
598
- this.pValue = [];
599
- this.shouldLoadMore = true;
600
- this.unsubscribe = new Subject();
601
- this.unsubscribe$ = this.unsubscribe.asObservable();
602
- this.intPageSize = 15;
603
- this.onTouched = () => {
604
- };
605
- if (this.ngControl != null) {
606
- // Setting the value accessor directly (instead of using
607
- // the providers) to avoid running into a circular import.
608
- this.ngControl.valueAccessor = this;
609
- }
610
- this.parts = fb.group({
611
- area: '',
612
- exchange: '',
613
- subscriber: '',
614
- });
615
- this.form = this.formBuilder.group({
616
- selectionValue: new UntypedFormControl(this.selectionValue)
617
- });
618
- }
619
- ngOnInit() {
620
- this.stateChange$.pipe(takeUntil(this.unsubscribe)).subscribe(() => {
621
- this.changeDetectorRef.markForCheck();
622
- });
623
- // this.setSelectableOptions(this.options).subscribe(noop);
624
- this.selectableOptions = [...this.options];
625
- this.updateOrderedOptions(this.selectableOptions).subscribe(noop);
626
- fromEvent(window, 'resize').pipe(takeUntil(this.unsubscribe), debounceTime(100), map(() => {
627
- return this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
628
- }), switchMap(() => timer(100)), tap(() => {
629
- this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
630
- this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
631
- this.changeDetectorRef.markForCheck();
632
- })).subscribe(noop);
633
- this.searchValue$.pipe(takeUntil(this.unsubscribe), debounceTime(300), distinctUntilChanged((prev, curr) => {
634
- return curr === this.searchValue;
635
- }), switchMap((val) => {
636
- this.searchValue = val;
637
- this.currentPage = 0;
638
- if (this.searchMode === 'client') {
639
- return this.clientSearch();
640
- }
641
- else if (this.url && this.url.length > 0) {
642
- return this.serverSearch();
643
- }
644
- })).subscribe((val) => {
645
- this.changeDetectorRef.markForCheck();
646
- });
647
- }
648
- clientSearch() {
649
- let obs;
650
- if (this.url && this.url.length > 0) {
651
- this.selectableOptions = [];
652
- this.updateOrderedOptions(this.selectableOptions).subscribe(noop);
653
- this.shouldLoadMore = true;
654
- obs = this.getList().pipe(map(() => {
655
- return this.selectableOptions;
656
- }));
657
- }
658
- else {
659
- obs = of(this.options);
660
- }
661
- return obs.pipe(switchMap((val) => this.searchMapper.mapSearch(this.searchValue, val)), switchMap((res) => {
662
- // return this.setSelectableOptions(res);
663
- this.selectableOptions = [];
664
- this.selectableOptions.push(...res);
665
- return this.updateOrderedOptions(this.selectableOptions);
666
- }));
667
- }
668
- setSelectableOptions(options) {
669
- this.selectableOptions = [];
670
- const obs = options.reduce((acc, curr) => {
671
- acc.push(this.mapper.mapOption(curr));
672
- return acc;
673
- }, []);
674
- // this.mapper.mapOption(option);
675
- return forkJoin([...obs]).pipe(switchMap((val) => {
676
- this.selectableOptions.push(...val);
677
- return this.updateOrderedOptions(this.selectableOptions);
678
- }));
679
- }
680
- serverSearch() {
681
- this.shouldLoadMore = true;
682
- this.selectableOptions = [];
683
- this.shouldLoadMore = true;
684
- return this.getList();
685
- }
686
- ngOnDestroy() {
687
- this.unsubscribe.next();
688
- this.stateChanges.complete();
689
- }
690
- ngAfterViewInit() {
691
- timer(0).subscribe(() => {
692
- this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
693
- });
694
- if (this.scrollbar) {
695
- this.scrollbar.scrolled.pipe(takeUntil(this.unsubscribe$)).subscribe((e) => {
696
- this.onScrolled(e);
697
- });
698
- }
699
- timer(0).pipe(tap(() => {
700
- this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
701
- this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
702
- this.changeDetectorRef.markForCheck();
703
- })).subscribe(noop);
704
- }
705
- ngOnChanges(changes) {
706
- if (changes.options) {
707
- // this.setSelectableOptions(this.options).subscribe(noop);
708
- this.selectableOptions = [...this.options];
709
- }
710
- }
711
- get selectionValue() {
712
- return this.value.map((v) => {
713
- return v[this.itemValue];
714
- });
715
- }
716
- get empty() {
717
- const n = this.parts.value;
718
- return !n.area && !n.exchange && !n.subscriber;
719
- }
720
- onCLickOnMenu(e) {
721
- if (this.multi || this.closeOnClick === false) {
722
- e.stopPropagation();
723
- }
724
- }
725
- propagateChange(_) {
726
- }
727
- // this is the initial value set to the component
728
- writeValue(obj) {
729
- this.value = obj;
730
- }
731
- // registers 'fn' that will be fired when changes are made
732
- // this is how we emit the changes back to the form
733
- registerOnChange(fn) {
734
- this.propagateChange = fn;
735
- }
736
- registerOnTouched(fn) {
737
- this.onTouched = fn;
738
- }
739
- onChange(e) {
740
- let vals = e.source.selectedOptions.selected.map(o => o.value);
741
- vals = this.selectableOptions.filter(o => vals.includes(o[this.itemValue]));
742
- const selectableIds = this.selectableOptions.map(s => s[this.itemValue]);
743
- if (this.multi) {
744
- // if search is active, probably some of the already selected values are not included in the selectable options,
745
- // so we have to push them in the selected values of the list;
746
- for (const v of this.value) {
747
- if (!selectableIds.includes(v[this.itemValue])) {
748
- vals = [v, ...vals];
749
- }
750
- }
751
- }
752
- vals.sort((a, b) => {
753
- return typeof a[this.itemValue] === 'string' ?
754
- a[this.itemValue].localeCompare(b[this.itemValue]) : a[this.itemValue] - b[this.itemValue];
755
- });
756
- this.value = [...vals];
757
- this.form.get('selectionValue').setValue(this.value.map(v => v[this.itemValue]));
758
- this.valueChange.emit(this.value);
759
- this.propagateChange(this.value);
760
- this.changeDetectorRef.markForCheck();
761
- }
762
- onFocusIn(event) {
763
- if (!this.focused) {
764
- this.focused = true;
765
- this.stateChanges.next();
766
- }
767
- }
768
- onFocusOut(event) {
769
- if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
770
- this.touched = true;
771
- this.focused = false;
772
- this.onTouched();
773
- this.stateChanges.next();
774
- }
775
- }
776
- onMenuOpen() {
777
- this.isOpen = true;
778
- this.jvxMultiselectOpen.emit();
779
- }
780
- onMenuClose() {
781
- this.isOpen = false;
782
- this.jvxMultiselectClose.emit();
783
- }
784
- deselect(val) {
785
- this.value = [...this.value.filter(v => v[this.itemValue] !== val[this.itemValue])];
786
- // this.value.splice(this.value.findIndex(v => v[this.itemValue] === val[this.itemValue]), 1);
787
- this.form.get('selectionValue').setValue(this.value.map(m => m.value));
788
- this.valueChange.emit(this.value);
789
- this.propagateChange(this.value);
790
- this.changeDetectorRef.markForCheck();
791
- }
792
- setSelectionContainerSize() {
793
- timer(0).subscribe(() => {
794
- if (this.selectionContainer) {
795
- this.listContainerSize.height = this.selectionContainer.nativeElement.offsetHeight > 260 ? '260px' : 'auto';
796
- this.listContainerSize.minHeight = this.selectionContainer.nativeElement.offsetHeight <= 260 ?
797
- this.selectionContainer.nativeElement.offsetHeight + 'px' : '260px';
798
- this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
799
- }
800
- this.changeDetectorRef.detectChanges();
801
- });
802
- }
803
- clickOnMenuTrigger(e) {
804
- if (!this.disabled) {
805
- this.showList = false;
806
- this.shouldLoadMore = true;
807
- timer(0).subscribe(() => {
808
- this.showList = true;
809
- if (this.url.length > 0) {
810
- e.preventDefault();
811
- this.selectableOptions.length = 0;
812
- this.updateOrderedOptions(this.selectableOptions);
813
- this.getList().subscribe(noop);
814
- this.setSelectionContainerSize();
815
- }
816
- else {
817
- this.trigger.openMenu();
818
- this.setSelectionContainerSize();
819
- }
820
- });
821
- }
822
- }
823
- getList() {
824
- this.isLoading = true;
825
- return this.service.getList({
826
- url: this.url,
827
- requestType: this.requestType,
828
- data: {},
829
- currentPage: ++this.currentPage,
830
- ignorePagination: this.ignorePagination,
831
- requestHeaders: this.requestHeaders,
832
- search: this.searchValue,
833
- searchProp: this.searchProp,
834
- pageSize: this.intPageSize
835
- }).pipe(switchMap((val) => this.multiMapper.mapOptions(val)), switchMap((val) => {
836
- let result = [];
837
- if (this.listProp.length > 0) {
838
- result = [...val[this.listProp]];
839
- }
840
- else {
841
- result = [...val];
842
- }
843
- if (result.length === 0) {
844
- this.shouldLoadMore = false;
845
- this.isLoading = false;
846
- return of([]);
847
- }
848
- else {
849
- const newOptions = [];
850
- for (const opt of result) {
851
- const newOption = this.mapper.mapOption(opt);
852
- newOptions.push(newOption);
853
- }
854
- return forkJoin(newOptions);
855
- }
856
- }), switchMap((finVal) => {
857
- this.selectableOptions.push(...finVal);
858
- return this.updateOrderedOptions(this.selectableOptions);
859
- }), map((val) => {
860
- this.isLoading = false;
861
- this.trigger.openMenu();
862
- this.setSelectionContainerSize();
863
- return val;
864
- }), tap(() => {
865
- this.changeDetectorRef.markForCheck();
866
- }));
867
- }
868
- onScrolled(e) {
869
- if (e.target.scrollTop + 220 + ((this.searchInput ? 0 : 1) * 40) === this.selectionContainer.nativeElement.offsetHeight
870
- && !this.isLoading) {
871
- this.scrollEnd.emit();
872
- if (this.url && this.url.length > 0 && !this.ignorePagination && this.shouldLoadMore) {
873
- this.getList().subscribe(noop);
874
- }
875
- }
876
- }
877
- onMenuOpened() {
878
- this.jvxMultiselectOpened.emit();
879
- }
880
- onMenuClosed() {
881
- if ((!this.url || this.url.length === 0) && this.searchMode === 'client') {
882
- this.searchValueSubject.next('');
883
- }
884
- else {
885
- this.searchValue = '';
886
- this.currentPage = 0;
887
- }
888
- this.jvxMultiselectClosed.emit();
889
- this.changeDetectorRef.markForCheck();
890
- }
891
- onSearchInputClick(e) {
892
- e.stopPropagation();
893
- }
894
- onSearchValueChange(e) {
895
- this.searchValueSubject.next(e.target.value);
896
- }
897
- clear(e) {
898
- e.stopPropagation();
899
- e.preventDefault();
900
- this.value = [];
901
- this.form.get('selectionValue').setValue(this.value.map(v => v[this.itemValue]));
902
- this.propagateChange(this.value);
903
- this.valueChange.emit(this.value);
904
- this.changeDetectorRef.markForCheck();
905
- }
906
- setDescribedByIds(ids) {
907
- const controlElement = this.elementRef.nativeElement
908
- .querySelector('.ng-jvx-multiselect');
909
- controlElement.setAttribute('aria-describedby', ids.join(' '));
910
- }
911
- onContainerClick(event) {
912
- // if ((event.target as Element).tagName.toLowerCase() !== 'input') {
913
- // this.elementRef.nativeElement.querySelector('input').focus();
914
- // }
915
- }
916
- get stateChange$() {
917
- return this.stateChanges.asObservable();
918
- }
919
- updateOrderedOptions(options) {
920
- let obs = of(options);
921
- if (this.groupBy) {
922
- this.orderedOptions.length = 0;
923
- const obsArr = [];
924
- for (const option of options) {
925
- if (typeof this.groupBy !== 'string') {
926
- obsArr.push(this.groupBy.mapGroup(option));
927
- }
928
- else {
929
- obsArr.push(of({ group: option[this.groupBy], option }));
930
- }
931
- }
932
- obs = forkJoin(obsArr).pipe(map((res) => {
933
- const groups = [...new Set(res.map(item => item.group))];
934
- for (const group of groups) {
935
- this.orderedOptions.push({
936
- group,
937
- options: res.filter(r => r.group === group).map(o => o.option)
938
- });
939
- }
940
- return this.orderedOptions;
941
- }));
942
- }
943
- return obs;
944
- }
945
- closeMenu() {
946
- this.trigger.closeMenu();
947
- }
948
- }
949
- NgJvxMultiselectComponent.nextId = 0;
950
- NgJvxMultiselectComponent.ɵfac = function NgJvxMultiselectComponent_Factory(t) { return new (t || NgJvxMultiselectComponent)(i0.ɵɵdirectiveInject(i1$1.UntypedFormBuilder), i0.ɵɵdirectiveInject(NgJvxMultiselectService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.NgControl, 10), i0.ɵɵdirectiveInject(i1$1.UntypedFormBuilder)); };
951
- NgJvxMultiselectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgJvxMultiselectComponent, selectors: [["ng-jvx-multiselect"]], contentQueries: function NgJvxMultiselectComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
952
- i0.ɵɵcontentQuery(dirIndex, NgJvxOptionsTemplateDirective, 5);
953
- i0.ɵɵcontentQuery(dirIndex, NgJvxSelectionTemplateDirective, 5);
954
- i0.ɵɵcontentQuery(dirIndex, NgJvxGroupHeaderDirective, 5);
955
- } if (rf & 2) {
956
- let _t;
957
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionsTemplate = _t.first);
958
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectionTemplate = _t.first);
959
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.groupHeaderTemplate = _t.first);
960
- } }, viewQuery: function NgJvxMultiselectComponent_Query(rf, ctx) { if (rf & 1) {
961
- i0.ɵɵviewQuery(_c0$1, 7);
962
- i0.ɵɵviewQuery(_c1, 5);
963
- i0.ɵɵviewQuery(_c2, 7);
964
- i0.ɵɵviewQuery(_c3, 7);
965
- i0.ɵɵviewQuery(_c4, 5);
966
- i0.ɵɵviewQuery(_c5, 5);
967
- i0.ɵɵviewQuery(NgJvxOptionComponent, 5);
968
- } if (rf & 2) {
969
- let _t;
970
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.jvxMultiselect = _t.first);
971
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectionContainer = _t.first);
972
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selection = _t.first);
973
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.trigger = _t.first);
974
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollbar = _t.first);
975
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.multiContainer = _t.first);
976
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionComp = _t);
977
- } }, hostVars: 3, hostBindings: function NgJvxMultiselectComponent_HostBindings(rf, ctx) { if (rf & 2) {
978
- i0.ɵɵhostProperty("id", ctx.id);
979
- i0.ɵɵclassProp("floating", ctx.shouldLabelFloat);
980
- } }, 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" }, features: [i0.ɵɵProvidersFeature([
981
- {
982
- provide: MatLegacyFormFieldControl,
983
- useExisting: forwardRef(() => NgJvxMultiselectComponent),
984
- multi: true,
985
- }
986
- ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c16, decls: 35, vars: 35, consts: [[1, "ng-jvx-multiselect", 3, "ngClass"], ["jvxMultiselect", ""], [3, "matMenuTriggerFor", "onMenuOpen", "menuOpened", "onMenuClose", "menuClosed"], ["trigger", "matMenuTrigger"], [3, "formGroup", "yPosition"], ["menuRef", "matMenu"], ["class", "closeMenuButton", 4, "ngIf"], [1, "menu-list-container", 3, "ngStyle"], ["menuLIstContainer", ""], ["class", "search-input-container", 3, "click", 4, "ngIf"], [3, "ngStyle"], ["smoothScroll", "", 2, "width", "100%", 3, "visibility", "appearance", "sensorDisabled", "autoHeightDisabled"], ["scrollbar", ""], [3, "click"], ["selectionContainer", ""], ["formControlName", "selectionValue", 3, "multiple", "ngStyle", "selectionChange", 4, "ngIf"], [1, "menu-footer"], [3, "ngClass", "click"], ["valueContainer", ""], ["class", "ng-jvx-multiselect__placeholder", 4, "ngIf"], ["class", "ng-jvx-multiselect-value multi-value-container", 4, "ngIf"], ["class", "ng-jvx-multiselect-value single-value-container", 4, "ngIf"], ["class", "ng-jvx-multiselect__remove-button", 3, "click", 4, "ngIf"], [1, "ng-jvx-multiselect-arrow"], [4, "ngIf"], ["class", "lds-ring", 4, "ngIf"], ["defaultTemplate", ""], ["defaultSelectionTemplate", ""], ["defaultMultiSelectionTemplate", ""], ["defaultGroupHeaderTemplate", ""], [1, "closeMenuButton"], [1, "search-input-container", 3, "click"], ["type", "text", 3, "placeholder", "ngModel", "ngModelOptions", "ngJvxFocus", "input"], ["formControlName", "selectionValue", 3, "multiple", "ngStyle", "selectionChange"], ["selection", ""], [4, "ngFor", "ngForOf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"], [2, "padding-inline", "10px"], [1, "ng-jvx-multiselect__placeholder"], [1, "ng-jvx-multiselect-value", "multi-value-container"], ["multiContainer", ""], [1, "ng-jvx-multiselect-value", "single-value-container"], ["style", "width: 100%;", 4, "ngFor", "ngForOf"], [2, "width", "100%"], [1, "ng-jvx-multiselect__remove-button", 3, "click"], [2, "font-size", "18px", "display", "flex", "align-items", "center", "justify-content", "center"], [1, "lds-ring"], [2, "max-width", "100%", "white-space", "nowrap", "overflow", "hidden", "text-overflow", "ellipsis"], [3, "disabled"], ["chipList", ""], ["selected", "", "class", "ng-jvx-multiselect-chip", 3, "color", "selectable", "removable", "removed", 4, "ngFor", "ngForOf"], ["selected", "", 1, "ng-jvx-multiselect-chip", 3, "color", "selectable", "removable", "removed"], [1, "chip-content", 3, "ngStyle"], ["matChipRemove", ""], [2, "padding-inline", "15px"]], template: function NgJvxMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
987
- i0.ɵɵprojectionDef(_c10);
988
- i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2, 3);
989
- i0.ɵɵlistener("onMenuOpen", function NgJvxMultiselectComponent_Template_div_onMenuOpen_2_listener() { return ctx.onMenuOpen(); })("menuOpened", function NgJvxMultiselectComponent_Template_div_menuOpened_2_listener() { return ctx.onMenuOpened(); })("onMenuClose", function NgJvxMultiselectComponent_Template_div_onMenuClose_2_listener() { return ctx.onMenuClose(); })("menuClosed", function NgJvxMultiselectComponent_Template_div_menuClosed_2_listener() { return ctx.onMenuClosed(); });
990
- i0.ɵɵelementStart(4, "mat-menu", 4, 5);
991
- i0.ɵɵtemplate(6, NgJvxMultiselectComponent_div_6_Template, 3, 0, "div", 6);
992
- i0.ɵɵelementStart(7, "div", 7, 8);
993
- i0.ɵɵtemplate(9, NgJvxMultiselectComponent_div_9_Template, 2, 5, "div", 9);
994
- i0.ɵɵelementStart(10, "div", 10)(11, "ng-scrollbar", 11, 12)(13, "div", 13, 14);
995
- i0.ɵɵlistener("click", function NgJvxMultiselectComponent_Template_div_click_13_listener($event) { return ctx.onCLickOnMenu($event); });
996
- i0.ɵɵtemplate(15, NgJvxMultiselectComponent_mat_selection_list_15_Template, 5, 6, "mat-selection-list", 15);
997
- i0.ɵɵelementEnd()()()();
998
- i0.ɵɵelementStart(16, "div", 16);
999
- i0.ɵɵprojection(17);
1000
- i0.ɵɵelementEnd()()();
1001
- i0.ɵɵelementStart(18, "div", 17, 18);
1002
- i0.ɵɵlistener("click", function NgJvxMultiselectComponent_Template_div_click_18_listener($event) { return ctx.clickOnMenuTrigger($event); });
1003
- i0.ɵɵtemplate(20, NgJvxMultiselectComponent_div_20_Template, 2, 0, "div", 19);
1004
- i0.ɵɵtemplate(21, NgJvxMultiselectComponent_div_21_Template, 3, 4, "div", 20);
1005
- i0.ɵɵtemplate(22, NgJvxMultiselectComponent_div_22_Template, 2, 1, "div", 21);
1006
- i0.ɵɵtemplate(23, NgJvxMultiselectComponent_div_23_Template, 3, 0, "div", 22);
1007
- i0.ɵɵelementStart(24, "div", 23);
1008
- i0.ɵɵtemplate(25, NgJvxMultiselectComponent_mat_icon_25_Template, 2, 0, "mat-icon", 24);
1009
- i0.ɵɵtemplate(26, NgJvxMultiselectComponent_div_26_Template, 5, 0, "div", 25);
1010
- i0.ɵɵelementEnd()()();
1011
- i0.ɵɵtemplate(27, NgJvxMultiselectComponent_ng_template_27_Template, 2, 1, "ng-template", null, 26, i0.ɵɵtemplateRefExtractor);
1012
- i0.ɵɵtemplate(29, NgJvxMultiselectComponent_ng_template_29_Template, 1, 1, "ng-template", null, 27, i0.ɵɵtemplateRefExtractor);
1013
- i0.ɵɵtemplate(31, NgJvxMultiselectComponent_ng_template_31_Template, 3, 2, "ng-template", null, 28, i0.ɵɵtemplateRefExtractor);
1014
- i0.ɵɵtemplate(33, NgJvxMultiselectComponent_ng_template_33_Template, 3, 1, "ng-template", null, 29, i0.ɵɵtemplateRefExtractor);
1015
- } if (rf & 2) {
1016
- const _r2 = i0.ɵɵreference(5);
1017
- const _r7 = i0.ɵɵreference(14);
1018
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(22, _c11, ctx.disabled, ctx.hasErrors));
1019
- i0.ɵɵadvance(2);
1020
- i0.ɵɵproperty("matMenuTriggerFor", _r2);
1021
- i0.ɵɵadvance(2);
1022
- i0.ɵɵclassMap(i0.ɵɵpureFunction1(25, _c12, ctx.panelClass).join(" "));
1023
- i0.ɵɵproperty("formGroup", ctx.form)("yPosition", ctx.yPosition);
1024
- i0.ɵɵadvance(2);
1025
- i0.ɵɵproperty("ngIf", ctx.closeButton);
1026
- i0.ɵɵadvance(1);
1027
- i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(27, _c13, ctx.listContainerSize.width, ctx.listContainerSize.height, ctx.listContainerSize.minHeight));
1028
- i0.ɵɵadvance(2);
1029
- i0.ɵɵproperty("ngIf", !!ctx.searchInput);
1030
- i0.ɵɵadvance(1);
1031
- i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(31, _c14, ctx.searchInput && _r7.clientHeight > 220 || _r7.clientHeight > 260 ? 260 - (ctx.searchInput ? 40 : 0) + "px" : "auto"));
1032
- i0.ɵɵadvance(1);
1033
- i0.ɵɵproperty("visibility", "hover")("appearance", "compact")("sensorDisabled", ctx.isLoading)("autoHeightDisabled", false);
1034
- i0.ɵɵadvance(4);
1035
- i0.ɵɵproperty("ngIf", ctx.showList);
1036
- i0.ɵɵadvance(3);
1037
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(33, _c15, ctx.isOpen));
1038
- i0.ɵɵadvance(2);
1039
- i0.ɵɵproperty("ngIf", ctx.value.length === 0);
1040
- i0.ɵɵadvance(1);
1041
- i0.ɵɵproperty("ngIf", ctx.multi);
1042
- i0.ɵɵadvance(1);
1043
- i0.ɵɵproperty("ngIf", !ctx.multi);
1044
- i0.ɵɵadvance(1);
1045
- i0.ɵɵproperty("ngIf", ctx.clearable && ctx.value.length > 0);
1046
- i0.ɵɵadvance(2);
1047
- i0.ɵɵproperty("ngIf", !ctx.isLoading);
1048
- i0.ɵɵadvance(1);
1049
- i0.ɵɵproperty("ngIf", ctx.isLoading);
1050
- } }, dependencies: [i3.MatLegacyMenu, i3.MatLegacyMenuTrigger, i4.NgClass, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i4.NgStyle, i5.MatIcon, i2.MatLegacySelectionList, i7.MatLegacyChipList, i7.MatLegacyChip, i7.MatLegacyChipRemove, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgControlStatusGroup, i1$1.FormGroupDirective, i1$1.FormControlName, i8.NgScrollbar, i9.SmoothScroll, i1$1.NgModel, NgJvxOptionComponent, NgJvxFocusDirective], encapsulation: 2, changeDetection: 0 });
1051
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxMultiselectComponent, [{
1052
- type: Component,
1053
- args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
1054
- {
1055
- provide: MatLegacyFormFieldControl,
1056
- useExisting: forwardRef(() => NgJvxMultiselectComponent),
1057
- multi: true,
1058
- }
1059
- ], 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\"><mat-icon >close</mat-icon></div>\r\n <div class=\"menu-list-container\"\r\n #menuLIstContainer\r\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, '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 [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 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 [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\" [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 <span style=\"padding-inline: 10px\">\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </span>\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 <!-- <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 </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\r\n <div class=\"ng-jvx-multiselect__placeholder\" *ngIf=\"value.length === 0\">\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></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-list #chipList [disabled]=\"this.disabled\">\r\n <mat-chip [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>\r\n </mat-chip-list>\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" }]
1060
- }], function () { return [{ type: i1$1.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
1061
- type: Optional
1062
- }, {
1063
- type: Self
1064
- }] }, { type: i1$1.UntypedFormBuilder }]; }, { id: [{
1065
- type: HostBinding
1066
- }], shouldLabelFloat: [{
1067
- type: HostBinding,
1068
- args: ['class.floating']
1069
- }], jvxMultiselect: [{
1070
- type: ViewChild,
1071
- args: ['jvxMultiselect', { static: true }]
1072
- }], selectionContainer: [{
1073
- type: ViewChild,
1074
- args: ['selectionContainer', { static: false }]
1075
- }], selection: [{
1076
- type: ViewChild,
1077
- args: ['selection', { static: true }]
1078
- }], trigger: [{
1079
- type: ViewChild,
1080
- args: ['trigger', { static: true }]
1081
- }], scrollbar: [{
1082
- type: ViewChild,
1083
- args: ['scrollbar', { static: false }]
1084
- }], multiContainer: [{
1085
- type: ViewChild,
1086
- args: ['multiContainer', { static: false }]
1087
- }], optionComp: [{
1088
- type: ViewChildren,
1089
- args: [NgJvxOptionComponent]
1090
- }], optionsTemplate: [{
1091
- type: ContentChild,
1092
- args: [NgJvxOptionsTemplateDirective]
1093
- }], selectionTemplate: [{
1094
- type: ContentChild,
1095
- args: [NgJvxSelectionTemplateDirective]
1096
- }], groupHeaderTemplate: [{
1097
- type: ContentChild,
1098
- args: [NgJvxGroupHeaderDirective]
1099
- }], options: [{
1100
- type: Input
1101
- }], multi: [{
1102
- type: Input
1103
- }], url: [{
1104
- type: Input
1105
- }], requestType: [{
1106
- type: Input
1107
- }], itemValue: [{
1108
- type: Input
1109
- }], itemText: [{
1110
- type: Input
1111
- }], ignorePagination: [{
1112
- type: Input
1113
- }], clearable: [{
1114
- type: Input
1115
- }], closeOnClick: [{
1116
- type: Input
1117
- }], hasErrors: [{
1118
- type: Input
1119
- }], searchMode: [{
1120
- type: Input
1121
- }], searchInput: [{
1122
- type: Input
1123
- }], searchLabel: [{
1124
- type: Input
1125
- }], listProp: [{
1126
- type: Input
1127
- }], totalRowsProp: [{
1128
- type: Input
1129
- }], panelClass: [{
1130
- type: Input
1131
- }], searchProp: [{
1132
- type: Input
1133
- }], closeButton: [{
1134
- type: Input
1135
- }], mapper: [{
1136
- type: Input
1137
- }], multiMapper: [{
1138
- type: Input
1139
- }], searchMapper: [{
1140
- type: Input
1141
- }], groupBy: [{
1142
- type: Input
1143
- }], value: [{
1144
- type: Input
1145
- }], requestHeaders: [{
1146
- type: Input
1147
- }], required: [{
1148
- type: Input
1149
- }], disabled: [{
1150
- type: Input
1151
- }], pageSize: [{
1152
- type: Input
1153
- }], valueChange: [{
1154
- type: Output
1155
- }], jvxMultiselectOpen: [{
1156
- type: Output
1157
- }], jvxMultiselectOpened: [{
1158
- type: Output
1159
- }], jvxMultiselectClose: [{
1160
- type: Output
1161
- }], jvxMultiselectClosed: [{
1162
- type: Output
1163
- }], scrollEnd: [{
1164
- type: Output
1165
- }] }); })();
1166
-
1167
- /**
1168
- * @license
1169
- * Copyright Google LLC All Rights Reserved.
1170
- *
1171
- * Use of this source code is governed by an MIT-style license that can be
1172
- * found in the LICENSE file at https://angular.io/license
1173
- */
1174
- function NgJvxPanelComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
1175
- const _r2 = i0.ɵɵgetCurrentView();
1176
- i0.ɵɵelementStart(0, "div", 0);
1177
- i0.ɵɵlistener("keydown", function NgJvxPanelComponent_ng_template_0_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1._handleKeydown($event)); })("click", function NgJvxPanelComponent_ng_template_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closed.emit("click")); })("@transformMenu.start", function NgJvxPanelComponent_ng_template_0_Template_div_animation_transformMenu_start_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4._onAnimationStart($event)); })("@transformMenu.done", function NgJvxPanelComponent_ng_template_0_Template_div_animation_transformMenu_done_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5._onAnimationDone($event)); });
1178
- i0.ɵɵelementStart(1, "div", 1);
1179
- i0.ɵɵprojection(2);
1180
- i0.ɵɵelementEnd()();
1181
- } if (rf & 2) {
1182
- const ctx_r0 = i0.ɵɵnextContext();
1183
- i0.ɵɵproperty("id", ctx_r0.panelId)("ngClass", ctx_r0._classList)("@transformMenu", ctx_r0._panelAnimationState);
1184
- i0.ɵɵattribute("aria-label", ctx_r0.ariaLabel || null)("aria-labelledby", ctx_r0.ariaLabelledby || null)("aria-describedby", ctx_r0.ariaDescribedby || null);
1185
- } }
1186
- const _c0 = ["*"];
1187
- /** @docs-public MatMenu */
1188
- class NgJvxPanelComponent extends _MatMenuBase {
1189
- constructor(elementRef, ngZone, defaultOptions) {
1190
- super(elementRef, ngZone, defaultOptions);
1191
- }
1192
- }
1193
- NgJvxPanelComponent.ɵfac = function NgJvxPanelComponent_Factory(t) { return new (t || NgJvxPanelComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(MAT_LEGACY_MENU_DEFAULT_OPTIONS)); };
1194
- NgJvxPanelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgJvxPanelComponent, selectors: [["ngJvxPanel"]], hostVars: 3, hostBindings: function NgJvxPanelComponent_HostBindings(rf, ctx) { if (rf & 2) {
1195
- i0.ɵɵattribute("aria-label", null)("aria-labelledby", null)("aria-describedby", null);
1196
- } }, exportAs: ["ngJvxPanel"], features: [i0.ɵɵProvidersFeature([
1197
- { provide: MAT_LEGACY_MENU_PANEL, useExisting: MatMenu },
1198
- ]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 1, vars: 0, consts: [["tabindex", "-1", "role", "menu", 1, "mat-menu-panel", 3, "id", "ngClass", "keydown", "click"], [1, "mat-menu-content"]], template: function NgJvxPanelComponent_Template(rf, ctx) { if (rf & 1) {
1199
- i0.ɵɵprojectionDef();
1200
- i0.ɵɵtemplate(0, NgJvxPanelComponent_ng_template_0_Template, 3, 6, "ng-template");
1201
- } }, dependencies: [i4.NgClass], encapsulation: 2, data: { animation: [
1202
- matLegacyMenuAnimations.transformMenu,
1203
- matLegacyMenuAnimations.fadeInItems
1204
- ] }, changeDetection: 0 });
1205
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxPanelComponent, [{
1206
- type: Component,
1207
- args: [{ selector: 'ngJvxPanel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'ngJvxPanel', host: {
1208
- '[attr.aria-label]': 'null',
1209
- '[attr.aria-labelledby]': 'null',
1210
- '[attr.aria-describedby]': 'null',
1211
- }, animations: [
1212
- matLegacyMenuAnimations.transformMenu,
1213
- matLegacyMenuAnimations.fadeInItems
1214
- ], providers: [
1215
- { provide: MAT_LEGACY_MENU_PANEL, useExisting: MatMenu },
1216
- ], template: "<ng-template>\r\n <div\r\n class=\"mat-menu-panel\"\r\n [id]=\"panelId\"\r\n [ngClass]=\"_classList\"\r\n (keydown)=\"_handleKeydown($event)\"\r\n (click)=\"closed.emit('click')\"\r\n [@transformMenu]=\"_panelAnimationState\"\r\n (@transformMenu.start)=\"_onAnimationStart($event)\"\r\n (@transformMenu.done)=\"_onAnimationDone($event)\"\r\n tabindex=\"-1\"\r\n role=\"menu\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\r\n [attr.aria-describedby]=\"ariaDescribedby || null\">\r\n <div class=\"mat-menu-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</ng-template>\r\n" }]
1217
- }], function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
1218
- type: Inject,
1219
- args: [MAT_LEGACY_MENU_DEFAULT_OPTIONS]
1220
- }] }]; }, null); })();
1221
-
1222
- class NgJvxMultiselectModule {
1223
- }
1224
- NgJvxMultiselectModule.ɵfac = function NgJvxMultiselectModule_Factory(t) { return new (t || NgJvxMultiselectModule)(); };
1225
- NgJvxMultiselectModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NgJvxMultiselectModule });
1226
- NgJvxMultiselectModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacyButtonModule,
1227
- MatLegacyOptionModule,
1228
- MatLegacySelectModule,
1229
- MatLegacyMenuModule,
1230
- CommonModule,
1231
- MatIconModule,
1232
- MatLegacyListModule,
1233
- MatLegacyChipsModule,
1234
- ReactiveFormsModule,
1235
- NgScrollbarModule,
1236
- SmoothScrollModule,
1237
- FormsModule] });
1238
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxMultiselectModule, [{
1239
- type: NgModule,
1240
- args: [{
1241
- declarations: [
1242
- NgJvxMultiselectComponent,
1243
- NgJvxOptionComponent,
1244
- NgJvxOptionsTemplateDirective,
1245
- NgJvxPanelComponent,
1246
- NgJvxSelectionTemplateDirective,
1247
- NgJvxDisabledOptionDirective,
1248
- NgJvxGroupHeaderDirective,
1249
- NgJvxFocusDirective
1250
- ],
1251
- imports: [
1252
- MatLegacyButtonModule,
1253
- MatLegacyOptionModule,
1254
- MatLegacySelectModule,
1255
- MatLegacyMenuModule,
1256
- CommonModule,
1257
- MatIconModule,
1258
- MatLegacyListModule,
1259
- MatLegacyChipsModule,
1260
- ReactiveFormsModule,
1261
- NgScrollbarModule,
1262
- SmoothScrollModule,
1263
- FormsModule
1264
- ],
1265
- exports: [NgJvxMultiselectComponent,
1266
- NgJvxOptionComponent,
1267
- NgJvxOptionsTemplateDirective,
1268
- NgJvxSelectionTemplateDirective,
1269
- NgJvxDisabledOptionDirective,
1270
- NgJvxGroupHeaderDirective]
1271
- }]
1272
- }], null, null); })();
1273
- (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NgJvxMultiselectModule, { declarations: [NgJvxMultiselectComponent,
1274
- NgJvxOptionComponent,
1275
- NgJvxOptionsTemplateDirective,
1276
- NgJvxPanelComponent,
1277
- NgJvxSelectionTemplateDirective,
1278
- NgJvxDisabledOptionDirective,
1279
- NgJvxGroupHeaderDirective,
1280
- NgJvxFocusDirective], imports: [MatLegacyButtonModule,
1281
- MatLegacyOptionModule,
1282
- MatLegacySelectModule,
1283
- MatLegacyMenuModule,
1284
- CommonModule,
1285
- MatIconModule,
1286
- MatLegacyListModule,
1287
- MatLegacyChipsModule,
1288
- ReactiveFormsModule,
1289
- NgScrollbarModule,
1290
- SmoothScrollModule,
1291
- FormsModule], exports: [NgJvxMultiselectComponent,
1292
- NgJvxOptionComponent,
1293
- NgJvxOptionsTemplateDirective,
1294
- NgJvxSelectionTemplateDirective,
1295
- NgJvxDisabledOptionDirective,
1296
- NgJvxGroupHeaderDirective] }); })();
1297
-
1298
- /*
1299
- * Public API Surface of ng-jvx-multiselect
1300
- */
1301
-
1302
- /**
1303
- * Generated bundle index. Do not edit.
1304
- */
1305
-
1306
- export { JVXMULTISELECT, NgJvxDisabledOptionDirective, NgJvxGroupHeaderDirective, NgJvxMultiselectComponent, NgJvxMultiselectModule, NgJvxMultiselectService, NgJvxOptionComponent, NgJvxOptionsTemplateDirective, NgJvxSelectionTemplateDirective, setJvxCall };
1307
- //# sourceMappingURL=ng-jvx-multiselect.mjs.map