@mintplayer/ng-bootstrap 13.1.6 → 13.1.7

package/fesm2020/mintplayer-ng-bootstrap.mjs

@@ -1,15 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, Injectable, Pipe, Directive, ContentChildren, EventEmitter, Output, ViewChild, Optional, forwardRef, SkipSelf, Host, Inject, TemplateRef, ContentChild, HostListener } from '@angular/core';
+import { Component, Input, NgModule, Injectable, Pipe, EventEmitter, Output, Directive, ContentChildren, ViewChild, Optional, forwardRef, SkipSelf, Host, Inject, TemplateRef, ContentChild, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { SlideUpDownAnimation, FadeInOutAnimation, CarouselSlideAnimation } from '@mintplayer/ng-animations';
-import { Subject, BehaviorSubject, Observable, combineLatest, takeUntil as takeUntil$1, map as map$1 } from 'rxjs';
-import { map, takeUntil, take } from 'rxjs/operators';
+import { Subject, BehaviorSubject, map, takeUntil, filter, take, Observable, combineLatest } from 'rxjs';
+import { map as map$1, takeUntil as takeUntil$1, take as take$1 } from 'rxjs/operators';
 import '@mintplayer/ng-pagination';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@mintplayer/ng-click-outside';
 import { ClickOutsideModule } from '@mintplayer/ng-click-outside';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i1$2 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 
 var Color;
 (function (Color) {
@@ -229,7 +232,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class MonthNamePipe {
     transform(date, ...args) {
-        return date.toLocaleString("default", { month: 'long' });
+        if (date) {
+            return date.toLocaleString("default", { month: 'long' });
+        }
+        else {
+            return '';
+        }
     }
 }
 MonthNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -242,58 +250,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class BsCalendarComponent {
-    constructor(calendarMonthService) {
+    constructor(calendarMonthService, ref) {
         this.calendarMonthService = calendarMonthService;
-        this.daysOfWeek = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+        this.ref = ref;
+        this.destroyed$ = new Subject();
+        //#region CurrentMonth
+        this.currentMonth$ = new BehaviorSubject(new Date());
+        this.currentMonthChange = new EventEmitter();
+        //#endregion
         //#region SelectedDate
-        this.selectedDate = new Date();
+        this.selectedDate$ = new BehaviorSubject(new Date());
+        this.selectedDateChange = new EventEmitter();
         //#endregion
-        //#region Weeks
-        this._weeks = [];
+        this.daysOfWeek = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+        this.weeks$ = this.currentMonth$
+            .pipe(map((month) => this.calendarMonthService.getWeeks(month)))
+            .pipe(takeUntil(this.destroyed$));
+        this.daysOfWeek$ = this.weeks$
+            .pipe(filter((weeks) => weeks.length > 1))
+            .pipe(map((weeks) => weeks[1].week))
+            .pipe(map((week) => {
+            const firstDay = week[0];
+            if (firstDay) {
+                return week.map((d) => {
+                    const date = new Date(firstDay.date.getFullYear(), firstDay.date.getMonth(), d?.dayOfMonth);
+                    return date.toLocaleString('default', { weekday: 'short' });
+                });
+            }
+            else {
+                return [];
+            }
+        }));
+        this.selectedDate$.pipe(takeUntil(this.destroyed$)).subscribe((date) => {
+            this.selectedDateChange.emit(date);
+        });
+        this.currentMonth$.pipe(takeUntil(this.destroyed$)).subscribe((month) => {
+            this.currentMonthChange.emit(month);
+        });
     }
-    ngOnInit() {
-        this.month = new Date();
+    get currentMonth() {
+        return this.currentMonth$.value;
     }
-    get month() {
-        return this._month;
+    set currentMonth(value) {
+        this.currentMonth$.next(value);
     }
-    set month(value) {
-        this._month = value;
-        this.weeks = this.calendarMonthService.getWeeks(this.month);
+    get selectedDate() {
+        return this.selectedDate$.value;
     }
-    get weeks() {
-        return this._weeks;
+    set selectedDate(value) {
+        this.selectedDate$.next(value);
     }
-    set weeks(value) {
-        this._weeks = value;
-        if (this._weeks.length > 1) {
-            this.daysOfWeek = this._weeks[1].week.map(d => {
-                let date = new Date(this.month.getFullYear(), this.month.getMonth(), d?.dayOfMonth);
-                return date.toLocaleString("default", { weekday: 'short' });
-            });
-        }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
     }
-    //#endregion
     previousMonth() {
-        this.month = new Date(this.month.getFullYear(), this.month.getMonth() - 1, 1);
+        this.currentMonth$.pipe(take(1)).subscribe((month) => {
+            this.currentMonth$.next(new Date(month.getFullYear(), month.getMonth() - 1, 1));
+        });
         return false;
     }
     nextMonth() {
-        this.month = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);
+        this.currentMonth$.pipe(take(1)).subscribe((month) => {
+            this.currentMonth$.next(new Date(month.getFullYear(), month.getMonth() + 1, 1));
+        });
         return false;
     }
     isSameDate(date1, date2) {
-        return (date1.getFullYear() === date2.getFullYear())
-            && (date1.getMonth() === date2.getMonth())
-            && (date1.getDate() === date2.getDate());
+        if (date1 === null && date2 === null)
+            return true;
+        if (date1 === null || date2 === null)
+            return false;
+        return (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+    }
+    goto(day) {
+        if (day) {
+            this.selectedDate$.next(day.date);
+        }
     }
 }
-BsCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCalendarComponent, deps: [{ token: BsCalendarMonthService }], target: i0.ɵɵFactoryTarget.Component });
-BsCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCalendarComponent, selector: "bs-calendar", ngImport: i0, template: "<table class=\"table w-auto\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ month | monthName | ucFirst }}\n            {{ month.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of daysOfWeek\">\n            {{ dayOfWeek }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of weeks\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate, day.date)\" *ngFor=\"let day of week.week\" (click)=\"day && selectedDate = day.date\">\n            <span *ngIf=\"day !== null\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: ["table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125)}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "ucFirst": UcFirstPipe, "monthName": MonthNamePipe } });
+BsCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCalendarComponent, deps: [{ token: BsCalendarMonthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BsCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCalendarComponent, selector: "bs-calendar", inputs: { currentMonth: "currentMonth", selectedDate: "selectedDate" }, outputs: { currentMonthChange: "currentMonthChange", selectedDateChange: "selectedDateChange" }, ngImport: i0, template: "<table class=\"table w-auto mb-0\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ currentMonth$ | async | monthName | ucFirst }}\n            {{ (currentMonth$ | async)?.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of daysOfWeek\">\n            {{ dayOfWeek }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of (weeks$ | async)\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate$ | async, day.date)\" *ngFor=\"let day of week.week\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: ["table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125);background:#fff}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "ucFirst": UcFirstPipe, "monthName": MonthNamePipe, "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-calendar', template: "<table class=\"table w-auto\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ month | monthName | ucFirst }}\n            {{ month.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of daysOfWeek\">\n            {{ dayOfWeek }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of weeks\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate, day.date)\" *ngFor=\"let day of week.week\" (click)=\"day && selectedDate = day.date\">\n            <span *ngIf=\"day !== null\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: ["table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125)}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"] }]
-        }], ctorParameters: function () { return [{ type: BsCalendarMonthService }]; } });
+            args: [{ selector: 'bs-calendar', template: "<table class=\"table w-auto mb-0\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ currentMonth$ | async | monthName | ucFirst }}\n            {{ (currentMonth$ | async)?.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of daysOfWeek\">\n            {{ dayOfWeek }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of (weeks$ | async)\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate$ | async, day.date)\" *ngFor=\"let day of week.week\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: ["table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125);background:#fff}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"] }]
+        }], ctorParameters: function () { return [{ type: BsCalendarMonthService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { currentMonthChange: [{
+                type: Output
+            }], currentMonth: [{
+                type: Input
+            }], selectedDateChange: [{
+                type: Output
+            }], selectedDate: [{
+                type: Input
+            }] } });
 
 class BsMonthNamePipeModule {
 }
@@ -429,14 +479,14 @@ class BsCarouselComponent {
         this.destroyed$ = new Subject();
         this.currentImageCounter$ = new BehaviorSubject(-1);
         this.currentImageIndex$ = this.currentImageCounter$
-            .pipe(map((counter) => {
+            .pipe(map$1((counter) => {
             const l = this.images.length;
             return ((counter % l) + l) % l;
         }))
-            .pipe(takeUntil(this.destroyed$));
+            .pipe(takeUntil$1(this.destroyed$));
         this.currentImage$ = this.currentImageIndex$
-            .pipe(map((index) => this.images.get(index)?.itemTemplate ?? null))
-            .pipe(takeUntil(this.destroyed$));
+            .pipe(map$1((index) => this.images.get(index)?.itemTemplate ?? null))
+            .pipe(takeUntil$1(this.destroyed$));
     }
     ngOnInit() { }
     ngOnDestroy() {
@@ -452,14 +502,14 @@ class BsCarouselComponent {
     }
     previousImage() {
         this.currentImageCounter$
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe((currentImageCounter) => {
             this.currentImageCounter$.next(currentImageCounter - 1);
         });
     }
     nextImage() {
         this.currentImageCounter$
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe((currentImageCounter) => {
             this.currentImageCounter$.next(currentImageCounter + 1);
         });
@@ -588,8 +638,8 @@ class BsPaginationComponent {
         this.destroyed$ = new Subject();
         this.visibleNumberOfNumberBoxes$ =
             combineLatest([this.numberOfBoxes$, this.pageNumbers$, this.showArrows$])
-                .pipe(takeUntil$1(this.destroyed$))
-                .pipe(map$1(([numberOfBoxes, pageNumbers, showArrows]) => {
+                .pipe(takeUntil(this.destroyed$))
+                .pipe(map(([numberOfBoxes, pageNumbers, showArrows]) => {
                 if (numberOfBoxes <= 0) {
                     return pageNumbers.length;
                 }
@@ -605,8 +655,8 @@ class BsPaginationComponent {
             }));
         this.shownPageNumbers$ =
             combineLatest([this.pageNumbers$, this.selectedPageNumber$, this.visibleNumberOfNumberBoxes$])
-                .pipe(takeUntil$1(this.destroyed$))
-                .pipe(map$1(([pageNumbers, selectedPageNumber, visibleNumberOfNumberBoxes]) => {
+                .pipe(takeUntil(this.destroyed$))
+                .pipe(map(([pageNumbers, selectedPageNumber, visibleNumberOfNumberBoxes]) => {
                 let startIndex = 0;
                 const half = Math.round((visibleNumberOfNumberBoxes - 1) / 2);
                 if (pageNumbers.indexOf(selectedPageNumber) < half) {
@@ -627,18 +677,18 @@ class BsPaginationComponent {
             }));
         this.isFirstPage$ =
             combineLatest([this.pageNumbers$, this.selectedPageNumber$])
-                .pipe(takeUntil$1(this.destroyed$))
-                .pipe(map$1(([pageNumbers, selectedPageNumber]) => {
+                .pipe(takeUntil(this.destroyed$))
+                .pipe(map(([pageNumbers, selectedPageNumber]) => {
                 return pageNumbers.indexOf(selectedPageNumber) === 0;
             }));
         this.isLastPage$ =
             combineLatest([this.pageNumbers$, this.selectedPageNumber$])
-                .pipe(takeUntil$1(this.destroyed$))
-                .pipe(map$1(([pageNumbers, selectedPageNumber]) => {
+                .pipe(takeUntil(this.destroyed$))
+                .pipe(map(([pageNumbers, selectedPageNumber]) => {
                 return pageNumbers.indexOf(selectedPageNumber) === (pageNumbers.length - 1);
             }));
         this.selectedPageNumber$
-            .pipe(takeUntil$1(this.destroyed$))
+            .pipe(takeUntil(this.destroyed$))
             .subscribe((selectedPageNumber) => {
             this.selectedPageNumberChange.emit(selectedPageNumber);
         });
@@ -1334,10 +1384,10 @@ class BsScrollspyComponent {
     }
 }
 BsScrollspyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-BsScrollspyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsScrollspyComponent, selector: "bs-scrollspy", host: { listeners: { "window:scroll": "onWindowScroll($event)" } }, queries: [{ propertyName: "directives", predicate: BsScrollspyDirective, descendants: true }], ngImport: i0, template: "<div class=\"spy\">\n    <ul class=\"text-muted\">\n        <li *ngFor=\"let dir of directives\">\n            <span class=\"cursor-pointer\" [ngClass]=\"'nav' + dir.element.nativeElement.tagName\" [class.fw-bold]=\"activeDirective?.element === dir.element\" (click)=\"scrollToHeader(dir)\" [title]=\"dir.element.nativeElement.textContent\">\n                {{ dir.element.nativeElement.textContent }}\n            </span>\n        </li>\n    </ul>\n</div>\n<div class=\"content\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spy>ul{list-style-type:none;padding-left:0}.spy>ul>li:hover{color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}@media (min-width: 768px){:host{display:grid;grid-template-areas:\"content toc\";grid-template-columns:auto 200px;grid-template-rows:auto;grid-gap:inherit;gap:inherit;grid-area:main}.spy{position:sticky;top:5rem;right:0;z-index:2;height:25%;overflow-y:auto;grid-area:toc}.spy>ul{padding-left:2rem}.spy>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.navH2{margin-left:20px}.navH3{margin-left:40px}.navH4{margin-left:60px}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+BsScrollspyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsScrollspyComponent, selector: "bs-scrollspy", host: { listeners: { "window:scroll": "onWindowScroll($event)" } }, queries: [{ propertyName: "directives", predicate: BsScrollspyDirective, descendants: true }], ngImport: i0, template: "<div class=\"spy\">\n    <ul class=\"text-muted\">\n        <li *ngFor=\"let dir of directives\">\n            <span class=\"cursor-pointer\" [ngClass]=\"'nav' + dir.element.nativeElement.tagName\" [class.fw-bold]=\"activeDirective?.element === dir.element\" (click)=\"scrollToHeader(dir)\" [title]=\"dir.element.nativeElement.textContent\">\n                {{ dir.element.nativeElement.textContent }}\n            </span>\n        </li>\n    </ul>\n</div>\n<div class=\"content\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spy>ul{list-style-type:none;padding-left:0}.spy>ul>li:hover{color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.spy>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 768px){:host{display:grid;grid-template-areas:\"content toc\";grid-template-columns:auto 200px;grid-template-rows:auto;grid-gap:inherit;gap:inherit;grid-area:main}.spy{position:sticky;top:5rem;right:0;z-index:2;height:25%;overflow-y:auto;grid-area:toc}.spy>ul{padding-left:2rem}}.navH2{margin-left:20px}.navH3{margin-left:40px}.navH4{margin-left:60px}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-scrollspy', template: "<div class=\"spy\">\n    <ul class=\"text-muted\">\n        <li *ngFor=\"let dir of directives\">\n            <span class=\"cursor-pointer\" [ngClass]=\"'nav' + dir.element.nativeElement.tagName\" [class.fw-bold]=\"activeDirective?.element === dir.element\" (click)=\"scrollToHeader(dir)\" [title]=\"dir.element.nativeElement.textContent\">\n                {{ dir.element.nativeElement.textContent }}\n            </span>\n        </li>\n    </ul>\n</div>\n<div class=\"content\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spy>ul{list-style-type:none;padding-left:0}.spy>ul>li:hover{color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}@media (min-width: 768px){:host{display:grid;grid-template-areas:\"content toc\";grid-template-columns:auto 200px;grid-template-rows:auto;grid-gap:inherit;gap:inherit;grid-area:main}.spy{position:sticky;top:5rem;right:0;z-index:2;height:25%;overflow-y:auto;grid-area:toc}.spy>ul{padding-left:2rem}.spy>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.navH2{margin-left:20px}.navH3{margin-left:40px}.navH4{margin-left:60px}\n"] }]
+            args: [{ selector: 'bs-scrollspy', template: "<div class=\"spy\">\n    <ul class=\"text-muted\">\n        <li *ngFor=\"let dir of directives\">\n            <span class=\"cursor-pointer\" [ngClass]=\"'nav' + dir.element.nativeElement.tagName\" [class.fw-bold]=\"activeDirective?.element === dir.element\" (click)=\"scrollToHeader(dir)\" [title]=\"dir.element.nativeElement.textContent\">\n                {{ dir.element.nativeElement.textContent }}\n            </span>\n        </li>\n    </ul>\n</div>\n<div class=\"content\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spy>ul{list-style-type:none;padding-left:0}.spy>ul>li:hover{color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.spy>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 768px){:host{display:grid;grid-template-areas:\"content toc\";grid-template-columns:auto 200px;grid-template-rows:auto;grid-gap:inherit;gap:inherit;grid-area:main}.spy{position:sticky;top:5rem;right:0;z-index:2;height:25%;overflow-y:auto;grid-area:toc}.spy>ul{padding-left:2rem}}.navH2{margin-left:20px}.navH3{margin-left:40px}.navH4{margin-left:60px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1375,9 +1425,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+class BsDropdownMenuDirective {
+    constructor(dropdown, document, viewContainerRef, templateRef, overlay) {
+        this.dropdown = dropdown;
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this.overlay = overlay;
+        this.destroyed$ = new Subject();
+        this.overlayRef = null;
+        this.templatePortal = null;
+        this.document = document;
+        this.dropdown.isOpen$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((isOpen) => {
+            if (isOpen) {
+                this.overlayRef = this.overlay.create({
+                    hasBackdrop: this.dropdown.hasBackdrop,
+                    scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                    positionStrategy: this.overlay.position()
+                        .flexibleConnectedTo(this.dropdown.toggle.toggleButton)
+                        .withPositions([
+                        { originX: "start", "originY": "bottom", overlayX: "start", overlayY: "top", offsetY: 0 },
+                        { originX: "start", "originY": "top", overlayX: "start", overlayY: "bottom", offsetY: 0 },
+                    ]),
+                });
+                this.overlayRef.backdropClick().subscribe(() => this.dropdown.isOpen$.next(false));
+                this.templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
+                this.overlayRef.attach(this.templatePortal);
+            }
+            else {
+                if (this.overlayRef) {
+                    this.overlayRef.detach();
+                    this.overlayRef.dispose();
+                }
+            }
+        });
+    }
+}
+BsDropdownMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownMenuDirective, deps: [{ token: forwardRef(() => BsDropdownDirective) }, { token: DOCUMENT }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+BsDropdownMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]", host: { properties: { "class.show": "dropdown.isOpen" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsDropdownMenu]',
+                    host: {
+                        '[class.show]': 'dropdown.isOpen',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: BsDropdownDirective, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => BsDropdownDirective)]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1$2.Overlay }]; } });
+
+class BsDropdownToggleDirective {
+    constructor(dropdown, toggleButton) {
+        this.dropdown = dropdown;
+        this.toggleButton = toggleButton;
+    }
+    onClick() {
+        console.log('clicked');
+        this.dropdown.isOpen$.pipe(take(1)).subscribe((isOpen) => {
+            this.dropdown.isOpen$.next(!isOpen);
+        });
+    }
+}
+BsDropdownToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownToggleDirective, deps: [{ token: BsDropdownDirective }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsDropdownToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsDropdownToggle]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsDropdownDirective }, { type: i0.ElementRef }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BsDropdownDirective {
+    constructor() {
+        this.isOpen$ = new BehaviorSubject(false);
+        this.hasBackdrop = false;
+        this.closeOnClickOutside = false;
+    }
+}
+BsDropdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BsDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownDirective, selector: "[bsDropdown]", inputs: { hasBackdrop: "hasBackdrop", closeOnClickOutside: "closeOnClickOutside" }, queries: [{ propertyName: "menu", first: true, predicate: BsDropdownMenuDirective, descendants: true }, { propertyName: "toggle", first: true, predicate: BsDropdownToggleDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsDropdown]'
+                }]
+        }], propDecorators: { menu: [{
+                type: ContentChild,
+                args: [BsDropdownMenuDirective, { static: false }]
+            }], toggle: [{
+                type: ContentChild,
+                args: [BsDropdownToggleDirective, { static: false }]
+            }], hasBackdrop: [{
+                type: Input
+            }], closeOnClickOutside: [{
+                type: Input
+            }] } });
+
+class BsDropdownModule {
+}
+BsDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownModule, declarations: [BsDropdownDirective,
+        BsDropdownToggleDirective,
+        BsDropdownMenuDirective], imports: [CommonModule,
+        OverlayModule], exports: [BsDropdownDirective,
+        BsDropdownToggleDirective,
+        BsDropdownMenuDirective] });
+BsDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownModule, imports: [[
+            CommonModule,
+            OverlayModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsDropdownDirective,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        OverlayModule
+                    ],
+                    exports: [
+                        BsDropdownDirective,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective
+                    ]
+                }]
+        }] });
+
+class BsDatepickerComponent {
+    constructor() {
+        this.selectedDate = new Date();
+        this.currentMonth = new Date();
+    }
+    ngOnInit() {
+    }
+}
+BsDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsDatepickerComponent, selector: "bs-datepicker", ngImport: i0, template: "<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle class=\"btn btn-primary\">{{ selectedDate | date }}</button>\n    <div *bsDropdownMenu>\n        <bs-calendar [(selectedDate)]=\"selectedDate\" [(currentMonth)]=\"currentMonth\"></bs-calendar>\n    </div>\n</div>", styles: [""], components: [{ type: BsCalendarComponent, selector: "bs-calendar", inputs: ["currentMonth", "selectedDate"], outputs: ["currentMonthChange", "selectedDateChange"] }], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "closeOnClickOutside"] }, { type: BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }], pipes: { "date": i1.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-datepicker', template: "<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle class=\"btn btn-primary\">{{ selectedDate | date }}</button>\n    <div *bsDropdownMenu>\n        <bs-calendar [(selectedDate)]=\"selectedDate\" [(currentMonth)]=\"currentMonth\"></bs-calendar>\n    </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class BsDatepickerModule {
+}
+BsDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatepickerModule, declarations: [BsDatepickerComponent], imports: [CommonModule,
+        BsCalendarModule,
+        BsDropdownModule], exports: [BsDatepickerComponent] });
+BsDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatepickerModule, imports: [[
+            CommonModule,
+            BsCalendarModule,
+            BsDropdownModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsDatepickerComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BsCalendarModule,
+                        BsDropdownModule
+                    ],
+                    exports: [
+                        BsDatepickerComponent
+                    ]
+                }]
+        }] });
+
+class BsMultiselectComponent {
+    constructor() {
+        this.items = [];
+        this.selectedItems = [];
+    }
+    itemChange(item, event) {
+        if (!!event.target.checked) {
+            this.selectedItems.push(item);
+        }
+        else {
+            this.selectedItems.splice(this.selectedItems.findIndex((i) => i === item), 1);
+        }
+    }
+    ngOnInit() {
+    }
+}
+BsMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsMultiselectComponent, selector: "bs-multiselect", inputs: { items: "items", selectedItems: "selectedItems" }, ngImport: i0, template: "<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle class=\"btn btn-primary\">{{ selectedItems.length }} selected</button>\n    <div *bsDropdownMenu class=\"bg-white p-3 border shadow\">\n        <label *ngFor=\"let item of items\" class=\"form-check\">\n            <input type=\"checkbox\" [checked]=\"selectedItems.indexOf(item) > -1\" (change)=\"itemChange(item, $event)\" class=\"form-check-input\">\n            <span class=\"form-check-label\">{{ item }}</span>\n        </label>\n    </div>\n</div>", styles: [""], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "closeOnClickOutside"] }, { type: BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-multiselect', template: "<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle class=\"btn btn-primary\">{{ selectedItems.length }} selected</button>\n    <div *bsDropdownMenu class=\"bg-white p-3 border shadow\">\n        <label *ngFor=\"let item of items\" class=\"form-check\">\n            <input type=\"checkbox\" [checked]=\"selectedItems.indexOf(item) > -1\" (change)=\"itemChange(item, $event)\" class=\"form-check-input\">\n            <span class=\"form-check-label\">{{ item }}</span>\n        </label>\n    </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }] } });
+
+class BsMultiselectModule {
+}
+BsMultiselectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsMultiselectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectModule, declarations: [BsMultiselectComponent], imports: [CommonModule,
+        BsDropdownModule], exports: [BsMultiselectComponent] });
+BsMultiselectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectModule, imports: [[
+            CommonModule,
+            BsDropdownModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsMultiselectComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BsDropdownModule
+                    ],
+                    exports: [
+                        BsMultiselectComponent
+                    ]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BsAccordionComponent, BsAccordionModule, BsAccordionTabComponent, BsAccordionTabHeaderComponent, BsAlertCloseComponent, BsAlertComponent, BsAlertModule, BsCalendarComponent, BsCalendarModule, BsCardComponent, BsCardHeaderComponent, BsCardModule, BsCarouselComponent, BsCarouselImageDirective, BsCarouselModule, BsDatatableColumnDirective, BsDatatableComponent, BsDatatableModule, BsListGroupComponent, BsListGroupItemComponent, BsListGroupModule, BsNavbarComponent, BsNavbarDropdownComponent, BsNavbarItemComponent, BsNavbarModule, BsNavbarNavComponent, BsRowTemplateDirective, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, Color, DatatableSettings, DropdownToggleDirective, NavLinkDirective, NavbarContentDirective };
+export { BsAccordionComponent, BsAccordionModule, BsAccordionTabComponent, BsAccordionTabHeaderComponent, BsAlertCloseComponent, BsAlertComponent, BsAlertModule, BsCalendarComponent, BsCalendarModule, BsCardComponent, BsCardHeaderComponent, BsCardModule, BsCarouselComponent, BsCarouselImageDirective, BsCarouselModule, BsDatatableColumnDirective, BsDatatableComponent, BsDatatableModule, BsDatepickerComponent, BsDatepickerModule, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownToggleDirective, BsListGroupComponent, BsListGroupItemComponent, BsListGroupModule, BsMultiselectComponent, BsMultiselectModule, BsNavbarComponent, BsNavbarDropdownComponent, BsNavbarItemComponent, BsNavbarModule, BsNavbarNavComponent, BsRowTemplateDirective, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, Color, DatatableSettings, DropdownToggleDirective, NavLinkDirective, NavbarContentDirective };
 //# sourceMappingURL=mintplayer-ng-bootstrap.mjs.map