ng-jvx-multiselect 17.0.3 → 18.0.2

package/fesm2022/ng-jvx-multiselect.mjs

@@ -1,56 +1,37 @@
 import * as i0 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';
-import { MatListModule } from '@angular/material/list';
-import { fromEvent, Subject, of, BehaviorSubject, noop, timer, forkJoin } from 'rxjs';
-import { takeUntil, debounceTime, map, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
+import { EventEmitter, input, Component, ViewEncapsulation, Output, Directive, Input, Injectable, signal, ViewChild, ChangeDetectionStrategy, Optional, Self, HostBinding, ViewChildren, ContentChild, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
+import { NgClass, CommonModule } from '@angular/common';
+import { fromEvent, Subject, takeUntil as takeUntil$1, tap, noop, timer, of, BehaviorSubject, forkJoin } from 'rxjs';
+import { takeUntil, debounceTime, map, switchMap, tap as tap$1, 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 * as i1$2 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i3 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';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i8 from 'ngx-scrollbar';
+import * as i1$1 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay } from '@angular/cdk/overlay';
+import * as i4 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
-import * as i9 from 'ngx-scrollbar/smooth-scroll';
+import * as i5 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';
+import { trigger, transition, style, animate } from '@angular/animations';
 
 class NgJvxOptionComponent {
     constructor() {
-        this.isSelected = false;
+        this.clickOnOption = new EventEmitter();
+        this.value = input();
+        this.disabled = input(false);
+        this.isSelected = input(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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.11", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOnOption: "clickOnOption" }, ngImport: i0, template: "<div class=\"option\" [ngClass]=\"{'ng-jvx-option': true, 'ng-jvx-single-selected-option': isSelected()}\" #listOption\r\n(click)=\"clickOnOption.emit()\">\r\n  <div class=\"option-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"list-option-background\"></div>\r\n</div>\r\n", styles: ["ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", 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
+            args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<div class=\"option\" [ngClass]=\"{'ng-jvx-option': true, 'ng-jvx-single-selected-option': isSelected()}\" #listOption\r\n(click)=\"clickOnOption.emit()\">\r\n  <div class=\"option-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"list-option-background\"></div>\r\n</div>\r\n", styles: ["ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clickOnOption: [{
+                type: Output
             }] } });
 
 class NgJvxOptionsTemplateDirective {
@@ -64,10 +45,10 @@ class NgJvxOptionsTemplateDirective {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", 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: "18.2.11", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -87,10 +68,10 @@ class NgJvxSelectionTemplateDirective {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", 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: "18.2.11", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -110,10 +91,10 @@ class NgJvxGroupHeaderDirective {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", 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: "18.2.11", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -152,10 +133,10 @@ class NgJvxDisabledOptionDirective {
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -182,7 +163,7 @@ class NgJvxMultiselectService {
                 .set('size', pageSize.toString());
         }
         const options = {
-            mode: 'no-cors',
+            mode: 'no-cors', // cors
             headers: requestHeaders,
             context: setJvxCall(),
             // withCredentials: true,
@@ -197,16 +178,238 @@ class NgJvxMultiselectService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
+class MenuTriggerDirective {
+    /** References the menu instance that the trigger is associated with. */
+    get menu() {
+        return this._menu;
+    }
+    set libMenuTriggerFor(menu) {
+        this._menu = menu;
+    }
+    constructor(el, overlay) {
+        this.el = el;
+        this.overlay = overlay;
+        this.unsubscribe = new Subject();
+        this.closed = new EventEmitter();
+        this.onMenuOpen = new EventEmitter();
+        this.menuOpened = new EventEmitter();
+        this.onMenuClose = new EventEmitter();
+        this.menuClosed = new EventEmitter();
+        // tslint:disable-next-line:variable-name
+        this._menu = null;
+        fromEvent(this.el.nativeElement, 'click')
+            .pipe(takeUntil$1(this.unsubscribe), tap(() => {
+            if (this.menu) {
+                this.openMenu();
+            }
+        }))
+            .subscribe(noop);
+    }
+    ngAfterViewInit() {
+        if (this.menu) {
+            this.menu.onOpened.pipe(takeUntil$1(this.unsubscribe)).subscribe(() => {
+                this.menuOpened.emit();
+            });
+            this.menu.onClose.pipe(takeUntil$1(this.unsubscribe)).subscribe(() => {
+                this.onMenuClose.emit();
+            });
+            this.menu.onClosed.pipe(takeUntil$1(this.unsubscribe)).subscribe(() => {
+                this.menuClosed.emit();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+    closeMenu() {
+        this.menu.close();
+    }
+    openMenu() {
+        this.menu.trigger = this.el;
+        this.menu.open();
+        this.onMenuOpen.emit();
+        this.menu.open();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: MenuTriggerDirective, selector: "[lib-menu-trigger-for], [libMenuTriggerFor]", inputs: { libMenuTriggerFor: "libMenuTriggerFor" }, outputs: { closed: "closed", onMenuOpen: "onMenuOpen", menuOpened: "menuOpened", onMenuClose: "onMenuClose", menuClosed: "menuClosed" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lib-menu-trigger-for], [libMenuTriggerFor]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }], propDecorators: { closed: [{
+                type: Output
+            }], onMenuOpen: [{
+                type: Output
+            }], menuOpened: [{
+                type: Output
+            }], onMenuClose: [{
+                type: Output
+            }], menuClosed: [{
+                type: Output
+            }], libMenuTriggerFor: [{
+                type: Input
+            }] } });
+
+class PanelComponent {
+    // -----------------------------------------------------------------------------------------------------
+    // @ lifecycle Hooks
+    // -----------------------------------------------------------------------------------------------------
+    constructor() {
+        this.isOpen = signal(false);
+        this.unsubscribe = new Subject();
+        this.yPosition = 'above';
+        // -----------------------------------------------------------------------------------------------------
+        // @ Outputs
+        // -----------------------------------------------------------------------------------------------------
+        this.onClose = new EventEmitter();
+        this.onClosed = new EventEmitter();
+        this.onOpened = new EventEmitter();
+        fromEvent(window, 'resize')
+            .pipe(takeUntil(this.unsubscribe))
+            .subscribe(() => {
+            this.close();
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public Methods
+    // -----------------------------------------------------------------------------------------------------
+    open() {
+        this.isOpen.set(true);
+        timer(800).subscribe(() => {
+            this.onOpened.emit();
+        });
+    }
+    close() {
+        this.isOpen.set(false);
+        this.onClose.emit();
+        timer(800).subscribe(() => {
+            this.onClosed.emit();
+        });
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ protected Methods
+    // -----------------------------------------------------------------------------------------------------
+    clickOnMenu() {
+        this.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: PanelComponent, isStandalone: true, selector: "lib-panel", inputs: { trigger: "trigger", yPosition: "yPosition" }, outputs: { onClose: "onClose", onClosed: "onClosed", onOpened: "onOpened" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #menuTemplate  cdkConnectedOverlay\r\n             (backdropClick)=\"close()\"\r\n             [cdkConnectedOverlayOrigin]=\"trigger\"\r\n             [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\r\n             [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n             [cdkConnectedOverlayDisableClose]=\"false\"\r\n             [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\r\n             [cdkConnectedOverlayOpen]=\"isOpen()\">\r\n  <div class=\"ng-jvx-panel\" [@animation]=\"isOpen()\" (click)=\"clickOnMenu()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.ng-jvx-panel{display:inline-block;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;background:var(--jvx-multiselect-panel-bg)}.ng-jvx-panel-overlay{background-opacity:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], animations: [
+            trigger('animation', [
+                transition(':enter', [
+                    style({
+                        opacity: 0,
+                        transform: 'scaleY(0.8)',
+                        transformOrigin: 'top',
+                    }),
+                    animate('0.08s ease-in-out', style({
+                        opacity: 1,
+                        transform: 'scaleY(1)',
+                        transformOrigin: 'top',
+                    })),
+                ]),
+                transition(':leave', [
+                    style({
+                        opacity: 1,
+                        transform: 'scaleY(1)',
+                        transformOrigin: 'top'
+                    }),
+                    animate('.08s ease-in-out', style({
+                        opacity: 0,
+                        transform: 'scaleY(0.8)',
+                        transformOrigin: 'top'
+                    })),
+                ]),
+            ]),
+        ], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-panel', standalone: true, imports: [
+                        CdkConnectedOverlay
+                    ], encapsulation: ViewEncapsulation.None, animations: [
+                        trigger('animation', [
+                            transition(':enter', [
+                                style({
+                                    opacity: 0,
+                                    transform: 'scaleY(0.8)',
+                                    transformOrigin: 'top',
+                                }),
+                                animate('0.08s ease-in-out', style({
+                                    opacity: 1,
+                                    transform: 'scaleY(1)',
+                                    transformOrigin: 'top',
+                                })),
+                            ]),
+                            transition(':leave', [
+                                style({
+                                    opacity: 1,
+                                    transform: 'scaleY(1)',
+                                    transformOrigin: 'top'
+                                }),
+                                animate('.08s ease-in-out', style({
+                                    opacity: 0,
+                                    transform: 'scaleY(0.8)',
+                                    transformOrigin: 'top'
+                                })),
+                            ]),
+                        ]),
+                    ], template: "<ng-template #menuTemplate  cdkConnectedOverlay\r\n             (backdropClick)=\"close()\"\r\n             [cdkConnectedOverlayOrigin]=\"trigger\"\r\n             [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\r\n             [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n             [cdkConnectedOverlayDisableClose]=\"false\"\r\n             [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\r\n             [cdkConnectedOverlayOpen]=\"isOpen()\">\r\n  <div class=\"ng-jvx-panel\" [@animation]=\"isOpen()\" (click)=\"clickOnMenu()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.ng-jvx-panel{display:inline-block;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;background:var(--jvx-multiselect-panel-bg)}.ng-jvx-panel-overlay{background-opacity:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuTemplate: [{
+                type: ViewChild,
+                args: ['menuTemplate', { static: true }]
+            }], trigger: [{
+                type: Input
+            }], yPosition: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onClosed: [{
+                type: Output
+            }], onOpened: [{
+                type: Output
+            }] } });
+
+class ChipComponent {
+    constructor() {
+        this.removed = new EventEmitter();
+        this.disabled = input(false);
+    }
+    clickOnRemove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!this.disabled()) {
+            this.removed.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.11", type: ChipComponent, isStandalone: true, selector: "lib-chip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<div [ngClass]=\"{disabled: disabled()}\"><span class=\"chip-text\">\r\n  <ng-content></ng-content>\r\n</span>\r\n    <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\r\n      d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\r\n\r\n</div>\r\n", styles: ["lib-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}lib-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}lib-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}lib-chip>div.disabled{background-color:#c2c3c4;color:currentColor}lib-chip>div.disabled .chip-text{pointer-events:none}lib-chip>div.disabled .remove-button{color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-chip', standalone: true, imports: [
+                        NgClass
+                    ], encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{disabled: disabled()}\"><span class=\"chip-text\">\r\n  <ng-content></ng-content>\r\n</span>\r\n    <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\r\n      d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\r\n\r\n</div>\r\n", styles: ["lib-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}lib-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}lib-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}lib-chip>div.disabled{background-color:#c2c3c4;color:currentColor}lib-chip>div.disabled .chip-text{pointer-events:none}lib-chip>div.disabled .remove-button{color:currentColor}\n"] }]
+        }], propDecorators: { removed: [{
+                type: Output
+            }] } });
+
 class NgJvxFocusDirective {
     constructor(el) {
         this.el = el;
@@ -221,10 +424,10 @@ class NgJvxFocusDirective {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -400,7 +603,7 @@ class NgJvxMultiselectComponent {
         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(() => {
+        }), switchMap(() => timer(100)), tap$1(() => {
             this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
             this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
             this.changeDetectorRef.markForCheck();
@@ -471,7 +674,7 @@ class NgJvxMultiselectComponent {
                 this.onScrolled(e);
             });
         }
-        timer(0).pipe(tap(() => {
+        timer(0).pipe(tap$1(() => {
             this.multiContainerWidth = this.multiContainer?.nativeElement?.offsetWidth ?? 100;
             this.yPosition = window.innerHeight - this.jvxMultiselect.nativeElement?.getBoundingClientRect()?.top < 260 ? 'above' : 'below';
             this.changeDetectorRef.markForCheck();
@@ -512,6 +715,7 @@ class NgJvxMultiselectComponent {
         this.onTouched = fn;
     }
     onChange(e) {
+        // onChange(e: MatSelectionListChange): void {
         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]);
@@ -641,7 +845,7 @@ class NgJvxMultiselectComponent {
             this.trigger.openMenu();
             this.setSelectionContainerSize();
             return val;
-        }), tap(() => {
+        }), tap$1(() => {
             this.changeDetectorRef.markForCheck();
         }));
     }
@@ -725,29 +929,61 @@ class NgJvxMultiselectComponent {
     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: "17.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: "valueContainer", first: true, predicate: ["valueContainer"], 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: "placeholderContainer", first: true, predicate: ["placeholderContainer"], 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, 'min-width.px': 112, '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    @if (value.length === 0) {\r\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n        <ng-content select=\"[placeholder]\"></ng-content>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\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{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 }); }
+    isOptionSelected(option) {
+        return this.form.get('selectionValue').value.includes(option[this.itemValue]);
+    }
+    clickOnOption(option) {
+        if (this.isOptionSelected(option)) {
+            this.deselect(option);
+        }
+        else {
+            this.select(option);
+        }
+    }
+    select(option) {
+        if (!this.multi) {
+            this.form.get('selectionValue').reset([]);
+            this.value = [];
+        }
+        this.value.push(option);
+        this.value.sort((a, b) => {
+            return typeof a[this.itemValue] === 'string' ?
+                a[this.itemValue].localeCompare(b[this.itemValue]) : a[this.itemValue] - b[this.itemValue];
+        });
+        const val = this.form.get('selectionValue').value.concat([option[this.itemValue]]);
+        val.sort((a, b) => {
+            return typeof a[this.itemValue] === 'string' ?
+                a[this.itemValue].localeCompare(b[this.itemValue]) : a[this.itemValue] - b[this.itemValue];
+        });
+        this.form.get('selectionValue').setValue(val);
+        this.propagateChange(this.value);
+        this.valueChange.emit(this.value);
+        this.changeDetectorRef.markForCheck();
+        console.log(this.form.get('selectionValue').value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectComponent, deps: [{ token: i1$2.UntypedFormBuilder }, { token: NgJvxMultiselectService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", 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: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true }, { propertyName: "trigger", first: true, predicate: MenuTriggerDirective, descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], 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 [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       #trigger\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n  >\r\n    <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n               [yPosition]=\"yPosition\">\r\n      @if(closeButton){\r\n      <div  class=\"closeMenuButton\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n        </svg>\r\n      </div>\r\n      }\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, '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              <div #selection\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  ngDefaultControl\r\n                                  formControlName=\"selectionValue\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"!!groupBy\">\r\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\" [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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]\"  [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\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              </div>\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    </lib-panel>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n    @if (value.length === 0) {\r\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n        <ng-content select=\"[placeholder]\"></ng-content>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\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    @if (clearable && value.length > 0) {\r\n      <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n        </svg>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      @if (!isLoading) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"></path>\r\n        </svg>\r\n      } @else {\r\n        <div class=\"lds-ring\">\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n  padding-inline: .3rem;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\r\n    @for (val of value; track val[itemValue]) {\r\n      <lib-chip class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" (removed)=\"deselect(val)\">\r\n        {{ val[itemText] }}\r\n      </lib-chip>\r\n    }\r\n  </div>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n  <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow svg{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow svg{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow svg{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow svg{color:red}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .closeMenuButton svg{fill:var(--jvx-multiselect-on-primary);font-size:15px;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i5.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PanelComponent, selector: "lib-panel", inputs: ["trigger", "yPosition"], outputs: ["onClose", "onClosed", "onOpened"] }, { kind: "component", type: ChipComponent, selector: "lib-chip", inputs: ["disabled"], outputs: ["removed"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lib-menu-trigger-for], [libMenuTriggerFor]", inputs: ["libMenuTriggerFor"], outputs: ["closed", "onMenuOpen", "menuOpened", "onMenuClose", "menuClosed"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value", "disabled", "isSelected"], outputs: ["clickOnOption"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", 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, 'min-width.px': 112, '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    @if (value.length === 0) {\r\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n        <ng-content select=\"[placeholder]\"></ng-content>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\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{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: [{
+                    // {
+                    //   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 [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       #trigger\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n  >\r\n    <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n               [yPosition]=\"yPosition\">\r\n      @if(closeButton){\r\n      <div  class=\"closeMenuButton\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n        </svg>\r\n      </div>\r\n      }\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, '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              <div #selection\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  ngDefaultControl\r\n                                  formControlName=\"selectionValue\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"!!groupBy\">\r\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\" [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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]\"  [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\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              </div>\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    </lib-panel>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n    @if (value.length === 0) {\r\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n        <ng-content select=\"[placeholder]\"></ng-content>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n\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    @if (clearable && value.length > 0) {\r\n      <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n        </svg>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      @if (!isLoading) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"></path>\r\n        </svg>\r\n      } @else {\r\n        <div class=\"lds-ring\">\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n  padding-inline: .3rem;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\r\n    @for (val of value; track val[itemValue]) {\r\n      <lib-chip class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" (removed)=\"deselect(val)\">\r\n        {{ val[itemText] }}\r\n      </lib-chip>\r\n    }\r\n  </div>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n  <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow svg{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow svg{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow svg{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow svg{color:red}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .closeMenuButton svg{fill:var(--jvx-multiselect-on-primary);font-size:15px;height:100%;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i1$1.UntypedFormBuilder }], propDecorators: { id: [{
+                }] }, { type: i1$2.UntypedFormBuilder }], propDecorators: { id: [{
                 type: HostBinding
             }], shouldLabelFloat: [{
                 type: HostBinding,
@@ -761,12 +997,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }], selectionContainer: [{
                 type: ViewChild,
                 args: ['selectionContainer', { static: false }]
-            }], selection: [{
-                type: ViewChild,
-                args: ['selection', { static: true }]
             }], trigger: [{
                 type: ViewChild,
-                args: ['trigger', { static: true }]
+                args: [MenuTriggerDirective, { static: true }]
             }], scrollbar: [{
                 type: ViewChild,
                 args: ['scrollbar', { static: false }]
@@ -857,46 +1090,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectModule, declarations: [MenuTriggerDirective,
+            NgJvxMultiselectComponent,
             NgJvxOptionComponent,
             NgJvxOptionsTemplateDirective,
             NgJvxSelectionTemplateDirective,
             NgJvxDisabledOptionDirective,
             NgJvxGroupHeaderDirective,
-            NgJvxFocusDirective], imports: [MatButtonModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatMenuModule,
-            CommonModule,
-            MatIconModule,
-            MatListModule,
-            MatChipsModule,
+            NgJvxFocusDirective], imports: [CommonModule,
             ReactiveFormsModule,
             NgScrollbarModule,
             SmoothScroll,
-            FormsModule], exports: [NgJvxMultiselectComponent,
+            FormsModule,
+            PanelComponent,
+            ChipComponent], 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,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectModule, imports: [CommonModule,
             ReactiveFormsModule,
             NgScrollbarModule,
             FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
+                        MenuTriggerDirective,
                         NgJvxMultiselectComponent,
                         NgJvxOptionComponent,
                         NgJvxOptionsTemplateDirective,
@@ -906,18 +1129,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                         NgJvxFocusDirective
                     ],
                     imports: [
-                        MatButtonModule,
-                        MatOptionModule,
-                        MatSelectModule,
-                        MatMenuModule,
                         CommonModule,
-                        MatIconModule,
-                        MatListModule,
-                        MatChipsModule,
                         ReactiveFormsModule,
                         NgScrollbarModule,
                         SmoothScroll,
-                        FormsModule
+                        FormsModule,
+                        PanelComponent,
+                        ChipComponent
                     ],
                     exports: [NgJvxMultiselectComponent,
                         NgJvxOptionComponent,