ng-jvx-multiselect 16.0.13 → 17.0.0

package/fesm2022/ng-jvx-multiselect.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ViewChild, Input, Directive, Injectable, EventEmitter, forwardRef, ChangeDetectionStrategy, Optional, Self, HostBinding, ViewChildren, ContentChild, Output, Inject, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, ViewChild, Input, Directive, Injectable, EventEmitter, forwardRef, ChangeDetectionStrategy, Optional, Self, HostBinding, ViewChildren, ContentChild, Output, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/list';
@@ -13,7 +13,7 @@ import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/f
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3 from '@angular/material/menu';
-import { _MatMenuBase, MAT_MENU_DEFAULT_OPTIONS, MAT_MENU_PANEL, MatMenu, matMenuAnimations, MatMenuModule } from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i7 from '@angular/material/chips';
@@ -21,944 +21,904 @@ import { MatChipsModule } from '@angular/material/chips';
 import * as i8 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import * as i9 from 'ngx-scrollbar/smooth-scroll';
-import { SmoothScrollModule } from 'ngx-scrollbar/smooth-scroll';
+import { SmoothScroll } from 'ngx-scrollbar/smooth-scroll';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 
-class NgJvxOptionComponent {
-    constructor() {
-        this.isSelected = false;
-    }
-    ngOnInit() {
-    }
-    ngDoCheck() {
-        if (this.isSelected !== this.listOption.selected) {
-            this.isSelected = this.listOption.selected;
-        }
-    }
-    deselect() {
-        this.listOption.selected = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "listOption", first: true, predicate: ["listOption"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { listOption: [{
-                type: ViewChild,
-                args: ['listOption', { static: true }]
-            }], value: [{
-                type: Input
+class NgJvxOptionComponent {
+    constructor() {
+        this.isSelected = false;
+    }
+    ngOnInit() {
+    }
+    ngDoCheck() {
+        if (this.isSelected !== this.listOption.selected) {
+            this.isSelected = this.listOption.selected;
+        }
+    }
+    deselect() {
+        this.listOption.selected = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "listOption", first: true, predicate: ["listOption"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { listOption: [{
+                type: ViewChild,
+                args: ['listOption', { static: true }]
+            }], value: [{
+                type: Input
             }] } });
 
-class NgJvxOptionsTemplateDirective {
-    constructor(el, template, vcRef) {
-        this.el = el;
-        this.template = template;
-        this.vcRef = vcRef;
-    }
-    set ngJvxOptionsTemplateOf(source) {
-        for (const item of source) {
-            this.vcRef.createEmbeddedView(this.template, { $implicit: item });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[ngJvxOptionsTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngJvxOptionsTemplateOf: [{
-                type: Input
+class NgJvxOptionsTemplateDirective {
+    constructor(el, template, vcRef) {
+        this.el = el;
+        this.template = template;
+        this.vcRef = vcRef;
+    }
+    set ngJvxOptionsTemplateOf(source) {
+        for (const item of source) {
+            this.vcRef.createEmbeddedView(this.template, { $implicit: item });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[ngJvxOptionsTemplate]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngJvxOptionsTemplateOf: [{
+                type: Input
             }] } });
 
-class NgJvxSelectionTemplateDirective {
-    constructor(template, vcRef) {
-        this.template = template;
-        this.vcRef = vcRef;
-    }
-    set ngJvxSelectionTemplateOf(source) {
-        for (const item of source) {
-            this.vcRef.createEmbeddedView(this.template, { $implicit: item });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[ngJvxSelectionTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngJvxSelectionTemplateOf: [{
-                type: Input
+class NgJvxSelectionTemplateDirective {
+    constructor(template, vcRef) {
+        this.template = template;
+        this.vcRef = vcRef;
+    }
+    set ngJvxSelectionTemplateOf(source) {
+        for (const item of source) {
+            this.vcRef.createEmbeddedView(this.template, { $implicit: item });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[ngJvxSelectionTemplate]'
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngJvxSelectionTemplateOf: [{
+                type: Input
             }] } });
 
-class NgJvxGroupHeaderDirective {
-    constructor(template, vcRef) {
-        this.template = template;
-        this.vcRef = vcRef;
-    }
-    set ngJvxGroupHeaderOf(source) {
-        for (const item of source) {
-            this.vcRef.createEmbeddedView(this.template, { $implicit: item });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[ngJvxGroupHeader]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngJvxGroupHeaderOf: [{
-                type: Input
+class NgJvxGroupHeaderDirective {
+    constructor(template, vcRef) {
+        this.template = template;
+        this.vcRef = vcRef;
+    }
+    set ngJvxGroupHeaderOf(source) {
+        for (const item of source) {
+            this.vcRef.createEmbeddedView(this.template, { $implicit: item });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[ngJvxGroupHeader]'
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngJvxGroupHeaderOf: [{
+                type: Input
             }] } });
 
-class NgJvxDisabledOptionDirective {
-    set ngJvxDisabledOption(source) {
-        this.isDisabled = source;
-        if (this.isDisabled) {
-            this.el.nativeElement.style.opacity = this.originalOpacity ? this.originalOpacity / 2 : 0.5;
-            fromEvent(this.el.nativeElement, 'click').pipe(takeUntil(this.restore), takeUntil(this.unsubs)).subscribe((e) => {
-                e.preventDefault();
-                e.stopPropagation();
-            });
-        }
-        else {
-            this.el.nativeElement.style.opacity = this.originalOpacity;
-            this.restore.next();
-        }
-    }
-    constructor(el) {
-        this.el = el;
-        this.isDisabled = false;
-        this.originalOpacity = 1;
-        this.unsubs = new Subject();
-        this.restore = new Subject();
-        this.originalOpacity = el.nativeElement.style.opacity;
-    }
-    ngOnInit() {
-    }
-    ngOnDestroy() {
-        this.unsubs.next();
-        this.unsubs.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[ngJvxDisabledOption]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ngJvxDisabledOption: [{
-                type: Input
+class NgJvxDisabledOptionDirective {
+    set ngJvxDisabledOption(source) {
+        this.isDisabled = source;
+        if (this.isDisabled) {
+            this.el.nativeElement.style.opacity = this.originalOpacity ? this.originalOpacity / 2 : 0.5;
+            fromEvent(this.el.nativeElement, 'click').pipe(takeUntil(this.restore), takeUntil(this.unsubs)).subscribe((e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            });
+        }
+        else {
+            this.el.nativeElement.style.opacity = this.originalOpacity;
+            this.restore.next();
+        }
+    }
+    constructor(el) {
+        this.el = el;
+        this.isDisabled = false;
+        this.originalOpacity = 1;
+        this.unsubs = new Subject();
+        this.restore = new Subject();
+        this.originalOpacity = el.nativeElement.style.opacity;
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this.unsubs.next();
+        this.unsubs.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[ngJvxDisabledOption]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ngJvxDisabledOption: [{
+                type: Input
             }] } });
 
-const JVXMULTISELECT = new HttpContextToken(() => false);
+const JVXMULTISELECT = new HttpContextToken(() => false);
 const setJvxCall = () => new HttpContext().set(JVXMULTISELECT, true);
 
-class NgJvxMultiselectService {
-    constructor(http) {
-        this.http = http;
-    }
-    getList({ url, ignorePagination = false, currentPage, pageSize, requestType = 'get', requestHeaders, search, searchProp = 'search', data }) {
-        let params = new HttpParams();
-        if (search && search.length > 0) {
-            params = params.set(searchProp, search);
-        }
-        if (!ignorePagination) {
-            params = params.set('page', currentPage.toString())
-                .set('size', pageSize.toString());
-        }
-        const options = {
-            mode: 'no-cors',
-            headers: requestHeaders,
-            context: setJvxCall(),
-            // withCredentials: true,
-            // credentials: 'same-origin', // cache: 'default',
-            data,
-            params
-        };
-        if (requestType === 'get') {
-            return this.http.get(url, options);
-        }
-        else {
-            return this.http.post(url, options);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+class NgJvxMultiselectService {
+    constructor(http) {
+        this.http = http;
+    }
+    getList({ url, ignorePagination = false, currentPage, pageSize, requestType = 'get', requestHeaders, search, searchProp = 'search', data }) {
+        let params = new HttpParams();
+        if (search && search.length > 0) {
+            params = params.set(searchProp, search);
+        }
+        if (!ignorePagination) {
+            params = params.set('page', currentPage.toString())
+                .set('size', pageSize.toString());
+        }
+        const options = {
+            mode: 'no-cors',
+            headers: requestHeaders,
+            context: setJvxCall(),
+            // withCredentials: true,
+            // credentials: 'same-origin', // cache: 'default',
+            data,
+            params
+        };
+        if (requestType === 'get') {
+            return this.http.get(url, options);
+        }
+        else {
+            return this.http.post(url, options);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
-class NgJvxFocusDirective {
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnInit() {
-        if (this.ngJvxFocus) {
-            this.el.nativeElement.focus();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('ngJvxFocus') && changes.ngJvxFocus.currentValue === true) {
-            this.el.nativeElement.focus();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[ngJvxFocus]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ngJvxFocus: [{
-                type: Input
+class NgJvxFocusDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnInit() {
+        if (this.ngJvxFocus) {
+            this.el.nativeElement.focus();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.hasOwnProperty('ngJvxFocus') && changes.ngJvxFocus.currentValue === true) {
+            this.el.nativeElement.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[ngJvxFocus]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ngJvxFocus: [{
+                type: Input
             }] } });
 
-class NgJvxMultiselectComponent {
-    static { this.nextId = 0; }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-    set value(value) {
-        this.pValue = value ?? [];
-        if (value) {
-            this.form.get('selectionValue').setValue(this.pValue.map(v => v[this.itemValue]));
-        }
-        else {
-            this.form.get('selectionValue').setValue(value);
-        }
-        this.stateChanges.next();
-    }
-    get value() {
-        return this.pValue;
-    }
-    get required() {
-        return this._required;
-    }
-    set required(req) {
-        this._required = coerceBooleanProperty(req);
-        this.stateChanges.next();
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this._disabled ? this.parts.disable() : this.parts.enable();
-        this.stateChanges.next();
-    }
-    get pageSize() {
-        return this.intPageSize;
-    }
-    set pageSize(val) {
-        if (val < 15) {
-            this.intPageSize = 15;
-        }
-        else {
-            this.intPageSize = val;
-        }
-    }
-    get errorState() {
-        if (this.ngControl != null) {
-            return this.ngControl.invalid && this.ngControl.touched;
-        }
-        else {
-            return false;
-        }
-    }
-    constructor(formBuilder, service, elementRef, changeDetectorRef, ngControl, fb) {
-        this.formBuilder = formBuilder;
-        this.service = service;
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.ngControl = ngControl;
-        this.id = `jvx-multiselect-${NgJvxMultiselectComponent.nextId++}`;
-        this.optionsTemplate = null;
-        this.selectionTemplate = null;
-        this.groupHeaderTemplate = null;
-        // @ContentChild(NgJvxOptionComponent) optionComp: NgJvxOptionComponent;
-        // @ContentChild(TemplateRef) optionsTemplate: TemplateRef<any> | null = null;
-        this.options = [];
-        this.multi = false;
-        this.url = '';
-        this.requestType = 'get';
-        this.itemValue = 'value';
-        this.itemText = 'text';
-        this.ignorePagination = false;
-        this.clearable = false;
-        this.closeOnClick = true;
-        this.hasErrors = false;
-        this.searchMode = null;
-        this.searchInput = false;
-        this.searchLabel = 'search';
-        this.listProp = '';
-        this.totalRowsProp = '';
-        this.panelClass = '';
-        this.searchProp = 'search';
-        this.closeButton = false;
-        this.mapper = {
-            mapOption(source) {
-                return of(source);
-            }
-        };
-        this.multiMapper = {
-            mapOptions(source) {
-                return of(source);
-            }
-        };
-        this.searchMapper = {
-            mapSearch: (source, options) => {
-                return of(options.filter(o => o[this.itemText].toString().toLowerCase().includes(source.toString().toLowerCase())));
-            }
-        };
-        this.requestHeaders = new HttpHeaders();
-        // tslint:disable-next-line:variable-name
-        this._required = false;
-        // tslint:disable-next-line:variable-name
-        this._disabled = false;
-        this.valueChange = new EventEmitter();
-        this.jvxMultiselectOpen = new EventEmitter();
-        this.jvxMultiselectOpened = new EventEmitter();
-        this.jvxMultiselectClose = new EventEmitter();
-        this.jvxMultiselectClosed = new EventEmitter();
-        this.scrollEnd = new EventEmitter();
-        this.controlType = 'ng-jvx-multiselect';
-        this.document = document;
-        this.window = window;
-        this.isOpen = false;
-        this.isLoading = false;
-        this.showList = true;
-        this.asyncOptions = [];
-        this.selectableOptions = [];
-        this.orderedOptions = [];
-        this.searchValue = '';
-        this.yPosition = 'above';
-        this.stateChanges = new Subject();
-        this.currentPage = 0;
-        this.listContainerSize = { height: 'auto', minHeight: '0', width: '100%' };
-        this.touched = false;
-        this.focused = false;
-        this.multiContainerWidth = 100;
-        this.searchValueSubject = new Subject();
-        this.searchValue$ = this.searchValueSubject.asObservable();
-        this.pValue = [];
-        this.shouldLoadMore = true;
-        this.unsubscribe = new Subject();
-        this.unsubscribe$ = this.unsubscribe.asObservable();
-        this.intPageSize = 15;
-        this.onTouched = () => {
-        };
-        if (this.ngControl != null) {
-            // Setting the value accessor directly (instead of using
-            // the providers) to avoid running into a circular import.
-            this.ngControl.valueAccessor = this;
-        }
-        this.parts = fb.group({
-            area: '',
-            exchange: '',
-            subscriber: '',
-        });
-        this.form = this.formBuilder.group({
-            selectionValue: new UntypedFormControl(this.selectionValue)
-        });
-    }
-    ngOnInit() {
-        this.stateChange$.pipe(takeUntil(this.unsubscribe)).subscribe(() => {
-            this.changeDetectorRef.markForCheck();
-        });
-        // this.setSelectableOptions(this.options).subscribe(noop);
-        this.selectableOptions = [...this.options];
-        this.updateOrderedOptions(this.selectableOptions).subscribe(noop);
-        fromEvent(window, 'resize').pipe(takeUntil(this.unsubscribe), debounceTime(100), map(() => {
-            return this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
-        }), switchMap(() => timer(100)), tap(() => {
-            this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
-            this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
-            this.changeDetectorRef.markForCheck();
-        })).subscribe(noop);
-        this.searchValue$.pipe(takeUntil(this.unsubscribe), debounceTime(300), distinctUntilChanged((prev, curr) => {
-            return curr === this.searchValue;
-        }), switchMap((val) => {
-            this.searchValue = val;
-            this.currentPage = 0;
-            if (this.searchMode === 'client') {
-                return this.clientSearch();
-            }
-            else if (this.url && this.url.length > 0) {
-                return this.serverSearch();
-            }
-        })).subscribe((val) => {
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    clientSearch() {
-        let obs;
-        if (this.url && this.url.length > 0) {
-            this.selectableOptions = [];
-            this.updateOrderedOptions(this.selectableOptions).subscribe(noop);
-            this.shouldLoadMore = true;
-            obs = this.getList().pipe(map(() => {
-                return this.selectableOptions;
-            }));
-        }
-        else {
-            obs = of(this.options);
-        }
-        return obs.pipe(switchMap((val) => this.searchMapper.mapSearch(this.searchValue, val)), switchMap((res) => {
-            // return this.setSelectableOptions(res);
-            this.selectableOptions = [];
-            this.selectableOptions.push(...res);
-            return this.updateOrderedOptions(this.selectableOptions);
-        }));
-    }
-    setSelectableOptions(options) {
-        this.selectableOptions = [];
-        const obs = options.reduce((acc, curr) => {
-            acc.push(this.mapper.mapOption(curr));
-            return acc;
-        }, []);
-        // this.mapper.mapOption(option);
-        return forkJoin([...obs]).pipe(switchMap((val) => {
-            this.selectableOptions.push(...val);
-            return this.updateOrderedOptions(this.selectableOptions);
-        }));
-    }
-    serverSearch() {
-        this.shouldLoadMore = true;
-        this.selectableOptions = [];
-        this.shouldLoadMore = true;
-        return this.getList();
-    }
-    ngOnDestroy() {
-        this.unsubscribe.next();
-        this.stateChanges.complete();
-    }
-    ngAfterViewInit() {
-        timer(0).subscribe(() => {
-            this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
-        });
-        if (this.scrollbar) {
-            this.scrollbar.scrolled.pipe(takeUntil(this.unsubscribe$)).subscribe((e) => {
-                this.onScrolled(e);
-            });
-        }
-        timer(0).pipe(tap(() => {
-            this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
-            this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
-            this.changeDetectorRef.markForCheck();
-        })).subscribe(noop);
-    }
-    ngOnChanges(changes) {
-        if (changes.options) {
-            // this.setSelectableOptions(this.options).subscribe(noop);
-            this.selectableOptions = [...this.options];
-        }
-    }
-    get selectionValue() {
-        return this.value.map((v) => {
-            return v[this.itemValue];
-        });
-    }
-    get empty() {
-        const n = this.parts.value;
-        return !n.area && !n.exchange && !n.subscriber;
-    }
-    onCLickOnMenu(e) {
-        if (this.multi || this.closeOnClick === false) {
-            e.stopPropagation();
-        }
-    }
-    propagateChange(_) {
-    }
-    // this is the initial value set to the component
-    writeValue(obj) {
-        this.value = obj;
-    }
-    // registers 'fn' that will be fired when changes are made
-    // this is how we emit the changes back to the form
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    onChange(e) {
-        let vals = e.source.selectedOptions.selected.map(o => o.value);
-        vals = this.selectableOptions.filter(o => vals.includes(o[this.itemValue]));
-        const selectableIds = this.selectableOptions.map(s => s[this.itemValue]);
-        if (this.multi) {
-            // if search is active, probably some of the already selected values are not included in the selectable options,
-            // so we have to push them in the selected values of the list;
-            for (const v of this.value) {
-                if (!selectableIds.includes(v[this.itemValue])) {
-                    vals = [v, ...vals];
-                }
-            }
-        }
-        vals.sort((a, b) => {
-            return typeof a[this.itemValue] === 'string' ?
-                a[this.itemValue].localeCompare(b[this.itemValue]) : a[this.itemValue] - b[this.itemValue];
-        });
-        this.value = [...vals];
-        this.form.get('selectionValue').setValue(this.value.map(v => v[this.itemValue]));
-        this.valueChange.emit(this.value);
-        this.propagateChange(this.value);
-        this.changeDetectorRef.markForCheck();
-    }
-    onFocusIn(event) {
-        if (!this.focused) {
-            this.focused = true;
-            this.stateChanges.next();
-        }
-    }
-    onFocusOut(event) {
-        if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
-            this.touched = true;
-            this.focused = false;
-            this.onTouched();
-            this.stateChanges.next();
-        }
-    }
-    onMenuOpen() {
-        this.isOpen = true;
-        this.jvxMultiselectOpen.emit();
-    }
-    onMenuClose() {
-        this.isOpen = false;
-        this.jvxMultiselectClose.emit();
-    }
-    deselect(val) {
-        this.value = [...this.value.filter(v => v[this.itemValue] !== val[this.itemValue])];
-        // this.value.splice(this.value.findIndex(v => v[this.itemValue] === val[this.itemValue]), 1);
-        this.form.get('selectionValue').setValue(this.value.map(m => m.value));
-        this.valueChange.emit(this.value);
-        this.propagateChange(this.value);
-        this.changeDetectorRef.markForCheck();
-    }
-    setSelectionContainerSize() {
-        timer(0).subscribe(() => {
-            if (this.selectionContainer) {
-                this.listContainerSize.height = this.selectionContainer.nativeElement.offsetHeight > 260 ? '260px' : 'auto';
-                this.listContainerSize.minHeight = this.selectionContainer.nativeElement.offsetHeight <= 260 ?
-                    this.selectionContainer.nativeElement.offsetHeight + 'px' : '260px';
-                this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
-            }
-            this.changeDetectorRef.detectChanges();
-        });
-    }
-    clickOnMenuTrigger(e) {
-        if (!this.disabled) {
-            this.showList = false;
-            this.shouldLoadMore = true;
-            timer(0).subscribe(() => {
-                this.showList = true;
-                if (this.url.length > 0) {
-                    e.preventDefault();
-                    this.selectableOptions.length = 0;
-                    this.updateOrderedOptions(this.selectableOptions);
-                    this.getList().subscribe(noop);
-                    this.setSelectionContainerSize();
-                }
-                else {
-                    this.trigger.openMenu();
-                    this.setSelectionContainerSize();
-                }
-            });
-        }
-    }
-    getList() {
-        this.isLoading = true;
-        return this.service.getList({
-            url: this.url,
-            requestType: this.requestType,
-            data: {},
-            currentPage: ++this.currentPage,
-            ignorePagination: this.ignorePagination,
-            requestHeaders: this.requestHeaders,
-            search: this.searchValue,
-            searchProp: this.searchProp,
-            pageSize: this.intPageSize
-        }).pipe(map((val) => {
-            return val ?? [];
-        }), switchMap((val) => this.multiMapper.mapOptions(val)), switchMap((val) => {
-            let result = [];
-            if (!val) {
-                result = [];
-            }
-            else if (this.listProp.length > 0) {
-                result = [...(val[this.listProp] ?? [])];
-            }
-            else {
-                result = [...val];
-            }
-            if (result.length === 0) {
-                this.shouldLoadMore = false;
-                this.isLoading = false;
-                return of([]);
-            }
-            else {
-                const newOptions = [];
-                for (const opt of result) {
-                    const newOption = this.mapper.mapOption(opt);
-                    newOptions.push(newOption);
-                }
-                return forkJoin(newOptions);
-            }
-        }), switchMap((finVal) => {
-            this.selectableOptions.push(...finVal);
-            return this.updateOrderedOptions(this.selectableOptions);
-        }), map((val) => {
-            this.isLoading = false;
-            this.trigger.openMenu();
-            this.setSelectionContainerSize();
-            return val;
-        }), tap(() => {
-            this.changeDetectorRef.markForCheck();
-        }));
-    }
-    onScrolled(e) {
-        if (e.target.scrollTop + 220 + ((this.searchInput ? 0 : 1) * 40) === this.selectionContainer.nativeElement.offsetHeight
-            && !this.isLoading) {
-            this.scrollEnd.emit();
-            if (this.url && this.url.length > 0 && !this.ignorePagination && this.shouldLoadMore) {
-                this.getList().subscribe(noop);
-            }
-        }
-    }
-    onMenuOpened() {
-        this.jvxMultiselectOpened.emit();
-    }
-    onMenuClosed() {
-        if ((!this.url || this.url.length === 0) && this.searchMode === 'client') {
-            this.searchValueSubject.next('');
-        }
-        else {
-            this.searchValue = '';
-            this.currentPage = 0;
-        }
-        this.jvxMultiselectClosed.emit();
-        this.changeDetectorRef.markForCheck();
-    }
-    onSearchInputClick(e) {
-        e.stopPropagation();
-    }
-    onSearchValueChange(e) {
-        this.searchValueSubject.next(e.target.value);
-    }
-    clear(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        this.value = [];
-        this.form.get('selectionValue').setValue(this.value.map(v => v[this.itemValue]));
-        this.propagateChange(this.value);
-        this.valueChange.emit(this.value);
-        this.changeDetectorRef.markForCheck();
-    }
-    setDescribedByIds(ids) {
-        const controlElement = this.elementRef.nativeElement
-            .querySelector('.ng-jvx-multiselect');
-        controlElement.setAttribute('aria-describedby', ids.join(' '));
-    }
-    onContainerClick(event) {
-        // if ((event.target as Element).tagName.toLowerCase() !== 'input') {
-        //   this.elementRef.nativeElement.querySelector('input').focus();
-        // }
-    }
-    get stateChange$() {
-        return this.stateChanges.asObservable();
-    }
-    updateOrderedOptions(options) {
-        let obs = of(options);
-        if (this.groupBy) {
-            this.orderedOptions.length = 0;
-            const obsArr = [];
-            for (const option of options) {
-                if (typeof this.groupBy !== 'string') {
-                    obsArr.push(this.groupBy.mapGroup(option));
-                }
-                else {
-                    obsArr.push(of({ group: option[this.groupBy], option }));
-                }
-            }
-            obs = forkJoin(obsArr).pipe(map((res) => {
-                const groups = [...new Set(res.map(item => item.group))];
-                for (const group of groups) {
-                    this.orderedOptions.push({
-                        group,
-                        options: res.filter(r => r.group === group).map(o => o.option)
-                    });
-                }
-                return this.orderedOptions;
-            }));
-        }
-        return obs;
-    }
-    closeMenu() {
-        this.trigger.closeMenu();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: NgJvxMultiselectService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxMultiselectComponent, selector: "ng-jvx-multiselect", inputs: { options: "options", multi: "multi", url: "url", requestType: "requestType", itemValue: "itemValue", itemText: "itemText", ignorePagination: "ignorePagination", clearable: "clearable", closeOnClick: "closeOnClick", hasErrors: "hasErrors", searchMode: "searchMode", searchInput: "searchInput", searchLabel: "searchLabel", listProp: "listProp", totalRowsProp: "totalRowsProp", panelClass: "panelClass", searchProp: "searchProp", closeButton: "closeButton", mapper: "mapper", multiMapper: "multiMapper", searchMapper: "searchMapper", groupBy: "groupBy", value: "value", requestHeaders: "requestHeaders", required: "required", disabled: "disabled", pageSize: "pageSize" }, outputs: { valueChange: "valueChange", jvxMultiselectOpen: "jvxMultiselectOpen", jvxMultiselectOpened: "jvxMultiselectOpened", jvxMultiselectClose: "jvxMultiselectClose", jvxMultiselectClosed: "jvxMultiselectClosed", scrollEnd: "scrollEnd" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat" } }, providers: [
-            {
-                provide: MatFormFieldControl,
-                useExisting: forwardRef(() => NgJvxMultiselectComponent),
-                multi: true,
-            }
-        ], 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, static: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div\r\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\r\n                                  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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n\r\n    <div class=\"ng-jvx-multiselect__placeholder\" *ngIf=\"value.length === 0\">\r\n      <ng-content select=\"[placeholder]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{option[itemText]}}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{value[itemText]}}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{val[itemText]}}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{min-width:100%;max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"], dependencies: [{ kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.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: i9.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: MatFormFieldControl,
-                            useExisting: forwardRef(() => NgJvxMultiselectComponent),
-                            multi: true,
-                        }
-                    ], template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div\r\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\r\n                                  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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n\r\n    <div class=\"ng-jvx-multiselect__placeholder\" *ngIf=\"value.length === 0\">\r\n      <ng-content select=\"[placeholder]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{option[itemText]}}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{value[itemText]}}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{val[itemText]}}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{min-width:100%;max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1$1.UntypedFormBuilder }]; }, propDecorators: { id: [{
-                type: HostBinding
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floating']
-            }], jvxMultiselect: [{
-                type: ViewChild,
-                args: ['jvxMultiselect', { static: true }]
-            }], selectionContainer: [{
-                type: ViewChild,
-                args: ['selectionContainer', { static: false }]
-            }], selection: [{
-                type: ViewChild,
-                args: ['selection', { static: true }]
-            }], trigger: [{
-                type: ViewChild,
-                args: ['trigger', { static: true }]
-            }], scrollbar: [{
-                type: ViewChild,
-                args: ['scrollbar', { static: false }]
-            }], multiContainer: [{
-                type: ViewChild,
-                args: ['multiContainer', { static: false }]
-            }], optionComp: [{
-                type: ViewChildren,
-                args: [NgJvxOptionComponent]
-            }], optionsTemplate: [{
-                type: ContentChild,
-                args: [NgJvxOptionsTemplateDirective]
-            }], selectionTemplate: [{
-                type: ContentChild,
-                args: [NgJvxSelectionTemplateDirective]
-            }], groupHeaderTemplate: [{
-                type: ContentChild,
-                args: [NgJvxGroupHeaderDirective]
-            }], options: [{
-                type: Input
-            }], multi: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], requestType: [{
-                type: Input
-            }], itemValue: [{
-                type: Input
-            }], itemText: [{
-                type: Input
-            }], ignorePagination: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }], closeOnClick: [{
-                type: Input
-            }], hasErrors: [{
-                type: Input
-            }], searchMode: [{
-                type: Input
-            }], searchInput: [{
-                type: Input
-            }], searchLabel: [{
-                type: Input
-            }], listProp: [{
-                type: Input
-            }], totalRowsProp: [{
-                type: Input
-            }], panelClass: [{
-                type: Input
-            }], searchProp: [{
-                type: Input
-            }], closeButton: [{
-                type: Input
-            }], mapper: [{
-                type: Input
-            }], multiMapper: [{
-                type: Input
-            }], searchMapper: [{
-                type: Input
-            }], groupBy: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], requestHeaders: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], jvxMultiselectOpen: [{
-                type: Output
-            }], jvxMultiselectOpened: [{
-                type: Output
-            }], jvxMultiselectClose: [{
-                type: Output
-            }], jvxMultiselectClosed: [{
-                type: Output
-            }], scrollEnd: [{
-                type: Output
+class NgJvxMultiselectComponent {
+    static { this.nextId = 0; }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    set value(value) {
+        this.pValue = value ?? [];
+        if (value) {
+            this.form.get('selectionValue').setValue(this.pValue.map(v => v[this.itemValue]));
+        }
+        else {
+            this.form.get('selectionValue').setValue(value);
+        }
+        this.stateChanges.next();
+    }
+    get value() {
+        return this.pValue;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(req) {
+        this._required = coerceBooleanProperty(req);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.parts.disable() : this.parts.enable();
+        this.stateChanges.next();
+    }
+    get pageSize() {
+        return this.intPageSize;
+    }
+    set pageSize(val) {
+        if (val < 15) {
+            this.intPageSize = 15;
+        }
+        else {
+            this.intPageSize = val;
+        }
+    }
+    get errorState() {
+        if (this.ngControl != null) {
+            return this.ngControl.invalid && this.ngControl.touched;
+        }
+        else {
+            return false;
+        }
+    }
+    constructor(formBuilder, service, elementRef, changeDetectorRef, ngControl, fb) {
+        this.formBuilder = formBuilder;
+        this.service = service;
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.ngControl = ngControl;
+        this.id = `jvx-multiselect-${NgJvxMultiselectComponent.nextId++}`;
+        this.optionsTemplate = null;
+        this.selectionTemplate = null;
+        this.groupHeaderTemplate = null;
+        // @ContentChild(NgJvxOptionComponent) optionComp: NgJvxOptionComponent;
+        // @ContentChild(TemplateRef) optionsTemplate: TemplateRef<any> | null = null;
+        this.options = [];
+        this.multi = false;
+        this.url = '';
+        this.requestType = 'get';
+        this.itemValue = 'value';
+        this.itemText = 'text';
+        this.ignorePagination = false;
+        this.clearable = false;
+        this.closeOnClick = true;
+        this.hasErrors = false;
+        this.searchMode = null;
+        this.searchInput = false;
+        this.searchLabel = 'search';
+        this.listProp = '';
+        this.totalRowsProp = '';
+        this.panelClass = '';
+        this.searchProp = 'search';
+        this.closeButton = false;
+        this.mapper = {
+            mapOption(source) {
+                return of(source);
+            }
+        };
+        this.multiMapper = {
+            mapOptions(source) {
+                return of(source);
+            }
+        };
+        this.searchMapper = {
+            mapSearch: (source, options) => {
+                return of(options.filter(o => o[this.itemText].toString().toLowerCase().includes(source.toString().toLowerCase())));
+            }
+        };
+        this.requestHeaders = new HttpHeaders();
+        // tslint:disable-next-line:variable-name
+        this._required = false;
+        // tslint:disable-next-line:variable-name
+        this._disabled = false;
+        this.valueChange = new EventEmitter();
+        this.jvxMultiselectOpen = new EventEmitter();
+        this.jvxMultiselectOpened = new EventEmitter();
+        this.jvxMultiselectClose = new EventEmitter();
+        this.jvxMultiselectClosed = new EventEmitter();
+        this.scrollEnd = new EventEmitter();
+        this.controlType = 'ng-jvx-multiselect';
+        this.document = document;
+        this.window = window;
+        this.isOpen = false;
+        this.isLoading = false;
+        this.showList = true;
+        this.asyncOptions = [];
+        this.selectableOptions = [];
+        this.orderedOptions = [];
+        this.searchValue = '';
+        this.yPosition = 'above';
+        this.stateChanges = new Subject();
+        this.currentPage = 0;
+        this.listContainerSize = { height: 'auto', minHeight: '0', width: '100%' };
+        this.touched = false;
+        this.focused = false;
+        this.multiContainerWidth = 100;
+        this.searchValueSubject = new Subject();
+        this.searchValue$ = this.searchValueSubject.asObservable();
+        this.pValue = [];
+        this.shouldLoadMore = true;
+        this.unsubscribe = new Subject();
+        this.unsubscribe$ = this.unsubscribe.asObservable();
+        this.intPageSize = 15;
+        this.onTouched = () => {
+        };
+        if (this.ngControl != null) {
+            // Setting the value accessor directly (instead of using
+            // the providers) to avoid running into a circular import.
+            this.ngControl.valueAccessor = this;
+        }
+        this.parts = fb.group({
+            area: '',
+            exchange: '',
+            subscriber: '',
+        });
+        this.form = this.formBuilder.group({
+            selectionValue: new UntypedFormControl(this.selectionValue)
+        });
+    }
+    ngOnInit() {
+        this.stateChange$.pipe(takeUntil(this.unsubscribe)).subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        });
+        // this.setSelectableOptions(this.options).subscribe(noop);
+        this.selectableOptions = [...this.options];
+        this.updateOrderedOptions(this.selectableOptions).subscribe(noop);
+        fromEvent(window, 'resize').pipe(takeUntil(this.unsubscribe), debounceTime(100), map(() => {
+            return this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
+        }), switchMap(() => timer(100)), tap(() => {
+            this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
+            this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
+            this.changeDetectorRef.markForCheck();
+        })).subscribe(noop);
+        this.searchValue$.pipe(takeUntil(this.unsubscribe), debounceTime(300), distinctUntilChanged((prev, curr) => {
+            return curr === this.searchValue;
+        }), switchMap((val) => {
+            this.searchValue = val;
+            this.currentPage = 0;
+            if (this.searchMode === 'client') {
+                return this.clientSearch();
+            }
+            else if (this.url && this.url.length > 0) {
+                return this.serverSearch();
+            }
+        })).subscribe((val) => {
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    clientSearch() {
+        let obs;
+        if (this.url && this.url.length > 0) {
+            this.selectableOptions = [];
+            this.updateOrderedOptions(this.selectableOptions).subscribe(noop);
+            this.shouldLoadMore = true;
+            obs = this.getList().pipe(map(() => {
+                return this.selectableOptions;
+            }));
+        }
+        else {
+            obs = of(this.options);
+        }
+        return obs.pipe(switchMap((val) => this.searchMapper.mapSearch(this.searchValue, val)), switchMap((res) => {
+            // return this.setSelectableOptions(res);
+            this.selectableOptions = [];
+            this.selectableOptions.push(...res);
+            return this.updateOrderedOptions(this.selectableOptions);
+        }));
+    }
+    setSelectableOptions(options) {
+        this.selectableOptions = [];
+        const obs = options.reduce((acc, curr) => {
+            acc.push(this.mapper.mapOption(curr));
+            return acc;
+        }, []);
+        // this.mapper.mapOption(option);
+        return forkJoin([...obs]).pipe(switchMap((val) => {
+            this.selectableOptions.push(...val);
+            return this.updateOrderedOptions(this.selectableOptions);
+        }));
+    }
+    serverSearch() {
+        this.shouldLoadMore = true;
+        this.selectableOptions = [];
+        this.shouldLoadMore = true;
+        return this.getList();
+    }
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.stateChanges.complete();
+    }
+    ngAfterViewInit() {
+        timer(0).subscribe(() => {
+            this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
+        });
+        if (this.scrollbar) {
+            this.scrollbar.scrolled.pipe(takeUntil(this.unsubscribe$)).subscribe((e) => {
+                this.onScrolled(e);
+            });
+        }
+        timer(0).pipe(tap(() => {
+            this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
+            this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
+            this.changeDetectorRef.markForCheck();
+        })).subscribe(noop);
+    }
+    ngOnChanges(changes) {
+        if (changes.options) {
+            // this.setSelectableOptions(this.options).subscribe(noop);
+            this.selectableOptions = [...this.options];
+        }
+    }
+    get selectionValue() {
+        return this.value.map((v) => {
+            return v[this.itemValue];
+        });
+    }
+    get empty() {
+        const n = this.parts.value;
+        return !n.area && !n.exchange && !n.subscriber;
+    }
+    onCLickOnMenu(e) {
+        if (this.multi || this.closeOnClick === false) {
+            e.stopPropagation();
+        }
+    }
+    propagateChange(_) {
+    }
+    // this is the initial value set to the component
+    writeValue(obj) {
+        this.value = obj;
+    }
+    // registers 'fn' that will be fired when changes are made
+    // this is how we emit the changes back to the form
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onChange(e) {
+        let vals = e.source.selectedOptions.selected.map(o => o.value);
+        vals = this.selectableOptions.filter(o => vals.includes(o[this.itemValue]));
+        const selectableIds = this.selectableOptions.map(s => s[this.itemValue]);
+        if (this.multi) {
+            // if search is active, probably some of the already selected values are not included in the selectable options,
+            // so we have to push them in the selected values of the list;
+            for (const v of this.value) {
+                if (!selectableIds.includes(v[this.itemValue])) {
+                    vals = [v, ...vals];
+                }
+            }
+        }
+        vals.sort((a, b) => {
+            return typeof a[this.itemValue] === 'string' ?
+                a[this.itemValue].localeCompare(b[this.itemValue]) : a[this.itemValue] - b[this.itemValue];
+        });
+        this.value = [...vals];
+        this.form.get('selectionValue').setValue(this.value.map(v => v[this.itemValue]));
+        this.valueChange.emit(this.value);
+        this.propagateChange(this.value);
+        this.changeDetectorRef.markForCheck();
+    }
+    onFocusIn(event) {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    onFocusOut(event) {
+        if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
+            this.touched = true;
+            this.focused = false;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    onMenuOpen() {
+        this.isOpen = true;
+        this.jvxMultiselectOpen.emit();
+    }
+    onMenuClose() {
+        this.isOpen = false;
+        this.jvxMultiselectClose.emit();
+    }
+    deselect(val) {
+        this.value = [...this.value.filter(v => v[this.itemValue] !== val[this.itemValue])];
+        // this.value.splice(this.value.findIndex(v => v[this.itemValue] === val[this.itemValue]), 1);
+        this.form.get('selectionValue').setValue(this.value.map(m => m.value));
+        this.valueChange.emit(this.value);
+        this.propagateChange(this.value);
+        this.changeDetectorRef.markForCheck();
+    }
+    setSelectionContainerSize() {
+        timer(0).subscribe(() => {
+            if (this.selectionContainer) {
+                this.listContainerSize.height = this.selectionContainer.nativeElement.offsetHeight > 260 ? '260px' : 'auto';
+                this.listContainerSize.minHeight = this.selectionContainer.nativeElement.offsetHeight <= 260 ?
+                    this.selectionContainer.nativeElement.offsetHeight + 'px' : '260px';
+                this.listContainerSize.width = this.jvxMultiselect.nativeElement.offsetWidth + 'px';
+            }
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    clickOnMenuTrigger(e) {
+        if (!this.disabled) {
+            this.showList = false;
+            this.shouldLoadMore = true;
+            timer(0).subscribe(() => {
+                this.showList = true;
+                if (this.url.length > 0) {
+                    e.preventDefault();
+                    this.selectableOptions.length = 0;
+                    this.updateOrderedOptions(this.selectableOptions);
+                    this.getList().subscribe(noop);
+                    this.setSelectionContainerSize();
+                }
+                else {
+                    this.trigger.openMenu();
+                    this.setSelectionContainerSize();
+                }
+            });
+        }
+    }
+    getList() {
+        this.isLoading = true;
+        return this.service.getList({
+            url: this.url,
+            requestType: this.requestType,
+            data: {},
+            currentPage: ++this.currentPage,
+            ignorePagination: this.ignorePagination,
+            requestHeaders: this.requestHeaders,
+            search: this.searchValue,
+            searchProp: this.searchProp,
+            pageSize: this.intPageSize
+        }).pipe(map((val) => {
+            return val ?? [];
+        }), switchMap((val) => this.multiMapper.mapOptions(val)), switchMap((val) => {
+            let result = [];
+            if (!val) {
+                result = [];
+            }
+            else if (this.listProp.length > 0) {
+                result = [...(val[this.listProp] ?? [])];
+            }
+            else {
+                result = [...val];
+            }
+            if (result.length === 0) {
+                this.shouldLoadMore = false;
+                this.isLoading = false;
+                return of([]);
+            }
+            else {
+                const newOptions = [];
+                for (const opt of result) {
+                    const newOption = this.mapper.mapOption(opt);
+                    newOptions.push(newOption);
+                }
+                return forkJoin(newOptions);
+            }
+        }), switchMap((finVal) => {
+            this.selectableOptions.push(...finVal);
+            return this.updateOrderedOptions(this.selectableOptions);
+        }), map((val) => {
+            this.isLoading = false;
+            this.trigger.openMenu();
+            this.setSelectionContainerSize();
+            return val;
+        }), tap(() => {
+            this.changeDetectorRef.markForCheck();
+        }));
+    }
+    onScrolled(e) {
+        if (e.target.scrollTop + 220 + ((this.searchInput ? 0 : 1) * 40) === this.selectionContainer.nativeElement.offsetHeight
+            && !this.isLoading) {
+            this.scrollEnd.emit();
+            if (this.url && this.url.length > 0 && !this.ignorePagination && this.shouldLoadMore) {
+                this.getList().subscribe(noop);
+            }
+        }
+    }
+    onMenuOpened() {
+        this.jvxMultiselectOpened.emit();
+    }
+    onMenuClosed() {
+        if ((!this.url || this.url.length === 0) && this.searchMode === 'client') {
+            this.searchValueSubject.next('');
+        }
+        else {
+            this.searchValue = '';
+            this.currentPage = 0;
+        }
+        this.jvxMultiselectClosed.emit();
+        this.changeDetectorRef.markForCheck();
+    }
+    onSearchInputClick(e) {
+        e.stopPropagation();
+    }
+    onSearchValueChange(e) {
+        this.searchValueSubject.next(e.target.value);
+    }
+    clear(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.value = [];
+        this.form.get('selectionValue').setValue(this.value.map(v => v[this.itemValue]));
+        this.propagateChange(this.value);
+        this.valueChange.emit(this.value);
+        this.changeDetectorRef.markForCheck();
+    }
+    setDescribedByIds(ids) {
+        const controlElement = this.elementRef.nativeElement
+            .querySelector('.ng-jvx-multiselect');
+        controlElement.setAttribute('aria-describedby', ids.join(' '));
+    }
+    onContainerClick(event) {
+        // if ((event.target as Element).tagName.toLowerCase() !== 'input') {
+        //   this.elementRef.nativeElement.querySelector('input').focus();
+        // }
+    }
+    get stateChange$() {
+        return this.stateChanges.asObservable();
+    }
+    updateOrderedOptions(options) {
+        let obs = of(options);
+        if (this.groupBy) {
+            this.orderedOptions.length = 0;
+            const obsArr = [];
+            for (const option of options) {
+                if (typeof this.groupBy !== 'string') {
+                    obsArr.push(this.groupBy.mapGroup(option));
+                }
+                else {
+                    obsArr.push(of({ group: option[this.groupBy], option }));
+                }
+            }
+            obs = forkJoin(obsArr).pipe(map((res) => {
+                const groups = [...new Set(res.map(item => item.group))];
+                for (const group of groups) {
+                    this.orderedOptions.push({
+                        group,
+                        options: res.filter(r => r.group === group).map(o => o.option)
+                    });
+                }
+                return this.orderedOptions;
+            }));
+        }
+        return obs;
+    }
+    closeMenu() {
+        this.trigger.closeMenu();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: NgJvxMultiselectService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxMultiselectComponent, selector: "ng-jvx-multiselect", inputs: { options: "options", multi: "multi", url: "url", requestType: "requestType", itemValue: "itemValue", itemText: "itemText", ignorePagination: "ignorePagination", clearable: "clearable", closeOnClick: "closeOnClick", hasErrors: "hasErrors", searchMode: "searchMode", searchInput: "searchInput", searchLabel: "searchLabel", listProp: "listProp", totalRowsProp: "totalRowsProp", panelClass: "panelClass", searchProp: "searchProp", closeButton: "closeButton", mapper: "mapper", multiMapper: "multiMapper", searchMapper: "searchMapper", groupBy: "groupBy", value: "value", requestHeaders: "requestHeaders", required: "required", disabled: "disabled", pageSize: "pageSize" }, outputs: { valueChange: "valueChange", jvxMultiselectOpen: "jvxMultiselectOpen", jvxMultiselectOpened: "jvxMultiselectOpened", jvxMultiselectClose: "jvxMultiselectClose", jvxMultiselectClosed: "jvxMultiselectClosed", scrollEnd: "scrollEnd" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat" } }, providers: [
+            {
+                provide: MatFormFieldControl,
+                useExisting: forwardRef(() => NgJvxMultiselectComponent),
+                multi: true,
+            }
+        ], 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, static: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div\r\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\r\n                                  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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n\r\n    <div class=\"ng-jvx-multiselect__placeholder\" *ngIf=\"value.length === 0\">\r\n      <ng-content select=\"[placeholder]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{option[itemText]}}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{value[itemText]}}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{val[itemText]}}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{min-width:100%;max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"], dependencies: [{ kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.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: i9.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: forwardRef(() => NgJvxMultiselectComponent),
+                            multi: true,
+                        }
+                    ], template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div\r\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\r\n                                  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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n\r\n    <div class=\"ng-jvx-multiselect__placeholder\" *ngIf=\"value.length === 0\">\r\n      <ng-content select=\"[placeholder]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{option[itemText]}}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{value[itemText]}}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{val[itemText]}}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{min-width:100%;max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$1.UntypedFormBuilder }], propDecorators: { id: [{
+                type: HostBinding
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
+            }], jvxMultiselect: [{
+                type: ViewChild,
+                args: ['jvxMultiselect', { static: true }]
+            }], selectionContainer: [{
+                type: ViewChild,
+                args: ['selectionContainer', { static: false }]
+            }], selection: [{
+                type: ViewChild,
+                args: ['selection', { static: true }]
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { static: true }]
+            }], scrollbar: [{
+                type: ViewChild,
+                args: ['scrollbar', { static: false }]
+            }], multiContainer: [{
+                type: ViewChild,
+                args: ['multiContainer', { static: false }]
+            }], optionComp: [{
+                type: ViewChildren,
+                args: [NgJvxOptionComponent]
+            }], optionsTemplate: [{
+                type: ContentChild,
+                args: [NgJvxOptionsTemplateDirective]
+            }], selectionTemplate: [{
+                type: ContentChild,
+                args: [NgJvxSelectionTemplateDirective]
+            }], groupHeaderTemplate: [{
+                type: ContentChild,
+                args: [NgJvxGroupHeaderDirective]
+            }], options: [{
+                type: Input
+            }], multi: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], requestType: [{
+                type: Input
+            }], itemValue: [{
+                type: Input
+            }], itemText: [{
+                type: Input
+            }], ignorePagination: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], closeOnClick: [{
+                type: Input
+            }], hasErrors: [{
+                type: Input
+            }], searchMode: [{
+                type: Input
+            }], searchInput: [{
+                type: Input
+            }], searchLabel: [{
+                type: Input
+            }], listProp: [{
+                type: Input
+            }], totalRowsProp: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], searchProp: [{
+                type: Input
+            }], closeButton: [{
+                type: Input
+            }], mapper: [{
+                type: Input
+            }], multiMapper: [{
+                type: Input
+            }], searchMapper: [{
+                type: Input
+            }], groupBy: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], requestHeaders: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], jvxMultiselectOpen: [{
+                type: Output
+            }], jvxMultiselectOpened: [{
+                type: Output
+            }], jvxMultiselectClose: [{
+                type: Output
+            }], jvxMultiselectClosed: [{
+                type: Output
+            }], scrollEnd: [{
+                type: Output
             }] } });
 
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/** @docs-public MatMenu */
-class NgJvxPanelComponent extends _MatMenuBase {
-    constructor(elementRef, ngZone, defaultOptions) {
-        super(elementRef, ngZone, defaultOptions);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MAT_MENU_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgJvxPanelComponent, selector: "ngJvxPanel", host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, providers: [
-            { provide: MAT_MENU_PANEL, useExisting: MatMenu },
-        ], exportAs: ["ngJvxPanel"], usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n  <div\r\n    class=\"mat-menu-panel\"\r\n    [id]=\"panelId\"\r\n    [ngClass]=\"_classList\"\r\n    (keydown)=\"_handleKeydown($event)\"\r\n    (click)=\"closed.emit('click')\"\r\n    [@transformMenu]=\"_panelAnimationState\"\r\n    (@transformMenu.start)=\"_onAnimationStart($event)\"\r\n    (@transformMenu.done)=\"_onAnimationDone($event)\"\r\n    tabindex=\"-1\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\r\n    [attr.aria-describedby]=\"ariaDescribedby || null\">\r\n    <div class=\"mat-menu-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
-            matMenuAnimations.transformMenu,
-            matMenuAnimations.fadeInItems
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngJvxPanel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'ngJvxPanel', host: {
-                        '[attr.aria-label]': 'null',
-                        '[attr.aria-labelledby]': 'null',
-                        '[attr.aria-describedby]': 'null',
-                    }, animations: [
-                        matMenuAnimations.transformMenu,
-                        matMenuAnimations.fadeInItems
-                    ], providers: [
-                        { provide: MAT_MENU_PANEL, useExisting: MatMenu },
-                    ], template: "<ng-template>\r\n  <div\r\n    class=\"mat-menu-panel\"\r\n    [id]=\"panelId\"\r\n    [ngClass]=\"_classList\"\r\n    (keydown)=\"_handleKeydown($event)\"\r\n    (click)=\"closed.emit('click')\"\r\n    [@transformMenu]=\"_panelAnimationState\"\r\n    (@transformMenu.start)=\"_onAnimationStart($event)\"\r\n    (@transformMenu.done)=\"_onAnimationDone($event)\"\r\n    tabindex=\"-1\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\r\n    [attr.aria-describedby]=\"ariaDescribedby || null\">\r\n    <div class=\"mat-menu-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_MENU_DEFAULT_OPTIONS]
-                }] }]; } });
-
-class NgJvxMultiselectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectModule, declarations: [NgJvxMultiselectComponent,
-            NgJvxOptionComponent,
-            NgJvxOptionsTemplateDirective,
-            NgJvxPanelComponent,
-            NgJvxSelectionTemplateDirective,
-            NgJvxDisabledOptionDirective,
-            NgJvxGroupHeaderDirective,
-            NgJvxFocusDirective], imports: [MatButtonModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatMenuModule,
-            CommonModule,
-            MatIconModule,
-            MatListModule,
-            MatChipsModule,
-            ReactiveFormsModule,
-            NgScrollbarModule,
-            SmoothScrollModule,
-            FormsModule], exports: [NgJvxMultiselectComponent,
-            NgJvxOptionComponent,
-            NgJvxOptionsTemplateDirective,
-            NgJvxSelectionTemplateDirective,
-            NgJvxDisabledOptionDirective,
-            NgJvxGroupHeaderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectModule, imports: [MatButtonModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatMenuModule,
-            CommonModule,
-            MatIconModule,
-            MatListModule,
-            MatChipsModule,
-            ReactiveFormsModule,
-            NgScrollbarModule,
-            SmoothScrollModule,
-            FormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        NgJvxMultiselectComponent,
-                        NgJvxOptionComponent,
-                        NgJvxOptionsTemplateDirective,
-                        NgJvxPanelComponent,
-                        NgJvxSelectionTemplateDirective,
-                        NgJvxDisabledOptionDirective,
-                        NgJvxGroupHeaderDirective,
-                        NgJvxFocusDirective
-                    ],
-                    imports: [
-                        MatButtonModule,
-                        MatOptionModule,
-                        MatSelectModule,
-                        MatMenuModule,
-                        CommonModule,
-                        MatIconModule,
-                        MatListModule,
-                        MatChipsModule,
-                        ReactiveFormsModule,
-                        NgScrollbarModule,
-                        SmoothScrollModule,
-                        FormsModule
-                    ],
-                    exports: [NgJvxMultiselectComponent,
-                        NgJvxOptionComponent,
-                        NgJvxOptionsTemplateDirective,
-                        NgJvxSelectionTemplateDirective,
-                        NgJvxDisabledOptionDirective,
-                        NgJvxGroupHeaderDirective]
-                }]
+class NgJvxMultiselectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, declarations: [NgJvxMultiselectComponent,
+            NgJvxOptionComponent,
+            NgJvxOptionsTemplateDirective,
+            NgJvxSelectionTemplateDirective,
+            NgJvxDisabledOptionDirective,
+            NgJvxGroupHeaderDirective,
+            NgJvxFocusDirective], imports: [MatButtonModule,
+            MatOptionModule,
+            MatSelectModule,
+            MatMenuModule,
+            CommonModule,
+            MatIconModule,
+            MatListModule,
+            MatChipsModule,
+            ReactiveFormsModule,
+            NgScrollbarModule,
+            SmoothScroll,
+            FormsModule], exports: [NgJvxMultiselectComponent,
+            NgJvxOptionComponent,
+            NgJvxOptionsTemplateDirective,
+            NgJvxSelectionTemplateDirective,
+            NgJvxDisabledOptionDirective,
+            NgJvxGroupHeaderDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, imports: [MatButtonModule,
+            MatOptionModule,
+            MatSelectModule,
+            MatMenuModule,
+            CommonModule,
+            MatIconModule,
+            MatListModule,
+            MatChipsModule,
+            ReactiveFormsModule,
+            NgScrollbarModule,
+            FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NgJvxMultiselectComponent,
+                        NgJvxOptionComponent,
+                        NgJvxOptionsTemplateDirective,
+                        NgJvxSelectionTemplateDirective,
+                        NgJvxDisabledOptionDirective,
+                        NgJvxGroupHeaderDirective,
+                        NgJvxFocusDirective
+                    ],
+                    imports: [
+                        MatButtonModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatMenuModule,
+                        CommonModule,
+                        MatIconModule,
+                        MatListModule,
+                        MatChipsModule,
+                        ReactiveFormsModule,
+                        NgScrollbarModule,
+                        SmoothScroll,
+                        FormsModule
+                    ],
+                    exports: [NgJvxMultiselectComponent,
+                        NgJvxOptionComponent,
+                        NgJvxOptionsTemplateDirective,
+                        NgJvxSelectionTemplateDirective,
+                        NgJvxDisabledOptionDirective,
+                        NgJvxGroupHeaderDirective]
+                }]
         }] });
 
-/*
- * Public API Surface of ng-jvx-multiselect
+/*
+ * Public API Surface of ng-jvx-multiselect
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { JVXMULTISELECT, NgJvxDisabledOptionDirective, NgJvxGroupHeaderDirective, NgJvxMultiselectComponent, NgJvxMultiselectModule, NgJvxMultiselectService, NgJvxOptionComponent, NgJvxOptionsTemplateDirective, NgJvxSelectionTemplateDirective, setJvxCall };