ng2-iq-select2-exe 16.2.13 → 18.2.14

package/fesm2022/ng2-iq-select2-exe.mjs

@@ -8,526 +8,526 @@ import { of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap, filter, switchMap, map, mergeMap } from 'rxjs/operators';
 import { HttpClientModule } from '@angular/common/http';
 
-class Messages {
-    static { this.VISIBLE_COUNT_VAR = '%VISIBLE_COUNT%'; }
-    static { this.MAX_COUNT_VAR = '%MAX_COUNT%'; }
-    static { this.MORE_RESULTS = 'Showing ' + this.VISIBLE_COUNT_VAR + ' of ' + this.MAX_COUNT_VAR + ' results. Refine your search to show more results.'; }
-    static { this.NO_RESULTS = 'No results available'; }
+class Messages {
+    static { this.VISIBLE_COUNT_VAR = '%VISIBLE_COUNT%'; }
+    static { this.MAX_COUNT_VAR = '%MAX_COUNT%'; }
+    static { this.MORE_RESULTS = 'Showing ' + this.VISIBLE_COUNT_VAR + ' of ' + this.MAX_COUNT_VAR + ' results. Refine your search to show more results.'; }
+    static { this.NO_RESULTS = 'No results available'; }
 }
 
-class IqSelect2ResultsComponent {
-    constructor() {
-        this.items = [];
-        this.onItemSelected = new EventEmitter();
-        this.activeIndex = 0;
-        this.usingKeys = false;
-    }
-    ngOnInit() {
-    }
-    selectItem(item) {
-        this.onItemSelected.emit(item);
-    }
-    activeNext() {
-        if (this.activeIndex >= (this.maxResults ?? this.items.length) - 1) {
-            this.activeIndex = 0;
-        }
-        else {
-            this.activeIndex++;
-        }
-        this.scrollToElement();
-        this.usingKeys = true;
-    }
-    activePrevious() {
-        if (this.activeIndex - 1 < 0) {
-            this.activeIndex = this.items.length - 1;
-        }
-        else {
-            this.activeIndex--;
-        }
-        this.scrollToElement();
-        this.usingKeys = true;
-    }
-    scrollToElement() {
-        const element = document.getElementById('item_' + this.activeIndex);
-        if (element) {
-            this.container.nativeElement.scrollTop = element.offsetTop;
-        }
-    }
-    selectCurrentItem() {
-        if (this.items[this.activeIndex]) {
-            this.selectItem(this.items[this.activeIndex]);
-            this.activeIndex = 0;
-        }
-    }
-    onMouseOver(index) {
-        if (!this.usingKeys) {
-            this.activeIndex = index;
-        }
-    }
-    onHovering(event) {
-        this.usingKeys = false;
-    }
-    isSelected(currentItem) {
-        let result = false;
-        this.selectedItems.forEach(item => {
-            if (item.id === currentItem.id) {
-                result = true;
-            }
-        });
-        return result;
-    }
-    getCountMessage() {
-        return this.messageMoreResults.replace(Messages.VISIBLE_COUNT_VAR, String(this.maxResults))
-            .replace(Messages.MAX_COUNT_VAR, String(this.items.length + this.selectedItems.length));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2ResultsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: IqSelect2ResultsComponent, selector: "iq-select2-results", inputs: { items: "items", maxResults: "maxResults", messageMoreResults: "messageMoreResults", messageNoResults: "messageNoResults", resultsVisible: "resultsVisible", selectedItems: "selectedItems", templateRef: "templateRef" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container class=\"select2-dropdown\" [attr.data-visible]=\"resultsVisible\">\r\n  <div *ngIf=\"maxResults && items.length + selectedItems.length > maxResults\" class=\"select2-message\">\r\n    {{getCountMessage()}}\r\n  </div>\r\n\r\n  <div *ngIf=\"items.length === 0\" class=\"select2-message no-results\">\r\n    {{messageNoResults}}\r\n  </div>\r\n\r\n  <div *ngFor=\"let item of items | slice : 0 : maxResults; let i = index;\" id=\"item_{{i}}\" [attr.data-item-id]=\"item.id\" [title]=\"item.text\"\r\n       class=\"select2-dropdown-item\" [class.selected]=\"isSelected(item)\" [class.active]=\"i === activeIndex\"\r\n       (click)=\"selectItem(item)\" (mouseover)=\"onMouseOver(i)\" (mouseenter)=\"onHovering($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$item:item, $entity: item.entity, $id:item.id, $index:i}\"></ng-container>\r\n    <ng-container *ngIf=\"!templateRef\">{{item.text}}</ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--select2-color-scrollbar-track)}::-webkit-scrollbar-thumb{background-color:var(--select2-color-scrollbar-thumb);border-radius:1em;border:transparent}.select2-dropdown{position:absolute;top:100%;width:100%;z-index:100;border:1px solid var(--select2-color-border);background-color:var(--select2-color-background);padding:.1em;max-height:20vh;overflow-x:hidden;overflow-y:auto}.select2-dropdown[data-visible=false]{display:none;visibility:hidden}.select2-message{width:100%;padding:.2em}.select2-dropdown-item{width:100%;padding:.2em;cursor:pointer;overflow-wrap:break-word;word-break:break-word}.selected{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-list-selected)}.active{color:var(--select2-color-item-text);background-color:var(--select2-color-list-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2ResultsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'iq-select2-results', template: "<div #container class=\"select2-dropdown\" [attr.data-visible]=\"resultsVisible\">\r\n  <div *ngIf=\"maxResults && items.length + selectedItems.length > maxResults\" class=\"select2-message\">\r\n    {{getCountMessage()}}\r\n  </div>\r\n\r\n  <div *ngIf=\"items.length === 0\" class=\"select2-message no-results\">\r\n    {{messageNoResults}}\r\n  </div>\r\n\r\n  <div *ngFor=\"let item of items | slice : 0 : maxResults; let i = index;\" id=\"item_{{i}}\" [attr.data-item-id]=\"item.id\" [title]=\"item.text\"\r\n       class=\"select2-dropdown-item\" [class.selected]=\"isSelected(item)\" [class.active]=\"i === activeIndex\"\r\n       (click)=\"selectItem(item)\" (mouseover)=\"onMouseOver(i)\" (mouseenter)=\"onHovering($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$item:item, $entity: item.entity, $id:item.id, $index:i}\"></ng-container>\r\n    <ng-container *ngIf=\"!templateRef\">{{item.text}}</ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--select2-color-scrollbar-track)}::-webkit-scrollbar-thumb{background-color:var(--select2-color-scrollbar-thumb);border-radius:1em;border:transparent}.select2-dropdown{position:absolute;top:100%;width:100%;z-index:100;border:1px solid var(--select2-color-border);background-color:var(--select2-color-background);padding:.1em;max-height:20vh;overflow-x:hidden;overflow-y:auto}.select2-dropdown[data-visible=false]{display:none;visibility:hidden}.select2-message{width:100%;padding:.2em}.select2-dropdown-item{width:100%;padding:.2em;cursor:pointer;overflow-wrap:break-word;word-break:break-word}.selected{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-list-selected)}.active{color:var(--select2-color-item-text);background-color:var(--select2-color-list-active)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { container: [{
-                type: ViewChild,
-                args: ['container']
-            }], items: [{
-                type: Input
-            }], maxResults: [{
-                type: Input
-            }], messageMoreResults: [{
-                type: Input
-            }], messageNoResults: [{
-                type: Input
-            }], resultsVisible: [{
-                type: Input
-            }], selectedItems: [{
-                type: Input
-            }], templateRef: [{
-                type: Input
-            }], onItemSelected: [{
-                type: Output
+class IqSelect2ResultsComponent {
+    constructor() {
+        this.items = [];
+        this.onItemSelected = new EventEmitter();
+        this.activeIndex = 0;
+        this.usingKeys = false;
+    }
+    ngOnInit() {
+    }
+    selectItem(item) {
+        this.onItemSelected.emit(item);
+    }
+    activeNext() {
+        if (this.activeIndex >= (this.maxResults ?? this.items.length) - 1) {
+            this.activeIndex = 0;
+        }
+        else {
+            this.activeIndex++;
+        }
+        this.scrollToElement();
+        this.usingKeys = true;
+    }
+    activePrevious() {
+        if (this.activeIndex - 1 < 0) {
+            this.activeIndex = this.items.length - 1;
+        }
+        else {
+            this.activeIndex--;
+        }
+        this.scrollToElement();
+        this.usingKeys = true;
+    }
+    scrollToElement() {
+        const element = document.getElementById('item_' + this.activeIndex);
+        if (element) {
+            this.container.nativeElement.scrollTop = element.offsetTop;
+        }
+    }
+    selectCurrentItem() {
+        if (this.items[this.activeIndex]) {
+            this.selectItem(this.items[this.activeIndex]);
+            this.activeIndex = 0;
+        }
+    }
+    onMouseOver(index) {
+        if (!this.usingKeys) {
+            this.activeIndex = index;
+        }
+    }
+    onHovering(event) {
+        this.usingKeys = false;
+    }
+    isSelected(currentItem) {
+        let result = false;
+        this.selectedItems.forEach(item => {
+            if (item.id === currentItem.id) {
+                result = true;
+            }
+        });
+        return result;
+    }
+    getCountMessage() {
+        return this.messageMoreResults.replace(Messages.VISIBLE_COUNT_VAR, String(this.maxResults))
+            .replace(Messages.MAX_COUNT_VAR, String(this.items.length + this.selectedItems.length));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2ResultsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IqSelect2ResultsComponent, selector: "iq-select2-results", inputs: { items: "items", maxResults: "maxResults", messageMoreResults: "messageMoreResults", messageNoResults: "messageNoResults", resultsVisible: "resultsVisible", selectedItems: "selectedItems", templateRef: "templateRef" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container class=\"select2-dropdown\" [attr.data-visible]=\"resultsVisible\">\r\n  <div *ngIf=\"maxResults && items.length + selectedItems.length > maxResults\" class=\"select2-message\">\r\n    {{getCountMessage()}}\r\n  </div>\r\n\r\n  <div *ngIf=\"items.length === 0\" class=\"select2-message no-results\">\r\n    {{messageNoResults}}\r\n  </div>\r\n\r\n  <div *ngFor=\"let item of items | slice : 0 : maxResults; let i = index;\" id=\"item_{{i}}\" [attr.data-item-id]=\"item.id\" [title]=\"item.text\"\r\n       class=\"select2-dropdown-item\" [class.selected]=\"isSelected(item)\" [class.active]=\"i === activeIndex\"\r\n       (click)=\"selectItem(item)\" (mouseover)=\"onMouseOver(i)\" (mouseenter)=\"onHovering($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$item:item, $entity: item.entity, $id:item.id, $index:i}\"></ng-container>\r\n    <ng-container *ngIf=\"!templateRef\">{{item.text}}</ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--select2-color-scrollbar-track)}::-webkit-scrollbar-thumb{background-color:var(--select2-color-scrollbar-thumb);border-radius:1em;border:transparent}.select2-dropdown{position:absolute;top:100%;width:100%;z-index:100;border:1px solid var(--select2-color-border);background-color:var(--select2-color-background);padding:.1em;max-height:20vh;overflow-x:hidden;overflow-y:auto}.select2-dropdown[data-visible=false]{display:none;visibility:hidden}.select2-message{width:100%;padding:.2em}.select2-dropdown-item{width:100%;padding:.2em;cursor:pointer;overflow-wrap:break-word;word-break:break-word}.selected{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-list-selected)}.active{color:var(--select2-color-item-text);background-color:var(--select2-color-list-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2ResultsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iq-select2-results', template: "<div #container class=\"select2-dropdown\" [attr.data-visible]=\"resultsVisible\">\r\n  <div *ngIf=\"maxResults && items.length + selectedItems.length > maxResults\" class=\"select2-message\">\r\n    {{getCountMessage()}}\r\n  </div>\r\n\r\n  <div *ngIf=\"items.length === 0\" class=\"select2-message no-results\">\r\n    {{messageNoResults}}\r\n  </div>\r\n\r\n  <div *ngFor=\"let item of items | slice : 0 : maxResults; let i = index;\" id=\"item_{{i}}\" [attr.data-item-id]=\"item.id\" [title]=\"item.text\"\r\n       class=\"select2-dropdown-item\" [class.selected]=\"isSelected(item)\" [class.active]=\"i === activeIndex\"\r\n       (click)=\"selectItem(item)\" (mouseover)=\"onMouseOver(i)\" (mouseenter)=\"onHovering($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$item:item, $entity: item.entity, $id:item.id, $index:i}\"></ng-container>\r\n    <ng-container *ngIf=\"!templateRef\">{{item.text}}</ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--select2-color-scrollbar-track)}::-webkit-scrollbar-thumb{background-color:var(--select2-color-scrollbar-thumb);border-radius:1em;border:transparent}.select2-dropdown{position:absolute;top:100%;width:100%;z-index:100;border:1px solid var(--select2-color-border);background-color:var(--select2-color-background);padding:.1em;max-height:20vh;overflow-x:hidden;overflow-y:auto}.select2-dropdown[data-visible=false]{display:none;visibility:hidden}.select2-message{width:100%;padding:.2em}.select2-dropdown-item{width:100%;padding:.2em;cursor:pointer;overflow-wrap:break-word;word-break:break-word}.selected{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-list-selected)}.active{color:var(--select2-color-item-text);background-color:var(--select2-color-list-active)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container']
+            }], items: [{
+                type: Input
+            }], maxResults: [{
+                type: Input
+            }], messageMoreResults: [{
+                type: Input
+            }], messageNoResults: [{
+                type: Input
+            }], resultsVisible: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], templateRef: [{
+                type: Input
+            }], onItemSelected: [{
+                type: Output
             }] } });
 
-const KEY_CODE_DOWN_ARROW = 'ArrowDown';
-const KEY_CODE_UP_ARROW = 'ArrowUp';
-const KEY_CODE_ENTER = 'Enter';
-const KEY_CODE_ESCAPE = 'Escape';
-const KEY_CODE_DELETE = 'Delete';
-class IqSelect2Component {
-    constructor() {
-        this.referenceMode = 'id';
-        this.multiple = false;
-        this.placeholder = '';
-        this.disabled = false;
-        this.clientMode = false;
-        this.badgeColor = 'info';
-        this.wrapSelectedText = 'nowrap';
-        this.preventDeselect = false;
-        this.consecutiveMultipleSelection = this.multiple;
-        this.debounceDelay = 250;
-        this.debounceLength = 2;
-        this.iconCaret = '&#9660;';
-        this.iconDelete = '&#215;';
-        this.messageMoreResults = Messages.MORE_RESULTS;
-        this.messageNoResults = Messages.NO_RESULTS;
-        this.onSelect = new EventEmitter();
-        this.onRemove = new EventEmitter();
-        this.term = new UntypedFormControl();
-        this.resultsVisible = false;
-        this.searchFocused = false;
-        this.listData = [];
-        this.selectedItems = [];
-        this.placeholderSelected = '';
-        this.onTouchedCallback = () => false;
-        this.onChangeCallback = () => false;
-        this.handleClickOutside = event => {
-            if (!this.container.nativeElement.contains(event.target)) {
-                this.resultsVisible = false;
-                this.searchFocused = false;
-            }
-        };
-    }
-    ngAfterViewInit() {
-        this.subscribeToChangesAndLoadDataFromObservable();
-        document.addEventListener("mousedown", this.handleClickOutside);
-    }
-    ngOnDestroy() {
-        document.removeEventListener("mousedown", this.handleClickOutside);
-    }
-    writeValue(selectedValues) {
-        if (selectedValues) {
-            if (this.referenceMode === 'id') {
-                this.populateItemsFromIds(selectedValues);
-            }
-            else {
-                this.populateItemsFromEntities(selectedValues);
-            }
-        }
-        else {
-            this.placeholderSelected = '';
-            this.selectedItems = [];
-        }
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    subscribeToChangesAndLoadDataFromObservable() {
-        this.subscribeToResults(this.term.valueChanges.pipe(debounceTime(this.debounceDelay), distinctUntilChanged()));
-    }
-    subscribeToResults(observable) {
-        observable.pipe(tap(() => this.resultsVisible = false), filter((term) => term.length >= this.debounceLength), switchMap(term => this.loadDataFromObservable(term)), map(items => items.filter(item => !(this.multiple && this.alreadySelected(item)))), tap(() => this.resultsVisible = this.searchFocused)).subscribe((items) => this.listData = items);
-    }
-    loadDataFromObservable(term) {
-        return this.clientMode ? this.fetchAndFilterLocalData(term) : this.fetchData(term);
-    }
-    fetchAndFilterLocalData(term) {
-        if (!this.fullDataList) {
-            return this.fetchData('').pipe(mergeMap((items) => {
-                this.fullDataList = items;
-                return this.filterLocalData(term);
-            }));
-        }
-        else {
-            return this.filterLocalData(term);
-        }
-    }
-    filterLocalData(term) {
-        return of(this.fullDataList.filter(item => item.text.toLowerCase().includes(term.toLowerCase())));
-    }
-    fetchData(term) {
-        return this.dataSourceProvider(term, this.buildValue()).pipe(map((items) => items.map((item) => this.iqSelect2ItemAdapter(item))));
-    }
-    populateItemsFromEntities(selectedValues) {
-        if (this.multiple) {
-            this.handleMultipleWithEntities(selectedValues);
-        }
-        else {
-            const iqSelect2Item = this.iqSelect2ItemAdapter(selectedValues);
-            this.selectedItems = [iqSelect2Item];
-            this.placeholderSelected = iqSelect2Item.text;
-        }
-    }
-    handleMultipleWithEntities(selectedValues) {
-        this.selectedItems = [];
-        selectedValues.forEach((entity) => {
-            const item = this.iqSelect2ItemAdapter(entity);
-            const ids = this.getSelectedIds();
-            if (ids.indexOf(item.id) === -1) {
-                this.selectedItems.push(item);
-            }
-        });
-    }
-    populateItemsFromIds(selectedValues) {
-        if (this.multiple) {
-            this.handleMultipleWithIds(selectedValues);
-        }
-        else {
-            this.handleSingleWithId(selectedValues);
-        }
-    }
-    handleMultipleWithIds(selectedValues) {
-        if (selectedValues !== undefined && this.selectedProvider !== undefined) {
-            const uniqueIds = [];
-            selectedValues.forEach((id) => {
-                if (uniqueIds.indexOf(id) === -1) {
-                    uniqueIds.push(id);
-                }
-            });
-            this.selectedProvider(uniqueIds).subscribe((items) => {
-                this.selectedItems = items.map(this.iqSelect2ItemAdapter);
-            });
-        }
-    }
-    handleSingleWithId(id) {
-        if (id !== undefined && this.selectedProvider !== undefined) {
-            this.selectedProvider([id]).subscribe((items) => {
-                items.forEach((item) => {
-                    const iqSelect2Item = this.iqSelect2ItemAdapter(item);
-                    this.selectedItems = [iqSelect2Item];
-                    this.placeholderSelected = iqSelect2Item.text;
-                });
-            });
-        }
-    }
-    alreadySelected(item) {
-        let result = false;
-        this.selectedItems.forEach(selectedItem => {
-            if (selectedItem.id === item.id) {
-                result = true;
-            }
-        });
-        return result;
-    }
-    onItemSelected(item) {
-        if (this.multiple) {
-            this.selectedItems.push(item);
-            const index = this.listData.indexOf(item, 0);
-            if (index > -1) {
-                this.listData.splice(index, 1);
-            }
-        }
-        else {
-            this.selectedItems.length = 0;
-            this.selectedItems.push(item);
-        }
-        this.onChangeCallback(this.buildValue());
-        this.term.patchValue('', { emitEvent: false });
-        if (this.multiple) {
-            if (!this.consecutiveMultipleSelection) {
-                this.afterItemSet();
-            }
-        }
-        else if (!this.multiple) {
-            this.placeholderSelected = item.text;
-            this.afterItemSet();
-        }
-        this.onSelect.emit(item);
-    }
-    getSelectedIds() {
-        if (this.multiple) {
-            return this.selectedItems.map(item => item.id);
-        }
-        else {
-            return this.selectedItems.length === 0 ? null : this.selectedItems[0].id;
-        }
-    }
-    getEntities() {
-        if (this.multiple) {
-            return this.selectedItems.map(item => item.entity);
-        }
-        else {
-            return this.selectedItems.length === 0 ? null : this.selectedItems[0].entity;
-        }
-    }
-    removeItem(item) {
-        const index = this.selectedItems.indexOf(item, 0);
-        if (index > -1) {
-            this.selectedItems.splice(index, 1);
-        }
-        this.onChangeCallback(this.buildValue());
-        this.onRemove.emit(item);
-        if (!this.multiple) {
-            this.placeholderSelected = '';
-        }
-        this.afterItemSet();
-    }
-    afterItemSet() {
-        this.searchFocused = false;
-        this.resultsVisible = false;
-        this.termInput.nativeElement.blur();
-    }
-    buildValue() {
-        return 'id' === this.referenceMode ? this.getSelectedIds() : this.getEntities();
-    }
-    onFocus() {
-        this.searchFocused = true;
-    }
-    onBlur() {
-        this.term.patchValue('', { emitEvent: false });
-        this.onTouchedCallback();
-    }
-    focus() {
-        if (!this.disabled) {
-            this.termInput.nativeElement.focus();
-            this.resultsVisible = false;
-        }
-        this.searchFocused = !this.disabled;
-    }
-    focusAndShowResults() {
-        if (!this.disabled) {
-            this.termInput.nativeElement.focus();
-            this.subscribeToResults(of(''));
-        }
-        this.searchFocused = !this.disabled;
-    }
-    onKeyUp(event) {
-        if (this.results) {
-            if (event.key === KEY_CODE_ENTER) {
-                this.results.selectCurrentItem();
-            }
-        }
-        else {
-            if (this.debounceLength === 0) {
-                if (event.key === KEY_CODE_ENTER || event.key === KEY_CODE_DOWN_ARROW) {
-                    this.focusAndShowResults();
-                }
-            }
-        }
-    }
-    onKeyDown(event) {
-        if (event.key === KEY_CODE_ENTER) {
-            event.preventDefault();
-        }
-        if (!this.resultsVisible && event.key.includes('Arrow')) {
-            this.resultsVisible = true;
-        }
-        if (event.key === KEY_CODE_ESCAPE) {
-            this.resultsVisible = false;
-        }
-        if (event.key === KEY_CODE_DELETE) {
-            const textEntered = !this.term.value || this.term.value.length === 0;
-            if (textEntered && this.selectedItems.length > 0) {
-                this.removeItem(this.selectedItems[this.selectedItems.length - 1]);
-            }
-        }
-        if (this.results) {
-            if (event.key === KEY_CODE_DOWN_ARROW) {
-                this.results.activeNext();
-            }
-            else if (event.key === KEY_CODE_UP_ARROW) {
-                this.results.activePrevious();
-            }
-        }
-    }
-    getPlaceholder() {
-        if (this.selectedItems.length > 0) {
-            if (!this.multiple && !this.searchFocused) {
-                return '';
-            }
-            else {
-                return this.placeholderSelected;
-            }
-        }
-        return this.placeholder;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: IqSelect2Component, selector: "iq-select2", inputs: { dataSourceProvider: "dataSourceProvider", selectedProvider: "selectedProvider", iqSelect2ItemAdapter: "iqSelect2ItemAdapter", referenceMode: "referenceMode", multiple: "multiple", inputContainerClass: "inputContainerClass", placeholder: "placeholder", disabled: "disabled", maxResults: "maxResults", clientMode: "clientMode", badgeColor: "badgeColor", wrapSelectedText: "wrapSelectedText", preventDeselect: "preventDeselect", consecutiveMultipleSelection: "consecutiveMultipleSelection", debounceDelay: "debounceDelay", debounceLength: "debounceLength", iconCaret: "iconCaret", iconDelete: "iconDelete", messageMoreResults: "messageMoreResults", messageNoResults: "messageNoResults" }, outputs: { onSelect: "onSelect", onRemove: "onRemove" }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => IqSelect2Component),
-                multi: true
-            }], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "termInput", first: true, predicate: ["termInput"], descendants: true }, { propertyName: "results", first: true, predicate: ["results"], descendants: true }], ngImport: i0, template: "<div #selectContainer class=\"select2-container\">\r\n  <div\r\n    class=\"select2-inner-container\" [ngClass]=\"inputContainerClass ? inputContainerClass : ''\"\r\n    [class.simple-selection]=\"!multiple\" [class.multiple-selection]=\"multiple\" [class.readonly]=\"disabled\"\r\n    (click)=\"focusAndShowResults()\"\r\n  >\r\n    <ul class=\"select2-selection-container\">\r\n      <ng-container *ngIf=\"!multiple; then input\"></ng-container>\r\n\r\n      <li *ngFor=\"let item of selectedItems\" class=\"select2-selected\">\r\n        <span class=\"select2-selected-item\" [ngStyle]=\"{whiteSpace: wrapSelectedText}\" [title]=\"item.text\">{{item.text}}</span>\r\n        <button type=\"button\" *ngIf=\"!preventDeselect && !disabled\" class=\"select2-icon select2-remove-button\" (click)=\"removeItem(item); $event.stopPropagation()\">\r\n          <span class=\"select2-selection-remove\" [innerHTML]=\"iconDelete\"></span>\r\n        </button>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"multiple; then input\"></ng-container>\r\n\r\n      <ng-template #input>\r\n        <li *ngIf=\"!disabled\" class=\"select2-input-container\">\r\n          <input #termInput [formControl]=\"term\" type=\"text\" [placeholder]=\"getPlaceholder()\" autocomplete=\"off\"\r\n                 (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\"\r\n          />\r\n        </li>\r\n      </ng-template>\r\n    </ul>\r\n\r\n    <div *ngIf=\"(multiple || (!multiple && selectedItems.length === 0))\" class=\"select2-icon\">\r\n      <span class=\"select2-selection-caret\" [innerHTML]=\"iconCaret\"></span>\r\n    </div>\r\n  </div>\r\n\r\n  <iq-select2-results *ngIf=\"!disabled\" #results [resultsVisible]=\"resultsVisible\"\r\n    [items]=\"listData\" [selectedItems]=\"selectedItems\" [maxResults]=\"maxResults\"\r\n    [messageMoreResults]=\"messageMoreResults\" [messageNoResults]=\"messageNoResults\"\r\n    [templateRef]=\"templateRef\" (onItemSelected)=\"onItemSelected($event);\"\r\n  >\r\n  </iq-select2-results>\r\n</div>\r\n", styles: [".select2-container{position:relative;width:100%;--select2-color-background: hsl(0, 0%, 96%);--select2-color-border: hsl(0, 0%, 90%);--select2-color-disabled: hsl(220, 20%, 90%);--select2-color-focused-border: hsl(220, 100%, 80%);--select2-color-focused-shadow: hsla(220, 80%, 40%);--select2-color-scrollbar-track: hsl(0, 0%, 90%);--select2-color-scrollbar-thumb: hsl(220, 25%, 25%);--select2-color-item-text: hsl(0, 0%, 96%);--select2-color-item-background: hsl(200, 90%, 50%);--select2-color-list-active: hsl(200, 70%, 70%);--select2-color-list-selected: hsl(200, 70%, 50%)}.select2-inner-container{display:flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em}.select2-inner-container:focus-within{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-background);border-color:var(--select2-color-focused-border);outline:0;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}.simple-selection .select2-selection-container{display:grid;grid-auto-columns:100%;padding-right:.1em}.simple-selection .select2-selection-container>*{grid-area:1 / 1}.simple-selection:focus-within .select2-selected-item{opacity:0}.simple-selection .select2-selected{width:100%;padding:0}.multiple-selection .select2-selected{color:var(--select2-color-item-text);background-color:var(--select2-color-item-background);padding:.1em .4em;border-radius:.25em;max-width:100%}.select2-selection-container{width:100%;display:flex;flex-flow:row wrap;align-items:baseline;justify-content:flex-start;gap:.2em;overflow:hidden;list-style-type:none;padding:0;margin:0}.select2-selected{display:inline-flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em;padding:.25em}.select2-input-container{flex-grow:1}.select2-input-container input{background-color:transparent;border:none;outline:none;padding:0;width:100%}.select2-icon{color:inherit;font-size:1em;width:1em;height:1em;z-index:10;display:grid;place-content:center}.select2-icon:is(button){background-color:transparent;border:0;outline:0}.select2-icon:is(button):focus{border:1px solid var(--select2-color-focused-border);border-radius:50%;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}:not(.readonly)>.select2-icon{cursor:pointer}.select2-selected-item{width:100%;overflow:hidden;text-overflow:ellipsis}.readonly{background-color:var(--select2-color-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IqSelect2ResultsComponent, selector: "iq-select2-results", inputs: ["items", "maxResults", "messageMoreResults", "messageNoResults", "resultsVisible", "selectedItems", "templateRef"], outputs: ["onItemSelected"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'iq-select2', providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => IqSelect2Component),
-                            multi: true
-                        }], template: "<div #selectContainer class=\"select2-container\">\r\n  <div\r\n    class=\"select2-inner-container\" [ngClass]=\"inputContainerClass ? inputContainerClass : ''\"\r\n    [class.simple-selection]=\"!multiple\" [class.multiple-selection]=\"multiple\" [class.readonly]=\"disabled\"\r\n    (click)=\"focusAndShowResults()\"\r\n  >\r\n    <ul class=\"select2-selection-container\">\r\n      <ng-container *ngIf=\"!multiple; then input\"></ng-container>\r\n\r\n      <li *ngFor=\"let item of selectedItems\" class=\"select2-selected\">\r\n        <span class=\"select2-selected-item\" [ngStyle]=\"{whiteSpace: wrapSelectedText}\" [title]=\"item.text\">{{item.text}}</span>\r\n        <button type=\"button\" *ngIf=\"!preventDeselect && !disabled\" class=\"select2-icon select2-remove-button\" (click)=\"removeItem(item); $event.stopPropagation()\">\r\n          <span class=\"select2-selection-remove\" [innerHTML]=\"iconDelete\"></span>\r\n        </button>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"multiple; then input\"></ng-container>\r\n\r\n      <ng-template #input>\r\n        <li *ngIf=\"!disabled\" class=\"select2-input-container\">\r\n          <input #termInput [formControl]=\"term\" type=\"text\" [placeholder]=\"getPlaceholder()\" autocomplete=\"off\"\r\n                 (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\"\r\n          />\r\n        </li>\r\n      </ng-template>\r\n    </ul>\r\n\r\n    <div *ngIf=\"(multiple || (!multiple && selectedItems.length === 0))\" class=\"select2-icon\">\r\n      <span class=\"select2-selection-caret\" [innerHTML]=\"iconCaret\"></span>\r\n    </div>\r\n  </div>\r\n\r\n  <iq-select2-results *ngIf=\"!disabled\" #results [resultsVisible]=\"resultsVisible\"\r\n    [items]=\"listData\" [selectedItems]=\"selectedItems\" [maxResults]=\"maxResults\"\r\n    [messageMoreResults]=\"messageMoreResults\" [messageNoResults]=\"messageNoResults\"\r\n    [templateRef]=\"templateRef\" (onItemSelected)=\"onItemSelected($event);\"\r\n  >\r\n  </iq-select2-results>\r\n</div>\r\n", styles: [".select2-container{position:relative;width:100%;--select2-color-background: hsl(0, 0%, 96%);--select2-color-border: hsl(0, 0%, 90%);--select2-color-disabled: hsl(220, 20%, 90%);--select2-color-focused-border: hsl(220, 100%, 80%);--select2-color-focused-shadow: hsla(220, 80%, 40%);--select2-color-scrollbar-track: hsl(0, 0%, 90%);--select2-color-scrollbar-thumb: hsl(220, 25%, 25%);--select2-color-item-text: hsl(0, 0%, 96%);--select2-color-item-background: hsl(200, 90%, 50%);--select2-color-list-active: hsl(200, 70%, 70%);--select2-color-list-selected: hsl(200, 70%, 50%)}.select2-inner-container{display:flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em}.select2-inner-container:focus-within{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-background);border-color:var(--select2-color-focused-border);outline:0;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}.simple-selection .select2-selection-container{display:grid;grid-auto-columns:100%;padding-right:.1em}.simple-selection .select2-selection-container>*{grid-area:1 / 1}.simple-selection:focus-within .select2-selected-item{opacity:0}.simple-selection .select2-selected{width:100%;padding:0}.multiple-selection .select2-selected{color:var(--select2-color-item-text);background-color:var(--select2-color-item-background);padding:.1em .4em;border-radius:.25em;max-width:100%}.select2-selection-container{width:100%;display:flex;flex-flow:row wrap;align-items:baseline;justify-content:flex-start;gap:.2em;overflow:hidden;list-style-type:none;padding:0;margin:0}.select2-selected{display:inline-flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em;padding:.25em}.select2-input-container{flex-grow:1}.select2-input-container input{background-color:transparent;border:none;outline:none;padding:0;width:100%}.select2-icon{color:inherit;font-size:1em;width:1em;height:1em;z-index:10;display:grid;place-content:center}.select2-icon:is(button){background-color:transparent;border:0;outline:0}.select2-icon:is(button):focus{border:1px solid var(--select2-color-focused-border);border-radius:50%;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}:not(.readonly)>.select2-icon{cursor:pointer}.select2-selected-item{width:100%;overflow:hidden;text-overflow:ellipsis}.readonly{background-color:var(--select2-color-disabled);cursor:not-allowed}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dataSourceProvider: [{
-                type: Input
-            }], selectedProvider: [{
-                type: Input
-            }], iqSelect2ItemAdapter: [{
-                type: Input
-            }], referenceMode: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], inputContainerClass: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], maxResults: [{
-                type: Input
-            }], clientMode: [{
-                type: Input
-            }], badgeColor: [{
-                type: Input
-            }], wrapSelectedText: [{
-                type: Input
-            }], preventDeselect: [{
-                type: Input
-            }], consecutiveMultipleSelection: [{
-                type: Input
-            }], debounceDelay: [{
-                type: Input
-            }], debounceLength: [{
-                type: Input
-            }], iconCaret: [{
-                type: Input
-            }], iconDelete: [{
-                type: Input
-            }], messageMoreResults: [{
-                type: Input
-            }], messageNoResults: [{
-                type: Input
-            }], onSelect: [{
-                type: Output
-            }], onRemove: [{
-                type: Output
-            }], container: [{
-                type: ViewChild,
-                args: ['selectContainer']
-            }], termInput: [{
-                type: ViewChild,
-                args: ['termInput']
-            }], results: [{
-                type: ViewChild,
-                args: ['results']
+const KEY_CODE_DOWN_ARROW = 'ArrowDown';
+const KEY_CODE_UP_ARROW = 'ArrowUp';
+const KEY_CODE_ENTER = 'Enter';
+const KEY_CODE_ESCAPE = 'Escape';
+const KEY_CODE_DELETE = 'Delete';
+class IqSelect2Component {
+    constructor() {
+        this.referenceMode = 'id';
+        this.multiple = false;
+        this.placeholder = '';
+        this.disabled = false;
+        this.clientMode = false;
+        this.badgeColor = 'info';
+        this.wrapSelectedText = 'nowrap';
+        this.preventDeselect = false;
+        this.consecutiveMultipleSelection = this.multiple;
+        this.debounceDelay = 250;
+        this.debounceLength = 2;
+        this.iconCaret = '&#9660;';
+        this.iconDelete = '&#215;';
+        this.messageMoreResults = Messages.MORE_RESULTS;
+        this.messageNoResults = Messages.NO_RESULTS;
+        this.onSelect = new EventEmitter();
+        this.onRemove = new EventEmitter();
+        this.term = new UntypedFormControl();
+        this.resultsVisible = false;
+        this.searchFocused = false;
+        this.listData = [];
+        this.selectedItems = [];
+        this.placeholderSelected = '';
+        this.onTouchedCallback = () => false;
+        this.onChangeCallback = () => false;
+        this.handleClickOutside = event => {
+            if (!this.container.nativeElement.contains(event.target)) {
+                this.resultsVisible = false;
+                this.searchFocused = false;
+            }
+        };
+    }
+    ngAfterViewInit() {
+        this.subscribeToChangesAndLoadDataFromObservable();
+        document.addEventListener("mousedown", this.handleClickOutside);
+    }
+    ngOnDestroy() {
+        document.removeEventListener("mousedown", this.handleClickOutside);
+    }
+    writeValue(selectedValues) {
+        if (selectedValues) {
+            if (this.referenceMode === 'id') {
+                this.populateItemsFromIds(selectedValues);
+            }
+            else {
+                this.populateItemsFromEntities(selectedValues);
+            }
+        }
+        else {
+            this.placeholderSelected = '';
+            this.selectedItems = [];
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    subscribeToChangesAndLoadDataFromObservable() {
+        this.subscribeToResults(this.term.valueChanges.pipe(debounceTime(this.debounceDelay), distinctUntilChanged()));
+    }
+    subscribeToResults(observable) {
+        observable.pipe(tap(() => this.resultsVisible = false), filter((term) => term.length >= this.debounceLength), switchMap(term => this.loadDataFromObservable(term)), map(items => items.filter(item => !(this.multiple && this.alreadySelected(item)))), tap(() => this.resultsVisible = this.searchFocused)).subscribe((items) => this.listData = items);
+    }
+    loadDataFromObservable(term) {
+        return this.clientMode ? this.fetchAndFilterLocalData(term) : this.fetchData(term);
+    }
+    fetchAndFilterLocalData(term) {
+        if (!this.fullDataList) {
+            return this.fetchData('').pipe(mergeMap((items) => {
+                this.fullDataList = items;
+                return this.filterLocalData(term);
+            }));
+        }
+        else {
+            return this.filterLocalData(term);
+        }
+    }
+    filterLocalData(term) {
+        return of(this.fullDataList.filter(item => item.text.toLowerCase().includes(term.toLowerCase())));
+    }
+    fetchData(term) {
+        return this.dataSourceProvider(term, this.buildValue()).pipe(map((items) => items.map((item) => this.iqSelect2ItemAdapter(item))));
+    }
+    populateItemsFromEntities(selectedValues) {
+        if (this.multiple) {
+            this.handleMultipleWithEntities(selectedValues);
+        }
+        else {
+            const iqSelect2Item = this.iqSelect2ItemAdapter(selectedValues);
+            this.selectedItems = [iqSelect2Item];
+            this.placeholderSelected = iqSelect2Item.text;
+        }
+    }
+    handleMultipleWithEntities(selectedValues) {
+        this.selectedItems = [];
+        selectedValues.forEach((entity) => {
+            const item = this.iqSelect2ItemAdapter(entity);
+            const ids = this.getSelectedIds();
+            if (ids.indexOf(item.id) === -1) {
+                this.selectedItems.push(item);
+            }
+        });
+    }
+    populateItemsFromIds(selectedValues) {
+        if (this.multiple) {
+            this.handleMultipleWithIds(selectedValues);
+        }
+        else {
+            this.handleSingleWithId(selectedValues);
+        }
+    }
+    handleMultipleWithIds(selectedValues) {
+        if (selectedValues !== undefined && this.selectedProvider !== undefined) {
+            const uniqueIds = [];
+            selectedValues.forEach((id) => {
+                if (uniqueIds.indexOf(id) === -1) {
+                    uniqueIds.push(id);
+                }
+            });
+            this.selectedProvider(uniqueIds).subscribe((items) => {
+                this.selectedItems = items.map(this.iqSelect2ItemAdapter);
+            });
+        }
+    }
+    handleSingleWithId(id) {
+        if (id !== undefined && this.selectedProvider !== undefined) {
+            this.selectedProvider([id]).subscribe((items) => {
+                items.forEach((item) => {
+                    const iqSelect2Item = this.iqSelect2ItemAdapter(item);
+                    this.selectedItems = [iqSelect2Item];
+                    this.placeholderSelected = iqSelect2Item.text;
+                });
+            });
+        }
+    }
+    alreadySelected(item) {
+        let result = false;
+        this.selectedItems.forEach(selectedItem => {
+            if (selectedItem.id === item.id) {
+                result = true;
+            }
+        });
+        return result;
+    }
+    onItemSelected(item) {
+        if (this.multiple) {
+            this.selectedItems.push(item);
+            const index = this.listData.indexOf(item, 0);
+            if (index > -1) {
+                this.listData.splice(index, 1);
+            }
+        }
+        else {
+            this.selectedItems.length = 0;
+            this.selectedItems.push(item);
+        }
+        this.onChangeCallback(this.buildValue());
+        this.term.patchValue('', { emitEvent: false });
+        if (this.multiple) {
+            if (!this.consecutiveMultipleSelection) {
+                this.afterItemSet();
+            }
+        }
+        else if (!this.multiple) {
+            this.placeholderSelected = item.text;
+            this.afterItemSet();
+        }
+        this.onSelect.emit(item);
+    }
+    getSelectedIds() {
+        if (this.multiple) {
+            return this.selectedItems.map(item => item.id);
+        }
+        else {
+            return this.selectedItems.length === 0 ? null : this.selectedItems[0].id;
+        }
+    }
+    getEntities() {
+        if (this.multiple) {
+            return this.selectedItems.map(item => item.entity);
+        }
+        else {
+            return this.selectedItems.length === 0 ? null : this.selectedItems[0].entity;
+        }
+    }
+    removeItem(item) {
+        const index = this.selectedItems.indexOf(item, 0);
+        if (index > -1) {
+            this.selectedItems.splice(index, 1);
+        }
+        this.onChangeCallback(this.buildValue());
+        this.onRemove.emit(item);
+        if (!this.multiple) {
+            this.placeholderSelected = '';
+        }
+        this.afterItemSet();
+    }
+    afterItemSet() {
+        this.searchFocused = false;
+        this.resultsVisible = false;
+        this.termInput.nativeElement.blur();
+    }
+    buildValue() {
+        return 'id' === this.referenceMode ? this.getSelectedIds() : this.getEntities();
+    }
+    onFocus() {
+        this.searchFocused = true;
+    }
+    onBlur() {
+        this.term.patchValue('', { emitEvent: false });
+        this.onTouchedCallback();
+    }
+    focus() {
+        if (!this.disabled) {
+            this.termInput.nativeElement.focus();
+            this.resultsVisible = false;
+        }
+        this.searchFocused = !this.disabled;
+    }
+    focusAndShowResults() {
+        if (!this.disabled) {
+            this.termInput.nativeElement.focus();
+            this.subscribeToResults(of(''));
+        }
+        this.searchFocused = !this.disabled;
+    }
+    onKeyUp(event) {
+        if (this.results) {
+            if (event.key === KEY_CODE_ENTER) {
+                this.results.selectCurrentItem();
+            }
+        }
+        else {
+            if (this.debounceLength === 0) {
+                if (event.key === KEY_CODE_ENTER || event.key === KEY_CODE_DOWN_ARROW) {
+                    this.focusAndShowResults();
+                }
+            }
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === KEY_CODE_ENTER) {
+            event.preventDefault();
+        }
+        if (!this.resultsVisible && event.key.includes('Arrow')) {
+            this.resultsVisible = true;
+        }
+        if (event.key === KEY_CODE_ESCAPE) {
+            this.resultsVisible = false;
+        }
+        if (event.key === KEY_CODE_DELETE) {
+            const textEntered = !this.term.value || this.term.value.length === 0;
+            if (textEntered && this.selectedItems.length > 0) {
+                this.removeItem(this.selectedItems[this.selectedItems.length - 1]);
+            }
+        }
+        if (this.results) {
+            if (event.key === KEY_CODE_DOWN_ARROW) {
+                this.results.activeNext();
+            }
+            else if (event.key === KEY_CODE_UP_ARROW) {
+                this.results.activePrevious();
+            }
+        }
+    }
+    getPlaceholder() {
+        if (this.selectedItems.length > 0) {
+            if (!this.multiple && !this.searchFocused) {
+                return '';
+            }
+            else {
+                return this.placeholderSelected;
+            }
+        }
+        return this.placeholder;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IqSelect2Component, selector: "iq-select2", inputs: { dataSourceProvider: "dataSourceProvider", selectedProvider: "selectedProvider", iqSelect2ItemAdapter: "iqSelect2ItemAdapter", referenceMode: "referenceMode", multiple: "multiple", inputContainerClass: "inputContainerClass", placeholder: "placeholder", disabled: "disabled", maxResults: "maxResults", clientMode: "clientMode", badgeColor: "badgeColor", wrapSelectedText: "wrapSelectedText", preventDeselect: "preventDeselect", consecutiveMultipleSelection: "consecutiveMultipleSelection", debounceDelay: "debounceDelay", debounceLength: "debounceLength", iconCaret: "iconCaret", iconDelete: "iconDelete", messageMoreResults: "messageMoreResults", messageNoResults: "messageNoResults" }, outputs: { onSelect: "onSelect", onRemove: "onRemove" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => IqSelect2Component),
+                multi: true
+            }], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "termInput", first: true, predicate: ["termInput"], descendants: true }, { propertyName: "results", first: true, predicate: ["results"], descendants: true }], ngImport: i0, template: "<div #selectContainer class=\"select2-container\">\r\n  <div\r\n    class=\"select2-inner-container\" [ngClass]=\"inputContainerClass ? inputContainerClass : ''\"\r\n    [class.simple-selection]=\"!multiple\" [class.multiple-selection]=\"multiple\" [class.readonly]=\"disabled\"\r\n    (click)=\"focusAndShowResults()\"\r\n  >\r\n    <ul class=\"select2-selection-container\">\r\n      <ng-container *ngIf=\"!multiple; then input\"></ng-container>\r\n\r\n      <li *ngFor=\"let item of selectedItems\" class=\"select2-selected\">\r\n        <span class=\"select2-selected-item\" [ngStyle]=\"{whiteSpace: wrapSelectedText}\" [title]=\"item.text\">{{item.text}}</span>\r\n        <button type=\"button\" *ngIf=\"!preventDeselect && !disabled\" class=\"select2-icon select2-remove-button\" (click)=\"removeItem(item); $event.stopPropagation()\">\r\n          <span class=\"select2-selection-remove\" [innerHTML]=\"iconDelete\"></span>\r\n        </button>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"multiple; then input\"></ng-container>\r\n\r\n      <ng-template #input>\r\n        <li *ngIf=\"!disabled\" class=\"select2-input-container\">\r\n          <input #termInput [formControl]=\"term\" type=\"text\" [placeholder]=\"getPlaceholder()\" autocomplete=\"off\"\r\n                 (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\"\r\n          />\r\n        </li>\r\n      </ng-template>\r\n    </ul>\r\n\r\n    <div *ngIf=\"(multiple || (!multiple && selectedItems.length === 0))\" class=\"select2-icon\">\r\n      <span class=\"select2-selection-caret\" [innerHTML]=\"iconCaret\"></span>\r\n    </div>\r\n  </div>\r\n\r\n  <iq-select2-results *ngIf=\"!disabled\" #results [resultsVisible]=\"resultsVisible\"\r\n    [items]=\"listData\" [selectedItems]=\"selectedItems\" [maxResults]=\"maxResults\"\r\n    [messageMoreResults]=\"messageMoreResults\" [messageNoResults]=\"messageNoResults\"\r\n    [templateRef]=\"templateRef\" (onItemSelected)=\"onItemSelected($event);\"\r\n  >\r\n  </iq-select2-results>\r\n</div>\r\n", styles: [".select2-container{position:relative;width:100%;--select2-color-background: hsl(0, 0%, 96%);--select2-color-border: hsl(0, 0%, 90%);--select2-color-disabled: hsl(220, 20%, 90%);--select2-color-focused-border: hsl(220, 100%, 80%);--select2-color-focused-shadow: hsla(220, 80%, 40%);--select2-color-scrollbar-track: hsl(0, 0%, 90%);--select2-color-scrollbar-thumb: hsl(220, 25%, 25%);--select2-color-item-text: hsl(0, 0%, 96%);--select2-color-item-background: hsl(200, 90%, 50%);--select2-color-list-active: hsl(200, 70%, 70%);--select2-color-list-selected: hsl(200, 70%, 50%)}.select2-inner-container{display:flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em;&:focus-within{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-background);border-color:var(--select2-color-focused-border);outline:0;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}}.simple-selection{.select2-selection-container{display:grid;grid-auto-columns:100%;padding-right:.1em;>*{grid-area:1 / 1}}&:focus-within{.select2-selected-item{opacity:0}}.select2-selected{width:100%;padding:0}}.multiple-selection{.select2-selected{color:var(--select2-color-item-text);background-color:var(--select2-color-item-background);padding:.1em .4em;border-radius:.25em;max-width:100%}}.select2-selection-container{width:100%;display:flex;flex-flow:row wrap;align-items:baseline;justify-content:flex-start;gap:.2em;overflow:hidden;list-style-type:none;padding:0;margin:0}.select2-selected{display:inline-flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em;padding:.25em}.select2-input-container{flex-grow:1;& input{background-color:transparent;border:none;outline:none;padding:0;width:100%}}.select2-icon{color:inherit;font-size:1em;width:1em;height:1em;z-index:10;display:grid;place-content:center;&:is(button){background-color:transparent;border:0;outline:0;&:focus{border:1px solid var(--select2-color-focused-border);border-radius:50%;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}}}:not(.readonly)>.select2-icon{cursor:pointer}.select2-selected-item{width:100%;overflow:hidden;text-overflow:ellipsis}.readonly{background-color:var(--select2-color-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IqSelect2ResultsComponent, selector: "iq-select2-results", inputs: ["items", "maxResults", "messageMoreResults", "messageNoResults", "resultsVisible", "selectedItems", "templateRef"], outputs: ["onItemSelected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'iq-select2', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => IqSelect2Component),
+                            multi: true
+                        }], template: "<div #selectContainer class=\"select2-container\">\r\n  <div\r\n    class=\"select2-inner-container\" [ngClass]=\"inputContainerClass ? inputContainerClass : ''\"\r\n    [class.simple-selection]=\"!multiple\" [class.multiple-selection]=\"multiple\" [class.readonly]=\"disabled\"\r\n    (click)=\"focusAndShowResults()\"\r\n  >\r\n    <ul class=\"select2-selection-container\">\r\n      <ng-container *ngIf=\"!multiple; then input\"></ng-container>\r\n\r\n      <li *ngFor=\"let item of selectedItems\" class=\"select2-selected\">\r\n        <span class=\"select2-selected-item\" [ngStyle]=\"{whiteSpace: wrapSelectedText}\" [title]=\"item.text\">{{item.text}}</span>\r\n        <button type=\"button\" *ngIf=\"!preventDeselect && !disabled\" class=\"select2-icon select2-remove-button\" (click)=\"removeItem(item); $event.stopPropagation()\">\r\n          <span class=\"select2-selection-remove\" [innerHTML]=\"iconDelete\"></span>\r\n        </button>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"multiple; then input\"></ng-container>\r\n\r\n      <ng-template #input>\r\n        <li *ngIf=\"!disabled\" class=\"select2-input-container\">\r\n          <input #termInput [formControl]=\"term\" type=\"text\" [placeholder]=\"getPlaceholder()\" autocomplete=\"off\"\r\n                 (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\"\r\n          />\r\n        </li>\r\n      </ng-template>\r\n    </ul>\r\n\r\n    <div *ngIf=\"(multiple || (!multiple && selectedItems.length === 0))\" class=\"select2-icon\">\r\n      <span class=\"select2-selection-caret\" [innerHTML]=\"iconCaret\"></span>\r\n    </div>\r\n  </div>\r\n\r\n  <iq-select2-results *ngIf=\"!disabled\" #results [resultsVisible]=\"resultsVisible\"\r\n    [items]=\"listData\" [selectedItems]=\"selectedItems\" [maxResults]=\"maxResults\"\r\n    [messageMoreResults]=\"messageMoreResults\" [messageNoResults]=\"messageNoResults\"\r\n    [templateRef]=\"templateRef\" (onItemSelected)=\"onItemSelected($event);\"\r\n  >\r\n  </iq-select2-results>\r\n</div>\r\n", styles: [".select2-container{position:relative;width:100%;--select2-color-background: hsl(0, 0%, 96%);--select2-color-border: hsl(0, 0%, 90%);--select2-color-disabled: hsl(220, 20%, 90%);--select2-color-focused-border: hsl(220, 100%, 80%);--select2-color-focused-shadow: hsla(220, 80%, 40%);--select2-color-scrollbar-track: hsl(0, 0%, 90%);--select2-color-scrollbar-thumb: hsl(220, 25%, 25%);--select2-color-item-text: hsl(0, 0%, 96%);--select2-color-item-background: hsl(200, 90%, 50%);--select2-color-list-active: hsl(200, 70%, 70%);--select2-color-list-selected: hsl(200, 70%, 50%)}.select2-inner-container{display:flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em;&:focus-within{color:invert(var(--select2-color-item-text));background-color:var(--select2-color-background);border-color:var(--select2-color-focused-border);outline:0;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}}.simple-selection{.select2-selection-container{display:grid;grid-auto-columns:100%;padding-right:.1em;>*{grid-area:1 / 1}}&:focus-within{.select2-selected-item{opacity:0}}.select2-selected{width:100%;padding:0}}.multiple-selection{.select2-selected{color:var(--select2-color-item-text);background-color:var(--select2-color-item-background);padding:.1em .4em;border-radius:.25em;max-width:100%}}.select2-selection-container{width:100%;display:flex;flex-flow:row wrap;align-items:baseline;justify-content:flex-start;gap:.2em;overflow:hidden;list-style-type:none;padding:0;margin:0}.select2-selected{display:inline-flex;flex-flow:row nowrap;align-items:baseline;justify-content:space-between;gap:.2em;padding:.25em}.select2-input-container{flex-grow:1;& input{background-color:transparent;border:none;outline:none;padding:0;width:100%}}.select2-icon{color:inherit;font-size:1em;width:1em;height:1em;z-index:10;display:grid;place-content:center;&:is(button){background-color:transparent;border:0;outline:0;&:focus{border:1px solid var(--select2-color-focused-border);border-radius:50%;box-shadow:0 0 0 .1rem var(--select2-color-focused-shadow)}}}:not(.readonly)>.select2-icon{cursor:pointer}.select2-selected-item{width:100%;overflow:hidden;text-overflow:ellipsis}.readonly{background-color:var(--select2-color-disabled);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataSourceProvider: [{
+                type: Input
+            }], selectedProvider: [{
+                type: Input
+            }], iqSelect2ItemAdapter: [{
+                type: Input
+            }], referenceMode: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], inputContainerClass: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxResults: [{
+                type: Input
+            }], clientMode: [{
+                type: Input
+            }], badgeColor: [{
+                type: Input
+            }], wrapSelectedText: [{
+                type: Input
+            }], preventDeselect: [{
+                type: Input
+            }], consecutiveMultipleSelection: [{
+                type: Input
+            }], debounceDelay: [{
+                type: Input
+            }], debounceLength: [{
+                type: Input
+            }], iconCaret: [{
+                type: Input
+            }], iconDelete: [{
+                type: Input
+            }], messageMoreResults: [{
+                type: Input
+            }], messageNoResults: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }], onRemove: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: ['selectContainer']
+            }], termInput: [{
+                type: ViewChild,
+                args: ['termInput']
+            }], results: [{
+                type: ViewChild,
+                args: ['results']
             }] } });
 
