ng-jvx-multiselect 1.3.3 → 16.0.1

package/fesm2015/ng-jvx-multiselect.mjs

@@ -1,31 +1,35 @@
 import * as i0 from '@angular/core';
-import { Component, ViewChild, Input, Directive, Injectable, EventEmitter, forwardRef, ChangeDetectionStrategy, Optional, Self, HostBinding, ViewChildren, ContentChild, Output, ViewEncapsulation, Inject, NgModule } from '@angular/core';
+import { Component, ViewChild, Input, Directive, Injectable, EventEmitter, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Optional, Self, HostBinding, ViewChildren, ContentChild, Output, Inject, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
+import * as i2 from '@angular/material/legacy-list';
+import { MatLegacyListModule } from '@angular/material/legacy-list';
 import { Subject, fromEvent, of, noop, timer, forkJoin } from 'rxjs';
 import { takeUntil, debounceTime, map, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import { HttpContextToken, HttpContext, HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i1$1 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatLegacyFormFieldControl } from '@angular/material/legacy-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 * as i3 from '@angular/material/legacy-menu';
+import { MAT_LEGACY_MENU_DEFAULT_OPTIONS, MAT_LEGACY_MENU_PANEL, matLegacyMenuAnimations, MatLegacyMenuModule } from '@angular/material/legacy-menu';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
+import * as i7 from '@angular/material/legacy-chips';
+import { MatLegacyChipsModule } from '@angular/material/legacy-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 { MatButtonModule } from '@angular/material/button';
-import { MatOptionModule } from '@angular/material/core';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyOptionModule } from '@angular/material/legacy-core';
+import { MatLegacySelectModule } from '@angular/material/legacy-select';
+import { _MatMenuBase, MatMenu } from '@angular/material/menu';
 
+const _c0$2 = ["listOption"];
+const _c1$1 = function (a1) { return { "ng-jvx-option": true, "mat-list-single-selected-option": a1 }; };
+const _c2$1 = ["*"];
 class NgJvxOptionComponent {
     constructor() {
         this.isSelected = false;
@@ -41,17 +45,38 @@ class NgJvxOptionComponent {
         this.listOption.selected = false;
     }
 }
-NgJvxOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgJvxOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
+NgJvxOptionComponent.ɵfac = function NgJvxOptionComponent_Factory(t) { return new (t || NgJvxOptionComponent)(); };
+NgJvxOptionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgJvxOptionComponent, selectors: [["ng-jvx-option"]], viewQuery: function NgJvxOptionComponent_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$2, 7);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listOption = _t.first);
+        }
+    }, inputs: { value: "value" }, ngContentSelectors: _c2$1, decls: 4, vars: 4, consts: [[3, "value", "ngClass"], ["listOption", ""], [1, "list-option-background"]], template: function NgJvxOptionComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "mat-list-option", 0, 1);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelement(3, "div", 2);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("value", ctx.value)("ngClass", i0.ɵɵpureFunction1(2, _c1$1, ctx.isSelected));
+        }
+    }, dependencies: [i4.NgClass, i2.MatLegacyListOption] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxOptionComponent, [{
             type: Component,
             args: [{ selector: 'ng-jvx-option', template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { listOption: [{
+        }], function () { return []; }, { listOption: [{
                 type: ViewChild,
                 args: ['listOption', { static: true }]
             }], value: [{
                 type: Input
-            }] } });
+            }] });
+})();
 
 class NgJvxOptionsTemplateDirective {
     constructor(el, template, vcRef) {
@@ -65,17 +90,19 @@ class NgJvxOptionsTemplateDirective {
         }
     }
 }
-NgJvxOptionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgJvxOptionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
+NgJvxOptionsTemplateDirective.ɵfac = function NgJvxOptionsTemplateDirective_Factory(t) { return new (t || NgJvxOptionsTemplateDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+NgJvxOptionsTemplateDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxOptionsTemplateDirective, selectors: [["", "ngJvxOptionsTemplate", ""]], inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" } });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxOptionsTemplateDirective, [{
             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: [{
+        }], function () { return [{ type: i0.ElementRef }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { ngJvxOptionsTemplateOf: [{
                 type: Input
-            }] } });
+            }] });
+})();
 
 class NgJvxSelectionTemplateDirective {
     constructor(template, vcRef) {
@@ -88,17 +115,19 @@ class NgJvxSelectionTemplateDirective {
         }
     }
 }
-NgJvxSelectionTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgJvxSelectionTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
+NgJvxSelectionTemplateDirective.ɵfac = function NgJvxSelectionTemplateDirective_Factory(t) { return new (t || NgJvxSelectionTemplateDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+NgJvxSelectionTemplateDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxSelectionTemplateDirective, selectors: [["", "ngJvxSelectionTemplate", ""]], inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" } });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxSelectionTemplateDirective, [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
                     selector: '[ngJvxSelectionTemplate]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngJvxSelectionTemplateOf: [{
+        }], function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { ngJvxSelectionTemplateOf: [{
                 type: Input
-            }] } });
+            }] });
+})();
 
 class NgJvxGroupHeaderDirective {
     constructor(template, vcRef) {
@@ -111,26 +140,21 @@ class NgJvxGroupHeaderDirective {
         }
     }
 }
-NgJvxGroupHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgJvxGroupHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
+NgJvxGroupHeaderDirective.ɵfac = function NgJvxGroupHeaderDirective_Factory(t) { return new (t || NgJvxGroupHeaderDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+NgJvxGroupHeaderDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxGroupHeaderDirective, selectors: [["", "ngJvxGroupHeader", ""]], inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" } });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxGroupHeaderDirective, [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
                     selector: '[ngJvxGroupHeader]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngJvxGroupHeaderOf: [{
+        }], function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { ngJvxGroupHeaderOf: [{
                 type: Input
-            }] } });
+            }] });
+})();
 
 class NgJvxDisabledOptionDirective {
-    constructor(el) {
-        this.el = el;
-        this.isDisabled = false;
-        this.originalOpacity = 1;
-        this.unsubs = new Subject();
-        this.originalOpacity = el.nativeElement.style.opacity;
-    }
     set ngJvxDisabledOption(source) {
         this.isDisabled = source;
         if (this.isDisabled) {
@@ -140,6 +164,13 @@ class NgJvxDisabledOptionDirective {
             this.el.nativeElement.style.opacity = this.originalOpacity;
         }
     }
+    constructor(el) {
+        this.el = el;
+        this.isDisabled = false;
+        this.originalOpacity = 1;
+        this.unsubs = new Subject();
+        this.originalOpacity = el.nativeElement.style.opacity;
+    }
     ngOnInit() {
         fromEvent(this.el.nativeElement.closest('.mat-list-item-content'), 'click', {
             capture: true,
@@ -156,17 +187,19 @@ class NgJvxDisabledOptionDirective {
         this.unsubs.complete();
     }
 }
-NgJvxDisabledOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgJvxDisabledOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
+NgJvxDisabledOptionDirective.ɵfac = function NgJvxDisabledOptionDirective_Factory(t) { return new (t || NgJvxDisabledOptionDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+NgJvxDisabledOptionDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxDisabledOptionDirective, selectors: [["", "ngJvxDisabledOption", ""]], inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" } });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxDisabledOptionDirective, [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
                     selector: '[ngJvxDisabledOption]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ngJvxDisabledOption: [{
+        }], function () { return [{ type: i0.ElementRef }]; }, { ngJvxDisabledOption: [{
                 type: Input
-            }] } });
+            }] });
+})();
 
 const JVXMULTISELECT = new HttpContextToken(() => false);
 const setJvxCall = () => new HttpContext().set(JVXMULTISELECT, true);
@@ -201,14 +234,16 @@ class NgJvxMultiselectService {
         }
     }
 }
-NgJvxMultiselectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-NgJvxMultiselectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
+NgJvxMultiselectService.ɵfac = function NgJvxMultiselectService_Factory(t) { return new (t || NgJvxMultiselectService)(i0.ɵɵinject(i1.HttpClient)); };
+NgJvxMultiselectService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: NgJvxMultiselectService, factory: NgJvxMultiselectService.ɵfac, providedIn: 'root' });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxMultiselectService, [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+        }], function () { return [{ type: i1.HttpClient }]; }, null);
+})();
 
 class NgJvxFocusDirective {
     constructor(el) {
@@ -225,19 +260,341 @@ class NgJvxFocusDirective {
         }
     }
 }
-NgJvxFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgJvxFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
+NgJvxFocusDirective.ɵfac = function NgJvxFocusDirective_Factory(t) { return new (t || NgJvxFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+NgJvxFocusDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NgJvxFocusDirective, selectors: [["", "ngJvxFocus", ""]], inputs: { ngJvxFocus: "ngJvxFocus" }, features: [i0.ɵɵNgOnChangesFeature] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxFocusDirective, [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
                     selector: '[ngJvxFocus]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ngJvxFocus: [{
+        }], function () { return [{ type: i0.ElementRef }]; }, { ngJvxFocus: [{
                 type: Input
-            }] } });
+            }] });
+})();
 
