ng-jvx-multiselect 1.3.3 → 16.0.1

package/fesm2022/ng-jvx-multiselect.mjs

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