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