+const _c0$1 = ["jvxMultiselect"];
+const _c1 = ["selectionContainer"];
+const _c2 = ["selection"];
+const _c3 = ["trigger"];
+const _c4 = ["scrollbar"];
+const _c5 = ["multiContainer"];
+function NgJvxMultiselectComponent_div_6_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 30)(1, "mat-icon");
+        i0.ɵɵtext(2, "close");
+        i0.ɵɵelementEnd()();
+    }
+}
+const _c6 = function () { return { standalone: true }; };
+function NgJvxMultiselectComponent_div_9_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r25 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 31);
+        i0.ɵɵlistener("click", function NgJvxMultiselectComponent_div_9_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onSearchInputClick($event)); });
+        i0.ɵɵelementStart(1, "input", 32);
+        i0.ɵɵlistener("input", function NgJvxMultiselectComponent_div_9_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.onSearchValueChange($event)); });
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r5 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("placeholder", ctx_r5.searchLabel)("ngModel", ctx_r5.searchValue)("ngModelOptions", i0.ɵɵpureFunction0(4, _c6))("ngJvxFocus", ctx_r5.isOpen);
+    }
+}
+const _c7 = function (a0) { return { $implicit: a0 }; };
+function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_ng_jvx_option_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "ng-jvx-option", 38)(1, "span", 39);
+        i0.ɵɵelementContainer(2, 36);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const option_r33 = ctx.$implicit;
+        const ctx_r32 = i0.ɵɵnextContext(4);
+        const _r16 = i0.ɵɵreference(28);
+        i0.ɵɵproperty("value", option_r33[ctx_r32.itemValue]);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r32.optionsTemplate ? ctx_r32.optionsTemplate.template : _r16)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c7, option_r33));
+    }
+}
+function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementContainer(1, 36);
+        i0.ɵɵtemplate(2, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_ng_jvx_option_2_Template, 3, 5, "ng-jvx-option", 37);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const opt_r31 = ctx.$implicit;
+        const ctx_r30 = i0.ɵɵnextContext(3);
+        const _r22 = i0.ɵɵreference(34);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r30.groupHeaderTemplate ? ctx_r30.groupHeaderTemplate.template : _r22)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c7, opt_r31));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", opt_r31.options);
+    }
+}
+function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵtemplate(1, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_ng_container_1_Template, 3, 5, "ng-container", 35);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const ctx_r28 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r28.orderedOptions);
+    }
+}
+function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_ng_jvx_option_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "ng-jvx-option", 38);
+        i0.ɵɵelementContainer(1, 36);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const option_r35 = ctx.$implicit;
+        const ctx_r34 = i0.ɵɵnextContext(3);
+        const _r16 = i0.ɵɵreference(28);
+        i0.ɵɵproperty("value", option_r35[ctx_r34.itemValue]);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r34.optionsTemplate ? ctx_r34.optionsTemplate.template : _r16)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c7, option_r35));
+    }
+}
+function NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵtemplate(1, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_ng_jvx_option_1_Template, 2, 5, "ng-jvx-option", 37);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const ctx_r29 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r29.selectableOptions);
+    }
+}
+const _c8 = function (a1) { return { "padding": 0, "width": a1, "min-width.px": 112 }; };
+function NgJvxMultiselectComponent_mat_selection_list_15_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r37 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "mat-selection-list", 33, 34);
+        i0.ɵɵlistener("selectionChange", function NgJvxMultiselectComponent_mat_selection_list_15_Template_mat_selection_list_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.onChange($event)); });
+        i0.ɵɵprojection(2, 1);
+        i0.ɵɵtemplate(3, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_3_Template, 2, 1, "ng-container", 24);
+        i0.ɵɵtemplate(4, NgJvxMultiselectComponent_mat_selection_list_15_ng_container_4_Template, 2, 1, "ng-container", 24);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r8 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("multiple", ctx_r8.multi)("ngStyle", i0.ɵɵpureFunction1(4, _c8, ctx_r8.listContainerSize.width));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngIf", !!ctx_r8.groupBy);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r8.groupBy || ctx_r8.groupBy.length === 0);
+    }
+}
+function NgJvxMultiselectComponent_div_20_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 40);
+        i0.ɵɵprojection(1, 2);
+        i0.ɵɵelementEnd();
+    }
+}
+function NgJvxMultiselectComponent_div_21_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 41, 42);
+        i0.ɵɵelementContainer(2, 36);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r11 = i0.ɵɵnextContext();
+        const _r20 = i0.ɵɵreference(32);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r11.selectionTemplate ? ctx_r11.selectionTemplate.template : _r20)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c7, ctx_r11.value));
+    }
+}
+function NgJvxMultiselectComponent_div_22_div_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 45);
+        i0.ɵɵelementContainer(1, 36);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const val_r40 = ctx.$implicit;
+        const ctx_r39 = i0.ɵɵnextContext(2);
+        const _r18 = i0.ɵɵreference(30);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r39.selectionTemplate ? ctx_r39.selectionTemplate.template : _r18)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c7, val_r40));
+    }
+}
+function NgJvxMultiselectComponent_div_22_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 43);
+        i0.ɵɵtemplate(1, NgJvxMultiselectComponent_div_22_div_1_Template, 2, 4, "div", 44);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r12 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r12.value);
+    }
+}
+function NgJvxMultiselectComponent_div_23_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r42 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 46);
+        i0.ɵɵlistener("click", function NgJvxMultiselectComponent_div_23_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.clear($event)); });
+        i0.ɵɵelementStart(1, "mat-icon", 47);
+        i0.ɵɵtext(2, "clear ");
+        i0.ɵɵelementEnd()();
+    }
+}
+function NgJvxMultiselectComponent_mat_icon_25_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-icon");
+        i0.ɵɵtext(1, "expand_more");
+        i0.ɵɵelementEnd();
+    }
+}
+function NgJvxMultiselectComponent_div_26_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 48);
+        i0.ɵɵelement(1, "div")(2, "div")(3, "div")(4, "div");
+        i0.ɵɵelementEnd();
+    }
+}
+function NgJvxMultiselectComponent_ng_template_27_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 49);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const option_r43 = ctx.$implicit;
+        const ctx_r17 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1("", option_r43[ctx_r17.itemText], " ");
+    }
+}
+function NgJvxMultiselectComponent_ng_template_29_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵtext(0);
+    }
+    if (rf & 2) {
+        const value_r44 = ctx.$implicit;
+        const ctx_r19 = i0.ɵɵnextContext();
+        i0.ɵɵtextInterpolate1(" ", value_r44[ctx_r19.itemText], "\n");
+    }
+}
+const _c9 = function (a0) { return { "max-width": a0 }; };
+function NgJvxMultiselectComponent_ng_template_31_mat_chip_2_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r50 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "mat-chip", 53);
+        i0.ɵɵlistener("removed", function NgJvxMultiselectComponent_ng_template_31_mat_chip_2_Template_mat_chip_removed_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r50); const val_r48 = restoredCtx.$implicit; const ctx_r49 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r49.deselect(val_r48)); });
+        i0.ɵɵelementStart(1, "span", 54);
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "mat-icon", 55);
+        i0.ɵɵtext(4, "cancel");
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const val_r48 = ctx.$implicit;
+        const ctx_r47 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("color", "primary")("selectable", false)("removable", true);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c9, ctx_r47.multiContainerWidth - 50 + "px"));
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(val_r48[ctx_r47.itemText]);
+    }
+}
+function NgJvxMultiselectComponent_ng_template_31_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-chip-list", 50, 51);
+        i0.ɵɵtemplate(2, NgJvxMultiselectComponent_ng_template_31_mat_chip_2_Template, 5, 7, "mat-chip", 52);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const value_r45 = ctx.$implicit;
+        const ctx_r21 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("disabled", ctx_r21.disabled);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", value_r45);
+    }
+}
+function NgJvxMultiselectComponent_ng_template_33_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 56)(1, "strong");
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const opt_r51 = ctx.$implicit;
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(opt_r51.group);
+    }
+}
+const _c10 = [[["", "ng-jvx-footer", ""]], "*", [["", "placeholder", ""]]];
+const _c11 = function (a0, a1) { return { "disabled": a0, "has-errors": a1 }; };
+const _c12 = function (a1) { return ["jvx-multiselect-panel", a1]; };
+const _c13 = function (a1, a3, a4) { return { "overflow-y": "hidden", "width": a1, "max-height": "260px", "height": a3, "min-height": a4 }; };
+const _c14 = function (a0) { return { height: a0 }; };
+const _c15 = function (a1) { return { "ng-jvx-multiselect-value-container": true, "is-open": a1 }; };
+const _c16 = ["[ng-jvx-footer]", "*", "[placeholder]"];
 class NgJvxMultiselectComponent {
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    set value(value) {
+        this.pValue = value !== null && value !== void 0 ? 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;
@@ -334,56 +691,6 @@ class NgJvxMultiselectComponent {
             selectionValue: new UntypedFormControl(this.selectionValue)
         });
     }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-    set value(value) {
-        this.pValue = value !== null && value !== void 0 ? 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;
-        }
-    }
     ngOnInit() {
         this.stateChange$.pipe(takeUntil(this.unsubscribe)).subscribe(() => {
             this.changeDetectorRef.markForCheck();
@@ -717,30 +1024,135 @@ class NgJvxMultiselectComponent {
     }
 }
 NgJvxMultiselectComponent.nextId = 0;
-NgJvxMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.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 });
-NgJvxMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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\"><mat-icon >close</mat-icon></div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\r\n                                  formControlName=\"selectionValue\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"!!groupBy\">\r\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\r\n                    <ng-container [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\" [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <span style=\"padding-inline: 10px\">\r\n                      <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                        </span>\r\n                    </ng-jvx-option>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!groupBy || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                    <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                  </ng-jvx-option>\r\n                </ng-container>\r\n              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n\r\n    <div class=\"ng-jvx-multiselect__placeholder\" *ngIf=\"value.length === 0\">\r\n      <ng-content select=\"[placeholder]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n          <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                        [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container></div>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{option[itemText]}}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{value[itemText]}}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <mat-chip-list #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n              class=\"ng-jvx-multiselect-chip\"\r\n              [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{val[itemText]}}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n  <div style=\"padding-inline: 15px\"><strong>{{opt.group}}</strong></div>\r\n</ng-template>\r\n", styles: [""], 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: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
+NgJvxMultiselectComponent.ɵfac = function NgJvxMultiselectComponent_Factory(t) { return new (t || NgJvxMultiselectComponent)(i0.ɵɵdirectiveInject(i1$1.UntypedFormBuilder), i0.ɵɵdirectiveInject(NgJvxMultiselectService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.NgControl, 10), i0.ɵɵdirectiveInject(i1$1.UntypedFormBuilder)); };
+NgJvxMultiselectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgJvxMultiselectComponent, selectors: [["ng-jvx-multiselect"]], contentQueries: function NgJvxMultiselectComponent_ContentQueries(rf, ctx, dirIndex) {
+        if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, NgJvxOptionsTemplateDirective, 5);
+            i0.ɵɵcontentQuery(dirIndex, NgJvxSelectionTemplateDirective, 5);
+            i0.ɵɵcontentQuery(dirIndex, NgJvxGroupHeaderDirective, 5);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionsTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectionTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.groupHeaderTemplate = _t.first);
+        }
+    }, viewQuery: function NgJvxMultiselectComponent_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$1, 7);
+            i0.ɵɵviewQuery(_c1, 5);
+            i0.ɵɵviewQuery(_c2, 7);
+            i0.ɵɵviewQuery(_c3, 7);
+            i0.ɵɵviewQuery(_c4, 5);
+            i0.ɵɵviewQuery(_c5, 5);
+            i0.ɵɵviewQuery(NgJvxOptionComponent, 5);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.jvxMultiselect = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectionContainer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selection = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.trigger = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollbar = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.multiContainer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionComp = _t);
+        }
+    }, hostVars: 3, hostBindings: function NgJvxMultiselectComponent_HostBindings(rf, ctx) {
+        if (rf & 2) {
+            i0.ɵɵhostProperty("id", ctx.id);
+            i0.ɵɵclassProp("floating", ctx.shouldLabelFloat);
+        }
+    }, inputs: { options: "options", multi: "multi", url: "url", requestType: "requestType", itemValue: "itemValue", itemText: "itemText", ignorePagination: "ignorePagination", clearable: "clearable", closeOnClick: "closeOnClick", hasErrors: "hasErrors", searchMode: "searchMode", searchInput: "searchInput", searchLabel: "searchLabel", listProp: "listProp", totalRowsProp: "totalRowsProp", panelClass: "panelClass", searchProp: "searchProp", closeButton: "closeButton", mapper: "mapper", multiMapper: "multiMapper", searchMapper: "searchMapper", groupBy: "groupBy", value: "value", requestHeaders: "requestHeaders", required: "required", disabled: "disabled", pageSize: "pageSize" }, outputs: { valueChange: "valueChange", jvxMultiselectOpen: "jvxMultiselectOpen", jvxMultiselectOpened: "jvxMultiselectOpened", jvxMultiselectClose: "jvxMultiselectClose", jvxMultiselectClosed: "jvxMultiselectClosed", scrollEnd: "scrollEnd" }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: MatLegacyFormFieldControl,
+                useExisting: forwardRef(() => NgJvxMultiselectComponent),
+                multi: true,
+            }
+        ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c16, decls: 35, vars: 35, consts: [[1, "ng-jvx-multiselect", 3, "ngClass"], ["jvxMultiselect", ""], [3, "matMenuTriggerFor", "onMenuOpen", "menuOpened", "onMenuClose", "menuClosed"], ["trigger", "matMenuTrigger"], [3, "formGroup", "yPosition"], ["menuRef", "matMenu"], ["class", "closeMenuButton", 4, "ngIf"], [1, "menu-list-container", 3, "ngStyle"], ["menuLIstContainer", ""], ["class", "search-input-container", 3, "click", 4, "ngIf"], [3, "ngStyle"], ["smoothScroll", "", 2, "width", "100%", 3, "visibility", "appearance", "sensorDisabled", "autoHeightDisabled"], ["scrollbar", ""], [3, "click"], ["selectionContainer", ""], ["formControlName", "selectionValue", 3, "multiple", "ngStyle", "selectionChange", 4, "ngIf"], [1, "menu-footer"], [3, "ngClass", "click"], ["valueContainer", ""], ["class", "ng-jvx-multiselect__placeholder", 4, "ngIf"], ["class", "ng-jvx-multiselect-value multi-value-container", 4, "ngIf"], ["class", "ng-jvx-multiselect-value single-value-container", 4, "ngIf"], ["class", "ng-jvx-multiselect__remove-button", 3, "click", 4, "ngIf"], [1, "ng-jvx-multiselect-arrow"], [4, "ngIf"], ["class", "lds-ring", 4, "ngIf"], ["defaultTemplate", ""], ["defaultSelectionTemplate", ""], ["defaultMultiSelectionTemplate", ""], ["defaultGroupHeaderTemplate", ""], [1, "closeMenuButton"], [1, "search-input-container", 3, "click"], ["type", "text", 3, "placeholder", "ngModel", "ngModelOptions", "ngJvxFocus", "input"], ["formControlName", "selectionValue", 3, "multiple", "ngStyle", "selectionChange"], ["selection", ""], [4, "ngFor", "ngForOf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"], [2, "padding-inline", "10px"], [1, "ng-jvx-multiselect__placeholder"], [1, "ng-jvx-multiselect-value", "multi-value-container"], ["multiContainer", ""], [1, "ng-jvx-multiselect-value", "single-value-container"], ["style", "width: 100%;", 4, "ngFor", "ngForOf"], [2, "width", "100%"], [1, "ng-jvx-multiselect__remove-button", 3, "click"], [2, "font-size", "18px", "display", "flex", "align-items", "center", "justify-content", "center"], [1, "lds-ring"], [2, "max-width", "100%", "white-space", "nowrap", "overflow", "hidden", "text-overflow", "ellipsis"], [3, "disabled"], ["chipList", ""], ["selected", "", "class", "ng-jvx-multiselect-chip", 3, "color", "selectable", "removable", "removed", 4, "ngFor", "ngForOf"], ["selected", "", 1, "ng-jvx-multiselect-chip", 3, "color", "selectable", "removable", "removed"], [1, "chip-content", 3, "ngStyle"], ["matChipRemove", ""], [2, "padding-inline", "15px"]], template: function NgJvxMultiselectComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojectionDef(_c10);
+            i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2, 3);
+            i0.ɵɵlistener("onMenuOpen", function NgJvxMultiselectComponent_Template_div_onMenuOpen_2_listener() { return ctx.onMenuOpen(); })("menuOpened", function NgJvxMultiselectComponent_Template_div_menuOpened_2_listener() { return ctx.onMenuOpened(); })("onMenuClose", function NgJvxMultiselectComponent_Template_div_onMenuClose_2_listener() { return ctx.onMenuClose(); })("menuClosed", function NgJvxMultiselectComponent_Template_div_menuClosed_2_listener() { return ctx.onMenuClosed(); });
+            i0.ɵɵelementStart(4, "mat-menu", 4, 5);
+            i0.ɵɵtemplate(6, NgJvxMultiselectComponent_div_6_Template, 3, 0, "div", 6);
+            i0.ɵɵelementStart(7, "div", 7, 8);
+            i0.ɵɵtemplate(9, NgJvxMultiselectComponent_div_9_Template, 2, 5, "div", 9);
+            i0.ɵɵelementStart(10, "div", 10)(11, "ng-scrollbar", 11, 12)(13, "div", 13, 14);
+            i0.ɵɵlistener("click", function NgJvxMultiselectComponent_Template_div_click_13_listener($event) { return ctx.onCLickOnMenu($event); });
+            i0.ɵɵtemplate(15, NgJvxMultiselectComponent_mat_selection_list_15_Template, 5, 6, "mat-selection-list", 15);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(16, "div", 16);
+            i0.ɵɵprojection(17);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(18, "div", 17, 18);
+            i0.ɵɵlistener("click", function NgJvxMultiselectComponent_Template_div_click_18_listener($event) { return ctx.clickOnMenuTrigger($event); });
+            i0.ɵɵtemplate(20, NgJvxMultiselectComponent_div_20_Template, 2, 0, "div", 19);
+            i0.ɵɵtemplate(21, NgJvxMultiselectComponent_div_21_Template, 3, 4, "div", 20);
+            i0.ɵɵtemplate(22, NgJvxMultiselectComponent_div_22_Template, 2, 1, "div", 21);
+            i0.ɵɵtemplate(23, NgJvxMultiselectComponent_div_23_Template, 3, 0, "div", 22);
+            i0.ɵɵelementStart(24, "div", 23);
+            i0.ɵɵtemplate(25, NgJvxMultiselectComponent_mat_icon_25_Template, 2, 0, "mat-icon", 24);
+            i0.ɵɵtemplate(26, NgJvxMultiselectComponent_div_26_Template, 5, 0, "div", 25);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(27, NgJvxMultiselectComponent_ng_template_27_Template, 2, 1, "ng-template", null, 26, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(29, NgJvxMultiselectComponent_ng_template_29_Template, 1, 1, "ng-template", null, 27, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(31, NgJvxMultiselectComponent_ng_template_31_Template, 3, 2, "ng-template", null, 28, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(33, NgJvxMultiselectComponent_ng_template_33_Template, 3, 1, "ng-template", null, 29, i0.ɵɵtemplateRefExtractor);
+        }
+        if (rf & 2) {
+            const _r2 = i0.ɵɵreference(5);
+            const _r7 = i0.ɵɵreference(14);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(22, _c11, ctx.disabled, ctx.hasErrors));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("matMenuTriggerFor", _r2);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassMap(i0.ɵɵpureFunction1(25, _c12, ctx.panelClass).join(" "));
+            i0.ɵɵproperty("formGroup", ctx.form)("yPosition", ctx.yPosition);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.closeButton);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(27, _c13, ctx.listContainerSize.width, ctx.listContainerSize.height, ctx.listContainerSize.minHeight));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", !!ctx.searchInput);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(31, _c14, ctx.searchInput && _r7.clientHeight > 220 || _r7.clientHeight > 260 ? 260 - (ctx.searchInput ? 40 : 0) + "px" : "auto"));
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("visibility", "hover")("appearance", "compact")("sensorDisabled", ctx.isLoading)("autoHeightDisabled", false);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.showList);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(33, _c15, ctx.isOpen));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.value.length === 0);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.multi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.multi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.clearable && ctx.value.length > 0);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", !ctx.isLoading);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.isLoading);
+        }
+    }, dependencies: [i3.MatLegacyMenu, i3.MatLegacyMenuTrigger, i4.NgClass, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i4.NgStyle, i5.MatIcon, i2.MatLegacySelectionList, i7.MatLegacyChipList, i7.MatLegacyChip, i7.MatLegacyChipRemove, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgControlStatusGroup, i1$1.FormGroupDirective, i1$1.FormControlName, i8.NgScrollbar, i9.SmoothScroll, i1$1.NgModel, NgJvxOptionComponent, NgJvxFocusDirective], encapsulation: 2, changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxMultiselectComponent, [{
             type: Component,
-            args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
-                            provide: MatFormFieldControl,
+                            provide: MatLegacyFormFieldControl,
                             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\"><mat-icon >close</mat-icon></div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\r\n\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 260? 260 - (searchInput? 40 : 0) + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\r\n                                  formControlName=\"selectionValue\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"!!groupBy\">\r\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\r\n                    <ng-container [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\" [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <span style=\"padding-inline: 10px\">\r\n                      <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                        </span>\r\n                    </ng-jvx-option>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!groupBy || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                    <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                  </ng-jvx-option>\r\n                </ng-container>\r\n              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n\r\n    <div class=\"ng-jvx-multiselect__placeholder\" *ngIf=\"value.length === 0\">\r\n      <ng-content select=\"[placeholder]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n          <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                        [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container></div>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{option[itemText]}}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{value[itemText]}}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <mat-chip-list #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n              class=\"ng-jvx-multiselect-chip\"\r\n              [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{val[itemText]}}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n  <div style=\"padding-inline: 15px\"><strong>{{opt.group}}</strong></div>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () {
+        }], 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: [{
+    }, { id: [{
                 type: HostBinding
             }], shouldLabelFloat: [{
                 type: HostBinding,
@@ -841,7 +1253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], scrollEnd: [{
                 type: Output
-            }] } });
+            }] });
+})();
 
 /**
  * @license
@@ -850,78 +1263,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
  * 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
  */