-/**
- * @author:msms
- * 11-Jun-17
- */
-class IqSelect2TemplateDirective {
-    constructor(templateRef, host) {
-        this.templateRef = templateRef;
-        if (host instanceof IqSelect2Component) {
-            host.templateRef = templateRef;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2TemplateDirective, deps: [{ token: i0.TemplateRef }, { token: IqSelect2Component, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: IqSelect2TemplateDirective, selector: "[iq-select2-template]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2TemplateDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[iq-select2-template]' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: IqSelect2Component, decorators: [{
-                    type: Host
-                }] }]; } });
+/**
+ * @author:msms
+ * 11-Jun-17
+ */
+class IqSelect2TemplateDirective {
+    constructor(templateRef, host) {
+        this.templateRef = templateRef;
+        if (host instanceof IqSelect2Component) {
+            host.templateRef = templateRef;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2TemplateDirective, deps: [{ token: i0.TemplateRef }, { token: IqSelect2Component, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: IqSelect2TemplateDirective, selector: "[iq-select2-template]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2TemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[iq-select2-template]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: IqSelect2Component, decorators: [{
+                    type: Host
+                }] }] });
 
-class IqSelect2Module {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2Module, declarations: [IqSelect2Component,
-            IqSelect2ResultsComponent,
-            IqSelect2TemplateDirective], imports: [CommonModule,
-            FormsModule,
-            HttpClientModule,
-            ReactiveFormsModule], exports: [IqSelect2Component,
-            IqSelect2ResultsComponent,
-            IqSelect2TemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2Module, imports: [CommonModule,
-            FormsModule,
-            HttpClientModule,
-            ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: IqSelect2Module, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        HttpClientModule,
-                        ReactiveFormsModule
-                    ],
-                    declarations: [
-                        IqSelect2Component,
-                        IqSelect2ResultsComponent,
-                        IqSelect2TemplateDirective
-                    ],
-                    exports: [
-                        IqSelect2Component,
-                        IqSelect2ResultsComponent,
-                        IqSelect2TemplateDirective
-                    ]
-                }]
+class IqSelect2Module {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2Module, declarations: [IqSelect2Component,
+            IqSelect2ResultsComponent,
+            IqSelect2TemplateDirective], imports: [CommonModule,
+            FormsModule,
+            HttpClientModule,
+            ReactiveFormsModule], exports: [IqSelect2Component,
+            IqSelect2ResultsComponent,
+            IqSelect2TemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2Module, imports: [CommonModule,
+            FormsModule,
+            HttpClientModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IqSelect2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        HttpClientModule,
+                        ReactiveFormsModule
+                    ],
+                    declarations: [
+                        IqSelect2Component,
+                        IqSelect2ResultsComponent,
+                        IqSelect2TemplateDirective
+                    ],
+                    exports: [
+                        IqSelect2Component,
+                        IqSelect2ResultsComponent,
+                        IqSelect2TemplateDirective
+                    ]
+                }]
         }] });
 
-/*
- * Public API Surface of ng2-iq-select2
+/*
+ * Public API Surface of ng2-iq-select2
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { IqSelect2Component, IqSelect2Module, IqSelect2ResultsComponent, IqSelect2TemplateDirective };