import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
import { Color } from '@mintplayer/ng-bootstrap';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@mintplayer/ng-bootstrap/dropdown";
import * as i4 from "@mintplayer/ng-bootstrap/has-overlay";
import * as i5 from "@mintplayer/ng-bootstrap/toggle-button";
import * as i6 from "@mintplayer/ng-bootstrap/button-type";
export class BsMultiselectComponent {
    constructor() {
        this.colors = Color;
        this.items = [];
        this.selectedItems = [];
    }
    // itemChange(item: any, ev: Event) {
    itemChange(item, value) {
        // const value = (<any>ev.target).checked;
        if (value) {
            this.selectedItems.push(item);
        }
        else {
            this.selectedItems.splice(this.selectedItems.findIndex((i) => i === item), 1);
        }
    }
}
BsMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BsMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BsMultiselectComponent, selector: "bs-multiselect", inputs: { items: "items", selectedItems: "selectedItems" }, viewQueries: [{ propertyName: "defaultButtonTemplate", first: true, predicate: ["defaultButtonTemplate"], descendants: true }], ngImport: i0, template: "<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle [color]=\"colors.primary\">\n        <ng-container *ngTemplateOutlet=\"buttonTemplate ?? defaultButtonTemplate; context: { $implicit: selectedItems.length }\"></ng-container>\n    </button>\n    <div *bsDropdownMenu class=\"bg-white mw-250px p-3 border rounded shadow\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        <hr class=\"my-2\" *ngIf=\"headerTemplate\">\n        <bs-toggle-button *ngFor=\"let item of items\" [ngModel]=\"selectedItems.indexOf(item) > -1\" (ngModelChange)=\"itemChange(item, $event)\" class=\"d-block\">{{ item }}</bs-toggle-button>\n        <hr class=\"my-2\" *ngIf=\"footerTemplate\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n<ng-template #defaultButtonTemplate let-count>\n    {{ count }} selected\n</ng-template>", styles: [".mw-250px{min-width:250px}\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: "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.BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { kind: "component", type: i4.BsHasOverlayComponent, selector: "bs-has-overlay" }, { kind: "component", type: i5.BsToggleButtonComponent, selector: "bs-toggle-button", inputs: ["type", "isToggled", "disabled", "name", "value", "group"], outputs: ["isToggledChange"] }, { kind: "directive", type: i5.BsToggleButtonValueAccessor, selector: "bs-toggle-button" }, { kind: "directive", type: i6.BsButtonTypeDirective, selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color]", inputs: ["color"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsMultiselectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'bs-multiselect', template: "<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle [color]=\"colors.primary\">\n        <ng-container *ngTemplateOutlet=\"buttonTemplate ?? defaultButtonTemplate; context: { $implicit: selectedItems.length }\"></ng-container>\n    </button>\n    <div *bsDropdownMenu class=\"bg-white mw-250px p-3 border rounded shadow\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        <hr class=\"my-2\" *ngIf=\"headerTemplate\">\n        <bs-toggle-button *ngFor=\"let item of items\" [ngModel]=\"selectedItems.indexOf(item) > -1\" (ngModelChange)=\"itemChange(item, $event)\" class=\"d-block\">{{ item }}</bs-toggle-button>\n        <hr class=\"my-2\" *ngIf=\"footerTemplate\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n<ng-template #defaultButtonTemplate let-count>\n    {{ count }} selected\n</ng-template>", styles: [".mw-250px{min-width:250px}\n"] }]
        }], propDecorators: { items: [{
                type: Input
            }], selectedItems: [{
                type: Input
            }], defaultButtonTemplate: [{
                type: ViewChild,
                args: ['defaultButtonTemplate']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGlzZWxlY3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9taW50cGxheWVyLW5nLWJvb3RzdHJhcC9tdWx0aXNlbGVjdC9zcmMvY29tcG9uZW50L211bHRpc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbWludHBsYXllci1uZy1ib290c3RyYXAvbXVsdGlzZWxlY3Qvc3JjL2NvbXBvbmVudC9tdWx0aXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7Ozs7Ozs7QUFPakQsTUFBTSxPQUFPLHNCQUFzQjtJQUxuQztRQVVFLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFHQyxVQUFLLEdBQVUsRUFBRSxDQUFDO1FBQ2xCLGtCQUFhLEdBQVUsRUFBRSxDQUFDO0tBYTNDO0lBVkMscUNBQXFDO0lBQ3JDLFVBQVUsQ0FBQyxJQUFTLEVBQUUsS0FBcUI7UUFDekMsMENBQTBDO1FBQzFDLElBQUksS0FBSyxFQUFFO1lBQ1QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDL0I7YUFBTTtZQUNMLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7U0FDL0U7SUFDSCxDQUFDOzttSEFwQlUsc0JBQXNCO3VHQUF0QixzQkFBc0Isa1BDUm5DLDg4QkFlYzsyRkRQRCxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsZ0JBQWdCOzhCQVlWLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFDOEIscUJBQXFCO3NCQUF4RCxTQUFTO3VCQUFDLHVCQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbG9yIH0gZnJvbSAnQG1pbnRwbGF5ZXIvbmctYm9vdHN0cmFwJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYnMtbXVsdGlzZWxlY3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vbXVsdGlzZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tdWx0aXNlbGVjdC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEJzTXVsdGlzZWxlY3RDb21wb25lbnQge1xuXG4gIGhlYWRlclRlbXBsYXRlITogVGVtcGxhdGVSZWY8YW55PjtcbiAgZm9vdGVyVGVtcGxhdGUhOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBidXR0b25UZW1wbGF0ZSE6IFRlbXBsYXRlUmVmPGFueT47XG4gIGNvbG9ycyA9IENvbG9yO1xuXG5cbiAgQElucHV0KCkgcHVibGljIGl0ZW1zOiBhbnlbXSA9IFtdO1xuICBASW5wdXQoKSBwdWJsaWMgc2VsZWN0ZWRJdGVtczogYW55W10gPSBbXTtcbiAgQFZpZXdDaGlsZCgnZGVmYXVsdEJ1dHRvblRlbXBsYXRlJykgZGVmYXVsdEJ1dHRvblRlbXBsYXRlITogVGVtcGxhdGVSZWY8YW55PjtcblxuICAvLyBpdGVtQ2hhbmdlKGl0ZW06IGFueSwgZXY6IEV2ZW50KSB7XG4gIGl0ZW1DaGFuZ2UoaXRlbTogYW55LCB2YWx1ZTogYm9vbGVhbiB8IG51bGwpIHtcbiAgICAvLyBjb25zdCB2YWx1ZSA9ICg8YW55PmV2LnRhcmdldCkuY2hlY2tlZDtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtcy5wdXNoKGl0ZW0pO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbXMuc3BsaWNlKHRoaXMuc2VsZWN0ZWRJdGVtcy5maW5kSW5kZXgoKGkpID0+IGkgPT09IGl0ZW0pLCAxKTtcbiAgICB9XG4gIH1cbiAgXG59XG4iLCI8YnMtaGFzLW92ZXJsYXk+PC9icy1oYXMtb3ZlcmxheT5cbjxkaXYgYnNEcm9wZG93biBbaGFzQmFja2Ryb3BdPVwidHJ1ZVwiIFtjbG9zZU9uQ2xpY2tPdXRzaWRlXT1cInRydWVcIj5cbiAgICA8YnV0dG9uIGJzRHJvcGRvd25Ub2dnbGUgW2NvbG9yXT1cImNvbG9ycy5wcmltYXJ5XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJidXR0b25UZW1wbGF0ZSA/PyBkZWZhdWx0QnV0dG9uVGVtcGxhdGU7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBzZWxlY3RlZEl0ZW1zLmxlbmd0aCB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9idXR0b24+XG4gICAgPGRpdiAqYnNEcm9wZG93bk1lbnUgY2xhc3M9XCJiZy13aGl0ZSBtdy0yNTBweCBwLTMgYm9yZGVyIHJvdW5kZWQgc2hhZG93XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJoZWFkZXJUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8aHIgY2xhc3M9XCJteS0yXCIgKm5nSWY9XCJoZWFkZXJUZW1wbGF0ZVwiPlxuICAgICAgICA8YnMtdG9nZ2xlLWJ1dHRvbiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtc1wiIFtuZ01vZGVsXT1cInNlbGVjdGVkSXRlbXMuaW5kZXhPZihpdGVtKSA+IC0xXCIgKG5nTW9kZWxDaGFuZ2UpPVwiaXRlbUNoYW5nZShpdGVtLCAkZXZlbnQpXCIgY2xhc3M9XCJkLWJsb2NrXCI+e3sgaXRlbSB9fTwvYnMtdG9nZ2xlLWJ1dHRvbj5cbiAgICAgICAgPGhyIGNsYXNzPVwibXktMlwiICpuZ0lmPVwiZm9vdGVyVGVtcGxhdGVcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImZvb3RlclRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG48L2Rpdj5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdEJ1dHRvblRlbXBsYXRlIGxldC1jb3VudD5cbiAgICB7eyBjb3VudCB9fSBzZWxlY3RlZFxuPC9uZy10ZW1wbGF0ZT4iXX0=