+function NgJvxPanelComponent_ng_template_0_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r2 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵlistener("keydown", function NgJvxPanelComponent_ng_template_0_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1._handleKeydown($event)); })("click", function NgJvxPanelComponent_ng_template_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closed.emit("click")); })("@transformMenu.start", function NgJvxPanelComponent_ng_template_0_Template_div_animation_transformMenu_start_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4._onAnimationStart($event)); })("@transformMenu.done", function NgJvxPanelComponent_ng_template_0_Template_div_animation_transformMenu_done_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5._onAnimationDone($event)); });
+        i0.ɵɵelementStart(1, "div", 1);
+        i0.ɵɵprojection(2);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("id", ctx_r0.panelId)("ngClass", ctx_r0._classList)("@transformMenu", ctx_r0._panelAnimationState);
+        i0.ɵɵattribute("aria-label", ctx_r0.ariaLabel || null)("aria-labelledby", ctx_r0.ariaLabelledby || null)("aria-describedby", ctx_r0.ariaDescribedby || null);
+    }
+}
+const _c0 = ["*"];
 /** @docs-public MatMenu */
 class NgJvxPanelComponent extends _MatMenuBase {
     constructor(elementRef, ngZone, defaultOptions) {
         super(elementRef, ngZone, defaultOptions);
     }
 }
-NgJvxPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MAT_MENU_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-NgJvxPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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: "14.0.2", ngImport: i0, type: NgJvxPanelComponent, decorators: [{
+NgJvxPanelComponent.ɵfac = function NgJvxPanelComponent_Factory(t) { return new (t || NgJvxPanelComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(MAT_LEGACY_MENU_DEFAULT_OPTIONS)); };
+NgJvxPanelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgJvxPanelComponent, selectors: [["ngJvxPanel"]], hostVars: 3, hostBindings: function NgJvxPanelComponent_HostBindings(rf, ctx) {
+        if (rf & 2) {
+            i0.ɵɵattribute("aria-label", null)("aria-labelledby", null)("aria-describedby", null);
+        }
+    }, exportAs: ["ngJvxPanel"], features: [i0.ɵɵProvidersFeature([
+            { provide: MAT_LEGACY_MENU_PANEL, useExisting: MatMenu },
+        ]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 1, vars: 0, consts: [["tabindex", "-1", "role", "menu", 1, "mat-menu-panel", 3, "id", "ngClass", "keydown", "click"], [1, "mat-menu-content"]], template: function NgJvxPanelComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵtemplate(0, NgJvxPanelComponent_ng_template_0_Template, 3, 6, "ng-template");
+        }
+    }, dependencies: [i4.NgClass], encapsulation: 2, data: { animation: [
+            matLegacyMenuAnimations.transformMenu,
+            matLegacyMenuAnimations.fadeInItems
+        ] }, changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxPanelComponent, [{
             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
+                        matLegacyMenuAnimations.transformMenu,
+                        matLegacyMenuAnimations.fadeInItems
                     ], providers: [
-                        { provide: MAT_MENU_PANEL, useExisting: MatMenu },
+                        { provide: MAT_LEGACY_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 () {
+        }], function () {
         return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                         type: Inject,
-                        args: [MAT_MENU_DEFAULT_OPTIONS]
+                        args: [MAT_LEGACY_MENU_DEFAULT_OPTIONS]
                     }] }];
-    } });
+    }, null);
+})();
 
 class NgJvxMultiselectModule {
 }
-NgJvxMultiselectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgJvxMultiselectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.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] });
-NgJvxMultiselectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxMultiselectModule, imports: [MatButtonModule,
-        MatOptionModule,
-        MatSelectModule,
-        MatMenuModule,
+NgJvxMultiselectModule.ɵfac = function NgJvxMultiselectModule_Factory(t) { return new (t || NgJvxMultiselectModule)(); };
+NgJvxMultiselectModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NgJvxMultiselectModule });
+NgJvxMultiselectModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacyButtonModule,
+        MatLegacyOptionModule,
+        MatLegacySelectModule,
+        MatLegacyMenuModule,
         CommonModule,
         MatIconModule,
-        MatListModule,
-        MatChipsModule,
+        MatLegacyListModule,
+        MatLegacyChipsModule,
         ReactiveFormsModule,
         NgScrollbarModule,
         SmoothScrollModule,
         FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgJvxMultiselectModule, [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -935,14 +1353,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         NgJvxFocusDirective
                     ],
                     imports: [
-                        MatButtonModule,
-                        MatOptionModule,
-                        MatSelectModule,
-                        MatMenuModule,
+                        MatLegacyButtonModule,
+                        MatLegacyOptionModule,
+                        MatLegacySelectModule,
+                        MatLegacyMenuModule,
                         CommonModule,
                         MatIconModule,
-                        MatListModule,
-                        MatChipsModule,
+                        MatLegacyListModule,
+                        MatLegacyChipsModule,
                         ReactiveFormsModule,
                         NgScrollbarModule,
                         SmoothScrollModule,
@@ -955,7 +1373,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         NgJvxDisabledOptionDirective,
                         NgJvxGroupHeaderDirective]
                 }]
-        }] });
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NgJvxMultiselectModule, { declarations: [NgJvxMultiselectComponent,
+            NgJvxOptionComponent,
+            NgJvxOptionsTemplateDirective,
+            NgJvxPanelComponent,
+            NgJvxSelectionTemplateDirective,
+            NgJvxDisabledOptionDirective,
+            NgJvxGroupHeaderDirective,
+            NgJvxFocusDirective], imports: [MatLegacyButtonModule,
+            MatLegacyOptionModule,
+            MatLegacySelectModule,
+            MatLegacyMenuModule,
+            CommonModule,
+            MatIconModule,
+            MatLegacyListModule,
+            MatLegacyChipsModule,
+            ReactiveFormsModule,
+            NgScrollbarModule,
+            SmoothScrollModule,
+            FormsModule], exports: [NgJvxMultiselectComponent,
+            NgJvxOptionComponent,
+            NgJvxOptionsTemplateDirective,
+            NgJvxSelectionTemplateDirective,
+            NgJvxDisabledOptionDirective,
+            NgJvxGroupHeaderDirective] });
+})();
 
 /*
  * Public API Surface of ng-jvx-multiselect