@mintplayer/ng-bootstrap 13.1.2 → 13.1.7

package/fesm2020/mintplayer-ng-bootstrap.mjs

@@ -1,14 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, Injectable, Pipe, Directive, ElementRef, ContentChildren, ViewChild, Optional, forwardRef, SkipSelf, Host, Inject, TemplateRef, ContentChild } 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 } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { SlideUpDownAnimation, FadeInOutAnimation, CarouselSlideAnimation } from '@mintplayer/ng-animations';
-import { Subject, BehaviorSubject } 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) {
@@ -88,7 +92,6 @@ class BsCardComponent {
     ngOnInit() {
     }
     ngAfterViewInit() {
-        // console.log('header', this.header);
     }
 }
 BsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -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 {
 }
@@ -407,16 +457,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class BsCarouselImageDirective {
-    constructor() { }
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this.itemTemplate = this.templateRef;
+    }
 }
-BsCarouselImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCarouselImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BsCarouselImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsCarouselImageDirective, selector: "img[bsCarouselImage]", ngImport: i0 });
+BsCarouselImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCarouselImageDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsCarouselImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsCarouselImageDirective, selector: "*[bsCarouselImage]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCarouselImageDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'img[bsCarouselImage]'
+                    selector: '*[bsCarouselImage]'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 class BsCarouselComponent {
     constructor() {
@@ -426,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) ?? null))
-            .pipe(takeUntil(this.destroyed$));
+            .pipe(map$1((index) => this.images.get(index)?.itemTemplate ?? null))
+            .pipe(takeUntil$1(this.destroyed$));
     }
     ngOnInit() { }
     ngOnDestroy() {
@@ -449,32 +502,36 @@ 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);
         });
     }
     setCurrentImage(index) {
-        this.currentImageCounter$.next(index);
+        const currentValue = this.currentImageCounter$.value;
+        const l = this.images.length;
+        const counterMod = ((currentValue % l) + l) % l;
+        const newValue = currentValue - counterMod + index;
+        this.currentImageCounter$.next(newValue);
     }
 }
 BsCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCarouselComponent, selector: "bs-carousel", inputs: { animation: "animation" }, queries: [{ propertyName: "images", predicate: BsCarouselImageDirective, read: ElementRef }], ngImport: i0, template: "<div class=\"carousel slide\">\n    <div class=\"carousel-indicators\">\n        <button *ngFor=\"let image of images; let i = index\" type=\"button\" (click)=\"setCurrentImage(i)\" data-bs-target\n            [class.active]=\"(currentImageIndex$ | async) === i\"\n            [attr.aria-current]=\"(currentImageIndex$ | async) === i ? true : null\"\n            [attr.aria-label]=\"'Slide ' + i\"></button>\n    </div>\n\n\n\n    <!-- [@carouselSlide]=\"currentImageCounter$ | async\" -->\n    <div class=\"carousel-inner\" [@carouselSlide]=\"currentImageCounter$ | async\" *ngIf=\"animation === 'slide'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" *ngIf=\"(currentImageIndex$ | async) === i\">\n                <img [src]=\"image.nativeElement.src\" class=\"d-block\" [attr.alt]=\"image.nativeElement.alt\" [class.w-100]=\"true\">\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"carousel-inner\" *ngIf=\"animation === 'fade'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut *ngIf=\"(currentImageIndex$ | async) === i\">\n                <img [src]=\"image.nativeElement.src\" class=\"d-block\" [attr.alt]=\"image.nativeElement.alt\" [class.w-100]=\"true\">\n            </div>\n        </ng-container>\n    </div>\n\n\n\n    <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\">\n        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Previous</span>\n    </button>\n    <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Next</span>\n    </button>\n</div>", styles: [".carousel{min-height:100px}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe }, animations: [FadeInOutAnimation, CarouselSlideAnimation] });
+BsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCarouselComponent, selector: "bs-carousel", inputs: { animation: "animation" }, queries: [{ propertyName: "images", predicate: BsCarouselImageDirective }], ngImport: i0, template: "<div class=\"carousel slide\">\n    <div class=\"carousel-indicators\">\n        <button *ngFor=\"let image of images; let i = index\" type=\"button\" (click)=\"setCurrentImage(i)\"\n            [class.active]=\"(currentImageIndex$ | async) === i\" data-bs-target\n            [attr.aria-current]=\"(currentImageIndex$ | async) === i ? true : null\"\n            [attr.aria-label]=\"'Slide ' + i\"></button>\n    </div>\n\n    <div class=\"carousel-inner\" [@carouselSlide]=\"currentImageCounter$ | async\" *ngIf=\"animation === 'slide'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" *ngIf=\"(currentImageIndex$ | async) === i\">\n                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>    \n            </div>\n        </ng-container>\n    </div>\n    <div class=\"carousel-inner\" *ngIf=\"animation === 'fade'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut *ngIf=\"(currentImageIndex$ | async) === i\">\n                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>    \n            </div>\n        </ng-container>\n    </div>\n\n    <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\">\n        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Previous</span>\n    </button>\n    <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Next</span>\n    </button>\n</div>", styles: [".carousel{min-height:100px}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe }, animations: [FadeInOutAnimation, CarouselSlideAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-carousel', animations: [FadeInOutAnimation, CarouselSlideAnimation], template: "<div class=\"carousel slide\">\n    <div class=\"carousel-indicators\">\n        <button *ngFor=\"let image of images; let i = index\" type=\"button\" (click)=\"setCurrentImage(i)\" data-bs-target\n            [class.active]=\"(currentImageIndex$ | async) === i\"\n            [attr.aria-current]=\"(currentImageIndex$ | async) === i ? true : null\"\n            [attr.aria-label]=\"'Slide ' + i\"></button>\n    </div>\n\n\n\n    <!-- [@carouselSlide]=\"currentImageCounter$ | async\" -->\n    <div class=\"carousel-inner\" [@carouselSlide]=\"currentImageCounter$ | async\" *ngIf=\"animation === 'slide'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" *ngIf=\"(currentImageIndex$ | async) === i\">\n                <img [src]=\"image.nativeElement.src\" class=\"d-block\" [attr.alt]=\"image.nativeElement.alt\" [class.w-100]=\"true\">\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"carousel-inner\" *ngIf=\"animation === 'fade'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut *ngIf=\"(currentImageIndex$ | async) === i\">\n                <img [src]=\"image.nativeElement.src\" class=\"d-block\" [attr.alt]=\"image.nativeElement.alt\" [class.w-100]=\"true\">\n            </div>\n        </ng-container>\n    </div>\n\n\n\n    <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\">\n        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Previous</span>\n    </button>\n    <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Next</span>\n    </button>\n</div>", styles: [".carousel{min-height:100px}\n"] }]
+            args: [{ selector: 'bs-carousel', animations: [FadeInOutAnimation, CarouselSlideAnimation], template: "<div class=\"carousel slide\">\n    <div class=\"carousel-indicators\">\n        <button *ngFor=\"let image of images; let i = index\" type=\"button\" (click)=\"setCurrentImage(i)\"\n            [class.active]=\"(currentImageIndex$ | async) === i\" data-bs-target\n            [attr.aria-current]=\"(currentImageIndex$ | async) === i ? true : null\"\n            [attr.aria-label]=\"'Slide ' + i\"></button>\n    </div>\n\n    <div class=\"carousel-inner\" [@carouselSlide]=\"currentImageCounter$ | async\" *ngIf=\"animation === 'slide'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" *ngIf=\"(currentImageIndex$ | async) === i\">\n                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>    \n            </div>\n        </ng-container>\n    </div>\n    <div class=\"carousel-inner\" *ngIf=\"animation === 'fade'\">\n        <ng-container *ngFor=\"let image of images; let i = index\">\n            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut *ngIf=\"(currentImageIndex$ | async) === i\">\n                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>    \n            </div>\n        </ng-container>\n    </div>\n\n    <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\">\n        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Previous</span>\n    </button>\n    <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\">\n        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"visually-hidden\">Next</span>\n    </button>\n</div>", styles: [".carousel{min-height:100px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { animation: [{
                 type: Input
             }], images: [{
                 type: ContentChildren,
-                args: [BsCarouselImageDirective, { read: ElementRef }]
+                args: [BsCarouselImageDirective]
             }] } });
 
 class BsCarouselModule {
@@ -503,6 +560,316 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+class BsDatatableColumnDirective {
+    constructor(templateRef) {
+        this.bsDatatableColumn = { name: '', sortable: true };
+        this.templateRef = templateRef;
+    }
+}
+BsDatatableColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableColumnDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsDatatableColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDatatableColumnDirective, selector: "[bsDatatableColumn]", inputs: { bsDatatableColumn: "bsDatatableColumn" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsDatatableColumn]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { bsDatatableColumn: [{
+                type: Input
+            }] } });
+
+class DatatableSettings {
+    constructor(data) {
+        this.sortProperty = '';
+        this.sortDirection = 'ascending';
+        Object.assign(this, data);
+        if (data && data.perPage) {
+            this.perPage = data.perPage;
+        }
+        else {
+            // Set default value
+            this.perPage = {
+                values: [10, 20, 50],
+                selected: 20
+            };
+        }
+        if (data && data.page) {
+            this.page = data.page;
+        }
+        else {
+            // Set default value
+            this.page = {
+                values: [1],
+                selected: 1
+            };
+        }
+    }
+    toPagination() {
+        const res = {
+            sortProperty: this.sortProperty,
+            sortDirection: this.sortDirection,
+            perPage: this.perPage.selected,
+            page: this.page.selected
+        };
+        return res;
+    }
+}
+
+class BsPaginationComponent {
+    constructor() {
+        /** All page numbers. */
+        this.pageNumbers$ = new BehaviorSubject([]);
+        /** Selected number. */
+        this.selectedPageNumber$ = new BehaviorSubject(1);
+        /** Number of boxes. */
+        this.numberOfBoxes$ = new BehaviorSubject(0);
+        /** Display previous/next arrows. */
+        this.showArrows$ = new BehaviorSubject(true);
+        /** Indicates if first value is selected. */
+        this.isFirstPage$ = new Observable();
+        /** Indicates if last value is selected. */
+        this.isLastPage$ = new Observable();
+        /** The number of boxes (excluding arrows) that's being shown on the pagination component. */
+        this.visibleNumberOfNumberBoxes$ = new Observable();
+        this._selectedPageNumber = 0;
+        this.selectedPageNumberChange = new EventEmitter();
+        this._numberOfBoxes = 0;
+        this._pageNumbers = [];
+        this._showArrows = true;
+        this.destroyed$ = new Subject();
+        this.visibleNumberOfNumberBoxes$ =
+            combineLatest([this.numberOfBoxes$, this.pageNumbers$, this.showArrows$])
+                .pipe(takeUntil(this.destroyed$))
+                .pipe(map(([numberOfBoxes, pageNumbers, showArrows]) => {
+                if (numberOfBoxes <= 0) {
+                    return pageNumbers.length;
+                }
+                else if (!showArrows) {
+                    return Math.min(numberOfBoxes, pageNumbers.length);
+                }
+                else if (numberOfBoxes <= 2) {
+                    return Math.min(1, pageNumbers.length);
+                }
+                else {
+                    return Math.min(numberOfBoxes - 2, pageNumbers.length);
+                }
+            }));
+        this.shownPageNumbers$ =
+            combineLatest([this.pageNumbers$, this.selectedPageNumber$, this.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) {
+                    startIndex = 0;
+                }
+                else if (pageNumbers.indexOf(selectedPageNumber) >= (pageNumbers.length - half)) {
+                    startIndex = pageNumbers.length - visibleNumberOfNumberBoxes;
+                }
+                else {
+                    startIndex = pageNumbers.indexOf(selectedPageNumber) - half;
+                }
+                return [...Array(visibleNumberOfNumberBoxes).keys()]
+                    .map(p => p + startIndex)
+                    .map(p => ({
+                    page: pageNumbers[p],
+                    selected: pageNumbers[p] === selectedPageNumber
+                }));
+            }));
+        this.isFirstPage$ =
+            combineLatest([this.pageNumbers$, this.selectedPageNumber$])
+                .pipe(takeUntil(this.destroyed$))
+                .pipe(map(([pageNumbers, selectedPageNumber]) => {
+                return pageNumbers.indexOf(selectedPageNumber) === 0;
+            }));
+        this.isLastPage$ =
+            combineLatest([this.pageNumbers$, this.selectedPageNumber$])
+                .pipe(takeUntil(this.destroyed$))
+                .pipe(map(([pageNumbers, selectedPageNumber]) => {
+                return pageNumbers.indexOf(selectedPageNumber) === (pageNumbers.length - 1);
+            }));
+        this.selectedPageNumber$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((selectedPageNumber) => {
+            this.selectedPageNumberChange.emit(selectedPageNumber);
+        });
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+    }
+    onSelectPage(event, page) {
+        this.selectedPageNumber$.next(page);
+        return false;
+    }
+    onPrevious() {
+        this.selectedPageNumber$.next(this.selectedPageNumber$.value - 1);
+        return false;
+    }
+    onNext() {
+        this.selectedPageNumber$.next(this.selectedPageNumber$.value + 1);
+        return false;
+    }
+    set selectedPageNumber(value) {
+        this._selectedPageNumber = value;
+        this.selectedPageNumber$.next(value);
+    }
+    get selectedPageNumber() {
+        return this._selectedPageNumber;
+    }
+    set numberOfBoxes(value) {
+        this._numberOfBoxes = value;
+        this.numberOfBoxes$.next(value);
+    }
+    get numberOfBoxes() {
+        return this._numberOfBoxes;
+    }
+    set pageNumbers(value) {
+        this._pageNumbers = value;
+        this.pageNumbers$.next(value);
+    }
+    get pageNumbers() {
+        return this._pageNumbers;
+    }
+    set showArrows(value) {
+        this._showArrows = value;
+        this.showArrows$.next(value);
+    }
+    get showArrows() {
+        return this._showArrows;
+    }
+}
+BsPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsPaginationComponent, selector: "bs-pagination", inputs: { selectedPageNumber: "selectedPageNumber", numberOfBoxes: "numberOfBoxes", pageNumbers: "pageNumbers", showArrows: "showArrows" }, outputs: { selectedPageNumberChange: "selectedPageNumberChange" }, ngImport: i0, template: "<ul class=\"pagination\">\n    <li class=\"page-item\" *ngIf=\"showArrows$ | async\" [class.disabled]=\"isFirstPage$ | async\">\n        <a class=\"page-link\" href=\"\" (click)=\"onPrevious()\" aria-label=\"Previous\">\n            <span aria-hidden=\"true\">&laquo;</span>\n            <span class=\"visually-hidden\">Previous</span>\n        </a>\n    </li>\n    <li *ngFor=\"let pageNumber of (shownPageNumbers$ | async)\" class=\"page-item\"\n        [ngClass]=\"{ 'active': pageNumber.selected }\">\n        <a class=\"page-link\" href=\"\" (click)=\"onSelectPage($event, pageNumber.page)\" *ngIf=\"pageNumber.page != '...'\">\n            {{ pageNumber.page }}\n            <span class=\"visually-hidden\" *ngIf=\"pageNumber.selected\">(current)</span>\n        </a>\n    </li>\n    <li class=\"page-item\" *ngIf=\"showArrows$ | async\" [class.disabled]=\"isLastPage$ | async\">\n        <a class=\"page-link\" href=\"\" (click)=\"onNext()\" aria-label=\"Next\">\n            <span aria-hidden=\"true\">&raquo;</span>\n            <span class=\"visually-hidden\">Next</span>\n        </a>\n    </li>\n</ul>", styles: [":host{display:inline-block}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-pagination', template: "<ul class=\"pagination\">\n    <li class=\"page-item\" *ngIf=\"showArrows$ | async\" [class.disabled]=\"isFirstPage$ | async\">\n        <a class=\"page-link\" href=\"\" (click)=\"onPrevious()\" aria-label=\"Previous\">\n            <span aria-hidden=\"true\">&laquo;</span>\n            <span class=\"visually-hidden\">Previous</span>\n        </a>\n    </li>\n    <li *ngFor=\"let pageNumber of (shownPageNumbers$ | async)\" class=\"page-item\"\n        [ngClass]=\"{ 'active': pageNumber.selected }\">\n        <a class=\"page-link\" href=\"\" (click)=\"onSelectPage($event, pageNumber.page)\" *ngIf=\"pageNumber.page != '...'\">\n            {{ pageNumber.page }}\n            <span class=\"visually-hidden\" *ngIf=\"pageNumber.selected\">(current)</span>\n        </a>\n    </li>\n    <li class=\"page-item\" *ngIf=\"showArrows$ | async\" [class.disabled]=\"isLastPage$ | async\">\n        <a class=\"page-link\" href=\"\" (click)=\"onNext()\" aria-label=\"Next\">\n            <span aria-hidden=\"true\">&raquo;</span>\n            <span class=\"visually-hidden\">Next</span>\n        </a>\n    </li>\n</ul>", styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selectedPageNumberChange: [{
+                type: Output
+            }], selectedPageNumber: [{
+                type: Input
+            }], numberOfBoxes: [{
+                type: Input
+            }], pageNumbers: [{
+                type: Input
+            }], showArrows: [{
+                type: Input
+            }] } });
+
+class BsDatatableComponent {
+    constructor() {
+        this.columns = [];
+        this.onReloadData = new EventEmitter();
+        this.settings = new DatatableSettings();
+        this.settings.sortProperty = '';
+        this.settings.sortDirection = 'ascending';
+        this.settings.perPage = { values: [10, 20, 50], selected: 20 };
+        this.settings.page = { values: [1], selected: 1 };
+    }
+    columnHeaderClicked(column) {
+        if (column.bsDatatableColumn.sortable) {
+            if (this.settings.sortProperty !== column.bsDatatableColumn.name) {
+                this.settings.sortProperty = column.bsDatatableColumn.name;
+                this.settings.sortDirection = 'ascending';
+            }
+            else if (this.settings.sortDirection === 'descending') {
+                this.settings.sortDirection = 'ascending';
+            }
+            else {
+                this.settings.sortDirection = 'descending';
+            }
+            this.onReloadData.emit();
+        }
+    }
+    ngOnInit() {
+    }
+}
+BsDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsDatatableComponent, selector: "bs-datatable", inputs: { settings: "settings", data: "data" }, outputs: { onReloadData: "onReloadData" }, queries: [{ propertyName: "columns", predicate: BsDatatableColumnDirective }], ngImport: i0, template: "<div class=\"table-responsive overflow-y-hidden mb-3\">\n    <table class=\"table table-striped table-hover w-100 mb-0\" cellspacing=\"0\" role=\"grid\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let column of columns\" class=\"text-nowrap\"\n                    [class.sort]=\"column.bsDatatableColumn.sortable\"\n                    [class.sort-asc]=\"column.bsDatatableColumn.sortable && (settings.sortProperty === column.bsDatatableColumn.name) && (settings.sortDirection === 'ascending')\"\n                    [class.sort-desc]=\"column.bsDatatableColumn.sortable && (settings.sortProperty === column.bsDatatableColumn.name) && (settings.sortDirection === 'descending')\"\n                    (click)=\"columnHeaderClicked(column)\">\n                    <ng-container *ngTemplateOutlet=\"column.templateRef\"></ng-container>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngIf=\"!!data && !!rowTemplate\">\n                <ng-container *ngFor=\"let item of data.data\">\n                    <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: item }\"></ng-container>\n                </ng-container>\n            </ng-container>\n        </tbody>\n    </table>\n</div>\n<div class=\"container-fluid\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <bs-pagination class=\"float-start\" [pageNumbers]=\"settings.perPage.values\"\n                [(selectedPageNumber)]=\"settings.perPage.selected\" (selectedPageNumberChange)=\"onReloadData.emit()\"\n                [showArrows]=\"false\"></bs-pagination>\n            <bs-pagination class=\"float-end\" [pageNumbers]=\"settings.page.values\"\n                [(selectedPageNumber)]=\"settings.page.selected\" (selectedPageNumberChange)=\"onReloadData.emit()\"\n                [showArrows]=\"true\"></bs-pagination>\n        </div>\n    </div>\n</div>", styles: ["@charset \"UTF-8\";.overflow-y-hidden{overflow-y:hidden}.table thead th.sort{position:relative;cursor:pointer}.table thead th.sort:before,.table thead th.sort:after{position:absolute;display:block;opacity:.3;bottom:.5em}.table thead th.sort:before{content:\"\\2191\";right:1em}.table thead th.sort:after{content:\"\\2193\";right:.5em}.table thead th.sort.sort-asc:after{opacity:1}.table thead th.sort.sort-desc:before{opacity:1}\n"], components: [{ type: BsPaginationComponent, selector: "bs-pagination", inputs: ["selectedPageNumber", "numberOfBoxes", "pageNumbers", "showArrows"], outputs: ["selectedPageNumberChange"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-datatable', template: "<div class=\"table-responsive overflow-y-hidden mb-3\">\n    <table class=\"table table-striped table-hover w-100 mb-0\" cellspacing=\"0\" role=\"grid\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let column of columns\" class=\"text-nowrap\"\n                    [class.sort]=\"column.bsDatatableColumn.sortable\"\n                    [class.sort-asc]=\"column.bsDatatableColumn.sortable && (settings.sortProperty === column.bsDatatableColumn.name) && (settings.sortDirection === 'ascending')\"\n                    [class.sort-desc]=\"column.bsDatatableColumn.sortable && (settings.sortProperty === column.bsDatatableColumn.name) && (settings.sortDirection === 'descending')\"\n                    (click)=\"columnHeaderClicked(column)\">\n                    <ng-container *ngTemplateOutlet=\"column.templateRef\"></ng-container>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <ng-container *ngIf=\"!!data && !!rowTemplate\">\n                <ng-container *ngFor=\"let item of data.data\">\n                    <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: item }\"></ng-container>\n                </ng-container>\n            </ng-container>\n        </tbody>\n    </table>\n</div>\n<div class=\"container-fluid\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <bs-pagination class=\"float-start\" [pageNumbers]=\"settings.perPage.values\"\n                [(selectedPageNumber)]=\"settings.perPage.selected\" (selectedPageNumberChange)=\"onReloadData.emit()\"\n                [showArrows]=\"false\"></bs-pagination>\n            <bs-pagination class=\"float-end\" [pageNumbers]=\"settings.page.values\"\n                [(selectedPageNumber)]=\"settings.page.selected\" (selectedPageNumberChange)=\"onReloadData.emit()\"\n                [showArrows]=\"true\"></bs-pagination>\n        </div>\n    </div>\n</div>", styles: ["@charset \"UTF-8\";.overflow-y-hidden{overflow-y:hidden}.table thead th.sort{position:relative;cursor:pointer}.table thead th.sort:before,.table thead th.sort:after{position:absolute;display:block;opacity:.3;bottom:.5em}.table thead th.sort:before{content:\"\\2191\";right:1em}.table thead th.sort:after{content:\"\\2193\";right:.5em}.table thead th.sort.sort-asc:after{opacity:1}.table thead th.sort.sort-desc:before{opacity:1}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { columns: [{
+                type: ContentChildren,
+                args: [BsDatatableColumnDirective]
+            }], settings: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], onReloadData: [{
+                type: Output
+            }] } });
+
+class BsRowTemplateDirective {
+    constructor(datatableComponent, templateRef) {
+        this.datatableComponent = datatableComponent;
+        this.datatableComponent.rowTemplate = templateRef;
+    }
+}
+BsRowTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRowTemplateDirective, deps: [{ token: BsDatatableComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsRowTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsRowTemplateDirective, selector: "[rowTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRowTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rowTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsDatatableComponent }, { type: i0.TemplateRef }]; } });
+
+class BsPaginationModule {
+}
+BsPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsPaginationModule, declarations: [BsPaginationComponent], imports: [CommonModule], exports: [BsPaginationComponent] });
+BsPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsPaginationModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsPaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsPaginationComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsPaginationComponent
+                    ]
+                }]
+        }] });
+
+class BsDatatableModule {
+}
+BsDatatableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableModule, declarations: [BsDatatableComponent,
+        BsRowTemplateDirective,
+        BsDatatableColumnDirective], imports: [CommonModule,
+        BsPaginationModule], exports: [BsDatatableComponent,
+        BsRowTemplateDirective,
+        BsDatatableColumnDirective] });
+BsDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableModule, imports: [[
+            CommonModule,
+            BsPaginationModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatatableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsDatatableComponent,
+                        BsRowTemplateDirective,
+                        BsDatatableColumnDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        BsPaginationModule
+                    ],
+                    exports: [
+                        BsDatatableComponent,
+                        BsRowTemplateDirective,
+                        BsDatatableColumnDirective
+                    ]
+                }]
+        }] });
+
 class BsListGroupItemComponent {
     constructor() {
     }
@@ -563,10 +930,10 @@ class BsNavbarComponent {
     }
 }
 BsNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarComponent, selector: "bs-navbar", viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:1}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] });
+BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarComponent, selector: "bs-navbar", viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:1}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] }]
+            args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { nav: [{
                 type: ViewChild,
                 args: ['nav']
@@ -975,9 +1342,325 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+class BsScrollspyDirective {
+    constructor(element) {
+        this.element = element;
+    }
+}
+BsScrollspyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsScrollspyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsScrollspyDirective, selector: "[bsScrollspy]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsScrollspy]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class BsScrollspyComponent {
+    constructor(document) {
+        this.activeDirective = null;
+        this.doc = document;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.onWindowScroll();
+    }
+    onWindowScroll() {
+        const dirs = this.directives.filter((d) => d.element.nativeElement.getBoundingClientRect().y <= 0);
+        if (this.directives.length === 0) {
+            this.activeDirective = null;
+        }
+        else if (dirs.length === 0) {
+            this.activeDirective = this.directives.get(0) ?? null;
+        }
+        else {
+            this.activeDirective = dirs[dirs.length - 1];
+        }
+    }
+    scrollToHeader(directive) {
+        const header = directive.element.nativeElement;
+        header.scrollIntoView();
+    }
+}
+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}.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}.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]
+                }] }]; }, propDecorators: { directives: [{
+                type: ContentChildren,
+                args: [BsScrollspyDirective, { descendants: true }]
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
+            }] } });
+
+class BsScrollspyModule {
+}
+BsScrollspyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsScrollspyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyModule, declarations: [BsScrollspyComponent,
+        BsScrollspyDirective], imports: [CommonModule], exports: [BsScrollspyComponent,
+        BsScrollspyDirective] });
+BsScrollspyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsScrollspyComponent,
+                        BsScrollspyDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsScrollspyComponent,
+                        BsScrollspyDirective
+                    ]
+                }]
+        }] });
+
+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, BsListGroupComponent, BsListGroupItemComponent, BsListGroupModule, BsNavbarComponent, BsNavbarDropdownComponent, BsNavbarItemComponent, BsNavbarModule, BsNavbarNavComponent, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, Color, 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