ng-jvx-multiselect 19.0.35 → 19.0.37
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/README.md +359 -366
- package/_index.scss +1 -1
- package/fesm2022/ng-jvx-multiselect.mjs +39 -112
- package/fesm2022/ng-jvx-multiselect.mjs.map +1 -1
- package/lib/chiplist/chip/chip.component.d.ts +2 -0
- package/lib/directives/ng-jvx-disabled-option.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-focus.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-group-header.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-options-template.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-selection-template.directive.d.ts +1 -1
- package/lib/ng-jvx-multiselect.component.d.ts +8 -10
- package/lib/ng-jvx-option/ng-jvx-option.component.d.ts +1 -1
- package/lib/panel/menu-trigger/menu-trigger.directive.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +0 -1
- package/src/lib/chiplist/chip/chip.component.scss +32 -32
- package/src/lib/mixins.scss +6 -6
- package/src/lib/ng-jvx-multiselect.component.scss +172 -172
- package/src/lib/ng-jvx-option/ng-jvx-option.component.scss +32 -32
- package/src/lib/panel/panel.component.scss +11 -11
- package/lib/ng-jvx-multiselect.module.d.ts +0 -20
package/_index.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward './src/lib/ng-jvx-multiselect.component';
|
|
1
|
+
@forward './src/lib/ng-jvx-multiselect.component';
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, input, Component, ViewEncapsulation, Output, Directive, Input, Injectable, output, signal, ChangeDetectionStrategy, ViewChild, viewChild,
|
|
3
|
-
import * as i3 from '@angular/common';
|
|
4
|
-
import { NgClass, CommonModule } from '@angular/common';
|
|
2
|
+
import { EventEmitter, input, Component, ViewEncapsulation, Output, Directive, Input, Injectable, output, inject, signal, ChangeDetectionStrategy, ViewChild, viewChild, computed, Optional, Self, HostBinding, ViewChildren, ContentChild } from '@angular/core';
|
|
5
3
|
import { fromEvent, Subject, takeUntil as takeUntil$1, tap, noop, timer, of, BehaviorSubject, forkJoin, interval, throwError } from 'rxjs';
|
|
6
4
|
import { takeUntil, debounceTime, distinctUntilChanged, switchMap, map, tap as tap$1, catchError } from 'rxjs/operators';
|
|
7
5
|
import * as i1 from '@angular/common/http';
|
|
8
6
|
import { HttpContextToken, HttpContext, HttpParams, HttpHeaders } from '@angular/common/http';
|
|
9
7
|
import * as i1$2 from '@angular/forms';
|
|
10
8
|
import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
9
|
+
import { NgScrollbar } from 'ngx-scrollbar';
|
|
11
10
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
12
11
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
13
12
|
import { CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
14
|
-
import * as
|
|
15
|
-
import {
|
|
16
|
-
import * as i5 from 'ngx-scrollbar/smooth-scroll';
|
|
17
|
-
import { SmoothScroll } from 'ngx-scrollbar/smooth-scroll';
|
|
13
|
+
import * as i3 from '@angular/common';
|
|
14
|
+
import { CommonModule } from '@angular/common';
|
|
18
15
|
import { trigger, transition, query, style, animate } from '@angular/animations';
|
|
19
16
|
|
|
20
17
|
class NgJvxOptionComponent {
|
|
@@ -25,11 +22,11 @@ class NgJvxOptionComponent {
|
|
|
25
22
|
this.isSelected = input(false);
|
|
26
23
|
}
|
|
27
24
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgJvxOptionComponent, isStandalone:
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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\n(click)=\"clickOnOption.emit()\">\n <div class=\"option-content\">\n <ng-content></ng-content>\n </div>\n <div class=\"list-option-background\"></div>\n</div>\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 }); }
|
|
29
26
|
}
|
|
30
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
|
|
31
28
|
type: Component,
|
|
32
|
-
args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None,
|
|
29
|
+
args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<div class=\"option ng-jvx-option\" [class.ng-jvx-single-selected-option]=\" isSelected()\" #listOption\n(click)=\"clickOnOption.emit()\">\n <div class=\"option-content\">\n <ng-content></ng-content>\n </div>\n <div class=\"list-option-background\"></div>\n</div>\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"] }]
|
|
33
30
|
}], ctorParameters: () => [], propDecorators: { clickOnOption: [{
|
|
34
31
|
type: Output
|
|
35
32
|
}] } });
|
|
@@ -46,14 +43,13 @@ class NgJvxOptionsTemplateDirective {
|
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
49
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxOptionsTemplateDirective, isStandalone:
|
|
46
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxOptionsTemplateDirective, isStandalone: true, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
|
|
50
47
|
}
|
|
51
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
|
|
52
49
|
type: Directive,
|
|
53
50
|
args: [{
|
|
54
51
|
// tslint:disable-next-line:directive-selector
|
|
55
|
-
selector: '[ngJvxOptionsTemplate]'
|
|
56
|
-
standalone: false
|
|
52
|
+
selector: '[ngJvxOptionsTemplate]'
|
|
57
53
|
}]
|
|
58
54
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngJvxOptionsTemplateOf: [{
|
|
59
55
|
type: Input
|
|
@@ -70,14 +66,13 @@ class NgJvxSelectionTemplateDirective {
|
|
|
70
66
|
}
|
|
71
67
|
}
|
|
72
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
73
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxSelectionTemplateDirective, isStandalone:
|
|
69
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxSelectionTemplateDirective, isStandalone: true, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
|
|
74
70
|
}
|
|
75
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
|
|
76
72
|
type: Directive,
|
|
77
73
|
args: [{
|
|
78
74
|
// tslint:disable-next-line:directive-selector
|
|
79
|
-
selector: '[ngJvxSelectionTemplate]'
|
|
80
|
-
standalone: false
|
|
75
|
+
selector: '[ngJvxSelectionTemplate]'
|
|
81
76
|
}]
|
|
82
77
|
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngJvxSelectionTemplateOf: [{
|
|
83
78
|
type: Input
|
|
@@ -94,14 +89,13 @@ class NgJvxGroupHeaderDirective {
|
|
|
94
89
|
}
|
|
95
90
|
}
|
|
96
91
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
97
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxGroupHeaderDirective, isStandalone:
|
|
92
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxGroupHeaderDirective, isStandalone: true, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
|
|
98
93
|
}
|
|
99
94
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
|
|
100
95
|
type: Directive,
|
|
101
96
|
args: [{
|
|
102
97
|
// tslint:disable-next-line:directive-selector
|
|
103
|
-
selector: '[ngJvxGroupHeader]'
|
|
104
|
-
standalone: false
|
|
98
|
+
selector: '[ngJvxGroupHeader]'
|
|
105
99
|
}]
|
|
106
100
|
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngJvxGroupHeaderOf: [{
|
|
107
101
|
type: Input
|
|
@@ -137,14 +131,13 @@ class NgJvxDisabledOptionDirective {
|
|
|
137
131
|
this.unsubs.complete();
|
|
138
132
|
}
|
|
139
133
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
140
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxDisabledOptionDirective, isStandalone:
|
|
134
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxDisabledOptionDirective, isStandalone: true, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
|
|
141
135
|
}
|
|
142
136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
|
|
143
137
|
type: Directive,
|
|
144
138
|
args: [{
|
|
145
139
|
// tslint:disable-next-line:directive-selector
|
|
146
|
-
selector: '[ngJvxDisabledOption]'
|
|
147
|
-
standalone: false
|
|
140
|
+
selector: '[ngJvxDisabledOption]'
|
|
148
141
|
}]
|
|
149
142
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ngJvxDisabledOption: [{
|
|
150
143
|
type: Input
|
|
@@ -269,13 +262,12 @@ class MenuTriggerDirective {
|
|
|
269
262
|
this.menu.open();
|
|
270
263
|
}
|
|
271
264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
272
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: MenuTriggerDirective, isStandalone:
|
|
265
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", 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 }); }
|
|
273
266
|
}
|
|
274
267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MenuTriggerDirective, decorators: [{
|
|
275
268
|
type: Directive,
|
|
276
269
|
args: [{
|
|
277
|
-
selector: '[lib-menu-trigger-for], [libMenuTriggerFor]'
|
|
278
|
-
standalone: false
|
|
270
|
+
selector: '[lib-menu-trigger-for], [libMenuTriggerFor]'
|
|
279
271
|
}]
|
|
280
272
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }], propDecorators: { closed: [{
|
|
281
273
|
type: Output
|
|
@@ -296,22 +288,21 @@ class NgJvxMultisectChipComponent {
|
|
|
296
288
|
this.removed = output();
|
|
297
289
|
this.value = input();
|
|
298
290
|
this.disabled = input(false);
|
|
291
|
+
this.container = inject(NgJvxMultiselectComponent, { optional: true });
|
|
299
292
|
}
|
|
300
293
|
clickOnRemove(e) {
|
|
301
294
|
e.stopPropagation();
|
|
302
295
|
e.preventDefault();
|
|
303
|
-
if (!this.disabled
|
|
304
|
-
this.
|
|
296
|
+
if (this.container && !this.container.disabled) {
|
|
297
|
+
this.container.deselect(this.value);
|
|
305
298
|
}
|
|
306
299
|
}
|
|
307
300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultisectChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
308
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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 [
|
|
301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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\">\n <ng-content></ng-content>\n</span>\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\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>\n\n</div>\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 }); }
|
|
309
302
|
}
|
|
310
303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultisectChipComponent, decorators: [{
|
|
311
304
|
type: Component,
|
|
312
|
-
args: [{ selector: 'ng-jvx-multiselect-chip',
|
|
313
|
-
NgClass
|
|
314
|
-
], encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{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"] }]
|
|
305
|
+
args: [{ selector: 'ng-jvx-multiselect-chip', encapsulation: ViewEncapsulation.None, template: "<div [class.disabled]=\"disabled()\"><span class=\"chip-text\">\n <ng-content></ng-content>\n</span>\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\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>\n\n</div>\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"] }]
|
|
315
306
|
}] });
|
|
316
307
|
|
|
317
308
|
class PanelComponent {
|
|
@@ -364,7 +355,7 @@ class PanelComponent {
|
|
|
364
355
|
}
|
|
365
356
|
}
|
|
366
357
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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\
|
|
358
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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\n (backdropClick)=\"close()\"\n [cdkConnectedOverlayPositions]=\"[\n {\n originX: 'start',\n originY: yPosition() === 'below'? 'center': 'top',\n overlayX: 'start',\n overlayY: yPosition() === 'below'? 'top': 'bottom'\n }\n ]\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayPanelClass]=\"'ng-jvx-multiselect-panel'\"\n [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayDisableClose]=\"false\"\n [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\n [cdkConnectedOverlayOpen]=\"isOpen()\">\n <div [@animation]=\"isOpen()\">\n <div class=\"ng-jvx-panel\" [class]=\"yPosition()+'-panel'\" [class.opening]=\"isOpen()\" [class.closing]=\"!isOpen()\"\n (click)=\"clickOnMenu()\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\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: [
|
|
368
359
|
trigger('animation', [
|
|
369
360
|
transition(':enter', [
|
|
370
361
|
query('.ng-jvx-panel.below-panel', [
|
|
@@ -480,7 +471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
480
471
|
], { optional: true })
|
|
481
472
|
])
|
|
482
473
|
]),
|
|
483
|
-
], template: "<ng-template #menuTemplate cdkConnectedOverlay\
|
|
474
|
+
], template: "<ng-template #menuTemplate cdkConnectedOverlay\n (backdropClick)=\"close()\"\n [cdkConnectedOverlayPositions]=\"[\n {\n originX: 'start',\n originY: yPosition() === 'below'? 'center': 'top',\n overlayX: 'start',\n overlayY: yPosition() === 'below'? 'top': 'bottom'\n }\n ]\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayPanelClass]=\"'ng-jvx-multiselect-panel'\"\n [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayDisableClose]=\"false\"\n [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\n [cdkConnectedOverlayOpen]=\"isOpen()\">\n <div [@animation]=\"isOpen()\">\n <div class=\"ng-jvx-panel\" [class]=\"yPosition()+'-panel'\" [class.opening]=\"isOpen()\" [class.closing]=\"!isOpen()\"\n (click)=\"clickOnMenu()\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\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"] }]
|
|
484
475
|
}], ctorParameters: () => [], propDecorators: { menuTemplate: [{
|
|
485
476
|
type: ViewChild,
|
|
486
477
|
args: ['menuTemplate', { static: true }]
|
|
@@ -509,14 +500,13 @@ class NgJvxFocusDirective {
|
|
|
509
500
|
}
|
|
510
501
|
}
|
|
511
502
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
512
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxFocusDirective, isStandalone:
|
|
503
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: NgJvxFocusDirective, isStandalone: true, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 }); }
|
|
513
504
|
}
|
|
514
505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
|
|
515
506
|
type: Directive,
|
|
516
507
|
args: [{
|
|
517
508
|
// tslint:disable-next-line:directive-selector
|
|
518
|
-
selector: '[ngJvxFocus]'
|
|
519
|
-
standalone: false
|
|
509
|
+
selector: '[ngJvxFocus]'
|
|
520
510
|
}]
|
|
521
511
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ngJvxFocus: [{
|
|
522
512
|
type: Input
|
|
@@ -610,7 +600,6 @@ class NgJvxMultiselectComponent {
|
|
|
610
600
|
this.optionsTemplate = null;
|
|
611
601
|
this.selectionTemplate = null;
|
|
612
602
|
this.groupHeaderTemplate = null;
|
|
613
|
-
this.chips = viewChildren(NgJvxMultisectChipComponent);
|
|
614
603
|
this.multi = false;
|
|
615
604
|
this.url = '';
|
|
616
605
|
this.requestType = 'get';
|
|
@@ -703,19 +692,6 @@ class NgJvxMultiselectComponent {
|
|
|
703
692
|
this.intPageSize = 15;
|
|
704
693
|
this.onTouched = () => {
|
|
705
694
|
};
|
|
706
|
-
effect((onCleanup) => {
|
|
707
|
-
if (!this._disabled()) {
|
|
708
|
-
const subs = [];
|
|
709
|
-
const chips = this.chips();
|
|
710
|
-
for (const chip of chips) {
|
|
711
|
-
const sub = chip.removed.subscribe((v) => {
|
|
712
|
-
this.deselect(v);
|
|
713
|
-
});
|
|
714
|
-
subs.push(sub);
|
|
715
|
-
}
|
|
716
|
-
onCleanup(() => subs.forEach(s => s.unsubscribe?.()));
|
|
717
|
-
}
|
|
718
|
-
});
|
|
719
695
|
if (this.ngControl != null) {
|
|
720
696
|
// Setting the value accessor directly (instead of using
|
|
721
697
|
// the providers) to avoid running into a circular import.
|
|
@@ -1130,13 +1106,13 @@ class NgJvxMultiselectComponent {
|
|
|
1130
1106
|
this.changeDetectorRef.markForCheck();
|
|
1131
1107
|
}
|
|
1132
1108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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 }); }
|
|
1133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: NgJvxMultiselectComponent, isStandalone:
|
|
1109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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: [
|
|
1134
1110
|
// {
|
|
1135
1111
|
// provide: MatFormFieldControl,
|
|
1136
1112
|
// useExisting: forwardRef(() => NgJvxMultiselectComponent),
|
|
1137
1113
|
// multi: true,
|
|
1138
1114
|
// }
|
|
1139
|
-
], 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: "chips", predicate: NgJvxMultisectChipComponent, 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: "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: "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: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i5.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PanelComponent, selector: "lib-panel", inputs: ["trigger", "yPosition", "multi"], outputs: ["onClose", "onClosed", "onOpened"] }, { kind: "component", type: NgJvxMultisectChipComponent, selector: "ng-jvx-multiselect-chip", inputs: ["value", "disabled"], outputs: ["removed"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
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: "\n<div class=\"ng-jvx-multiselect\" [class.disabled]=\"disabled\" [class.has-errors]=\"hasErrors\" #jvxMultiselect>\n <!-- START MENU -->\n <div [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\n #trigger\n (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\n >\n <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [multi]=\"multi\" [formGroup]=\"form\"\n [yPosition]=\"yPosition()\">\n @if (closeButton) {\n <div class=\"closeMenuButton\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\n <path\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>\n </svg>\n </div>\n }\n <div style=\"display: flex; flex-direction: column\"\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize().width, 'min-width.px': 112, 'max-height': '300px', 'height': listContainerSize().height}\">\n <div class=\"menu-list-container\"\n [style.flex]=\"'1 1 0'\"\n #menuLIstContainer\n >\n <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\n <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\n [ngJvxFocus]=\"isOpen()\"\n (input)=\"onSearchValueChange($event)\"/>\n </div>\n <div\n [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 300? 300 - (searchInput? 40 : 0) - menuFooter.offsetHeight + 'px': 'auto'}\">\n <ng-scrollbar style=\"width: 100%\"\n smoothScroll\n [visibility]=\"'hover'\"\n [appearance]=\"'compact'\"\n [sensorDisabled]=\"isLoading()\"\n [autoHeightDisabled]=\"false\" #scrollbar>\n <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\n <div #selection\n *ngIf=\"showList\"\n [ngStyle]=\"{'padding': 0, 'width': listContainerSize().width, 'min-width.px': 112}\"\n ngDefaultControl\n formControlName=\"selectionValue\">\n <ng-content></ng-content>\n <ng-container *ngIf=\"!!groupBy\">\n <ng-container *ngFor=\"let opt of orderedOptions\">\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\n\n <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\"\n [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n </div>\n </ng-jvx-option>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!groupBy || ( typeof groupBy === 'string' && groupBy.length === 0)\">\n <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\"\n [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n </div>\n </ng-jvx-option>\n </ng-container>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n\n </div>\n <div class=\"menu-footer\" #menuFooter>\n <ng-content select=\"[ng-jvx-footer]\"></ng-content>\n </div>\n </div>\n </lib-panel>\n </div>\n <!-- END MENU -->\n <!-- START INPUT -->\n <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen()}\"\n (click)=\"clickOnMenuTrigger($event)\"\n #valueContainer>\n @if (value.length === 0) {\n <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\n <ng-content select=\"[placeholder]\"></ng-content>\n </div>\n }\n <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\n\n </div>\n\n <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\n <div *ngFor=\"let val of value\" style=\"width: 100%;\">\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\n </div>\n </div>\n @if (clearable && value.length > 0) {\n <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n <path\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>\n </svg>\n </div>\n }\n <div class=\"ng-jvx-multiselect-arrow\">\n @if (!isLoading()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n <path\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>\n </svg>\n } @else {\n <div class=\"lds-ring\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n }\n </div>\n </div>\n <!-- END INPUT -->\n</div>\n<ng-template #defaultTemplate let-option>\n <div style=\"min-height: 48px; height: 100%; display: flex; align-items: center\">\n <div style=\"max-width: 100%;\n padding-inline: .3rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\">{{ option[itemText] }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #defaultSelectionTemplate let-value>\n {{ value[itemText] }}\n</ng-template>\n\n<ng-template #defaultMultiSelectionTemplate let-value>\n <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\n @for (val of value; track val[itemValue]) {\n <ng-jvx-multiselect-chip [value]=\"val\" class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" >\n {{ val[itemText] }}\n </ng-jvx-multiselect-chip>\n }\n </div>\n</ng-template>\n<ng-template #defaultGroupHeaderTemplate let-opt>\n <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\n</ng-template>\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 }); }
|
|
1140
1116
|
}
|
|
1141
1117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
|
|
1142
1118
|
type: Component,
|
|
@@ -1146,7 +1122,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1146
1122
|
// useExisting: forwardRef(() => NgJvxMultiselectComponent),
|
|
1147
1123
|
// multi: true,
|
|
1148
1124
|
// }
|
|
1149
|
-
], standalone: false, 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"] }]
|
|
1125
|
+
], imports: [
|
|
1126
|
+
CommonModule,
|
|
1127
|
+
NgJvxMultisectChipComponent,
|
|
1128
|
+
NgScrollbar,
|
|
1129
|
+
PanelComponent,
|
|
1130
|
+
ReactiveFormsModule,
|
|
1131
|
+
MenuTriggerDirective,
|
|
1132
|
+
NgJvxOptionComponent,
|
|
1133
|
+
NgJvxFocusDirective,
|
|
1134
|
+
FormsModule
|
|
1135
|
+
], standalone: true, template: "\n<div class=\"ng-jvx-multiselect\" [class.disabled]=\"disabled\" [class.has-errors]=\"hasErrors\" #jvxMultiselect>\n <!-- START MENU -->\n <div [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\n #trigger\n (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\n >\n <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [multi]=\"multi\" [formGroup]=\"form\"\n [yPosition]=\"yPosition()\">\n @if (closeButton) {\n <div class=\"closeMenuButton\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\n <path\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>\n </svg>\n </div>\n }\n <div style=\"display: flex; flex-direction: column\"\n [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize().width, 'min-width.px': 112, 'max-height': '300px', 'height': listContainerSize().height}\">\n <div class=\"menu-list-container\"\n [style.flex]=\"'1 1 0'\"\n #menuLIstContainer\n >\n <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\n <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\n [ngJvxFocus]=\"isOpen()\"\n (input)=\"onSearchValueChange($event)\"/>\n </div>\n <div\n [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 300? 300 - (searchInput? 40 : 0) - menuFooter.offsetHeight + 'px': 'auto'}\">\n <ng-scrollbar style=\"width: 100%\"\n smoothScroll\n [visibility]=\"'hover'\"\n [appearance]=\"'compact'\"\n [sensorDisabled]=\"isLoading()\"\n [autoHeightDisabled]=\"false\" #scrollbar>\n <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\n <div #selection\n *ngIf=\"showList\"\n [ngStyle]=\"{'padding': 0, 'width': listContainerSize().width, 'min-width.px': 112}\"\n ngDefaultControl\n formControlName=\"selectionValue\">\n <ng-content></ng-content>\n <ng-container *ngIf=\"!!groupBy\">\n <ng-container *ngFor=\"let opt of orderedOptions\">\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\n\n <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\"\n [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n </div>\n </ng-jvx-option>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!groupBy || ( typeof groupBy === 'string' && groupBy.length === 0)\">\n <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\"\n [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n <!-- <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n </div>\n </ng-jvx-option>\n </ng-container>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n\n </div>\n <div class=\"menu-footer\" #menuFooter>\n <ng-content select=\"[ng-jvx-footer]\"></ng-content>\n </div>\n </div>\n </lib-panel>\n </div>\n <!-- END MENU -->\n <!-- START INPUT -->\n <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen()}\"\n (click)=\"clickOnMenuTrigger($event)\"\n #valueContainer>\n @if (value.length === 0) {\n <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\n <ng-content select=\"[placeholder]\"></ng-content>\n </div>\n }\n <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\n\n </div>\n\n <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\n <div *ngFor=\"let val of value\" style=\"width: 100%;\">\n <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\n </div>\n </div>\n @if (clearable && value.length > 0) {\n <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n <path\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>\n </svg>\n </div>\n }\n <div class=\"ng-jvx-multiselect-arrow\">\n @if (!isLoading()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n <path\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>\n </svg>\n } @else {\n <div class=\"lds-ring\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n }\n </div>\n </div>\n <!-- END INPUT -->\n</div>\n<ng-template #defaultTemplate let-option>\n <div style=\"min-height: 48px; height: 100%; display: flex; align-items: center\">\n <div style=\"max-width: 100%;\n padding-inline: .3rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\">{{ option[itemText] }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #defaultSelectionTemplate let-value>\n {{ value[itemText] }}\n</ng-template>\n\n<ng-template #defaultMultiSelectionTemplate let-value>\n <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\n @for (val of value; track val[itemValue]) {\n <ng-jvx-multiselect-chip [value]=\"val\" class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" >\n {{ val[itemText] }}\n </ng-jvx-multiselect-chip>\n }\n </div>\n</ng-template>\n<ng-template #defaultGroupHeaderTemplate let-opt>\n <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\n</ng-template>\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"] }]
|
|
1150
1136
|
}], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
|
|
1151
1137
|
type: Optional
|
|
1152
1138
|
}, {
|
|
@@ -1251,65 +1237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1251
1237
|
type: Output
|
|
1252
1238
|
}] } });
|
|
1253
1239
|
|
|
1254
|
-
class NgJvxMultiselectModule {
|
|
1255
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1256
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultiselectModule, declarations: [MenuTriggerDirective,
|
|
1257
|
-
NgJvxMultiselectComponent,
|
|
1258
|
-
NgJvxOptionComponent,
|
|
1259
|
-
NgJvxOptionsTemplateDirective,
|
|
1260
|
-
NgJvxSelectionTemplateDirective,
|
|
1261
|
-
NgJvxDisabledOptionDirective,
|
|
1262
|
-
NgJvxGroupHeaderDirective,
|
|
1263
|
-
NgJvxFocusDirective], imports: [CommonModule,
|
|
1264
|
-
ReactiveFormsModule,
|
|
1265
|
-
NgScrollbarModule,
|
|
1266
|
-
SmoothScroll,
|
|
1267
|
-
FormsModule,
|
|
1268
|
-
PanelComponent,
|
|
1269
|
-
NgJvxMultisectChipComponent], exports: [NgJvxMultiselectComponent,
|
|
1270
|
-
NgJvxOptionComponent,
|
|
1271
|
-
NgJvxOptionsTemplateDirective,
|
|
1272
|
-
NgJvxSelectionTemplateDirective,
|
|
1273
|
-
NgJvxDisabledOptionDirective,
|
|
1274
|
-
NgJvxMultisectChipComponent,
|
|
1275
|
-
NgJvxGroupHeaderDirective] }); }
|
|
1276
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultiselectModule, imports: [CommonModule,
|
|
1277
|
-
ReactiveFormsModule,
|
|
1278
|
-
NgScrollbarModule,
|
|
1279
|
-
FormsModule] }); }
|
|
1280
|
-
}
|
|
1281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
|
|
1282
|
-
type: NgModule,
|
|
1283
|
-
args: [{
|
|
1284
|
-
declarations: [
|
|
1285
|
-
MenuTriggerDirective,
|
|
1286
|
-
NgJvxMultiselectComponent,
|
|
1287
|
-
NgJvxOptionComponent,
|
|
1288
|
-
NgJvxOptionsTemplateDirective,
|
|
1289
|
-
NgJvxSelectionTemplateDirective,
|
|
1290
|
-
NgJvxDisabledOptionDirective,
|
|
1291
|
-
NgJvxGroupHeaderDirective,
|
|
1292
|
-
NgJvxFocusDirective
|
|
1293
|
-
],
|
|
1294
|
-
imports: [
|
|
1295
|
-
CommonModule,
|
|
1296
|
-
ReactiveFormsModule,
|
|
1297
|
-
NgScrollbarModule,
|
|
1298
|
-
SmoothScroll,
|
|
1299
|
-
FormsModule,
|
|
1300
|
-
PanelComponent,
|
|
1301
|
-
NgJvxMultisectChipComponent
|
|
1302
|
-
],
|
|
1303
|
-
exports: [NgJvxMultiselectComponent,
|
|
1304
|
-
NgJvxOptionComponent,
|
|
1305
|
-
NgJvxOptionsTemplateDirective,
|
|
1306
|
-
NgJvxSelectionTemplateDirective,
|
|
1307
|
-
NgJvxDisabledOptionDirective,
|
|
1308
|
-
NgJvxMultisectChipComponent,
|
|
1309
|
-
NgJvxGroupHeaderDirective]
|
|
1310
|
-
}]
|
|
1311
|
-
}] });
|
|
1312
|
-
|
|
1313
1240
|
/*
|
|
1314
1241
|
* Public API Surface of ng-jvx-multiselect
|
|
1315
1242
|
*/
|
|
@@ -1318,5 +1245,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
1318
1245
|
* Generated bundle index. Do not edit.
|
|
1319
1246
|
*/
|
|
1320
1247
|
|
|
1321
|
-
export { JVXMULTISELECT, NgJvxDisabledOptionDirective, NgJvxGroupHeaderDirective, NgJvxMultisectChipComponent, NgJvxMultiselectComponent,
|
|
1248
|
+
export { JVXMULTISELECT, NgJvxDisabledOptionDirective, NgJvxGroupHeaderDirective, NgJvxMultisectChipComponent, NgJvxMultiselectComponent, NgJvxMultiselectService, NgJvxOptionComponent, NgJvxOptionsTemplateDirective, NgJvxSelectionTemplateDirective, setJvxCall };
|
|
1322
1249
|
//# sourceMappingURL=ng-jvx-multiselect.mjs.map
|