@mintplayer/ng-bootstrap 13.1.10 → 13.1.15

package/fesm2015/mintplayer-ng-bootstrap.mjs

@@ -1,35 +1,27 @@
 import * as i0 from '@angular/core';
-import { Component, ContentChildren, NgModule, Input, Injectable, Pipe, EventEmitter, Output, Directive, HostBinding, Host, SkipSelf, HostListener, forwardRef, PLATFORM_ID, Inject, ContentChild, TemplateRef, ViewChild, Optional, ViewChildren, InjectionToken, Injector } from '@angular/core';
+import { Component, ContentChildren, NgModule, Input, Injectable, Pipe, EventEmitter, Output, Directive, HostBinding, InjectionToken, Inject, HostListener, Injector, ViewChild, Host, SkipSelf, forwardRef, PLATFORM_ID, ContentChild, Optional, ViewChildren, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SlideUpDownAnimation, FadeInOutAnimation, CarouselSlideAnimation, ColorTransitionAnimation } from '@mintplayer/ng-animations';
 import { Subject, BehaviorSubject, map, takeUntil, filter, take, Observable, combineLatest, debounceTime } from 'rxjs';
 import { map as map$1, takeUntil as takeUntil$1, take as take$1 } from 'rxjs/operators';
-import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import * as i3 from 'ngx-highlightjs';
+import { HighlightModule } from 'ngx-highlightjs';
 import * as i1$2 from '@mintplayer/ng-click-outside';
 import { ClickOutsideDirective, ClickOutsideModule } from '@mintplayer/ng-click-outside';
 import { FocusOnLoadModule } from '@mintplayer/ng-focus-on-load';
+import * as i1$3 from '@angular/router';
 import { RouterModule, ROUTER_CONFIGURATION } from '@angular/router';
-import * as i3 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 class BsAccordionTabComponent {
     constructor(accordion) {
         this.accordion = accordion;
     }
-    ngOnInit() {
-    }
-    headerClicked(event) {
-        if (this.accordion.activeTab === this) {
-            this.accordion.activeTab = null;
-        }
-        else {
-            this.accordion.activeTab = this;
-        }
-    }
 }
 BsAccordionTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionTabComponent, deps: [{ token: BsAccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
 BsAccordionTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsAccordionTabComponent, selector: "bs-accordion-tab", ngImport: i0, template: "<div class=\"card\">\n    <ng-content select=\"bs-accordion-tab-header\"></ng-content>\n    <div class=\"card-block overflow-hidden\" [@slideUpDown] *ngIf=\"accordion.activeTab === this\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".card,.card-header,.card-block{border-radius:0}.card{margin-bottom:-1px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [SlideUpDownAnimation] });
@@ -42,15 +34,13 @@ class BsAccordionComponent {
     constructor() {
         this.activeTab = null;
     }
-    ngOnInit() {
-    }
 }
 BsAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 BsAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsAccordionComponent, selector: "bs-accordion", queries: [{ propertyName: "tabPages", predicate: BsAccordionTabComponent }], ngImport: i0, template: "<ng-content></ng-content>", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-accordion', template: "<ng-content></ng-content>", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tabPages: [{
+        }], propDecorators: { tabPages: [{
                 type: ContentChildren,
                 args: [BsAccordionTabComponent]
             }] } });
@@ -60,8 +50,6 @@ class BsAccordionTabHeaderComponent {
         this.accordionTab = accordionTab;
         this.accordion = accordion;
     }
-    ngOnInit() {
-    }
     headerClicked(event) {
         event.preventDefault();
         if (this.accordion.activeTab === this.accordionTab) {
@@ -71,15 +59,12 @@ class BsAccordionTabHeaderComponent {
             this.accordion.activeTab = this.accordionTab;
         }
     }
-    foo(event) {
-        event.preventDefault();
-    }
 }
 BsAccordionTabHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionTabHeaderComponent, deps: [{ token: BsAccordionTabComponent }, { token: BsAccordionComponent }], target: i0.ɵɵFactoryTarget.Component });
-BsAccordionTabHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsAccordionTabHeaderComponent, selector: "bs-accordion-tab-header", ngImport: i0, template: "<div class=\"card-header cursor-pointer\" (click)=\"headerClicked($event)\" (contextmenu)=\"foo($event)\">\n    <ng-content></ng-content>\n</div>", styles: [""] });
+BsAccordionTabHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsAccordionTabHeaderComponent, selector: "bs-accordion-tab-header", ngImport: i0, template: "<div class=\"card-header cursor-pointer\" (click)=\"headerClicked($event)\">\n    <ng-content></ng-content>\n</div>", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionTabHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-accordion-tab-header', template: "<div class=\"card-header cursor-pointer\" (click)=\"headerClicked($event)\" (contextmenu)=\"foo($event)\">\n    <ng-content></ng-content>\n</div>", styles: [""] }]
+            args: [{ selector: 'bs-accordion-tab-header', template: "<div class=\"card-header cursor-pointer\" (click)=\"headerClicked($event)\">\n    <ng-content></ng-content>\n</div>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: BsAccordionTabComponent }, { type: BsAccordionComponent }]; } });
 
 class BsAccordionModule {
@@ -87,13 +72,11 @@ class BsAccordionModule {
 BsAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 BsAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionModule, declarations: [BsAccordionComponent,
         BsAccordionTabComponent,
-        BsAccordionTabHeaderComponent], imports: [CommonModule,
-        BrowserAnimationsModule], exports: [BsAccordionComponent,
+        BsAccordionTabHeaderComponent], imports: [CommonModule], exports: [BsAccordionComponent,
         BsAccordionTabComponent,
         BsAccordionTabHeaderComponent] });
 BsAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionModule, imports: [[
-            CommonModule,
-            BrowserAnimationsModule
+            CommonModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAccordionModule, decorators: [{
             type: NgModule,
@@ -104,8 +87,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         BsAccordionTabHeaderComponent
                     ],
                     imports: [
-                        CommonModule,
-                        BrowserAnimationsModule
+                        CommonModule
                     ],
                     exports: [
                         BsAccordionComponent,
@@ -144,15 +126,13 @@ class BsAlertComponent {
         this.colors = Color;
         this.isVisible = true;
     }
-    ngOnInit() {
-    }
 }
 BsAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 BsAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsAlertComponent, selector: "bs-alert", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"mb-3 overflow-hidden\" *ngIf=\"isVisible\" [@fadeInOut]>\n    <div class=\"alert mb-0\" [ngClass]=\"'alert-' + colors[type]\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: ["::ng-deep .alert .btn{bottom:0;display:inline-flex;align-items:center}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [FadeInOutAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-alert', animations: [FadeInOutAnimation], template: "<div class=\"mb-3 overflow-hidden\" *ngIf=\"isVisible\" [@fadeInOut]>\n    <div class=\"alert mb-0\" [ngClass]=\"'alert-' + colors[type]\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: ["::ng-deep .alert .btn{bottom:0;display:inline-flex;align-items:center}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+        }], propDecorators: { type: [{
                 type: Input
             }] } });
 
@@ -160,8 +140,6 @@ class BsAlertCloseComponent {
     constructor(alert) {
         this.alert = alert;
     }
-    ngOnInit() {
-    }
     closeAlert() {
         this.alert.isVisible = false;
     }
@@ -198,23 +176,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class BsCalendarMonthService {
     getWeeks(month) {
         const firstAndLast = this.getFirstAndLastDayOfMonth(month);
-        const days = this.dateDiff(firstAndLast.first, firstAndLast.last) + 1;
-        const allDays = [
-            ...this.generateList(this.dayOfWeekMondayBased(firstAndLast.first)).map(d => null),
-            ...this.generateList(days).map(d => {
-                return {
-                    date: new Date(firstAndLast.first.getFullYear(), firstAndLast.first.getMonth(), firstAndLast.first.getDate() + d),
-                    dayOfMonth: d + 1,
-                };
-            }),
-            ...this.generateList(6 - this.dayOfWeekMondayBased(firstAndLast.last)).map(d => null),
-        ];
+        const firstOfMonth = this.getMondayBefore(firstAndLast.first);
+        const lastOfMonth = this.getSundayAfter(firstAndLast.last);
+        const days = this.dateDiff(firstOfMonth, lastOfMonth) + 1;
+        const firstDayOffset = (firstAndLast.first.getDay() + 7 - 1) % 7;
+        const allDays = this.generateList(days).map(d => d - firstDayOffset).map(d => {
+            const wrongDate = new Date(firstAndLast.first.getFullYear(), firstAndLast.first.getMonth(), firstAndLast.first.getDate() + d);
+            const correctDate = new Date(wrongDate.getFullYear(), wrongDate.getMonth(), wrongDate.getDate());
+            return {
+                date: correctDate,
+                dayOfMonth: correctDate.getDate(),
+                isInMonth: (correctDate.getFullYear() === month.getFullYear()) && (correctDate.getMonth() === month.getMonth())
+            };
+        });
         const weeks = this.chunk(allDays, 7);
         const weeksMapped = weeks.map((w, i) => {
             var _a;
             return {
-                number: this.weekOfYear(new Date(month.getFullYear(), month.getMonth(), (_a = w.find(d => d !== null)) === null || _a === void 0 ? void 0 : _a.dayOfMonth)),
-                week: w
+                number: this.weekOfYear(new Date(month.getFullYear(), month.getMonth(), (_a = w.find(d => d.isInMonth)) === null || _a === void 0 ? void 0 : _a.dayOfMonth)),
+                days: w
             };
         });
         return weeksMapped;
@@ -239,10 +219,9 @@ class BsCalendarMonthService {
         return Math.ceil((utcDiff / (1000 * 60 * 60 * 24) + 1) / 7);
     }
     getFirstAndLastDayOfMonth(date) {
-        return {
-            first: new Date(date.getFullYear(), date.getMonth(), 1),
-            last: new Date(date.getFullYear(), date.getMonth() + 1, 0)
-        };
+        const first = new Date(date.getFullYear(), date.getMonth(), 1);
+        const last = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+        return { first, last };
     }
     dateDiff(date1, date2) {
         const utc1 = this.toUTC(date1);
@@ -264,6 +243,21 @@ class BsCalendarMonthService {
         }
         return result;
     }
+    getMondayBefore(date) {
+        const day = date.getDay(), diff = date.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
+        const monday = new Date(date);
+        monday.setDate(diff);
+        return monday;
+    }
+    getSundayAfter(date) {
+        const day = date.getDay();
+        const sunday = new Date(date);
+        if (day !== 0) {
+            const diff = date.getDate() + 7 - day;
+            sunday.setDate(diff);
+        }
+        return sunday;
+    }
 }
 BsCalendarMonthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCalendarMonthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 BsCalendarMonthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCalendarMonthService, providedIn: 'root' });
@@ -308,9 +302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class BsCalendarComponent {
-    constructor(calendarMonthService, ref) {
+    constructor(calendarMonthService) {
         this.calendarMonthService = calendarMonthService;
-        this.ref = ref;
         this.destroyed$ = new Subject();
         //#region CurrentMonth
         this.currentMonth$ = new BehaviorSubject(new Date());
@@ -319,20 +312,21 @@ class BsCalendarComponent {
         //#region SelectedDate
         this.selectedDate$ = new BehaviorSubject(new Date());
         this.selectedDateChange = new EventEmitter();
-        //#endregion
-        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];
+            .pipe(map((weeks) => weeks[1].days))
+            .pipe(map((days) => {
+            const firstDay = days[0];
             if (firstDay) {
-                return week.map((d) => {
+                return days.map((d) => {
                     const date = new Date(firstDay.date.getFullYear(), firstDay.date.getMonth(), d === null || d === void 0 ? void 0 : d.dayOfMonth);
-                    return date.toLocaleString('default', { weekday: 'short' });
+                    return {
+                        short: date.toLocaleString('default', { weekday: 'short' }),
+                        long: date.toLocaleString('default', { weekday: 'long' })
+                    };
                 });
             }
             else {
@@ -358,6 +352,7 @@ class BsCalendarComponent {
     set selectedDate(value) {
         this.selectedDate$.next(value);
     }
+    //#endregion
     ngOnDestroy() {
         this.destroyed$.next(true);
     }
@@ -388,12 +383,12 @@ class BsCalendarComponent {
         }
     }
 }
-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 } });
+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", 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$ | async\" [title]=\"dayOfWeek.long\">\n            {{ dayOfWeek.short }}\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.days\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\" [class.text-muted]=\"!day.isInMonth\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: [".text-muted{color:#9ea7af!important}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 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: [{
+            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$ | async\" [title]=\"dayOfWeek.long\">\n            {{ dayOfWeek.short }}\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.days\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\" [class.text-muted]=\"!day.isInMonth\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: [".text-muted{color:#9ea7af!important}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 }]; }, propDecorators: { currentMonthChange: [{
                 type: Output
             }], currentMonth: [{
                 type: Input
@@ -515,32 +510,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class BsCardComponent {
-    constructor() {
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-    }
 }
 BsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCardComponent, selector: "bs-card", ngImport: i0, template: "<div class=\"card\" style=\"width: 18rem;\">\n    <ng-content select=\"bs-card-header\"></ng-content>\n    <div class=\"card-block\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".card-block{margin:-1px}\n"] });
+BsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCardComponent, selector: "bs-card", ngImport: i0, template: "<div class=\"card\">\n    <ng-content select=\"bs-card-header\"></ng-content>\n    <div class=\"card-block\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".card-block{margin:-1px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-card', template: "<div class=\"card\" style=\"width: 18rem;\">\n    <ng-content select=\"bs-card-header\"></ng-content>\n    <div class=\"card-block\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".card-block{margin:-1px}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'bs-card', template: "<div class=\"card\">\n    <ng-content select=\"bs-card-header\"></ng-content>\n    <div class=\"card-block\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".card-block{margin:-1px}\n"] }]
+        }] });
 
 class BsCardHeaderComponent {
-    constructor() {
-    }
-    ngOnInit() {
-    }
 }
 BsCardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 BsCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCardHeaderComponent, selector: "bs-card-header", ngImport: i0, template: "<div class=\"card-header\">\n    <ng-content></ng-content>\n</div>", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-card-header', template: "<div class=\"card-header\">\n    <ng-content></ng-content>\n</div>", styles: [""] }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class BsCardModule {
 }
@@ -582,9 +567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class BsCarouselComponent {
     constructor() {
         this.animationsDisabled = false;
-        //#region Animation
+        this.indicators = true;
         this._animation = 'slide';
-        //#endregion
         this.destroyed$ = new Subject();
         this.currentImageCounter$ = new BehaviorSubject(-1);
         this.currentImageIndex$ = this.currentImageCounter$
@@ -597,7 +581,6 @@ class BsCarouselComponent {
             .pipe(map$1((index) => { var _a, _b; return (_b = (_a = this.images.get(index)) === null || _a === void 0 ? void 0 : _a.itemTemplate) !== null && _b !== void 0 ? _b : null; }))
             .pipe(takeUntil$1(this.destroyed$));
     }
-    ngOnInit() { }
     ngOnDestroy() {
         this.destroyed$.next(true);
     }
@@ -609,6 +592,7 @@ class BsCarouselComponent {
             this.currentImageCounter$.next(-1);
         }
     }
+    //#region Animation
     set animation(value) {
         this.animationsDisabled = true;
         this._animation = value;
@@ -619,6 +603,7 @@ class BsCarouselComponent {
     get animation() {
         return this._animation;
     }
+    //#endregion
     previousImage() {
         this.currentImageCounter$
             .pipe(take$1(1))
@@ -642,18 +627,20 @@ class BsCarouselComponent {
     }
 }
 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" }, host: { properties: { "@.disabled": "this.animationsDisabled" } }, 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] });
+BsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCarouselComponent, selector: "bs-carousel", inputs: { indicators: "indicators", animation: "animation" }, host: { properties: { "@.disabled": "this.animationsDisabled" } }, queries: [{ propertyName: "images", predicate: BsCarouselImageDirective }], ngImport: i0, template: "<div class=\"carousel slide\">\n    <div *ngIf=\"indicators\" 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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)\"\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"] }]
+            args: [{ selector: 'bs-carousel', animations: [FadeInOutAnimation, CarouselSlideAnimation], template: "<div class=\"carousel slide\">\n    <div *ngIf=\"indicators\" 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: { animationsDisabled: [{
                 type: HostBinding,
                 args: ['@.disabled']
-            }], animation: [{
+            }], indicators: [{
                 type: Input
             }], images: [{
                 type: ContentChildren,
                 args: [BsCarouselImageDirective]
+            }], animation: [{
+                type: Input
             }] } });
 
 class BsCarouselModule {
@@ -682,6 +669,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+const SNACKBAR_CONTENT = new InjectionToken('SnackbarContent');
+
+class BsSnackbarComponent {
+    constructor(content) {
+        this.displayBlock = true;
+        this.width100 = true;
+        this.instance = null;
+        //#region Monitor @slideUpDown hooks
+        this.animationState = '';
+        this.animationStateChanged = new EventEmitter();
+        this.content = content;
+    }
+    onAnimationChanged(event) {
+        this.animationStateChanged.emit(event);
+    }
+}
+BsSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarComponent, deps: [{ token: SNACKBAR_CONTENT }], target: i0.ɵɵFactoryTarget.Component });
+BsSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsSnackbarComponent, selector: "bs-snackbar", host: { properties: { "class.d-block": "this.displayBlock", "class.w-100": "this.width100" } }, ngImport: i0, template: "<div [@slideUpDown]=\"animationState\"\n     (@slideUpDown.start)=\"onAnimationChanged($event)\"\n     (@slideUpDown.done)=\"onAnimationChanged($event)\">\n\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n</div>", styles: [":host{background:#232323;color:rgba(var(--bs-light-rgb))}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [SlideUpDownAnimation] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-snackbar', animations: [SlideUpDownAnimation], template: "<div [@slideUpDown]=\"animationState\"\n     (@slideUpDown.start)=\"onAnimationChanged($event)\"\n     (@slideUpDown.done)=\"onAnimationChanged($event)\">\n\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n</div>", styles: [":host{background:#232323;color:rgba(var(--bs-light-rgb))}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Inject,
+                        args: [SNACKBAR_CONTENT]
+                    }] }];
+    }, propDecorators: { displayBlock: [{
+                type: HostBinding,
+                args: ['class.d-block']
+            }], width100: [{
+                type: HostBinding,
+                args: ['class.w-100']
+            }] } });
+
+class BsSnackbarCloseDirective {
+    constructor(snackbarService) {
+        this.snackbarService = snackbarService;
+    }
+    onClick() {
+        this.snackbarService.hide(this.bsSnackbarClose);
+    }
+}
+BsSnackbarCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarCloseDirective, deps: [{ token: BsSnackbarService }], target: i0.ɵɵFactoryTarget.Directive });
+BsSnackbarCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsSnackbarCloseDirective, selector: "[bsSnackbarClose]", inputs: { bsSnackbarClose: "bsSnackbarClose" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsSnackbarClose]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsSnackbarService }]; }, propDecorators: { bsSnackbarClose: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BsSnackbarModule {
+}
+BsSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, declarations: [BsSnackbarComponent,
+        BsSnackbarCloseDirective], imports: [CommonModule,
+        OverlayModule], exports: [BsSnackbarComponent,
+        BsSnackbarCloseDirective] });
+BsSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, providers: [
+    // { provide: BsSnackbarComponent, useExisting: forwardRef(() => BsSnackbarComponent) }
+    // { provide: BsSnackbarComponent, useClass: BsSnackbarComponent }
+    ], imports: [[
+            CommonModule,
+            OverlayModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsSnackbarComponent,
+                        BsSnackbarCloseDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        OverlayModule
+                    ],
+                    exports: [
+                        BsSnackbarComponent,
+                        BsSnackbarCloseDirective
+                    ],
+                    providers: [
+                    // { provide: BsSnackbarComponent, useExisting: forwardRef(() => BsSnackbarComponent) }
+                    // { provide: BsSnackbarComponent, useClass: BsSnackbarComponent }
+                    ]
+                }]
+        }] });
+
+class BsSnackbarService {
+    constructor(overlay, parentInjector, componentFactoryResolver) {
+        this.overlay = overlay;
+        this.parentInjector = parentInjector;
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    show(template) {
+        const injector = Injector.create({
+            providers: [{ provide: SNACKBAR_CONTENT, useValue: template }],
+            parent: this.parentInjector
+        });
+        const portal = new ComponentPortal(BsSnackbarComponent, null, injector, this.componentFactoryResolver);
+        const overlayRef = this.overlay.create({
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy: this.overlay.position()
+                .global().centerHorizontally().bottom('0'),
+            width: '100%'
+        });
+        const componentInstance = overlayRef.attach(portal);
+        componentInstance.instance['instance'] = {
+            component: componentInstance,
+            overlay: overlayRef
+        };
+        return componentInstance.instance;
+    }
+    hide(snackbar) {
+        snackbar.animationStateChanged.pipe(filter(ev => ev.phaseName === 'done' && ev.toState === 'void'), take(1)).subscribe(() => {
+            var _a;
+            (_a = snackbar['instance']) === null || _a === void 0 ? void 0 : _a.overlay.dispose();
+        });
+        snackbar.animationState = 'void';
+    }
+}
+BsSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+BsSnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarService, providedIn: BsSnackbarModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: BsSnackbarModule
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; } });
+
+class BsCopyDirective {
+    constructor(doc) {
+        this.bsCopy = null;
+        this.bsCopied = new EventEmitter();
+        this.doc = doc;
+    }
+    click(event) {
+        event.preventDefault();
+        const listener = (e) => {
+            var _a;
+            if (!!this.bsCopy && !!window) {
+                const clipboard = e.clipboardData || window['clipboardData'] || null;
+                if (clipboard) {
+                    clipboard.setData('text', (_a = this.bsCopy) === null || _a === void 0 ? void 0 : _a.toString());
+                    e.preventDefault();
+                    this.bsCopied.emit(this.bsCopy);
+                }
+            }
+        };
+        this.doc.addEventListener('copy', listener, false);
+        this.doc.execCommand('copy');
+        this.doc.removeEventListener('copy', listener, false);
+    }
+}
+BsCopyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCopyDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+BsCopyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsCopyDirective, selector: "[bsCopy]", inputs: { bsCopy: "bsCopy" }, outputs: { bsCopied: "bsCopied" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCopyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsCopy]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    }, propDecorators: { bsCopy: [{
+                type: Input
+            }], bsCopied: [{
+                type: Output
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class BsCodeSnippetComponent {
+    constructor(snackbarService) {
+        this.snackbarService = snackbarService;
+        this.htmlToCopy = '';
+    }
+    copiedHtml() {
+        const snackbar = this.snackbarService.show(this.copiedTemplate);
+        setTimeout(() => this.snackbarService.hide(snackbar), 3000);
+    }
+}
+BsCodeSnippetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCodeSnippetComponent, deps: [{ token: BsSnackbarService }], target: i0.ɵɵFactoryTarget.Component });
+BsCodeSnippetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsCodeSnippetComponent, selector: "bs-code-snippet", inputs: { htmlToCopy: "htmlToCopy" }, viewQueries: [{ propertyName: "copiedTemplate", first: true, predicate: ["copiedTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"position-relative\">\n    <button #copyBtn [bsCopy]=\"htmlToCopy\" (bsCopied)=\"copiedHtml()\" class=\"btn btn-link rounded-0 text-light position-absolute copy-btn\">\n        Copy html\n    </button>\n    <pre class=\"white-space-normal\">\n        <code class=\"d-block white-space-pre\" [highlight]=\"htmlToCopy\"></code>\n    </pre>\n    <ng-template #copiedTemplate>\n        <div class=\"p-3\">Copied!</div>\n    </ng-template>\n</div>", styles: [".copy-btn{right:0}\n"], directives: [{ type: BsCopyDirective, selector: "[bsCopy]", inputs: ["bsCopy"], outputs: ["bsCopied"] }, { type: i3.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCodeSnippetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-code-snippet', template: "<div class=\"position-relative\">\n    <button #copyBtn [bsCopy]=\"htmlToCopy\" (bsCopied)=\"copiedHtml()\" class=\"btn btn-link rounded-0 text-light position-absolute copy-btn\">\n        Copy html\n    </button>\n    <pre class=\"white-space-normal\">\n        <code class=\"d-block white-space-pre\" [highlight]=\"htmlToCopy\"></code>\n    </pre>\n    <ng-template #copiedTemplate>\n        <div class=\"p-3\">Copied!</div>\n    </ng-template>\n</div>", styles: [".copy-btn{right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: BsSnackbarService }]; }, propDecorators: { htmlToCopy: [{
+                type: Input
+            }], copiedTemplate: [{
+                type: ViewChild,
+                args: ['copiedTemplate']
+            }] } });
+
+class BsCopyModule {
+}
+BsCopyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCopyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsCopyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCopyModule, declarations: [BsCopyDirective], imports: [CommonModule], exports: [BsCopyDirective] });
+BsCopyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCopyModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCopyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsCopyDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsCopyDirective
+                    ]
+                }]
+        }] });
+
+class BsCodeSnippetModule {
+}
+BsCodeSnippetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCodeSnippetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsCodeSnippetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCodeSnippetModule, declarations: [BsCodeSnippetComponent], imports: [CommonModule,
+        BsCopyModule,
+        HighlightModule], exports: [BsCodeSnippetComponent] });
+BsCodeSnippetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCodeSnippetModule, imports: [[
+            CommonModule,
+            BsCopyModule,
+            HighlightModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsCodeSnippetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsCodeSnippetComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BsCopyModule,
+                        HighlightModule
+                    ],
+                    exports: [
+                        BsCodeSnippetComponent
+                    ]
+                }]
+        }] });
+
 class BsContextMenuDirective {
     constructor(overlay, templateRef, viewContainerRef, element) {
         this.overlay = overlay;
@@ -693,33 +931,50 @@ class BsContextMenuDirective {
         this.element.nativeElement.oncontextmenu = (ev) => {
             ev.preventDefault();
             this.checkAndCloseExisting(ev);
+            console.log('d', element.nativeElement);
             this.overlayRef = this.overlay.create({
-                scrollStrategy: this.overlay.scrollStrategies.noop(),
+                hasBackdrop: false,
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
                 positionStrategy: this.overlay.position()
-                    .global()
-                    .left(ev.x + 'px')
-                    .bottom((window.innerHeight - ev.y) + 'px')
-                    .top(ev.y + 'px')
+                    // .flexibleConnectedTo({ x: ev.x, y: ev.y })
+                    .flexibleConnectedTo(this.element)
+                    .withPositions([
+                    // element: TopLeft - dropdown: TopLeft
+                    { originX: "start", originY: "top", overlayX: "start", overlayY: "top", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                    // // element: TopLeft - dropdown: BottomLeft
+                    // { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                    // // element: TopLeft - dropdown: TopRight
+                    // { originX: "start", originY: "top", overlayX: "end", overlayY: "top", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                    // // element: TopLeft - dropdown: BottomRight
+                    // { originX: "start", originY: "top", overlayX: "end", overlayY: "bottom", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                ])
             });
             this.templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
-            this.overlayRef.attach(this.templatePortal);
+            const view = this.overlayRef.attach(this.templatePortal);
+            view.rootNodes.forEach(node => node.classList.add('position-static'));
         };
     }
     clickAnywhere(ev) {
         this.checkAndCloseExisting(ev);
     }
-    checkAndCloseExisting(ev) {
+    onBlur() {
+        this.close();
+    }
+    close() {
         if (this.overlayRef) {
-            if (!this.overlayRef.overlayElement.contains(ev.target)) {
-                this.overlayRef.detach();
-                this.overlayRef.dispose();
-                this.overlayRef = null;
-            }
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    checkAndCloseExisting(ev) {
+        if (this.overlayRef && !this.overlayRef.overlayElement.contains(ev.target)) {
+            this.close();
         }
     }
 }
 BsContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuDirective, deps: [{ token: i1$1.Overlay }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef, host: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-BsContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsContextMenuDirective, selector: "[bsContextMenu]", host: { listeners: { "document:click": "clickAnywhere($event)" } }, ngImport: i0 });
+BsContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsContextMenuDirective, selector: "[bsContextMenu]", host: { listeners: { "document:click": "clickAnywhere($event)", "window:blur": "onBlur()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
@@ -734,14 +989,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
     }, propDecorators: { clickAnywhere: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['window:blur']
             }] } });
 
 class BsContextMenuModule {
 }
 BsContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BsContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuModule, declarations: [BsContextMenuDirective], imports: [CommonModule], exports: [BsContextMenuDirective] });
+BsContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuModule, declarations: [BsContextMenuDirective], imports: [CommonModule,
+        OverlayModule], exports: [BsContextMenuDirective] });
 BsContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuModule, imports: [[
-            CommonModule
+            CommonModule,
+            OverlayModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuModule, decorators: [{
             type: NgModule,
@@ -750,7 +1010,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         BsContextMenuDirective
                     ],
                     imports: [
-                        CommonModule
+                        CommonModule,
+                        OverlayModule
                     ],
                     exports: [
                         BsContextMenuDirective
@@ -829,85 +1090,80 @@ class BsPaginationComponent {
         /** 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;
+        //#region SelectedPageNumber
+        this.selectedPageNumberChange = new EventEmitter();
         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.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);
@@ -915,6 +1171,8 @@ class BsPaginationComponent {
     get selectedPageNumber() {
         return this._selectedPageNumber;
     }
+    //#endregion
+    //#region NumberOfBoxes
     set numberOfBoxes(value) {
         this._numberOfBoxes = value;
         this.numberOfBoxes$.next(value);
@@ -922,6 +1180,8 @@ class BsPaginationComponent {
     get numberOfBoxes() {
         return this._numberOfBoxes;
     }
+    //#endregion
+    //#region PageNumbers
     set pageNumbers(value) {
         this._pageNumbers = value;
         this.pageNumbers$.next(value);
@@ -929,6 +1189,8 @@ class BsPaginationComponent {
     get pageNumbers() {
         return this._pageNumbers;
     }
+    //#endregion
+    //#region ShowArrows
     set showArrows(value) {
         this._showArrows = value;
         this.showArrows$.next(value);
@@ -936,6 +1198,22 @@ class BsPaginationComponent {
     get showArrows() {
         return this._showArrows;
     }
+    //#endregion
+    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;
+    }
 }
 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 } });
@@ -957,7 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class BsDatatableComponent {
     constructor() {
         this.columns = [];
-        this.onReloadData = new EventEmitter();
+        this.reloadData = new EventEmitter();
         this.settings = new DatatableSettings();
         this.settings.sortProperty = '';
         this.settings.sortDirection = 'ascending';
@@ -976,17 +1254,15 @@ class BsDatatableComponent {
             else {
                 this.settings.sortDirection = 'descending';
             }
-            this.onReloadData.emit();
+            this.reloadData.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"] }] });
+BsDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsDatatableComponent, selector: "bs-datatable", inputs: { settings: "settings", data: "data" }, outputs: { reloadData: "reloadData" }, 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)=\"reloadData.emit()\"\n                [showArrows]=\"false\"></bs-pagination>\n            <bs-pagination class=\"float-end\" [pageNumbers]=\"settings.page.values\"\n                [(selectedPageNumber)]=\"settings.page.selected\" (selectedPageNumberChange)=\"reloadData.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"] }]
+            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)=\"reloadData.emit()\"\n                [showArrows]=\"false\"></bs-pagination>\n            <bs-pagination class=\"float-end\" [pageNumbers]=\"settings.page.values\"\n                [(selectedPageNumber)]=\"settings.page.selected\" (selectedPageNumberChange)=\"reloadData.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]
@@ -994,7 +1270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }], data: [{
                 type: Input
-            }], onReloadData: [{
+            }], reloadData: [{
                 type: Output
             }] } });
 
@@ -1005,11 +1281,11 @@ class BsRowTemplateDirective {
     }
 }
 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 });
+BsRowTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsRowTemplateDirective, selector: "[bsRowTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRowTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rowTemplate]'
+                    selector: '[bsRowTemplate]'
                 }]
         }], ctorParameters: function () { return [{ type: BsDatatableComponent }, { type: i0.TemplateRef }]; } });
 
@@ -1069,7 +1345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class BsDropdownMenuDirective extends ClickOutsideDirective {
-    constructor(dropdown, document, viewContainerRef, templateRef, overlay, elementRef, zone, platformId) {
+    constructor(dropdown, viewContainerRef, templateRef, overlay, elementRef, zone, platformId) {
         super(elementRef, zone, platformId);
         this.dropdown = dropdown;
         this.viewContainerRef = viewContainerRef;
@@ -1079,7 +1355,6 @@ class BsDropdownMenuDirective extends ClickOutsideDirective {
         this.destroyed$ = new Subject();
         this.overlayRef = null;
         this.templatePortal = null;
-        this.document = document;
         this.dropdown.isOpen$
             .pipe(takeUntil(this.destroyed$))
             .subscribe((isOpen) => {
@@ -1092,7 +1367,9 @@ class BsDropdownMenuDirective extends ClickOutsideDirective {
                     positionStrategy: this.overlay.position()
                         .flexibleConnectedTo(!this.dropdown.toggle ? dropdown.elementRef : this.dropdown.toggle.toggleButton)
                         .withPositions([
+                        // element: BottomLeft - dropdown: TopLeft
                         { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top", offsetY: 0 },
+                        // element: TopLeft - dropdown: BottomLeft
                         { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetY: 0 },
                     ]),
                 });
@@ -1113,6 +1390,7 @@ class BsDropdownMenuDirective extends ClickOutsideDirective {
             }
         });
     }
+    get show() { return this.dropdown.isOpen; }
     clickedOutside(ev) {
         var _a;
         if (!this.wait) {
@@ -1126,28 +1404,25 @@ class BsDropdownMenuDirective extends ClickOutsideDirective {
         }
     }
 }
-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$1.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
-BsDropdownMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]", host: { listeners: { "clickOutside": "clickedOutside($event)" }, properties: { "class.show": "dropdown.isOpen" } }, usesInheritance: true, ngImport: i0 });
+BsDropdownMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownMenuDirective, deps: [{ token: forwardRef(() => BsDropdownDirective) }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
+BsDropdownMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]", host: { listeners: { "clickOutside": "clickedOutside($event)" }, properties: { "class.show": "this.show" } }, usesInheritance: true, 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',
-                    },
+                    selector: '[bsDropdownMenu]'
                 }]
         }], 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$1.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: Object, decorators: [{
+                    }] }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
                     }] }];
-    }, propDecorators: { clickedOutside: [{
+    }, propDecorators: { show: [{
+                type: HostBinding,
+                args: ['class.show']
+            }], clickedOutside: [{
                 type: HostListener,
                 args: ['clickOutside', ['$event']]
             }] } });
@@ -1195,9 +1470,13 @@ class BsDropdownDirective {
             this.isOpenChange.emit(value);
         }
     }
+    //#endregion
+    onBlur() {
+        this.isOpen = false;
+    }
 }
 BsDropdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BsDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownDirective, selector: "[bsDropdown]", inputs: { hasBackdrop: "hasBackdrop", sameWidth: "sameWidth", closeOnClickOutside: "closeOnClickOutside", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, queries: [{ propertyName: "menu", first: true, predicate: BsDropdownMenuDirective, descendants: true }, { propertyName: "toggle", first: true, predicate: BsDropdownToggleDirective, descendants: true }], ngImport: i0 });
+BsDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownDirective, selector: "[bsDropdown]", inputs: { hasBackdrop: "hasBackdrop", sameWidth: "sameWidth", closeOnClickOutside: "closeOnClickOutside", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, host: { listeners: { "window:blur": "onBlur()" } }, 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: [{
@@ -1219,83 +1498,506 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Output
             }], isOpen: [{
                 type: Input
+            }], onBlur: [{
+                type: HostListener,
+                args: ['window:blur']
             }] } });
 
 class BsDatepickerComponent {
     constructor() {
-        this.selectedDate = new Date();
-        this.currentMonth = new Date();
+        //#region SelectedDate
+        this._selectedDate = new Date();
+        this.selectedDateChange = new EventEmitter();
+        //#endregion
+        //#region CurrentMonth
+        this._currentMonth = new Date();
+        this.currentMonthChange = new EventEmitter();
     }
-    ngOnInit() {
+    get selectedDate() {
+        return this._selectedDate;
+    }
+    set selectedDate(value) {
+        this._selectedDate = value;
+        this.selectedDateChange.emit(value);
+    }
+    get currentMonth() {
+        return this._currentMonth;
+    }
+    set currentMonth(value) {
+        this._currentMonth = value;
+        this.currentMonthChange.emit(value);
     }
 }
 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", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { type: BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }], pipes: { "date": i1.DatePipe } });
+BsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsDatepickerComponent, selector: "bs-datepicker", inputs: { selectedDate: "selectedDate", currentMonth: "currentMonth" }, outputs: { selectedDateChange: "selectedDateChange", currentMonthChange: "currentMonthChange" }, 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", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { 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 []; } });
+        }], propDecorators: { selectedDateChange: [{
+                type: Output
+            }], selectedDate: [{
+                type: Input
+            }], currentMonthChange: [{
+                type: Output
+            }], currentMonth: [{
+                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,
+        ClickOutsideModule], exports: [BsDropdownDirective,
+        BsDropdownToggleDirective,
+        BsDropdownMenuDirective] });
+BsDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownModule, imports: [[
+            CommonModule,
+            OverlayModule,
+            ClickOutsideModule
+        ]] });
+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,
+                        ClickOutsideModule
+                    ],
+                    exports: [
+                        BsDropdownDirective,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective
+                    ]
+                }]
+        }] });
+
+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 BsProgressComponent {
+    constructor() {
+        this.progressClass = true;
+        this.height = null;
+        this.isIndeterminate = false;
+    }
+}
+BsProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressComponent, selector: "bs-progress", inputs: { height: "height", isIndeterminate: "isIndeterminate" }, host: { properties: { "class.progress": "this.progressClass", "style.height.px": "this.height" } }, ngImport: i0, template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-progress', template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"] }]
+        }], propDecorators: { progressClass: [{
+                type: HostBinding,
+                args: ['class.progress']
+            }], height: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.height.px']
+            }], isIndeterminate: [{
+                type: Input
+            }] } });
+
+class BsProgressBarComponent {
+    constructor() {
+        this.destroyed$ = new Subject();
+        this.minimum$ = new BehaviorSubject(0);
+        this.maximum$ = new BehaviorSubject(100);
+        this.value$ = new BehaviorSubject(50);
+        this.color$ = new BehaviorSubject(Color.primary);
+        this.striped = false;
+        this.animated = false;
+        this.progressBar = true;
+        this.colorClass = 'bg-primary';
+        this.widthStyle = '0';
+        this.role = 'progressbar';
+        this.valueNow = 50;
+        this.valueMin = 0;
+        this.valueMax = 100;
+        this.percentage$ = combineLatest([this.minimum$, this.maximum$, this.value$])
+            .pipe(map(([minimum, maximum, value]) => {
+            return (value - minimum) / (maximum - minimum) * 100;
+        }));
+        this.width$ = this.percentage$
+            .pipe(map((width) => {
+            return String(width) + '%';
+        }));
+        this.colorClass$ = this.color$
+            .pipe(map((color) => {
+            const name = Color[color];
+            return `bg-${name}`;
+        }));
+        this.colorClass$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((color) => {
+            this.colorClass = color;
+        });
+        this.width$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((width) => {
+            this.widthStyle = width;
+        });
+        this.value$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.valueNow = value;
+        });
+        this.minimum$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.valueMin = value;
+        });
+        this.maximum$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.valueMax = value;
+        });
+    }
+    set minimum(value) {
+        this.minimum$.next(value);
+    }
+    set maximum(value) {
+        this.maximum$.next(value);
+    }
+    set value(value) {
+        this.value$.next(value);
+    }
+    set color(value) {
+        this.color$.next(value);
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+    }
+}
+BsProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressBarComponent, selector: "bs-progress-bar", inputs: { minimum: "minimum", maximum: "maximum", value: "value", color: "color", striped: "striped", animated: "animated" }, host: { properties: { "class.progress-bar-striped": "this.striped", "class.progress-bar-animated": "this.animated", "class.progress-bar": "this.progressBar", "class": "this.colorClass", "style.width": "this.widthStyle", "attr.role": "this.role", "attr.aria-valuenow": "this.valueNow", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax" } }, ngImport: i0, template: "", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-progress-bar', template: "", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { minimum: [{
+                type: Input
+            }], maximum: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], striped: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.progress-bar-striped']
+            }], animated: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.progress-bar-animated']
+            }], progressBar: [{
+                type: HostBinding,
+                args: ['class.progress-bar']
+            }], colorClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], widthStyle: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], valueNow: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], valueMin: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], valueMax: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }] } });
+
+class BsForDirective {
+    constructor() {
+        this.defaultCursor = true;
+    }
+    onMouseClick() {
+        if (!('tagName' in this.bsFor)) {
+            this.bsFor.focus();
+        }
+        else if (this.bsFor.tagName.toLowerCase() !== 'input') {
+            this.bsFor.focus();
+        }
+        else if (this.bsFor.type.toLowerCase() === 'file') {
+            this.bsFor.click();
+        }
+        else {
+            this.bsFor.focus();
+        }
+    }
+}
+BsForDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BsForDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsForDirective, selector: "[bsFor]", inputs: { bsFor: "bsFor" }, host: { listeners: { "click": "onMouseClick()" }, properties: { "class.cursor-default": "this.defaultCursor" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsFor]'
+                }]
+        }], propDecorators: { defaultCursor: [{
+                type: HostBinding,
+                args: ['class.cursor-default']
+            }], bsFor: [{
+                type: Input
+            }], onMouseClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BsFormatBytesPipe {
+    transform(value, decimals = 2) {
+        if (value === 0) {
+            return "0 Bytes";
+        }
+        const k = 1024;
+        const dm = decimals <= 0 ? 0 : decimals;
+        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+        const i = Math.floor(Math.log(value) / Math.log(k));
+        return parseFloat((value / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    }
+}
+BsFormatBytesPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+BsFormatBytesPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesPipe, name: "bsFormatBytes" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bsFormatBytes'
+                }]
+        }] });
+
+class BsFileUploadComponent {
+    constructor() {
+        this.dropFilesCaption = 'Drop your files here';
+        this.browseFilesCaption = 'Browse for files';
+        this.placeholder = 'Drop files to upload';
+        this.isDraggingFile = false;
+        this.files = [];
+        this.filesDropped = new EventEmitter();
+    }
+    onChange(event) {
+        console.log('event', event);
+        if (!event.target)
+            return;
+        if (!('files' in event.target))
+            return;
+        if (!event.target['files'])
+            return;
+        const files = event.target.files;
+        if (!files)
+            return;
+        this.processDroppedFiles(files);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            this.isDraggingFile = true;
+            event.dataTransfer.effectAllowed = "copy";
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDraggingFile = false;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDraggingFile = false;
+        if (event.dataTransfer && event.dataTransfer.files) {
+            this.processDroppedFiles(event.dataTransfer.files);
+        }
+    }
+    processDroppedFiles(fileList) {
+        const newFiles = [...Array(fileList.length).keys()]
+            .map(i => fileList.item(i))
+            .filter(f => !!f)
+            .map(f => ({ file: f, progress: 0 }));
+        this.files.push(...newFiles);
+        this.filesDropped.emit(newFiles);
+    }
+}
+BsFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsFileUploadComponent, selector: "bs-file-upload", inputs: { dropFilesCaption: "dropFilesCaption", browseFilesCaption: "browseFilesCaption", placeholder: "placeholder", files: "files" }, outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0, template: "<div class=\"dropzone border position-relative p-5\" [class.dragging]=\"isDraggingFile\">\n    <input type=\"file\" multiple #fileUpload (change)=\"onChange($event)\" [title]=\"placeholder\" [placeholder]=\"placeholder\" class=\"position-absolute w-100 h-100\">\n    <!-- <img src=\"/assets/ic-file-upload.svg\" [alt]=\"placeholder\"> -->\n    <span class=\"h3 d-block\">{{ dropFilesCaption }}</span>\n    <label class=\"btn btn-primary position-relative\" [bsFor]=\"fileUpload\">{{ browseFilesCaption }}</label>\n</div>\n<ul class=\"list-group files-list\">\n    <li class=\"list-group-item\" *ngFor=\"let upload of files\">\n        <ng-container *ngTemplateOutlet=\"fileTemplate ?? defaultFileTemplate; context: { $implicit: upload }\"></ng-container>\n    </li>\n</ul>\n\n<ng-template #defaultFileTemplate let-upload>\n    <div class=\"d-flex flex-row mx-auto\">\n        <div class=\"file-img\"></div>\n        <div class=\"flex-grow-1 text-start px-2\">\n            <span class=\"d-block text-truncate text-secondary\">{{ upload.file.name }}</span>\n            <span class=\"d-block text-grey mb-0\">{{ upload.file.size | bsFormatBytes }}</span>\n            <bs-progress [height]=\"4\">\n                <bs-progress-bar [minimum]=\"0\" [maximum]=\"upload.file.size\" [value]=\"upload.progress\"></bs-progress-bar>\n            </bs-progress>\n        </div>\n    </div>\n</ng-template>", styles: [".dropzone{z-index:1}.dropzone.dragging{border:4px solid #CB1535!important;background:#DC88A8;margin:-3px -3px -4px}.dropzone input{opacity:0;z-index:2;top:0;left:0}.dropzone .btn{z-index:5}.files-list{margin-top:-1px}.files-list .d-flex{max-width:400px}.text-grey{color:#999}.list-group span{margin:-5px auto}\n"], components: [{ type: BsProgressComponent, selector: "bs-progress", inputs: ["height", "isIndeterminate"] }, { type: BsProgressBarComponent, selector: "bs-progress-bar", inputs: ["minimum", "maximum", "value", "color", "striped", "animated"] }], directives: [{ type: BsForDirective, selector: "[bsFor]", inputs: ["bsFor"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "bsFormatBytes": BsFormatBytesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-file-upload', template: "<div class=\"dropzone border position-relative p-5\" [class.dragging]=\"isDraggingFile\">\n    <input type=\"file\" multiple #fileUpload (change)=\"onChange($event)\" [title]=\"placeholder\" [placeholder]=\"placeholder\" class=\"position-absolute w-100 h-100\">\n    <!-- <img src=\"/assets/ic-file-upload.svg\" [alt]=\"placeholder\"> -->\n    <span class=\"h3 d-block\">{{ dropFilesCaption }}</span>\n    <label class=\"btn btn-primary position-relative\" [bsFor]=\"fileUpload\">{{ browseFilesCaption }}</label>\n</div>\n<ul class=\"list-group files-list\">\n    <li class=\"list-group-item\" *ngFor=\"let upload of files\">\n        <ng-container *ngTemplateOutlet=\"fileTemplate ?? defaultFileTemplate; context: { $implicit: upload }\"></ng-container>\n    </li>\n</ul>\n\n<ng-template #defaultFileTemplate let-upload>\n    <div class=\"d-flex flex-row mx-auto\">\n        <div class=\"file-img\"></div>\n        <div class=\"flex-grow-1 text-start px-2\">\n            <span class=\"d-block text-truncate text-secondary\">{{ upload.file.name }}</span>\n            <span class=\"d-block text-grey mb-0\">{{ upload.file.size | bsFormatBytes }}</span>\n            <bs-progress [height]=\"4\">\n                <bs-progress-bar [minimum]=\"0\" [maximum]=\"upload.file.size\" [value]=\"upload.progress\"></bs-progress-bar>\n            </bs-progress>\n        </div>\n    </div>\n</ng-template>", styles: [".dropzone{z-index:1}.dropzone.dragging{border:4px solid #CB1535!important;background:#DC88A8;margin:-3px -3px -4px}.dropzone input{opacity:0;z-index:2;top:0;left:0}.dropzone .btn{z-index:5}.files-list{margin-top:-1px}.files-list .d-flex{max-width:400px}.text-grey{color:#999}.list-group span{margin:-5px auto}\n"] }]
+        }], propDecorators: { dropFilesCaption: [{
+                type: Input
+            }], browseFilesCaption: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], files: [{
+                type: Input
+            }], filesDropped: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class BsFileUploadTemplateDirective {
+    constructor(fileUploadComponent, templateRef) {
+        fileUploadComponent.fileTemplate = templateRef;
+    }
+}
+BsFileUploadTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadTemplateDirective, deps: [{ token: BsFileUploadComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsFileUploadTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsFileUploadTemplateDirective, selector: "[bsFileUploadTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsFileUploadTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsFileUploadComponent }, { type: i0.TemplateRef }]; } });
+
+class BsForModule {
+}
+BsForModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsForModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, declarations: [BsForDirective], imports: [CommonModule], exports: [BsForDirective] });
+BsForModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsForDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsForDirective
+                    ]
+                }]
+        }] });
+
+class BsProgressBarModule {
+}
+BsProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, declarations: [BsProgressBarComponent,
+        BsProgressComponent], imports: [CommonModule], exports: [BsProgressBarComponent,
+        BsProgressComponent] });
+BsProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsProgressBarComponent,
+                        BsProgressComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsProgressBarComponent,
+                        BsProgressComponent
+                    ]
+                }]
+        }] });
 
-class BsDropdownModule {
+class BsFormatBytesModule {
 }
-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,
-        ClickOutsideModule], exports: [BsDropdownDirective,
-        BsDropdownToggleDirective,
-        BsDropdownMenuDirective] });
-BsDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownModule, imports: [[
-            CommonModule,
-            OverlayModule,
-            ClickOutsideModule
+BsFormatBytesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsFormatBytesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, declarations: [BsFormatBytesPipe], imports: [CommonModule], exports: [BsFormatBytesPipe] });
+BsFormatBytesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, imports: [[
+            CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        BsDropdownDirective,
-                        BsDropdownToggleDirective,
-                        BsDropdownMenuDirective
+                        BsFormatBytesPipe
                     ],
                     imports: [
-                        CommonModule,
-                        OverlayModule,
-                        ClickOutsideModule
+                        CommonModule
                     ],
                     exports: [
-                        BsDropdownDirective,
-                        BsDropdownToggleDirective,
-                        BsDropdownMenuDirective
+                        BsFormatBytesPipe
                     ]
                 }]
         }] });
 
-class BsDatepickerModule {
+class BsFileUploadModule {
 }
-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: [[
+BsFileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsFileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, declarations: [BsFileUploadComponent,
+        BsFileUploadTemplateDirective], imports: [CommonModule,
+        BsForModule,
+        BsFormatBytesModule,
+        BsProgressBarModule], exports: [BsFileUploadComponent,
+        BsFileUploadTemplateDirective] });
+BsFileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, imports: [[
             CommonModule,
-            BsCalendarModule,
-            BsDropdownModule
+            BsForModule,
+            BsFormatBytesModule,
+            BsProgressBarModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        BsDatepickerComponent
+                        BsFileUploadComponent,
+                        BsFileUploadTemplateDirective
                     ],
                     imports: [
                         CommonModule,
-                        BsCalendarModule,
-                        BsDropdownModule
+                        BsForModule,
+                        BsFormatBytesModule,
+                        BsProgressBarModule
                     ],
                     exports: [
-                        BsDatepickerComponent
+                        BsFileUploadComponent,
+                        BsFileUploadTemplateDirective
                     ]
                 }]
         }] });
@@ -1351,42 +2053,249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+class BsModalComponent {
+    constructor() { }
+}
+BsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsModalComponent, selector: "bs-modal", ngImport: i0, template: "<div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n        <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n        </div>\n        <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n        </div>\n        <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n        </div>\n    </div>\n</div>", styles: [""], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-modal', template: "<div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n        <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n        </div>\n        <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n        </div>\n        <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n        </div>\n    </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+const MODAL_CONTENT = new InjectionToken('ModalContent');
+
+class BsModalContentComponent {
+    constructor(content) {
+        this.instance = null;
+        //#region Monitor @slideUpDown hooks
+        this.animationState = '';
+        this.animationStateChanged = new EventEmitter();
+        this.content = content;
+    }
+    onAnimationChanged(event) {
+        this.animationStateChanged.emit(event);
+    }
+}
+BsModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalContentComponent, deps: [{ token: MODAL_CONTENT }], target: i0.ɵɵFactoryTarget.Component });
+BsModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsModalContentComponent, selector: "bs-modal-content", ngImport: i0, template: "<div class=\"modal d-block\" tabindex=\"-1\"\n     [@fadeInOut]=\"animationState\"\n     (@fadeInOut.start)=\"onAnimationChanged($event)\"\n     (@fadeInOut.done)=\"onAnimationChanged($event)\">\n\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n\n</div>", styles: [""], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [FadeInOutAnimation] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-modal-content', animations: [FadeInOutAnimation], template: "<div class=\"modal d-block\" tabindex=\"-1\"\n     [@fadeInOut]=\"animationState\"\n     (@fadeInOut.start)=\"onAnimationChanged($event)\"\n     (@fadeInOut.done)=\"onAnimationChanged($event)\">\n\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n\n</div>", styles: [""] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Inject,
+                        args: [MODAL_CONTENT]
+                    }] }];
+    } });
+
+class BsModalHeaderDirective {
+    constructor(modal, template) {
+        modal.header = template;
+    }
+}
+BsModalHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalHeaderDirective, deps: [{ token: BsModalComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsModalHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsModalHeaderDirective, selector: "[bsModalHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsModalHeader]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsModalComponent }, { type: i0.TemplateRef }]; } });
+
+class BsModalBodyDirective {
+    constructor(modal, template) {
+        modal.body = template;
+    }
+}
+BsModalBodyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalBodyDirective, deps: [{ token: BsModalComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsModalBodyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsModalBodyDirective, selector: "[bsModalBody]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsModalBody]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsModalComponent }, { type: i0.TemplateRef }]; } });
+
+class BsModalFooterDirective {
+    constructor(modal, template) {
+        modal.footer = template;
+    }
+}
+BsModalFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalFooterDirective, deps: [{ token: BsModalComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsModalFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsModalFooterDirective, selector: "[bsModalFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsModalFooter]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsModalComponent }, { type: i0.TemplateRef }]; } });
+
+class BsModalModule {
+}
+BsModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalModule, declarations: [BsModalHeaderDirective,
+        BsModalBodyDirective,
+        BsModalFooterDirective,
+        BsModalComponent,
+        BsModalContentComponent], imports: [CommonModule,
+        OverlayModule], exports: [BsModalHeaderDirective,
+        BsModalBodyDirective,
+        BsModalFooterDirective,
+        BsModalComponent] });
+BsModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalModule, imports: [[
+            CommonModule,
+            OverlayModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsModalHeaderDirective,
+                        BsModalBodyDirective,
+                        BsModalFooterDirective,
+                        BsModalComponent,
+                        BsModalContentComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        OverlayModule
+                    ],
+                    exports: [
+                        BsModalHeaderDirective,
+                        BsModalBodyDirective,
+                        BsModalFooterDirective,
+                        BsModalComponent
+                    ]
+                }]
+        }] });
+
+class BsModalService {
+    constructor(overlay, parentInjector, componentFactoryResolver) {
+        this.overlay = overlay;
+        this.parentInjector = parentInjector;
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    show(template) {
+        const injector = Injector.create({
+            providers: [{ provide: MODAL_CONTENT, useValue: template }],
+            parent: this.parentInjector
+        });
+        const portal = new ComponentPortal(BsModalContentComponent, null, injector, this.componentFactoryResolver);
+        const overlayRef = this.overlay.create({
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy: this.overlay.position()
+                .global().centerHorizontally().bottom('0').top('0').left('0').right('0'),
+            width: '100%',
+            hasBackdrop: true
+        });
+        const componentInstance = overlayRef.attach(portal);
+        console.log('instance', componentInstance);
+        componentInstance.instance['instance'] = {
+            component: componentInstance,
+            overlay: overlayRef
+        };
+        return componentInstance.instance;
+    }
+    hide(modal) {
+        modal.animationStateChanged.pipe(filter(ev => ev.phaseName === 'done' && ev.toState === 'void'), take(1)).subscribe(() => {
+            var _a;
+            (_a = modal['instance']) === null || _a === void 0 ? void 0 : _a.overlay.dispose();
+        });
+        modal.animationState = 'void';
+    }
+}
+BsModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+BsModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalService, providedIn: BsModalModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: BsModalModule
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; } });
+
 class BsMultiselectComponent {
     constructor() {
         this.items = [];
         this.selectedItems = [];
     }
     itemChange(item, event) {
-        if (!!event.target.checked) {
+        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" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], 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 mw-250px p-3 border rounded shadow\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <hr class=\"my-2\">\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: [".mw-250px{min-width:250px}\n"], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { type: BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+BsMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsMultiselectComponent, selector: "bs-multiselect", inputs: { items: "items", selectedItems: "selectedItems" }, viewQueries: [{ propertyName: "defaultButtonTemplate", first: true, predicate: ["defaultButtonTemplate"], descendants: true }], ngImport: i0, template: "<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle class=\"btn btn-primary\">\n        <ng-container *ngTemplateOutlet=\"buttonTemplate ?? defaultButtonTemplate; context: { $implicit: selectedItems.length }\"></ng-container>\n    </button>\n    <div *bsDropdownMenu class=\"bg-white mw-250px p-3 border rounded shadow\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        <hr class=\"my-2\" *ngIf=\"headerTemplate\">\n        <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        <hr class=\"my-2\" *ngIf=\"footerTemplate\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n<ng-template #defaultButtonTemplate let-count>\n    {{ count }} selected\n</ng-template>", styles: [".mw-250px{min-width:250px}\n"], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { type: BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 mw-250px p-3 border rounded shadow\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <hr class=\"my-2\">\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: [".mw-250px{min-width:250px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { template: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], items: [{
+            args: [{ selector: 'bs-multiselect', template: "<div bsDropdown [hasBackdrop]=\"true\" [closeOnClickOutside]=\"true\">\n    <button bsDropdownToggle class=\"btn btn-primary\">\n        <ng-container *ngTemplateOutlet=\"buttonTemplate ?? defaultButtonTemplate; context: { $implicit: selectedItems.length }\"></ng-container>\n    </button>\n    <div *bsDropdownMenu class=\"bg-white mw-250px p-3 border rounded shadow\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        <hr class=\"my-2\" *ngIf=\"headerTemplate\">\n        <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        <hr class=\"my-2\" *ngIf=\"footerTemplate\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n<ng-template #defaultButtonTemplate let-count>\n    {{ count }} selected\n</ng-template>", styles: [".mw-250px{min-width:250px}\n"] }]
+        }], propDecorators: { items: [{
                 type: Input
             }], selectedItems: [{
                 type: Input
+            }], defaultButtonTemplate: [{
+                type: ViewChild,
+                args: ['defaultButtonTemplate']
             }] } });
 
+class BsHeaderTemplateDirective {
+    constructor(template, multiselect) {
+        multiselect.headerTemplate = template;
+    }
+}
+BsHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: BsMultiselectComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BsHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsHeaderTemplateDirective, selector: "[bsHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsHeaderTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: BsMultiselectComponent }]; } });
+
+class BsFooterTemplateDirective {
+    constructor(template, multiselect) {
+        multiselect.footerTemplate = template;
+    }
+}
+BsFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFooterTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: BsMultiselectComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BsFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsFooterTemplateDirective, selector: "[bsFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsFooterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: BsMultiselectComponent }]; } });
+
+class BsButtonTemplateDirective {
+    constructor(template, multiselect) {
+        multiselect.buttonTemplate = template;
+    }
+}
+BsButtonTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsButtonTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: BsMultiselectComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BsButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsButtonTemplateDirective, selector: "[bsButtonTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsButtonTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsButtonTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: BsMultiselectComponent }]; } });
+
 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,
+BsMultiselectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectModule, declarations: [BsMultiselectComponent,
+        BsHeaderTemplateDirective,
+        BsFooterTemplateDirective,
+        BsButtonTemplateDirective], imports: [CommonModule,
         BsDropdownModule,
-        FocusOnLoadModule], exports: [BsMultiselectComponent] });
+        FocusOnLoadModule], exports: [BsMultiselectComponent,
+        BsHeaderTemplateDirective,
+        BsFooterTemplateDirective,
+        BsButtonTemplateDirective] });
 BsMultiselectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsMultiselectModule, imports: [[
             CommonModule,
             BsDropdownModule,
@@ -1396,7 +2305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        BsMultiselectComponent
+                        BsMultiselectComponent,
+                        BsHeaderTemplateDirective,
+                        BsFooterTemplateDirective,
+                        BsButtonTemplateDirective
                     ],
                     imports: [
                         CommonModule,
@@ -1404,7 +2316,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         FocusOnLoadModule,
                     ],
                     exports: [
-                        BsMultiselectComponent
+                        BsMultiselectComponent,
+                        BsHeaderTemplateDirective,
+                        BsFooterTemplateDirective,
+                        BsButtonTemplateDirective
                     ]
                 }]
         }] });
@@ -1420,10 +2335,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\">\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"] });
+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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\">\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\">\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"] }]
+            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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\">\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"] }]
         }], propDecorators: { nav: [{
                 type: ViewChild,
                 args: ['nav']
@@ -1496,12 +2411,9 @@ class BsNavbarItemComponent {
         this.anchorTag = null;
         this.parentDropdown = parentDropdown;
     }
-    ngOnInit() {
-    }
     ngAfterContentChecked() {
+        this.anchorTag = this.element.nativeElement.querySelector('li a');
         if (this.hasDropdown) {
-            window.element = this.element.nativeElement;
-            this.anchorTag = this.element.nativeElement.querySelector('li a');
             (this.anchorTag) && this.anchorTag.classList.add('dropdown-toggle');
             if (this.anchorTag && !this.anchorTag.onclick) {
                 this.anchorTag.onclick = (ev) => {
@@ -1518,6 +2430,20 @@ class BsNavbarItemComponent {
                 };
             }
         }
+        else {
+            // Close if this is a link
+            if (this.parentDropdown && this.dropdowns.length === 0) {
+                if (this.anchorTag && !this.anchorTag.onclick) {
+                    this.anchorTag.onclick = (ev) => {
+                        let d = this.parentDropdown;
+                        while (d && d.autoclose) {
+                            d.isVisible = false;
+                            d = d.parentDropdown;
+                        }
+                    };
+                }
+            }
+        }
     }
 }
 BsNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarItemComponent, deps: [{ token: BsNavbarDropdownComponent, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -1536,6 +2462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class BsNavbarDropdownComponent {
     constructor(parentDropdown, navbarItem) {
+        this.autoclose = true;
         this.isVisible = false;
         this.parentDropdown = parentDropdown;
         this.navbarItem = navbarItem;
@@ -1543,11 +2470,9 @@ class BsNavbarDropdownComponent {
     get elementsToExclude() {
         return [this.navbarItem.anchorTag].filter((a) => a).map((a) => a);
     }
-    ngOnInit() {
-    }
 }
 BsNavbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarDropdownComponent, deps: [{ token: BsNavbarDropdownComponent, host: true, optional: true, skipSelf: true }, { token: forwardRef(() => BsNavbarItemComponent), host: true }], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarDropdownComponent, selector: "bs-navbar-dropdown", queries: [{ propertyName: "childDropdowns", predicate: i0.forwardRef(function () { return BsNavbarDropdownComponent; }), descendants: true }], ngImport: i0, template: "<ul class=\"dropdown-menu\" [class.show]=\"isVisible\" [class.submenu]=\"!!parentDropdown\" (clickOutside)=\"isVisible = false\" [exclude]=\"elementsToExclude\" aria-labelledby=\"navbarDropdown\">\n    <ng-content></ng-content>\n</ul>", styles: ["@media (max-width: 767px){.submenu{margin-left:.5rem;margin-right:.5rem}}@media (min-width: 768px){.submenu{position:absolute;left:100%;top:-1px}}\n"], directives: [{ type: i1$2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
+BsNavbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarDropdownComponent, selector: "bs-navbar-dropdown", inputs: { autoclose: "autoclose" }, queries: [{ propertyName: "childDropdowns", predicate: i0.forwardRef(function () { return BsNavbarDropdownComponent; }), descendants: true }], ngImport: i0, template: "<ul class=\"dropdown-menu\" [class.show]=\"isVisible\" [class.submenu]=\"!!parentDropdown\" (clickOutside)=\"isVisible = false\" [exclude]=\"elementsToExclude\" aria-labelledby=\"navbarDropdown\">\n    <ng-content></ng-content>\n</ul>", styles: ["@media (max-width: 767px){.submenu{margin-left:.5rem;margin-right:.5rem}}@media (min-width: 768px){.submenu{position:absolute;left:100%;top:-1px}}\n"], directives: [{ type: i1$2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-navbar-dropdown', template: "<ul class=\"dropdown-menu\" [class.show]=\"isVisible\" [class.submenu]=\"!!parentDropdown\" (clickOutside)=\"isVisible = false\" [exclude]=\"elementsToExclude\" aria-labelledby=\"navbarDropdown\">\n    <ng-content></ng-content>\n</ul>", styles: ["@media (max-width: 767px){.submenu{margin-left:.5rem;margin-right:.5rem}}@media (min-width: 768px){.submenu{position:absolute;left:100%;top:-1px}}\n"] }]
@@ -1564,7 +2489,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         type: Inject,
                         args: [forwardRef(() => BsNavbarItemComponent)]
                     }] }];
-    }, propDecorators: { childDropdowns: [{
+    }, propDecorators: { autoclose: [{
+                type: Input
+            }], childDropdowns: [{
                 type: ContentChildren,
                 args: [forwardRef(() => BsNavbarDropdownComponent), { descendants: true }]
             }] } });
@@ -1660,6 +2587,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['navbarContent']
             }] } });
 
+class BsNavbarBrandComponent {
+    constructor() {
+        this.routerLink = [];
+    }
+}
+BsNavbarBrandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsNavbarBrandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarBrandComponent, selector: "bs-navbar-brand", inputs: { routerLink: "routerLink" }, ngImport: i0, template: "<a class=\"navbar-brand mx-auto mx-md-unset\" [routerLink]=\"routerLink\">\n    <ng-content></ng-content>\n</a>", styles: [""], directives: [{ type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: NavLinkDirective, selector: "bs-navbar-item > a[routerLink]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarBrandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-navbar-brand', template: "<a class=\"navbar-brand mx-auto mx-md-unset\" [routerLink]=\"routerLink\">\n    <ng-content></ng-content>\n</a>", styles: [""] }]
+        }], propDecorators: { routerLink: [{
+                type: Input
+            }] } });
+
 class BsNavbarModule {
 }
 BsNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1669,7 +2610,8 @@ BsNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         BsNavbarItemComponent,
         DropdownToggleDirective,
         NavLinkDirective,
-        NavbarContentDirective], imports: [CommonModule,
+        NavbarContentDirective,
+        BsNavbarBrandComponent], imports: [CommonModule,
         RouterModule,
         ClickOutsideModule], exports: [BsNavbarComponent,
         BsNavbarNavComponent,
@@ -1677,7 +2619,8 @@ BsNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         BsNavbarItemComponent,
         DropdownToggleDirective,
         NavLinkDirective,
-        NavbarContentDirective] });
+        NavbarContentDirective,
+        BsNavbarBrandComponent] });
 BsNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarModule, imports: [[
             CommonModule,
             RouterModule,
@@ -1693,188 +2636,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         BsNavbarItemComponent,
                         DropdownToggleDirective,
                         NavLinkDirective,
-                        NavbarContentDirective
+                        NavbarContentDirective,
+                        BsNavbarBrandComponent
                     ],
                     imports: [
                         CommonModule,
                         RouterModule,
                         ClickOutsideModule
                     ],
-                    exports: [
-                        BsNavbarComponent,
-                        BsNavbarNavComponent,
-                        BsNavbarDropdownComponent,
-                        BsNavbarItemComponent,
-                        DropdownToggleDirective,
-                        NavLinkDirective,
-                        NavbarContentDirective
-                    ]
-                }]
-        }] });
-
-class BsProgressComponent {
-    constructor() {
-        this.progressClass = true;
-        this.height = null;
-        this.isIndeterminate = false;
-    }
-}
-BsProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressComponent, selector: "bs-progress", inputs: { height: "height", isIndeterminate: "isIndeterminate" }, host: { properties: { "class.progress": "this.progressClass", "style.height.px": "this.height" } }, ngImport: i0, template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-progress', template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"] }]
-        }], propDecorators: { progressClass: [{
-                type: HostBinding,
-                args: ['class.progress']
-            }], height: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.height.px']
-            }], isIndeterminate: [{
-                type: Input
-            }] } });
-
-class BsProgressBarComponent {
-    constructor() {
-        this.destroyed$ = new Subject();
-        this.minimum$ = new BehaviorSubject(0);
-        this.maximum$ = new BehaviorSubject(100);
-        this.value$ = new BehaviorSubject(50);
-        this.color$ = new BehaviorSubject(Color.primary);
-        this.striped = false;
-        this.animated = false;
-        this.progressBar = true;
-        this.colorClass = 'bg-primary';
-        this.widthStyle = '0';
-        this.role = 'progressbar';
-        this.valueNow = 50;
-        this.valueMin = 0;
-        this.valueMax = 100;
-        this.percentage$ = combineLatest([this.minimum$, this.maximum$, this.value$])
-            .pipe(map(([minimum, maximum, value]) => {
-            return (value - minimum) / (maximum - minimum) * 100;
-        }));
-        this.width$ = this.percentage$
-            .pipe(map((width) => {
-            return String(width) + '%';
-        }));
-        this.colorClass$ = this.color$
-            .pipe(map((color) => {
-            const name = Color[color];
-            return `bg-${name}`;
-        }));
-        this.colorClass$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((color) => {
-            this.colorClass = color;
-        });
-        this.width$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((width) => {
-            this.widthStyle = width;
-        });
-        this.value$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.valueNow = value;
-        });
-        this.minimum$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.valueMin = value;
-        });
-        this.maximum$
+                    exports: [
+                        BsNavbarComponent,
+                        BsNavbarNavComponent,
+                        BsNavbarDropdownComponent,
+                        BsNavbarItemComponent,
+                        DropdownToggleDirective,
+                        NavLinkDirective,
+                        NavbarContentDirective,
+                        BsNavbarBrandComponent
+                    ]
+                }]
+        }] });
+
+class BsRatingComponent {
+    constructor() {
+        this.destroyed$ = new Subject();
+        this.maximum$ = new BehaviorSubject(5);
+        this.value$ = new BehaviorSubject(3);
+        this.previewValue$ = new BehaviorSubject(null);
+        //#endregion
+        //#region Value
+        this.valueChange = new EventEmitter();
+        this.starsChange = new EventEmitter();
+        this.stars$ = combineLatest([this.maximum$, this.previewValue$, this.value$])
+            .pipe(map(([maximum, previewValue, value]) => {
+            const v = previewValue !== null && previewValue !== void 0 ? previewValue : value;
+            return [
+                ...[...Array(v).keys()].map(i => true),
+                ...[...Array(maximum - v).keys()].map(i => false)
+            ];
+        }));
+        combineLatest([this.previewValue$, this.value$])
             .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.valueMax = value;
+            .subscribe(([previewValue, value]) => {
+            const v = previewValue !== null && previewValue !== void 0 ? previewValue : value;
+            this.starsChange.emit(v);
         });
     }
-    set minimum(value) {
-        this.minimum$.next(value);
-    }
+    //#region Maximum
     set maximum(value) {
         this.maximum$.next(value);
     }
+    get value() {
+        return this.value$.value;
+    }
     set value(value) {
         this.value$.next(value);
+        this.valueChange.emit(value);
     }
-    set color(value) {
-        this.color$.next(value);
-    }
+    //#endregion
     ngOnDestroy() {
         this.destroyed$.next(true);
     }
+    hoverValue(index) {
+        this.previewValue$.next(index + 1);
+    }
+    selectValue(index) {
+        this.value = index + 1;
+    }
+    onMouseLeave() {
+        this.previewValue$.next(null);
+    }
 }
-BsProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressBarComponent, selector: "bs-progress-bar", inputs: { minimum: "minimum", maximum: "maximum", value: "value", color: "color", striped: "striped", animated: "animated" }, host: { properties: { "class.progress-bar-striped": "this.striped", "class.progress-bar-animated": "this.animated", "class.progress-bar": "this.progressBar", "class": "this.colorClass", "style.width": "this.widthStyle", "attr.role": "this.role", "attr.aria-valuenow": "this.valueNow", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax" } }, ngImport: i0, template: "", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, decorators: [{
+BsRatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsRatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsRatingComponent, selector: "bs-rating", inputs: { maximum: "maximum", value: "value" }, outputs: { valueChange: "valueChange", starsChange: "starsChange" }, host: { listeners: { "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<span class=\"cursor-pointer\" *ngFor=\"let star of (stars$ | async), let i = index\" (mouseenter)=\"hoverValue(i)\" (click)=\"selectValue(i)\">\n    {{ star ? '&#9733;' : '&#9734;' }}\n</span>", styles: [""], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRatingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-progress-bar', template: "", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { minimum: [{
-                type: Input
-            }], maximum: [{
+            args: [{ selector: 'bs-rating', template: "<span class=\"cursor-pointer\" *ngFor=\"let star of (stars$ | async), let i = index\" (mouseenter)=\"hoverValue(i)\" (click)=\"selectValue(i)\">\n    {{ star ? '&#9733;' : '&#9734;' }}\n</span>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { maximum: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
+            }], starsChange: [{
+                type: Output
             }], value: [{
                 type: Input
-            }], color: [{
-                type: Input
-            }], striped: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.progress-bar-striped']
-            }], animated: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.progress-bar-animated']
-            }], progressBar: [{
-                type: HostBinding,
-                args: ['class.progress-bar']
-            }], colorClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], widthStyle: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], valueNow: [{
-                type: HostBinding,
-                args: ['attr.aria-valuenow']
-            }], valueMin: [{
-                type: HostBinding,
-                args: ['attr.aria-valuemin']
-            }], valueMax: [{
-                type: HostBinding,
-                args: ['attr.aria-valuemax']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
-class BsProgressBarModule {
+class BsRatingModule {
 }
-BsProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BsProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, declarations: [BsProgressBarComponent,
-        BsProgressComponent], imports: [CommonModule], exports: [BsProgressBarComponent,
-        BsProgressComponent] });
-BsProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, imports: [[
+BsRatingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsRatingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRatingModule, declarations: [BsRatingComponent], imports: [CommonModule], exports: [BsRatingComponent] });
+BsRatingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRatingModule, imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsRatingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        BsProgressBarComponent,
-                        BsProgressComponent
+                        BsRatingComponent
                     ],
                     imports: [
                         CommonModule
                     ],
                     exports: [
-                        BsProgressBarComponent,
-                        BsProgressComponent
+                        BsRatingComponent
                     ]
                 }]
         }] });
@@ -1924,15 +2792,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
     } });
 
 class BsScrollspyComponent {
-    constructor(scrollOffsetService, document) {
+    constructor(scrollOffsetService, document, zone) {
         this.scrollOffsetService = scrollOffsetService;
+        this.zone = zone;
+        this.destroyed$ = new Subject();
+        this.viewInit$ = new BehaviorSubject(false);
+        this.contentInit$ = new BehaviorSubject(false);
         this.activeDirective = null;
         this.doc = document;
+        combineLatest([this.viewInit$, this.contentInit$])
+            .pipe(filter(([viewInit, contentInit]) => viewInit && contentInit), take(1))
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe(() => {
+            // this.setActiveDirective();
+            this.scrollToCurrentInSpy();
+        });
     }
     ngAfterViewInit() {
-        this.onWindowScroll();
+        this.viewInit$.next(true);
+    }
+    ngAfterContentInit() {
+        this.contentInit$.next(true);
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
     }
     onWindowScroll() {
+        this.setActiveDirective();
+        this.scrollToCurrentInSpy();
+    }
+    setActiveDirective() {
         var _a;
         const offsetY = this.scrollOffsetService.getScrollOffset()[1];
         const dirs = this.directives.filter((d) => d.element.nativeElement.getBoundingClientRect().y < offsetY);
@@ -1945,6 +2834,8 @@ class BsScrollspyComponent {
         else {
             this.activeDirective = dirs[dirs.length - 1];
         }
+    }
+    scrollToCurrentInSpy() {
         if (window && (window.innerWidth >= 768)) {
             if (this.activeDirective) {
                 const index = this.directives.toArray().findIndex((v, i) => v === this.activeDirective);
@@ -1962,7 +2853,7 @@ class BsScrollspyComponent {
         window.scrollTo({ top: y, behavior: 'smooth' });
     }
 }
-BsScrollspyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyComponent, deps: [{ token: BsScrollOffsetService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+BsScrollspyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyComponent, deps: [{ token: BsScrollOffsetService }, { token: DOCUMENT }, { token: i0.NgZone }], 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 }], viewQueries: [{ propertyName: "anchors", predicate: ["anchor"], descendants: true }], ngImport: i0, template: "<div class=\"spy\">\n    <ul class=\"text-muted\">\n        <li *ngFor=\"let dir of directives; let i = index\">\n            <span [attr.data-index]=\"i\" class=\"cursor-pointer\" [ngClass]=\"'nav' + dir.element.nativeElement.tagName\" [class.fw-bold]=\"activeDirective?.element === dir.element\" (click)=\"scrollToHeader(dir)\" [title]=\"dir.element.nativeElement.textContent\" #anchor>\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:calc(100vh - 7rem);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,
@@ -1971,7 +2862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         return [{ type: BsScrollOffsetService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }];
+                    }] }, { type: i0.NgZone }];
     }, propDecorators: { directives: [{
                 type: ContentChildren,
                 args: [BsScrollspyDirective, { descendants: true }]
@@ -2069,8 +2960,6 @@ class BsSelect2Component {
         this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
         this.focus();
     }
-    ngOnInit() {
-    }
     onResize() {
         this.hostWidth$.next(this.itemsBox.nativeElement.offsetWidth);
     }
@@ -2079,11 +2968,14 @@ class BsSelect2Component {
     }
 }
 BsSelect2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSelect2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsSelect2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsSelect2Component, selector: "bs-select2", inputs: { searchterm: "searchterm", suggestions: "suggestions", selectedItems: "selectedItems" }, outputs: { provideSuggestions: "provideSuggestions" }, host: { listeners: { "window:resize": "onResize()", "click": "focus()" }, properties: { "class.focus": "this.isFocused" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "itemsBox", first: true, predicate: ["itemsBox"], descendants: true }, { propertyName: "defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [closeOnClickOutside]=\"true\" #itemsBox class=\"items-box\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }\"></ng-container>\n    </ng-container>\n\n    <input type=\"text\" autocomplete=\"off\"\n        [(ngModel)]=\"searchterm\"\n        (ngModelChange)=\"onProvideSuggestions($event)\"\n        (focus)=\"isFocused=true\"\n        (blur)=\"isFocused=false\"\n        [style.width.px]=\"searchWidth\"\n        #searchBox />\n    <div *bsDropdownMenu>\n        <ul class=\"dropdown-menu d-block position-static p-0\" [style.width.px]=\"hostWidth$ | async\">\n            <li *ngFor=\"let suggestion of suggestions\" (click)=\"onSuggestionClicked(suggestion)\" [class.selected]=\"selectedItems | inList:suggestion.id\">{{ suggestion.text }}</li>\n        </ul>\n    </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-select2=\"select2\">\n    <span class=\"select2-item\">\n        <span (click)=\"select2.onRemoveItem(item,$event)\">\u00D7</span>\n        {{ item.text }}\n    </span>\n</ng-template>\n", styles: [".items-box{display:block;position:relative;width:100%;min-height:38px;padding:0 5px 3px;cursor:text;border:1px solid #ccc}.items-box .select2-item{display:inline-block;background-color:#e4e4e4;color:#1a1a1a;border:1px solid #aaa;border-radius:4px;margin-top:5px;margin-right:5px;padding:0 5px;cursor:default;user-select:none;-webkit-user-select:none}.items-box .select2-item>span{cursor:pointer;color:#999}.items-box .select2-item>span:hover{color:#333}.items-box input{border:none;outline:0;margin:5px 0 2px;background:none}:host{display:block;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host.focus{color:#495057;background-color:#fff;border-color:#80bdff!important;outline:0;box-shadow:0 0 0 .2rem #007bff40}ul{max-height:200px;overflow-y:auto}ul>li{padding:10px;cursor:pointer}ul>li.selected{background:#ddd}ul>li:hover{color:#fff;background-color:#5897fb}\n"], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }], pipes: { "async": i1.AsyncPipe, "inList": BsInListPipe } });
+BsSelect2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsSelect2Component, selector: "bs-select2", inputs: { searchterm: "searchterm", suggestions: "suggestions", selectedItems: "selectedItems" }, outputs: { provideSuggestions: "provideSuggestions" }, host: { listeners: { "window:resize": "onResize()", "click": "focus()" }, properties: { "class.focus": "this.isFocused" } }, viewQueries: [{ propertyName: "defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "itemsBox", first: true, predicate: ["itemsBox"], descendants: true }], ngImport: i0, template: "<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [closeOnClickOutside]=\"true\" #itemsBox class=\"items-box text-wrap\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }\"></ng-container>\n    </ng-container>\n\n    <input type=\"text\" autocomplete=\"off\"\n        [(ngModel)]=\"searchterm\"\n        (ngModelChange)=\"onProvideSuggestions($event)\"\n        (focus)=\"isFocused=true\"\n        (blur)=\"isFocused=false\"\n        [style.width.px]=\"searchWidth\"\n        #searchBox />\n    <div *bsDropdownMenu>\n        <ul class=\"dropdown-menu d-block position-static p-0\" [style.width.px]=\"hostWidth$ | async\">\n            <li *ngFor=\"let suggestion of suggestions\" (click)=\"onSuggestionClicked(suggestion)\" [class.selected]=\"selectedItems | inList:suggestion.id\">{{ suggestion.text }}</li>\n        </ul>\n    </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-select2=\"select2\">\n    <span class=\"select2-item\">\n        <span (click)=\"select2.onRemoveItem(item,$event)\">\u00D7</span>\n        {{ item.text }}\n    </span>\n</ng-template>\n", styles: [".items-box{display:block;position:relative;width:100%;min-height:38px;padding:0 5px 3px;cursor:text;border:1px solid #ccc}.items-box .select2-item{display:inline-block;background-color:#e4e4e4;color:#1a1a1a;border:1px solid #aaa;border-radius:4px;margin-top:5px;margin-right:5px;padding:0 5px;cursor:default;user-select:none;-webkit-user-select:none}.items-box .select2-item>span{cursor:pointer;color:#999}.items-box .select2-item>span:hover{color:#333}.items-box input{border:none;outline:0;margin:5px 0 2px;background:none}:host{display:block;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host.focus{color:#495057;background-color:#fff;border-color:#80bdff!important;outline:0;box-shadow:0 0 0 .2rem #007bff40}ul{max-height:200px;overflow-y:auto}ul>li{padding:10px;cursor:pointer}ul>li.selected{background:#ddd}ul>li:hover{color:#fff;background-color:#5897fb}\n"], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }], pipes: { "async": i1.AsyncPipe, "inList": BsInListPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSelect2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-select2', template: "<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [closeOnClickOutside]=\"true\" #itemsBox class=\"items-box\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }\"></ng-container>\n    </ng-container>\n\n    <input type=\"text\" autocomplete=\"off\"\n        [(ngModel)]=\"searchterm\"\n        (ngModelChange)=\"onProvideSuggestions($event)\"\n        (focus)=\"isFocused=true\"\n        (blur)=\"isFocused=false\"\n        [style.width.px]=\"searchWidth\"\n        #searchBox />\n    <div *bsDropdownMenu>\n        <ul class=\"dropdown-menu d-block position-static p-0\" [style.width.px]=\"hostWidth$ | async\">\n            <li *ngFor=\"let suggestion of suggestions\" (click)=\"onSuggestionClicked(suggestion)\" [class.selected]=\"selectedItems | inList:suggestion.id\">{{ suggestion.text }}</li>\n        </ul>\n    </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-select2=\"select2\">\n    <span class=\"select2-item\">\n        <span (click)=\"select2.onRemoveItem(item,$event)\">\u00D7</span>\n        {{ item.text }}\n    </span>\n</ng-template>\n", styles: [".items-box{display:block;position:relative;width:100%;min-height:38px;padding:0 5px 3px;cursor:text;border:1px solid #ccc}.items-box .select2-item{display:inline-block;background-color:#e4e4e4;color:#1a1a1a;border:1px solid #aaa;border-radius:4px;margin-top:5px;margin-right:5px;padding:0 5px;cursor:default;user-select:none;-webkit-user-select:none}.items-box .select2-item>span{cursor:pointer;color:#999}.items-box .select2-item>span:hover{color:#333}.items-box input{border:none;outline:0;margin:5px 0 2px;background:none}:host{display:block;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host.focus{color:#495057;background-color:#fff;border-color:#80bdff!important;outline:0;box-shadow:0 0 0 .2rem #007bff40}ul{max-height:200px;overflow-y:auto}ul>li{padding:10px;cursor:pointer}ul>li.selected{background:#ddd}ul>li:hover{color:#fff;background-color:#5897fb}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { searchBox: [{
+            args: [{ selector: 'bs-select2', template: "<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [closeOnClickOutside]=\"true\" #itemsBox class=\"items-box text-wrap\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }\"></ng-container>\n    </ng-container>\n\n    <input type=\"text\" autocomplete=\"off\"\n        [(ngModel)]=\"searchterm\"\n        (ngModelChange)=\"onProvideSuggestions($event)\"\n        (focus)=\"isFocused=true\"\n        (blur)=\"isFocused=false\"\n        [style.width.px]=\"searchWidth\"\n        #searchBox />\n    <div *bsDropdownMenu>\n        <ul class=\"dropdown-menu d-block position-static p-0\" [style.width.px]=\"hostWidth$ | async\">\n            <li *ngFor=\"let suggestion of suggestions\" (click)=\"onSuggestionClicked(suggestion)\" [class.selected]=\"selectedItems | inList:suggestion.id\">{{ suggestion.text }}</li>\n        </ul>\n    </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-select2=\"select2\">\n    <span class=\"select2-item\">\n        <span (click)=\"select2.onRemoveItem(item,$event)\">\u00D7</span>\n        {{ item.text }}\n    </span>\n</ng-template>\n", styles: [".items-box{display:block;position:relative;width:100%;min-height:38px;padding:0 5px 3px;cursor:text;border:1px solid #ccc}.items-box .select2-item{display:inline-block;background-color:#e4e4e4;color:#1a1a1a;border:1px solid #aaa;border-radius:4px;margin-top:5px;margin-right:5px;padding:0 5px;cursor:default;user-select:none;-webkit-user-select:none}.items-box .select2-item>span{cursor:pointer;color:#999}.items-box .select2-item>span:hover{color:#333}.items-box input{border:none;outline:0;margin:5px 0 2px;background:none}:host{display:block;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host.focus{color:#495057;background-color:#fff;border-color:#80bdff!important;outline:0;box-shadow:0 0 0 .2rem #007bff40}ul{max-height:200px;overflow-y:auto}ul>li{padding:10px;cursor:pointer}ul>li.selected{background:#ddd}ul>li:hover{color:#fff;background-color:#5897fb}\n"] }]
+        }], propDecorators: { defaultItemTemplate: [{
+                type: ViewChild,
+                args: ['defaultItemTemplate', { static: true }]
+            }], searchBox: [{
                 type: ViewChild,
                 args: ['searchBox']
             }], itemsBox: [{
@@ -2106,15 +2998,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             }], focus: [{
                 type: HostListener,
                 args: ['click']
-            }], defaultItemTemplate: [{
-                type: ViewChild,
-                args: ['defaultItemTemplate', { static: true }]
             }] } });
 
 class BsItemTemplateDirective {
     constructor(select2component, templateRef) {
         this.select2component = select2component;
-        console.log('template', templateRef);
         this.select2component.itemTemplate = templateRef;
     }
 }
@@ -2184,164 +3072,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-const SNACKBAR_CONTENT = new InjectionToken('SnackbarContent');
-
-class BsSnackbarComponent {
-    constructor(content) {
-        this.displayBlock = true;
-        this.width100 = true;
-        this.instance = null;
-        //#region Monitor @slideUpDown hooks
-        this.animationState = '';
-        this.animationStateChanged = new EventEmitter();
-        this.content = content;
-    }
-    onAnimationChanged(event) {
-        this.animationStateChanged.emit(event);
-    }
-}
-BsSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarComponent, deps: [{ token: SNACKBAR_CONTENT }], target: i0.ɵɵFactoryTarget.Component });
-BsSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsSnackbarComponent, selector: "bs-snackbar", host: { properties: { "class.d-block": "this.displayBlock", "class.w-100": "this.width100" } }, ngImport: i0, template: "<div [@slideUpDown]=\"animationState\"\n     (@slideUpDown.start)=\"onAnimationChanged($event)\"\n     (@slideUpDown.done)=\"onAnimationChanged($event)\">\n\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n</div>", styles: [":host{background:#232323;color:rgba(var(--bs-light-rgb))}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [SlideUpDownAnimation] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-snackbar', animations: [SlideUpDownAnimation], template: "<div [@slideUpDown]=\"animationState\"\n     (@slideUpDown.start)=\"onAnimationChanged($event)\"\n     (@slideUpDown.done)=\"onAnimationChanged($event)\">\n\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n</div>", styles: [":host{background:#232323;color:rgba(var(--bs-light-rgb))}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Inject,
-                        args: [SNACKBAR_CONTENT]
-                    }] }];
-    }, propDecorators: { displayBlock: [{
-                type: HostBinding,
-                args: ['class.d-block']
-            }], width100: [{
-                type: HostBinding,
-                args: ['class.w-100']
-            }] } });
-
-class BsSnackbarService {
-    constructor(overlay, parentInjector, componentFactoryResolver) {
-        this.overlay = overlay;
-        this.parentInjector = parentInjector;
-        this.componentFactoryResolver = componentFactoryResolver;
-    }
-    show(template) {
-        const injector = Injector.create({
-            providers: [{ provide: SNACKBAR_CONTENT, useValue: template }],
-            parent: this.parentInjector
-        });
-        const portal = new ComponentPortal(BsSnackbarComponent, null, injector, this.componentFactoryResolver);
-        const overlayRef = this.overlay.create({
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            positionStrategy: this.overlay.position()
-                .global().centerHorizontally().bottom('0'),
-            width: '100%'
-        });
-        const componentInstance = overlayRef.attach(portal);
-        // componentInstance.
-        componentInstance.instance['instance'] = {
-            component: componentInstance,
-            overlay: overlayRef
-        };
-        return componentInstance.instance;
-    }
-    hide(snackbar) {
-        snackbar.animationStateChanged.pipe(filter(ev => ev.phaseName === 'done' && ev.toState === 'void'), take(1)).subscribe(() => {
-            var _a;
-            (_a = snackbar['instance']) === null || _a === void 0 ? void 0 : _a.overlay.dispose();
-        });
-        snackbar.animationState = 'void';
-    }
-}
-BsSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
-BsSnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; } });
-
-class BsSnackbarCloseDirective {
-    constructor(snackbarService) {
-        this.snackbarService = snackbarService;
-    }
-    onClick() {
-        this.snackbarService.hide(this.bsSnackbarClose);
-    }
-}
-BsSnackbarCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarCloseDirective, deps: [{ token: BsSnackbarService }], target: i0.ɵɵFactoryTarget.Directive });
-BsSnackbarCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsSnackbarCloseDirective, selector: "[bsSnackbarClose]", inputs: { bsSnackbarClose: "bsSnackbarClose" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bsSnackbarClose]'
-                }]
-        }], ctorParameters: function () { return [{ type: BsSnackbarService }]; }, propDecorators: { bsSnackbarClose: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class BsSnackbarModule {
-}
-BsSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BsSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, declarations: [BsSnackbarComponent,
-        BsSnackbarCloseDirective], imports: [CommonModule], exports: [BsSnackbarComponent,
-        BsSnackbarCloseDirective] });
-BsSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, providers: [
-    // { provide: BsSnackbarComponent, useExisting: forwardRef(() => BsSnackbarComponent) }
-    // { provide: BsSnackbarComponent, useClass: BsSnackbarComponent }
-    ], imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSnackbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        BsSnackbarComponent,
-                        BsSnackbarCloseDirective
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        BsSnackbarComponent,
-                        BsSnackbarCloseDirective
-                    ],
-                    providers: [
-                    // { provide: BsSnackbarComponent, useExisting: forwardRef(() => BsSnackbarComponent) }
-                    // { provide: BsSnackbarComponent, useClass: BsSnackbarComponent }
-                    ]
-                }]
-        }] });
-
 class BsTabPageComponent {
     constructor(tabControl) {
         this.disabled = false;
         this.tabControl = tabControl;
     }
-    ngOnInit() {
-    }
 }
 BsTabPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTabPageComponent, deps: [{ token: BsTabControlComponent }], target: i0.ɵɵFactoryTarget.Component });
 BsTabPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsTabPageComponent, selector: "bs-tab-page", inputs: { disabled: "disabled" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-content *ngIf=\"tabControl.activeTab === this\"></ng-content>", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTabPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-tab-page', template: "<ng-content *ngIf=\"tabControl.activeTab === this\"></ng-content>", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: BsTabControlComponent }]; }, propDecorators: { headerTemplate: [{
+        }], ctorParameters: function () { return [{ type: BsTabControlComponent }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], headerTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], disabled: [{
-                type: Input
             }] } });
 
 class BsTabControlComponent {
     constructor() {
+        this.border = true;
         this.activeTab = null;
     }
-    ngOnInit() {
-    }
     setActiveTab(tab) {
         if (!tab.disabled) {
             this.activeTab = tab;
@@ -2350,13 +3103,15 @@ class BsTabControlComponent {
     }
 }
 BsTabControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTabControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsTabControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsTabControlComponent, selector: "bs-tab-control", queries: [{ propertyName: "tabPages", predicate: BsTabPageComponent }], ngImport: i0, template: "<ul class=\"nav nav-tabs\">\n  <ng-container *ngFor=\"let tab of tabPages\">\n    <li class=\"nav-item\" (click)=\"setActiveTab(tab)\" *ngIf=\"!!tab.headerTemplate\">\n      <a class=\"nav-link\" [class.active]=\"activeTab === tab\" [class.disabled]=\"tab.disabled\" [attr.aria-current]=\"activeTab === tab ? 'page' : null\" [attr.aria-disabled]=\"tab.disabled\" href=\"\">\n        <ng-container [ngTemplateOutlet]=\"tab.headerTemplate\"></ng-container>\n      </a>\n    </li>\n  </ng-container>\n</ul>\n<!-- <div class=\"container\"> -->\n  <ng-content></ng-content>\n<!-- </div> -->", styles: [""], 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"] }] });
+BsTabControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsTabControlComponent, selector: "bs-tab-control", inputs: { border: "border" }, queries: [{ propertyName: "tabPages", predicate: BsTabPageComponent }], ngImport: i0, template: "<ul class=\"nav nav-tabs\">\n  <ng-container *ngFor=\"let tab of tabPages\">\n    <li class=\"nav-item\" (click)=\"setActiveTab(tab)\" *ngIf=\"!!tab.headerTemplate\">\n      <a class=\"nav-link\" [class.active]=\"activeTab === tab\" [class.disabled]=\"tab.disabled\" [attr.aria-current]=\"activeTab === tab ? 'page' : null\" [attr.aria-disabled]=\"tab.disabled\" href=\"\">\n        <ng-container [ngTemplateOutlet]=\"tab.headerTemplate\"></ng-container>\n      </a>\n    </li>\n  </ng-container>\n</ul>\n<div class=\"tab-content\" [class.border]=\"border && activeTab\">\n  <ng-content></ng-content>\n</div>", styles: [".tab-content{margin-top:-1px}\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTabControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-tab-control', template: "<ul class=\"nav nav-tabs\">\n  <ng-container *ngFor=\"let tab of tabPages\">\n    <li class=\"nav-item\" (click)=\"setActiveTab(tab)\" *ngIf=\"!!tab.headerTemplate\">\n      <a class=\"nav-link\" [class.active]=\"activeTab === tab\" [class.disabled]=\"tab.disabled\" [attr.aria-current]=\"activeTab === tab ? 'page' : null\" [attr.aria-disabled]=\"tab.disabled\" href=\"\">\n        <ng-container [ngTemplateOutlet]=\"tab.headerTemplate\"></ng-container>\n      </a>\n    </li>\n  </ng-container>\n</ul>\n<!-- <div class=\"container\"> -->\n  <ng-content></ng-content>\n<!-- </div> -->", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tabPages: [{
+            args: [{ selector: 'bs-tab-control', template: "<ul class=\"nav nav-tabs\">\n  <ng-container *ngFor=\"let tab of tabPages\">\n    <li class=\"nav-item\" (click)=\"setActiveTab(tab)\" *ngIf=\"!!tab.headerTemplate\">\n      <a class=\"nav-link\" [class.active]=\"activeTab === tab\" [class.disabled]=\"tab.disabled\" [attr.aria-current]=\"activeTab === tab ? 'page' : null\" [attr.aria-disabled]=\"tab.disabled\" href=\"\">\n        <ng-container [ngTemplateOutlet]=\"tab.headerTemplate\"></ng-container>\n      </a>\n    </li>\n  </ng-container>\n</ul>\n<div class=\"tab-content\" [class.border]=\"border && activeTab\">\n  <ng-content></ng-content>\n</div>", styles: [".tab-content{margin-top:-1px}\n"] }]
+        }], propDecorators: { tabPages: [{
                 type: ContentChildren,
                 args: [BsTabPageComponent]
+            }], border: [{
+                type: Input
             }] } });
 
 class BsTabControlModule {
@@ -2390,14 +3145,11 @@ class BsToggleButtonComponent {
         this.disableAnimations = true;
         //#region isToggled
         this._isToggled = false;
+        this.change = new EventEmitter();
         this.isToggledChange = new EventEmitter();
         //#endregion
-        this.offColor = '#CCCCCC';
-        this.onColor = '#2196F3';
-        this.round = true;
-    }
-    ngAfterViewInit() {
-        this.disableAnimations = false;
+        //#region disabled
+        this.disabled = false;
     }
     get isToggled() {
         return this._isToggled;
@@ -2406,21 +3158,28 @@ class BsToggleButtonComponent {
         this._isToggled = value;
         this.isToggledChange.emit(this._isToggled);
     }
+    //#endregion
+    onChange(event) {
+        const val = event.target.checked;
+        this.isToggled = val;
+        this.change.emit(val);
+    }
+    ngAfterViewInit() {
+        this.disableAnimations = false;
+    }
 }
 BsToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsToggleButtonComponent, selector: "bs-toggle-button", inputs: { isToggled: "isToggled", offColor: "offColor", onColor: "onColor", round: "round" }, outputs: { isToggledChange: "isToggledChange" }, ngImport: i0, template: "<label (click)=\"isToggled = !isToggled\" class=\"switch\" [class.checked]=\"isToggled\">\n    <span class=\"slider\" [class.round]=\"round\" [@colorTransition]=\"{ value: isToggled ? 'color2' : 'color1', params: { color1: offColor, color2: onColor, 'duration': '.4s' } }\"></span>\n</label>", styles: [".switch{position:relative;display:inline-block;width:30px;height:17px}.switch>.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;transition:transform .4s}.switch>.slider.round{border-radius:8.5px}.switch>.slider.round:before{border-radius:50%}.switch>.slider:before{position:absolute;content:\"\";height:13px;width:13px;left:2px;top:0;bottom:0;margin:auto 0;background-color:#fff;transition:transform .4s}.switch.checked .slider:before{transform:translate(13px)}\n"], animations: [ColorTransitionAnimation] });
+BsToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsToggleButtonComponent, selector: "bs-toggle-button", inputs: { isToggled: "isToggled", disabled: "disabled" }, outputs: { change: "change", isToggledChange: "isToggledChange" }, ngImport: i0, template: "<label class=\"form-check form-switch\">\n    <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isToggled\" (change)=\"onChange($event)\" [disabled]=\"disabled\">\n    <span class=\"form-check-label\">\n        <ng-content></ng-content>\n    </span>\n</label>", styles: [""], animations: [ColorTransitionAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-toggle-button', animations: [ColorTransitionAnimation], template: "<label (click)=\"isToggled = !isToggled\" class=\"switch\" [class.checked]=\"isToggled\">\n    <span class=\"slider\" [class.round]=\"round\" [@colorTransition]=\"{ value: isToggled ? 'color2' : 'color1', params: { color1: offColor, color2: onColor, 'duration': '.4s' } }\"></span>\n</label>", styles: [".switch{position:relative;display:inline-block;width:30px;height:17px}.switch>.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;transition:transform .4s}.switch>.slider.round{border-radius:8.5px}.switch>.slider.round:before{border-radius:50%}.switch>.slider:before{position:absolute;content:\"\";height:13px;width:13px;left:2px;top:0;bottom:0;margin:auto 0;background-color:#fff;transition:transform .4s}.switch.checked .slider:before{transform:translate(13px)}\n"] }]
-        }], propDecorators: { isToggledChange: [{
+            args: [{ selector: 'bs-toggle-button', animations: [ColorTransitionAnimation], template: "<label class=\"form-check form-switch\">\n    <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isToggled\" (change)=\"onChange($event)\" [disabled]=\"disabled\">\n    <span class=\"form-check-label\">\n        <ng-content></ng-content>\n    </span>\n</label>", styles: [""] }]
+        }], propDecorators: { change: [{
+                type: Output
+            }], isToggledChange: [{
                 type: Output
             }], isToggled: [{
                 type: Input
-            }], offColor: [{
-                type: Input
-            }], onColor: [{
-                type: Input
-            }], round: [{
+            }], disabled: [{
                 type: Input
             }] } });
 
@@ -2489,6 +3248,9 @@ class BsTooltipDirective {
             this.hideTooltip();
         };
     }
+    onBlur() {
+        this.hideTooltip();
+    }
     showTooltip() {
         const positions = [];
         switch (this.bsTooltip) {
@@ -2551,7 +3313,7 @@ class BsTooltipDirective {
     }
 }
 BsTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipDirective, deps: [{ token: i1$1.Overlay }, { token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ElementRef, host: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-BsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsTooltipDirective, selector: "*[bsTooltip]", inputs: { bsTooltip: "bsTooltip" }, ngImport: i0 });
+BsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsTooltipDirective, selector: "*[bsTooltip]", inputs: { bsTooltip: "bsTooltip" }, host: { listeners: { "window:blur": "onBlur()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2565,15 +3327,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                     }] }];
     }, propDecorators: { bsTooltip: [{
                 type: Input
+            }], onBlur: [{
+                type: HostListener,
+                args: ['window:blur']
             }] } });
 
 class BsTooltipModule {
 }
 BsTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 BsTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipModule, declarations: [BsTooltipDirective,
-        BsTooltipComponent], imports: [CommonModule], exports: [BsTooltipDirective] });
+        BsTooltipComponent], imports: [CommonModule,
+        OverlayModule], exports: [BsTooltipDirective] });
 BsTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipModule, imports: [[
-            CommonModule
+            CommonModule,
+            OverlayModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipModule, decorators: [{
             type: NgModule,
@@ -2583,7 +3350,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         BsTooltipComponent
                     ],
                     imports: [
-                        CommonModule
+                        CommonModule,
+                        OverlayModule
                     ],
                     exports: [
                         BsTooltipDirective
@@ -2645,7 +3413,7 @@ class BsTypeaheadComponent {
     }
 }
 BsTypeaheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsTypeaheadComponent, selector: "bs-typeahead", inputs: { searchterm: "searchterm", isLoadingText: "isLoadingText", noSuggestionsText: "noSuggestionsText", suggestions: "suggestions" }, outputs: { provideSuggestions: "provideSuggestions", suggestionSelected: "suggestionSelected", searchtermChange: "searchtermChange", submitted: "submitted" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [closeOnClickOutside]=\"true\">\n    <input type=\"text\" class=\"form-control\" #textbox [(ngModel)]=\"searchterm\" (ngModelChange)=\"onProvideSuggestions($event)\" (keyup.enter)=\"onSubmit()\" />\n    <div *bsDropdownMenu>\n        <ul class=\"dropdown-menu d-block position-static\" [style.width.px]=\"hostWidth$ | async\">\n            <bs-progress *ngIf=\"isLoading$ | async\" [height]=\"2\" [isIndeterminate]=\"true\"></bs-progress>\n            <li *ngIf=\"isLoading$ | async\">\n                <a class=\"dropdown-item disabled\">{{ isLoadingText }}</a>\n            </li>\n            <ng-container *ngIf=\"(isLoading$ | async) === false\">\n                <li *ngIf=\"showNoSuggestions$ | async\">\n                    <a class=\"dropdown-item disabled\">{{ noSuggestionsText }}</a>\n                </li>\n                <li *ngFor=\"let suggestion of (suggestions$ | async)\" (click)=\"suggestionClicked(suggestion)\">\n                    <a class=\"dropdown-item cursor-pointer\">{{ suggestion.text }}</a>\n                </li>\n            </ng-container>\n        </ul>\n    </div>\n</div>", styles: ["bs-progress{margin-top:-8px;margin-bottom:6px}\n"], components: [{ type: BsProgressComponent, selector: "bs-progress", inputs: ["height", "isIndeterminate"] }], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
+BsTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsTypeaheadComponent, selector: "bs-typeahead", inputs: { searchterm: "searchterm", isLoadingText: "isLoadingText", noSuggestionsText: "noSuggestionsText", suggestions: "suggestions" }, outputs: { provideSuggestions: "provideSuggestions", suggestionSelected: "suggestionSelected", searchtermChange: "searchtermChange", submitted: "submitted" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [closeOnClickOutside]=\"true\">\n    <input type=\"text\" class=\"form-control\" #textbox [(ngModel)]=\"searchterm\" (ngModelChange)=\"onProvideSuggestions($event)\" (keyup.enter)=\"onSubmit()\" />\n    <div *bsDropdownMenu>\n        <ul class=\"dropdown-menu d-block position-static\" [style.width.px]=\"hostWidth$ | async\">\n            <bs-progress *ngIf=\"isLoading$ | async\" [height]=\"2\" [isIndeterminate]=\"true\"></bs-progress>\n            <li *ngIf=\"isLoading$ | async\">\n                <a class=\"dropdown-item disabled\">{{ isLoadingText }}</a>\n            </li>\n            <ng-container *ngIf=\"(isLoading$ | async) === false\">\n                <li *ngIf=\"showNoSuggestions$ | async\">\n                    <a class=\"dropdown-item disabled\">{{ noSuggestionsText }}</a>\n                </li>\n                <li *ngFor=\"let suggestion of (suggestions$ | async)\" (click)=\"suggestionClicked(suggestion)\">\n                    <a class=\"dropdown-item cursor-pointer\">{{ suggestion.text }}</a>\n                </li>\n            </ng-container>\n        </ul>\n    </div>\n</div>", styles: ["bs-progress{margin-top:-8px;margin-bottom:6px}\n"], components: [{ type: BsProgressComponent, selector: "bs-progress", inputs: ["height", "isIndeterminate"] }], directives: [{ type: BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "isOpen"], outputs: ["isOpenChange"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-typeahead', template: "<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [closeOnClickOutside]=\"true\">\n    <input type=\"text\" class=\"form-control\" #textbox [(ngModel)]=\"searchterm\" (ngModelChange)=\"onProvideSuggestions($event)\" (keyup.enter)=\"onSubmit()\" />\n    <div *bsDropdownMenu>\n        <ul class=\"dropdown-menu d-block position-static\" [style.width.px]=\"hostWidth$ | async\">\n            <bs-progress *ngIf=\"isLoading$ | async\" [height]=\"2\" [isIndeterminate]=\"true\"></bs-progress>\n            <li *ngIf=\"isLoading$ | async\">\n                <a class=\"dropdown-item disabled\">{{ isLoadingText }}</a>\n            </li>\n            <ng-container *ngIf=\"(isLoading$ | async) === false\">\n                <li *ngIf=\"showNoSuggestions$ | async\">\n                    <a class=\"dropdown-item disabled\">{{ noSuggestionsText }}</a>\n                </li>\n                <li *ngFor=\"let suggestion of (suggestions$ | async)\" (click)=\"suggestionClicked(suggestion)\">\n                    <a class=\"dropdown-item cursor-pointer\">{{ suggestion.text }}</a>\n                </li>\n            </ng-container>\n        </ul>\n    </div>\n</div>", styles: ["bs-progress{margin-top:-8px;margin-bottom:6px}\n"] }]
@@ -2754,5 +3522,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BsAccordionComponent, BsAccordionModule, BsAccordionTabComponent, BsAccordionTabHeaderComponent, BsAlertCloseComponent, BsAlertComponent, BsAlertModule, BsCalendarComponent, BsCalendarModule, BsCardComponent, BsCardHeaderComponent, BsCardModule, BsCarouselComponent, BsCarouselImageDirective, BsCarouselModule, BsContextMenuDirective, BsContextMenuModule, BsDatatableColumnDirective, BsDatatableComponent, BsDatatableModule, BsDatepickerComponent, BsDatepickerModule, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownToggleDirective, BsFontColorPipe, BsFontColorPipeModule, BsItemTemplateDirective, BsListGroupComponent, BsListGroupItemComponent, BsListGroupModule, BsMultiselectComponent, BsMultiselectModule, BsNavbarComponent, BsNavbarDropdownComponent, BsNavbarItemComponent, BsNavbarModule, BsNavbarNavComponent, BsPaginationComponent, BsPaginationModule, BsProgressBarComponent, BsProgressBarModule, BsProgressComponent, BsRowTemplateDirective, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsSelect2Component, BsSelect2Module, BsSnackbarCloseDirective, BsSnackbarComponent, BsSnackbarModule, BsSnackbarService, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, BsToggleButtonComponent, BsToggleButtonModule, BsTooltipDirective, BsTooltipModule, BsTypeaheadComponent, BsTypeaheadModule, Color, DatatableSettings, DropdownToggleDirective, NavLinkDirective, NavbarContentDirective, Position };
+export { BsAccordionComponent, BsAccordionModule, BsAccordionTabComponent, BsAccordionTabHeaderComponent, BsAlertCloseComponent, BsAlertComponent, BsAlertModule, BsButtonTemplateDirective, BsCalendarComponent, BsCalendarModule, BsCardComponent, BsCardHeaderComponent, BsCardModule, BsCarouselComponent, BsCarouselImageDirective, BsCarouselModule, BsCodeSnippetComponent, BsCodeSnippetModule, BsContextMenuDirective, BsContextMenuModule, BsCopyDirective, BsCopyModule, BsDatatableColumnDirective, BsDatatableComponent, BsDatatableModule, BsDatepickerComponent, BsDatepickerModule, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownToggleDirective, BsFileUploadComponent, BsFileUploadModule, BsFileUploadTemplateDirective, BsFontColorPipe, BsFontColorPipeModule, BsFooterTemplateDirective, BsForDirective, BsForModule, BsFormatBytesModule, BsFormatBytesPipe, BsHeaderTemplateDirective, BsItemTemplateDirective, BsListGroupComponent, BsListGroupItemComponent, BsListGroupModule, BsModalBodyDirective, BsModalComponent, BsModalContentComponent, BsModalFooterDirective, BsModalHeaderDirective, BsModalModule, BsModalService, BsMultiselectComponent, BsMultiselectModule, BsNavbarBrandComponent, BsNavbarComponent, BsNavbarDropdownComponent, BsNavbarItemComponent, BsNavbarModule, BsNavbarNavComponent, BsPaginationComponent, BsPaginationModule, BsProgressBarComponent, BsProgressBarModule, BsProgressComponent, BsRatingComponent, BsRatingModule, BsRowTemplateDirective, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsSelect2Component, BsSelect2Module, BsSnackbarCloseDirective, BsSnackbarComponent, BsSnackbarModule, BsSnackbarService, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, BsToggleButtonComponent, BsToggleButtonModule, BsTooltipDirective, BsTooltipModule, BsTypeaheadComponent, BsTypeaheadModule, Color, DatatableSettings, DropdownToggleDirective, NavLinkDirective, NavbarContentDirective, Position };
 //# sourceMappingURL=mintplayer-ng-bootstrap.mjs.map