ng-jvx-multiselect 19.0.38 → 20.0.1
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 +91 -52
- package/fesm2022/ng-jvx-multiselect.mjs.map +1 -1
- package/index.d.ts +311 -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, NgModule } 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
|
// {
|
|
@@ -1237,6 +1237,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1237
1237
|
type: Output
|
|
1238
1238
|
}] } });
|
|
1239
1239
|
|
|
1240
|
+
class NgJvxMultiselectModule {
|
|
1241
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1242
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectModule, imports: [NgJvxMultiselectComponent,
|
|
1243
|
+
NgJvxOptionComponent,
|
|
1244
|
+
NgJvxOptionsTemplateDirective,
|
|
1245
|
+
NgJvxSelectionTemplateDirective,
|
|
1246
|
+
NgJvxDisabledOptionDirective,
|
|
1247
|
+
NgJvxMultisectChipComponent,
|
|
1248
|
+
NgJvxGroupHeaderDirective], exports: [NgJvxMultiselectComponent,
|
|
1249
|
+
NgJvxOptionComponent,
|
|
1250
|
+
NgJvxOptionsTemplateDirective,
|
|
1251
|
+
NgJvxSelectionTemplateDirective,
|
|
1252
|
+
NgJvxDisabledOptionDirective,
|
|
1253
|
+
NgJvxMultisectChipComponent,
|
|
1254
|
+
NgJvxGroupHeaderDirective] }); }
|
|
1255
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectModule, imports: [NgJvxMultiselectComponent] }); }
|
|
1256
|
+
}
|
|
1257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
|
|
1258
|
+
type: NgModule,
|
|
1259
|
+
args: [{
|
|
1260
|
+
imports: [
|
|
1261
|
+
NgJvxMultiselectComponent,
|
|
1262
|
+
NgJvxOptionComponent,
|
|
1263
|
+
NgJvxOptionsTemplateDirective,
|
|
1264
|
+
NgJvxSelectionTemplateDirective,
|
|
1265
|
+
NgJvxDisabledOptionDirective,
|
|
1266
|
+
NgJvxMultisectChipComponent,
|
|
1267
|
+
NgJvxGroupHeaderDirective
|
|
1268
|
+
],
|
|
1269
|
+
exports: [NgJvxMultiselectComponent,
|
|
1270
|
+
NgJvxOptionComponent,
|
|
1271
|
+
NgJvxOptionsTemplateDirective,
|
|
1272
|
+
NgJvxSelectionTemplateDirective,
|
|
1273
|
+
NgJvxDisabledOptionDirective,
|
|
1274
|
+
NgJvxMultisectChipComponent,
|
|
1275
|
+
NgJvxGroupHeaderDirective]
|
|
1276
|
+
}]
|
|
1277
|
+
}] });
|
|
1278
|
+
|
|
1240
1279
|
/*
|
|
1241
1280
|
* Public API Surface of ng-jvx-multiselect
|
|
1242
1281
|
*/
|
|
@@ -1245,5 +1284,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1245
1284
|
* Generated bundle index. Do not edit.
|
|
1246
1285
|
*/
|
|
1247
1286
|
|
|
1248
|
-
export { JVXMULTISELECT, NgJvxDisabledOptionDirective, NgJvxGroupHeaderDirective, NgJvxMultisectChipComponent, NgJvxMultiselectComponent, NgJvxMultiselectService, NgJvxOptionComponent, NgJvxOptionsTemplateDirective, NgJvxSelectionTemplateDirective, setJvxCall };
|
|
1287
|
+
export { JVXMULTISELECT, NgJvxDisabledOptionDirective, NgJvxGroupHeaderDirective, NgJvxMultisectChipComponent, NgJvxMultiselectComponent, NgJvxMultiselectModule, NgJvxMultiselectService, NgJvxOptionComponent, NgJvxOptionsTemplateDirective, NgJvxSelectionTemplateDirective, setJvxCall };
|
|
1249
1288
|
//# sourceMappingURL=ng-jvx-multiselect.mjs.map
|