import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, HostBinding, HostListener, Directive, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from '@mintplayer/ng-bootstrap/dropdown';
import { BsDropdownModule } from '@mintplayer/ng-bootstrap/dropdown';
import * as i4 from '@mintplayer/ng-bootstrap/has-overlay';
import { BsHasOverlayModule } from '@mintplayer/ng-bootstrap/has-overlay';
import * as i5 from '@mintplayer/ng-bootstrap/dropdown-menu';
import { BsDropdownMenuModule } from '@mintplayer/ng-bootstrap/dropdown-menu';
import * as i6 from '@mintplayer/ng-bootstrap';
import { BsInListModule } from '@mintplayer/ng-bootstrap';

class BsSelect2Component {
    constructor() {
        this.isOpen = false;
        this.suggestions$ = new BehaviorSubject([]);
        this.isLoading$ = new BehaviorSubject(false);
        this.searchterm = '';
        this.suggestions = [];
        this.provideSuggestions = new EventEmitter();
        this.selectedItems = [];
        this.isFocused = false;
        this.charWidth = 10;
        this.searchWidth = 20;
    }
    onProvideSuggestions(value) {
        this.searchWidth = this.charWidth * (this.searchterm.length + 2);
        if (value === '') {
            this.isOpen = false;
            this.suggestions$.next([]);
        }
        else {
            this.isLoading$.next(true);
            this.isOpen = true;
            this.provideSuggestions.emit(value);
        }
    }
    onSuggestionClicked(suggestion) {
        this.searchterm = '';
        this.isOpen = false;
        const existing = this.selectedItems.find((value, index) => value.id === suggestion.id);
        if (existing === undefined) {
            this.selectedItems.push(suggestion);
        }
        else {
            this.selectedItems.splice(this.selectedItems.indexOf(existing), 1);
        }
        this.searchBox.nativeElement.focus();
    }
    onRemoveItem(item, event) {
        event.stopPropagation();
        this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
        this.focus();
    }
    focus() {
        this.searchBox.nativeElement.focus();
    }
}
BsSelect2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSelect2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
BsSelect2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BsSelect2Component, selector: "bs-select2", inputs: { searchterm: "searchterm", suggestions: "suggestions", selectedItems: "selectedItems" }, outputs: { provideSuggestions: "provideSuggestions" }, host: { listeners: { "click": "focus()" }, properties: { "class.focus": "this.isFocused" } }, viewQueries: [{ propertyName: "defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "itemsBox", first: true, predicate: ["itemsBox"], descendants: true }], ngImport: i0, template: "<!-- <bs-dropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" #itemsBox class=\"items-box text-wrap\"></bs-dropdown> -->\n<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" #itemsBox class=\"items-box text-wrap\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }\"></ng-container>\n    </ng-container>\n\n    <input type=\"text\" autocomplete=\"off\"\n        [(ngModel)]=\"searchterm\"\n        (ngModelChange)=\"onProvideSuggestions($event)\"\n        (focus)=\"isFocused=true\"\n        (blur)=\"isFocused=false\"\n        [style.width.px]=\"searchWidth\"\n        #searchBox />\n    <bs-dropdown-menu *bsDropdownMenu [maxHeight]=\"200\">\n        <bs-dropdown-item *ngFor=\"let suggestion of suggestions\" (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItems | inList:suggestion.id\">\n            {{ suggestion.text }}\n        </bs-dropdown-item>\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-select2=\"select2\">\n    <span class=\"select2-item\">\n        <span (click)=\"select2.onRemoveItem(item,$event)\">\u00D7</span>\n        {{ item.text }}\n    </span>\n</ng-template>\n", styles: [".items-box{min-height:38px;padding:0 5px 3px;cursor:text;border:1px solid #ccc}.items-box .select2-item{display:inline-block;background-color:#e4e4e4;color:#1a1a1a;border:1px solid #aaa;border-radius:4px;margin-top:5px;margin-right:5px;padding:0 5px;cursor:default;user-select:none;-webkit-user-select:none}.items-box .select2-item>span{cursor:pointer;color:#999}.items-box .select2-item>span:hover{color:#333}.items-box input{border:none;outline:0;margin:5px 0 2px;background:none}:host{display:block;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host.focus{color:#495057;background-color:#fff;border-color:#80bdff!important;outline:0;box-shadow:0 0 0 .2rem #007bff40}ul{max-height:200px;overflow-y:auto}ul>li{padding:10px;cursor:pointer}ul>li.selected{background:#ddd}ul>li:hover{color:#fff;background-color:#5897fb}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "sameDropdownWidth", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { kind: "component", type: i4.BsHasOverlayComponent, selector: "bs-has-overlay" }, { kind: "component", type: i5.BsDropdownMenuComponent, selector: "bs-dropdown-menu", inputs: ["maxHeight"] }, { kind: "component", type: i5.BsDropdownItemComponent, selector: "bs-dropdown-item", inputs: ["isSelected", "disabled"] }, { kind: "pipe", type: i6.BsInListPipe, name: "inList" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSelect2Component, decorators: [{
            type: Component,
            args: [{ selector: 'bs-select2', template: "<!-- <bs-dropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" #itemsBox class=\"items-box text-wrap\"></bs-dropdown> -->\n<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" #itemsBox class=\"items-box text-wrap\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }\"></ng-container>\n    </ng-container>\n\n    <input type=\"text\" autocomplete=\"off\"\n        [(ngModel)]=\"searchterm\"\n        (ngModelChange)=\"onProvideSuggestions($event)\"\n        (focus)=\"isFocused=true\"\n        (blur)=\"isFocused=false\"\n        [style.width.px]=\"searchWidth\"\n        #searchBox />\n    <bs-dropdown-menu *bsDropdownMenu [maxHeight]=\"200\">\n        <bs-dropdown-item *ngFor=\"let suggestion of suggestions\" (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItems | inList:suggestion.id\">\n            {{ suggestion.text }}\n        </bs-dropdown-item>\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-select2=\"select2\">\n    <span class=\"select2-item\">\n        <span (click)=\"select2.onRemoveItem(item,$event)\">\u00D7</span>\n        {{ item.text }}\n    </span>\n</ng-template>\n", styles: [".items-box{min-height:38px;padding:0 5px 3px;cursor:text;border:1px solid #ccc}.items-box .select2-item{display:inline-block;background-color:#e4e4e4;color:#1a1a1a;border:1px solid #aaa;border-radius:4px;margin-top:5px;margin-right:5px;padding:0 5px;cursor:default;user-select:none;-webkit-user-select:none}.items-box .select2-item>span{cursor:pointer;color:#999}.items-box .select2-item>span:hover{color:#333}.items-box input{border:none;outline:0;margin:5px 0 2px;background:none}:host{display:block;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host.focus{color:#495057;background-color:#fff;border-color:#80bdff!important;outline:0;box-shadow:0 0 0 .2rem #007bff40}ul{max-height:200px;overflow-y:auto}ul>li{padding:10px;cursor:pointer}ul>li.selected{background:#ddd}ul>li:hover{color:#fff;background-color:#5897fb}\n"] }]
        }], propDecorators: { defaultItemTemplate: [{
                type: ViewChild,
                args: ['defaultItemTemplate', { static: true }]
            }], searchBox: [{
                type: ViewChild,
                args: ['searchBox']
            }], itemsBox: [{
                type: ViewChild,
                args: ['itemsBox']
            }], searchterm: [{
                type: Input
            }], suggestions: [{
                type: Input
            }], provideSuggestions: [{
                type: Output
            }], selectedItems: [{
                type: Input
            }], isFocused: [{
                type: HostBinding,
                args: ['class.focus']
            }], focus: [{
                type: HostListener,
                args: ['click']
            }] } });

