ng-jvx-multiselect 19.0.38 → 20.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ng-jvx-multiselect.mjs +51 -51
- package/fesm2022/ng-jvx-multiselect.mjs.map +1 -1
- package/index.d.ts +305 -3
- package/package.json +4 -4
- package/lib/chiplist/chip/chip.component.d.ts +0 -11
- package/lib/directives/ng-jvx-disabled-option.directive.d.ts +0 -15
- package/lib/directives/ng-jvx-focus.directive.d.ts +0 -11
- package/lib/directives/ng-jvx-group-header.directive.d.ts +0 -10
- package/lib/directives/ng-jvx-options-template.directive.d.ts +0 -11
- package/lib/directives/ng-jvx-selection-template.directive.d.ts +0 -10
- package/lib/interfaces/ng-jvx-group-mapper.d.ts +0 -8
- package/lib/interfaces/ng-jvx-option-mapper.d.ts +0 -13
- package/lib/interfaces/ng-jvx-search-mapper.d.ts +0 -7
- package/lib/ng-jvx-multiselect.component.d.ts +0 -159
- package/lib/ng-jvx-multiselect.service.d.ts +0 -20
- package/lib/ng-jvx-option/ng-jvx-option.component.d.ts +0 -11
- package/lib/panel/menu-trigger/menu-trigger.directive.d.ts +0 -25
- package/lib/panel/panel.component.d.ts +0 -20
- package/lib/utils.d.ts +0 -3
- package/public-api.d.ts +0 -12
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, input,
|
|
2
|
+
import { EventEmitter, input, Output, ViewEncapsulation, Component, Input, Directive, Injectable, output, inject, signal, ViewChild, ChangeDetectionStrategy, viewChild, computed, ContentChild, ViewChildren, HostBinding, Optional, Self } from '@angular/core';
|
|
3
3
|
import { fromEvent, Subject, takeUntil as takeUntil$1, tap, noop, timer, of, BehaviorSubject, forkJoin, interval, throwError } from 'rxjs';
|
|
4
4
|
import { takeUntil, debounceTime, distinctUntilChanged, switchMap, map, tap as tap$1, catchError } from 'rxjs/operators';
|
|
5
5
|
import * as i1 from '@angular/common/http';
|
|
@@ -17,14 +17,14 @@ import { trigger, transition, query, style, animate } from '@angular/animations'
|
|
|
17
17
|
class NgJvxOptionComponent {
|
|
18
18
|
constructor() {
|
|
19
19
|
this.clickOnOption = new EventEmitter();
|
|
20
|
-
this.value = input();
|
|
21
|
-
this.disabled = input(false);
|
|
22
|
-
this.isSelected = input(false);
|
|
20
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
21
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
22
|
+
this.isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
|
|
23
23
|
}
|
|
24
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
24
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: NgJvxOptionComponent, isStandalone: true, selector: "ng-jvx-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOnOption: "clickOnOption" }, ngImport: i0, template: "<div class=\"option ng-jvx-option\" [class.ng-jvx-single-selected-option]=\" isSelected()\" #listOption\r\n(click)=\"clickOnOption.emit()\">\r\n <div class=\"option-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"list-option-background\"></div>\r\n</div>\r\n", styles: ["ng-jvx-option .option-content{min-height:48px}ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<div class=\"option ng-jvx-option\" [class.ng-jvx-single-selected-option]=\" isSelected()\" #listOption\r\n(click)=\"clickOnOption.emit()\">\r\n <div class=\"option-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"list-option-background\"></div>\r\n</div>\r\n", styles: ["ng-jvx-option .option-content{min-height:48px}ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"] }]
|
|
30
30
|
}], ctorParameters: () => [], propDecorators: { clickOnOption: [{
|
|
@@ -42,10 +42,10 @@ class NgJvxOptionsTemplateDirective {
|
|
|
42
42
|
this.vcRef.createEmbeddedView(this.template, { $implicit: item });
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
46
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
46
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: NgJvxOptionsTemplateDirective, isStandalone: true, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
|
|
49
49
|
type: Directive,
|
|
50
50
|
args: [{
|
|
51
51
|
// tslint:disable-next-line:directive-selector
|
|
@@ -65,10 +65,10 @@ class NgJvxSelectionTemplateDirective {
|
|
|
65
65
|
this.vcRef.createEmbeddedView(this.template, { $implicit: item });
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
69
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
68
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
69
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: NgJvxSelectionTemplateDirective, isStandalone: true, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
|
|
70
70
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
|
|
72
72
|
type: Directive,
|
|
73
73
|
args: [{
|
|
74
74
|
// tslint:disable-next-line:directive-selector
|
|
@@ -88,10 +88,10 @@ class NgJvxGroupHeaderDirective {
|
|
|
88
88
|
this.vcRef.createEmbeddedView(this.template, { $implicit: item });
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
92
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
91
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
92
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: NgJvxGroupHeaderDirective, isStandalone: true, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
|
|
93
93
|
}
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
|
|
95
95
|
type: Directive,
|
|
96
96
|
args: [{
|
|
97
97
|
// tslint:disable-next-line:directive-selector
|
|
@@ -130,10 +130,10 @@ class NgJvxDisabledOptionDirective {
|
|
|
130
130
|
this.unsubs.next();
|
|
131
131
|
this.unsubs.complete();
|
|
132
132
|
}
|
|
133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
134
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
134
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: NgJvxDisabledOptionDirective, isStandalone: true, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
|
|
135
135
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
|
|
137
137
|
type: Directive,
|
|
138
138
|
args: [{
|
|
139
139
|
// tslint:disable-next-line:directive-selector
|
|
@@ -198,10 +198,10 @@ class NgJvxMultiselectService {
|
|
|
198
198
|
return this.http.post(url, payload, options);
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
202
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
202
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
|
|
205
205
|
type: Injectable,
|
|
206
206
|
args: [{
|
|
207
207
|
providedIn: 'root'
|
|
@@ -261,10 +261,10 @@ class MenuTriggerDirective {
|
|
|
261
261
|
this.onMenuOpen.emit();
|
|
262
262
|
this.menu.open();
|
|
263
263
|
}
|
|
264
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
265
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
264
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
265
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: MenuTriggerDirective, isStandalone: true, selector: "[lib-menu-trigger-for], [libMenuTriggerFor]", inputs: { libMenuTriggerFor: "libMenuTriggerFor" }, outputs: { closed: "closed", onMenuOpen: "onMenuOpen", menuOpened: "menuOpened", onMenuClose: "onMenuClose", menuClosed: "menuClosed" }, ngImport: i0 }); }
|
|
266
266
|
}
|
|
267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MenuTriggerDirective, decorators: [{
|
|
268
268
|
type: Directive,
|
|
269
269
|
args: [{
|
|
270
270
|
selector: '[lib-menu-trigger-for], [libMenuTriggerFor]'
|
|
@@ -286,8 +286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
286
286
|
class NgJvxMultisectChipComponent {
|
|
287
287
|
constructor() {
|
|
288
288
|
this.removed = output();
|
|
289
|
-
this.value = input();
|
|
290
|
-
this.disabled = input(false);
|
|
289
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
290
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
291
291
|
this.container = inject(NgJvxMultiselectComponent, { optional: true });
|
|
292
292
|
}
|
|
293
293
|
clickOnRemove(e) {
|
|
@@ -297,10 +297,10 @@ class NgJvxMultisectChipComponent {
|
|
|
297
297
|
this.container.deselect(this.value());
|
|
298
298
|
}
|
|
299
299
|
}
|
|
300
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
300
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultisectChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: NgJvxMultisectChipComponent, isStandalone: true, selector: "ng-jvx-multiselect-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<div [class.disabled]=\"disabled()\"><span class=\"chip-text\">\r\n <ng-content></ng-content>\r\n</span>\r\n <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\r\n d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\r\n\r\n</div>\r\n", styles: ["ng-jvx-multiselect-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}ng-jvx-multiselect-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}ng-jvx-multiselect-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}ng-jvx-multiselect-chip>div.disabled{background-color:#c2c3c4;color:currentColor}ng-jvx-multiselect-chip>div.disabled .chip-text{pointer-events:none}ng-jvx-multiselect-chip>div.disabled .remove-button{color:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
302
302
|
}
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultisectChipComponent, decorators: [{
|
|
304
304
|
type: Component,
|
|
305
305
|
args: [{ selector: 'ng-jvx-multiselect-chip', encapsulation: ViewEncapsulation.None, template: "<div [class.disabled]=\"disabled()\"><span class=\"chip-text\">\r\n <ng-content></ng-content>\r\n</span>\r\n <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\r\n d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\r\n\r\n</div>\r\n", styles: ["ng-jvx-multiselect-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}ng-jvx-multiselect-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}ng-jvx-multiselect-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}ng-jvx-multiselect-chip>div.disabled{background-color:#c2c3c4;color:currentColor}ng-jvx-multiselect-chip>div.disabled .chip-text{pointer-events:none}ng-jvx-multiselect-chip>div.disabled .remove-button{color:currentColor}\n"] }]
|
|
306
306
|
}] });
|
|
@@ -310,10 +310,10 @@ class PanelComponent {
|
|
|
310
310
|
// @ lifecycle Hooks
|
|
311
311
|
// -----------------------------------------------------------------------------------------------------
|
|
312
312
|
constructor() {
|
|
313
|
-
this.isOpen = signal(false);
|
|
313
|
+
this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
314
314
|
this.unsubscribe = new Subject();
|
|
315
|
-
this.yPosition = input('above');
|
|
316
|
-
this.multi = input.required();
|
|
315
|
+
this.yPosition = input('above', ...(ngDevMode ? [{ debugName: "yPosition" }] : []));
|
|
316
|
+
this.multi = input.required(...(ngDevMode ? [{ debugName: "multi" }] : []));
|
|
317
317
|
// -----------------------------------------------------------------------------------------------------
|
|
318
318
|
// @ Outputs
|
|
319
319
|
// -----------------------------------------------------------------------------------------------------
|
|
@@ -354,8 +354,8 @@ class PanelComponent {
|
|
|
354
354
|
this.close();
|
|
355
355
|
}
|
|
356
356
|
}
|
|
357
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
357
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
358
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: PanelComponent, isStandalone: true, selector: "lib-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose", onClosed: "onClosed", onOpened: "onOpened" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #menuTemplate cdkConnectedOverlay\r\n (backdropClick)=\"close()\"\r\n [cdkConnectedOverlayPositions]=\"[\r\n {\r\n originX: 'start',\r\n originY: yPosition() === 'below'? 'center': 'top',\r\n overlayX: 'start',\r\n overlayY: yPosition() === 'below'? 'top': 'bottom'\r\n }\r\n ]\"\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayPanelClass]=\"'ng-jvx-multiselect-panel'\"\r\n [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayDisableClose]=\"false\"\r\n [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\r\n [cdkConnectedOverlayOpen]=\"isOpen()\">\r\n <div [@animation]=\"isOpen()\">\r\n <div class=\"ng-jvx-panel\" [class]=\"yPosition()+'-panel'\" [class.opening]=\"isOpen()\" [class.closing]=\"!isOpen()\"\r\n (click)=\"clickOnMenu()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.ng-jvx-panel{display:flex;flex-direction:column;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;background:var(--jvx-multiselect-panel-bg)}.ng-jvx-panel-overlay{background-opacity:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], animations: [
|
|
359
359
|
trigger('animation', [
|
|
360
360
|
transition(':enter', [
|
|
361
361
|
query('.ng-jvx-panel.below-panel', [
|
|
@@ -412,7 +412,7 @@ class PanelComponent {
|
|
|
412
412
|
]),
|
|
413
413
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
414
414
|
}
|
|
415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PanelComponent, decorators: [{
|
|
416
416
|
type: Component,
|
|
417
417
|
args: [{ selector: 'lib-panel', imports: [
|
|
418
418
|
CdkConnectedOverlay
|
|
@@ -499,10 +499,10 @@ class NgJvxFocusDirective {
|
|
|
499
499
|
this.el.nativeElement.focus();
|
|
500
500
|
}
|
|
501
501
|
}
|
|
502
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
503
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
503
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: NgJvxFocusDirective, isStandalone: true, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 }); }
|
|
504
504
|
}
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
|
|
506
506
|
type: Directive,
|
|
507
507
|
args: [{
|
|
508
508
|
// tslint:disable-next-line:directive-selector
|
|
@@ -595,7 +595,7 @@ class NgJvxMultiselectComponent {
|
|
|
595
595
|
this.id = `jvx-multiselect-${NgJvxMultiselectComponent.nextId++}`;
|
|
596
596
|
this.jvxMultiselect = viewChild.required('jvxMultiselect');
|
|
597
597
|
this.selectionContainer = viewChild.required('selectionContainer');
|
|
598
|
-
this.menuFooter = viewChild('menuFooter');
|
|
598
|
+
this.menuFooter = viewChild('menuFooter', ...(ngDevMode ? [{ debugName: "menuFooter" }] : []));
|
|
599
599
|
this.multiContainer = viewChild.required('multiContainer');
|
|
600
600
|
this.optionsTemplate = null;
|
|
601
601
|
this.selectionTemplate = null;
|
|
@@ -633,12 +633,12 @@ class NgJvxMultiselectComponent {
|
|
|
633
633
|
}
|
|
634
634
|
};
|
|
635
635
|
this.requestHeaders = new HttpHeaders();
|
|
636
|
-
this.postPayload = input();
|
|
636
|
+
this.postPayload = input(...(ngDevMode ? [undefined, { debugName: "postPayload" }] : []));
|
|
637
637
|
// tslint:disable-next-line:variable-name
|
|
638
638
|
this._required = false;
|
|
639
|
-
this._jvxWidth = signal(0);
|
|
639
|
+
this._jvxWidth = signal(0, ...(ngDevMode ? [{ debugName: "_jvxWidth" }] : []));
|
|
640
640
|
// tslint:disable-next-line:variable-name
|
|
641
|
-
this._disabled = signal(false);
|
|
641
|
+
this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
|
|
642
642
|
this.valueChange = new EventEmitter();
|
|
643
643
|
this.jvxMultiselectOpen = new EventEmitter();
|
|
644
644
|
this.jvxMultiselectOpened = new EventEmitter();
|
|
@@ -649,14 +649,14 @@ class NgJvxMultiselectComponent {
|
|
|
649
649
|
this.controlType = 'ng-jvx-multiselect';
|
|
650
650
|
this.document = document;
|
|
651
651
|
this.window = window;
|
|
652
|
-
this.isOpen = signal(false);
|
|
653
|
-
this.isLoading = signal(false);
|
|
652
|
+
this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
653
|
+
this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
654
654
|
this.showList = true;
|
|
655
655
|
this.asyncOptions = [];
|
|
656
656
|
this.selectableOptions = [];
|
|
657
657
|
this.orderedOptions = [];
|
|
658
658
|
this.searchValue = '';
|
|
659
|
-
this.yPosition = signal('below');
|
|
659
|
+
this.yPosition = signal('below', ...(ngDevMode ? [{ debugName: "yPosition" }] : []));
|
|
660
660
|
this.stateChanges = new Subject();
|
|
661
661
|
this.currentPage = 0;
|
|
662
662
|
this.listContainerSize = computed(() => {
|
|
@@ -675,12 +675,12 @@ class NgJvxMultiselectComponent {
|
|
|
675
675
|
width: this._jvxWidth() + 'px'
|
|
676
676
|
};
|
|
677
677
|
}
|
|
678
|
-
});
|
|
678
|
+
}, ...(ngDevMode ? [{ debugName: "listContainerSize" }] : []));
|
|
679
679
|
this.touched = false;
|
|
680
680
|
this.focused = false;
|
|
681
681
|
this.multiContainerWidth = computed(() => {
|
|
682
682
|
return this.multiContainer()?.nativeElement?.offsetWidth ?? 100;
|
|
683
|
-
});
|
|
683
|
+
}, ...(ngDevMode ? [{ debugName: "multiContainerWidth" }] : []));
|
|
684
684
|
this.isPlaceholderActiveSubject = new BehaviorSubject(false);
|
|
685
685
|
this.isPlaceholderActive = false;
|
|
686
686
|
this.searchValueSubject = new Subject();
|
|
@@ -1105,8 +1105,8 @@ class NgJvxMultiselectComponent {
|
|
|
1105
1105
|
this.valueChange.emit(this.value);
|
|
1106
1106
|
this.changeDetectorRef.markForCheck();
|
|
1107
1107
|
}
|
|
1108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1108
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectComponent, deps: [{ token: i1$2.UntypedFormBuilder }, { token: NgJvxMultiselectService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgJvxMultiselectComponent, isStandalone: true, selector: "ng-jvx-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, requestType: { classPropertyName: "requestType", publicName: "requestType", isSignal: false, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: false, isRequired: false, transformFunction: null }, itemText: { classPropertyName: "itemText", publicName: "itemText", isSignal: false, isRequired: false, transformFunction: null }, ignorePagination: { classPropertyName: "ignorePagination", publicName: "ignorePagination", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: false, isRequired: false, transformFunction: null }, hasErrors: { classPropertyName: "hasErrors", publicName: "hasErrors", isSignal: false, isRequired: false, transformFunction: null }, searchMode: { classPropertyName: "searchMode", publicName: "searchMode", isSignal: false, isRequired: false, transformFunction: null }, searchInput: { classPropertyName: "searchInput", publicName: "searchInput", isSignal: false, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: false, isRequired: false, transformFunction: null }, listProp: { classPropertyName: "listProp", publicName: "listProp", isSignal: false, isRequired: false, transformFunction: null }, totalRowsProp: { classPropertyName: "totalRowsProp", publicName: "totalRowsProp", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, searchProp: { classPropertyName: "searchProp", publicName: "searchProp", isSignal: false, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: false, isRequired: false, transformFunction: null }, mapper: { classPropertyName: "mapper", publicName: "mapper", isSignal: false, isRequired: false, transformFunction: null }, multiMapper: { classPropertyName: "multiMapper", publicName: "multiMapper", isSignal: false, isRequired: false, transformFunction: null }, searchMapper: { classPropertyName: "searchMapper", publicName: "searchMapper", isSignal: false, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, requestHeaders: { classPropertyName: "requestHeaders", publicName: "requestHeaders", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, postPayload: { classPropertyName: "postPayload", publicName: "postPayload", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", jvxMultiselectOpen: "jvxMultiselectOpen", jvxMultiselectOpened: "jvxMultiselectOpened", jvxMultiselectClose: "jvxMultiselectClose", jvxMultiselectClosed: "jvxMultiselectClosed", scrollEnd: "scrollEnd" }, host: { properties: { "id": "this.id", "class.has-errors": "this.invalid", "class.floating": "this.shouldLabelFloat" } }, providers: [
|
|
1110
1110
|
// {
|
|
1111
1111
|
// provide: MatFormFieldControl,
|
|
1112
1112
|
// useExisting: forwardRef(() => NgJvxMultiselectComponent),
|
|
@@ -1114,7 +1114,7 @@ class NgJvxMultiselectComponent {
|
|
|
1114
1114
|
// }
|
|
1115
1115
|
], queries: [{ propertyName: "optionsTemplate", first: true, predicate: NgJvxOptionsTemplateDirective, descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: NgJvxSelectionTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: NgJvxGroupHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "jvxMultiselect", first: true, predicate: ["jvxMultiselect"], descendants: true, isSignal: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true, isSignal: true }, { propertyName: "menuFooter", first: true, predicate: ["menuFooter"], descendants: true, isSignal: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true, isSignal: true }, { propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: MenuTriggerDirective, descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], ngImport: i0, template: "\r\n<div class=\"ng-jvx-multiselect\" [class.disabled]=\"disabled\" [class.has-errors]=\"hasErrors\" #jvxMultiselect>\r\n <!-- START MENU -->\r\n <div [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n #trigger\r\n (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n >\r\n <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [multi]=\"multi\" [formGroup]=\"form\"\r\n [yPosition]=\"yPosition()\">\r\n @if (closeButton) {\r\n <div class=\"closeMenuButton\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\r\n <path\r\n d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n </svg>\r\n </div>\r\n }\r\n <div style=\"display: flex; flex-direction: column\"\r\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize().width, 'min-width.px': 112, 'max-height': '300px', 'height': listContainerSize().height}\">\r\n <div class=\"menu-list-container\"\r\n [style.flex]=\"'1 1 0'\"\r\n #menuLIstContainer\r\n >\r\n <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n [ngJvxFocus]=\"isOpen()\"\r\n (input)=\"onSearchValueChange($event)\"/>\r\n </div>\r\n <div\r\n [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 300? 300 - (searchInput? 40 : 0) - menuFooter.offsetHeight + '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 <div #selection\r\n *ngIf=\"showList\"\r\n [ngStyle]=\"{'padding': 0, 'width': listContainerSize().width, 'min-width.px': 112}\"\r\n ngDefaultControl\r\n formControlName=\"selectionValue\">\r\n <ng-content></ng-content>\r\n <ng-container *ngIf=\"!!groupBy\">\r\n <ng-container *ngFor=\"let opt of orderedOptions\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\"\r\n [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!groupBy || ( typeof groupBy === 'string' && groupBy.length === 0)\">\r\n <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\"\r\n [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\r\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n </div>\r\n </ng-jvx-option>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-scrollbar>\r\n </div>\r\n\r\n </div>\r\n <div class=\"menu-footer\" #menuFooter>\r\n <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n </div>\r\n </div>\r\n </lib-panel>\r\n </div>\r\n <!-- END MENU -->\r\n <!-- START INPUT -->\r\n <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen()}\"\r\n (click)=\"clickOnMenuTrigger($event)\"\r\n #valueContainer>\r\n @if (value.length === 0) {\r\n <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n <ng-content select=\"[placeholder]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n </div>\r\n </div>\r\n @if (clearable && value.length > 0) {\r\n <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n <path\r\n d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n </svg>\r\n </div>\r\n }\r\n <div class=\"ng-jvx-multiselect-arrow\">\r\n @if (!isLoading()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n <path\r\n d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"></path>\r\n </svg>\r\n } @else {\r\n <div class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n <div style=\"min-height: 48px; height: 100%; display: flex; align-items: center\">\r\n <div style=\"max-width: 100%;\r\n padding-inline: .3rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\">{{ option[itemText] }}\r\n </div>\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 <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\r\n @for (val of value; track val[itemValue]) {\r\n <ng-jvx-multiselect-chip [value]=\"val\" class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" >\r\n {{ val[itemText] }}\r\n </ng-jvx-multiselect-chip>\r\n }\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow svg{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow svg{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow svg{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow svg{color:red}.menu-list-container{flex:1 1 0;max-height:300px;display:flex;flex-direction:column}.menu-footer{overflow:hidden}.cdk-overlay-pane .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .closeMenuButton svg{fill:var(--jvx-multiselect-on-primary);font-size:15px;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgJvxMultisectChipComponent, selector: "ng-jvx-multiselect-chip", inputs: ["value", "disabled"], outputs: ["removed"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PanelComponent, selector: "lib-panel", inputs: ["trigger", "yPosition", "multi"], outputs: ["onClose", "onClosed", "onOpened"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lib-menu-trigger-for], [libMenuTriggerFor]", inputs: ["libMenuTriggerFor"], outputs: ["closed", "onMenuOpen", "menuOpened", "onMenuClose", "menuClosed"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value", "disabled", "isSelected"], outputs: ["clickOnOption"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1116
1116
|
}
|
|
1117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
|
|
1118
1118
|
type: Component,
|
|
1119
1119
|
args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1120
1120
|
// {
|