class BsItemTemplateDirective {
    constructor(select2component, templateRef) {
        this.select2component = select2component;
        this.select2component.itemTemplate = templateRef;
    }
}
BsItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsItemTemplateDirective, deps: [{ token: BsSelect2Component }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
BsItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: BsItemTemplateDirective, selector: "[bsItemTemplate]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsItemTemplateDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[bsItemTemplate]'
                }]
        }], ctorParameters: function () { return [{ type: BsSelect2Component }, { type: i0.TemplateRef }]; } });

class BsSelect2Module {
}
BsSelect2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSelect2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BsSelect2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: BsSelect2Module, declarations: [BsSelect2Component,
        BsItemTemplateDirective], imports: [CommonModule,
        FormsModule,
        BsDropdownModule,
        BsDropdownMenuModule,
        BsHasOverlayModule,
        BsInListModule], exports: [BsSelect2Component,
        BsItemTemplateDirective] });
BsSelect2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSelect2Module, imports: [CommonModule,
        FormsModule,
        BsDropdownModule,
        BsDropdownMenuModule,
        BsHasOverlayModule,
        BsInListModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSelect2Module, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        BsSelect2Component,
                        BsItemTemplateDirective
                    ],
                    imports: [
                        CommonModule,
                        FormsModule,
                        BsDropdownModule,
                        BsDropdownMenuModule,
                        BsHasOverlayModule,
                        BsInListModule
                    ],
                    exports: [
                        BsSelect2Component,
                        BsItemTemplateDirective
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { BsItemTemplateDirective, BsSelect2Component, BsSelect2Module };
//# sourceMappingURL=mintplayer-ng-bootstrap-select2.mjs.map
