@mintplayer/ng-bootstrap 13.1.21 → 13.1.26

package/fesm2015/mintplayer-ng-bootstrap.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { Component, ContentChildren, NgModule, Input, Injectable, Pipe, EventEmitter, Output, Directive, HostBinding, InjectionToken, Inject, HostListener, Injector, ViewChild, Host, SkipSelf, forwardRef, PLATFORM_ID, ContentChild, ViewChildren, Optional, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { SlideUpDownAnimation, FadeInOutAnimation, CarouselSlideAnimation, ColorTransitionAnimation } from '@mintplayer/ng-animations';
@@ -931,7 +931,6 @@ class BsContextMenuDirective {
         this.element.nativeElement.oncontextmenu = (ev) => {
             ev.preventDefault();
             this.checkAndCloseExisting(ev);
-            console.log('d', element.nativeElement);
             this.overlayRef = this.overlay.create({
                 hasBackdrop: false,
                 scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -1815,7 +1814,6 @@ class BsFileUploadComponent {
         this.filesDropped = new EventEmitter();
     }
     onChange(event) {
-        console.log('event', event);
         if (!event.target)
             return;
         if (!('files' in event.target))
@@ -2002,6 +2000,511 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+var EDragOperation;
+(function (EDragOperation) {
+    EDragOperation[EDragOperation["none"] = 0] = "none";
+    EDragOperation[EDragOperation["createEvent"] = 1] = "createEvent";
+    EDragOperation[EDragOperation["resizeEvent"] = 2] = "resizeEvent";
+    EDragOperation[EDragOperation["moveEvent"] = 3] = "moveEvent";
+})(EDragOperation || (EDragOperation = {}));
+
+class BsTimelineService {
+    splitInParts(event) {
+        let startTime = event.start;
+        const result = [];
+        const eventOrNull = 'color' in event ? event : null;
+        while (!this.dateEquals(startTime, event.end)) {
+            const end = new Date(startTime.getFullYear(), startTime.getMonth(), startTime.getDate() + 1, 0, 0, 0);
+            result.push({ start: startTime, end: end, event: eventOrNull });
+            startTime = end;
+        }
+        if (startTime != event.end) {
+            result.push({ start: startTime, end: event.end, event: eventOrNull });
+        }
+        return { event: event, parts: result };
+    }
+    dateEquals(date1, date2) {
+        return (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+    }
+    getTimeline(events) {
+        const timestamps = this.getTimestamps(events);
+        const tracks = [];
+        timestamps.forEach((timestamp, tIndex) => {
+            const starting = events.filter((e) => e.start === timestamp);
+            // const ending = events.filter((e) => e.end === timestamp);
+            starting.forEach((startedEvent, eIndex) => {
+                const freeTracks = tracks.filter(t => this.trackIsFreeAt(t, startedEvent));
+                if (freeTracks.length === 0) {
+                    tracks.push({ index: tracks.length, events: [startedEvent] });
+                }
+                else {
+                    freeTracks[0].events.push(startedEvent);
+                }
+            });
+        });
+        return tracks;
+    }
+    getTimestamps(events) {
+        const allTimestamps = events.map(e => [e.start, e.end])
+            .reduce((flat, toFlatten) => flat.concat(toFlatten), []);
+        return allTimestamps
+            .filter((t, i) => allTimestamps.indexOf(t) === i)
+            .sort((t1, t2) => t1 - t2);
+    }
+    trackIsFreeAt(track, event) {
+        if (track.events.every((ev) => (ev.end <= event.start) || (event.end <= ev.start))) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+}
+BsTimelineService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BsTimelineService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTimelineService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTimelineService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BsSecondsTodayOffsetPipe {
+    transform(value) {
+        const today = new Date(value.start);
+        today.setHours(0);
+        today.setMinutes(0);
+        today.setSeconds(0);
+        return (value.start.getTime() - today.getTime()) / 1000;
+    }
+}
+BsSecondsTodayOffsetPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSecondsTodayOffsetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+BsSecondsTodayOffsetPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSecondsTodayOffsetPipe, name: "bsSecondsTodayOffset" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSecondsTodayOffsetPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bsSecondsTodayOffset'
+                }]
+        }] });
+
+class BsSecondsTimespanPipe {
+    transform(value) {
+        return (value.end.getTime() - value.start.getTime()) / 1000;
+    }
+}
+BsSecondsTimespanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSecondsTimespanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+BsSecondsTimespanPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSecondsTimespanPipe, name: "bsSecondsTimespan" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSecondsTimespanPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bsSecondsTimespan'
+                }]
+        }] });
+
+class DayOfWeekPipe {
+    transform(value) {
+        const dayOfWeek = value.start.getDay();
+        if (dayOfWeek === 0) {
+            return 7;
+        }
+        else {
+            return dayOfWeek;
+        }
+    }
+}
+DayOfWeekPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DayOfWeekPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DayOfWeekPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DayOfWeekPipe, name: "dayOfWeek" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DayOfWeekPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dayOfWeek'
+                }]
+        }] });
+
+class BsSchedulerComponent {
+    constructor(calendarMonthService, timelineService) {
+        this.calendarMonthService = calendarMonthService;
+        this.timelineService = timelineService;
+        this.events$ = new BehaviorSubject([]);
+        this.previewEvent$ = new BehaviorSubject(null);
+        this.timeSlotDuration$ = new BehaviorSubject(1800);
+        this.mouseState$ = new BehaviorSubject(false);
+        this.hoveredTimeSlot$ = new BehaviorSubject(null);
+        this.destroyed$ = new Subject();
+        //#region UnitHeight
+        this.unitHeight$ = new BehaviorSubject(40);
+        this.unitHeightChange = new EventEmitter();
+        this.operation = null;
+        this.dragStartTimeslot = null;
+        const monday = this.calendarMonthService.getMondayBefore(new Date());
+        this.currentWeek$ = new BehaviorSubject(monday);
+        this.daysOfWeek$ = this.currentWeek$.pipe(map((weekMonday) => {
+            weekMonday.setHours(0);
+            weekMonday.setMinutes(0);
+            weekMonday.setSeconds(0);
+            weekMonday.setMilliseconds(0);
+            return Array.from(Array(7).keys()).map((x) => this.addDays(weekMonday, x));
+        }));
+        this.daysOfWeekWithTimestamps$ = this.daysOfWeek$
+            .pipe(map((daysOfWeek) => {
+            return { start: daysOfWeek[0].getTime(), end: daysOfWeek[daysOfWeek.length - 1].getTime() + 24 * 60 * 60 * 1000 };
+        }));
+        this.eventParts$ = this.events$.pipe(map((events) => events.map((ev) => this.timelineService.splitInParts(ev))));
+        this.eventPartsForThisWeek$ = combineLatest([
+            this.daysOfWeekWithTimestamps$,
+            this.eventParts$
+                .pipe(map(eventParts => eventParts.map(evp => evp.parts)))
+                .pipe(map(jaggedParts => {
+                return jaggedParts.reduce((flat, toFlatten) => flat.concat(toFlatten), []);
+            }))
+        ])
+            .pipe(map(([startAndEnd, eventParts]) => {
+            return eventParts.filter(eventPart => {
+                return !((eventPart.end.getTime() <= startAndEnd.start) || (eventPart.start.getTime() >= startAndEnd.end));
+            });
+        }));
+        this.previewEventParts$ = this.previewEvent$.pipe(map((event) => {
+            if (event) {
+                return this.timelineService.splitInParts(event);
+            }
+            else {
+                return null;
+            }
+        }));
+        this.previewEventPartsForThisWeek$ = combineLatest([this.daysOfWeekWithTimestamps$, this.previewEventParts$])
+            .pipe(map(([startAndEnd, previewEventParts]) => {
+            if (previewEventParts) {
+                return previewEventParts.parts.filter(eventPart => {
+                    return !((eventPart.end.getTime() <= startAndEnd.start) || (eventPart.start.getTime() >= startAndEnd.end));
+                });
+            }
+            else {
+                return [];
+            }
+        }));
+        this.timelinedEventPartsForThisWeek$ = this.eventPartsForThisWeek$
+            .pipe(map(eventParts => {
+            // We'll only use the events for this week
+            const events = eventParts.map(ep => ep.event)
+                .filter((e, i, list) => list.indexOf(e) === i)
+                .filter((e) => !!e)
+                .map((e) => e);
+            const timeline = this.timelineService.getTimeline(events);
+            const result = timeline.map(track => {
+                return track.events.map(ev => {
+                    return { event: ev, index: track.index };
+                });
+            })
+                .reduce((flat, toFlatten) => flat.concat(toFlatten), [])
+                .map((evi) => eventParts.filter(p => p.event === evi.event).map(p => {
+                return { part: p, index: evi.index };
+            }))
+                .reduce((flat, toFlatten) => flat.concat(toFlatten), []);
+            return {
+                total: timeline.length,
+                parts: result
+            };
+        }));
+        this.timeSlots$ = combineLatest([this.daysOfWeek$, this.timeSlotDuration$])
+            .pipe(map(([daysOfWeek, duration]) => {
+            const timeSlotsPerDay = Math.floor((60 * 60 * 24) / duration);
+            return Array.from(Array(timeSlotsPerDay).keys()).map((index) => {
+                const timeSlotStart = new Date(daysOfWeek[0]);
+                timeSlotStart.setSeconds(timeSlotStart.getSeconds() + index * duration);
+                const timeSlotEnd = new Date(timeSlotStart);
+                timeSlotEnd.setSeconds(timeSlotEnd.getSeconds() + duration);
+                return daysOfWeek.map((day) => {
+                    const start = new Date(day);
+                    start.setHours(timeSlotStart.getHours());
+                    start.setMinutes(timeSlotStart.getMinutes());
+                    start.setSeconds(timeSlotStart.getSeconds());
+                    start.setMilliseconds(timeSlotStart.getMilliseconds());
+                    const end = new Date(day);
+                    end.setHours(timeSlotEnd.getHours());
+                    end.setMinutes(timeSlotEnd.getMinutes());
+                    end.setSeconds(timeSlotEnd.getSeconds());
+                    end.setMilliseconds(timeSlotEnd.getMilliseconds());
+                    return { start, end };
+                });
+            });
+        }));
+        this.unitHeight$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((unitHeight) => {
+            this.unitHeightChange.emit(unitHeight);
+        });
+    }
+    get unitHeight() {
+        return this.unitHeight$.value;
+    }
+    set unitHeight(value) {
+        this.unitHeight$.next(value);
+    }
+    //#endregion
+    addDays(date, days) {
+        const result = new Date(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    }
+    onPreviousWeek() {
+        this.currentWeek$
+            .pipe(map((w) => this.addDays(w, -7)), take(1))
+            .subscribe((w) => this.currentWeek$.next(w));
+    }
+    onNextWeek() {
+        this.currentWeek$
+            .pipe(map((w) => this.addDays(w, 7)), take(1))
+            .subscribe((w) => this.currentWeek$.next(w));
+    }
+    onCreateEvent(ev, slot) {
+        ev.preventDefault();
+        this.mouseState$.next(true);
+        this.dragStartTimeslot = slot;
+        this.operation = {
+            operation: EDragOperation.createEvent,
+            event: {
+                start: slot.start,
+                end: slot.end,
+                color: '#5AC8FA',
+                description: 'Test event',
+            }
+        };
+        this.previewEvent$.next({ start: slot.start, end: slot.end });
+        // this.events$.next([...this.events$.value, this.operation.event]);
+    }
+    onStartDragEvent(eventPart, ev) {
+        ev.preventDefault();
+        this.hoveredTimeSlot$.pipe(take(1)).subscribe((hoveredTimeSlot) => {
+            if (eventPart.event) {
+                this.dragStartTimeslot = hoveredTimeSlot;
+                this.operation = {
+                    operation: EDragOperation.moveEvent,
+                    event: eventPart.event,
+                };
+                this.previewEvent$.next({ start: eventPart.event.start, end: eventPart.event.end });
+            }
+        });
+    }
+    //#region hoveredTimeslot$
+    getHoveredTimeslot(ev, timeSlots) {
+        const hoveredSlots = this.timeSlotElements.filter((el) => {
+            const rct = el.nativeElement.getBoundingClientRect();
+            if (rct.left <= ev.x && ev.x <= rct.right && rct.top <= ev.y && ev.y <= rct.bottom) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        });
+        if (!hoveredSlots || hoveredSlots.length === 0) {
+            return null;
+        }
+        const slotElement = hoveredSlots[0].nativeElement;
+        const strRow = slotElement.getAttribute('data-row');
+        if (!strRow) {
+            return null;
+        }
+        const row = parseInt(strRow);
+        const strColumn = slotElement.getAttribute('data-column');
+        if (!strColumn) {
+            return null;
+        }
+        const column = parseInt(strColumn);
+        const slot = timeSlots[row][column];
+        return slot;
+    }
+    onMousemove(ev) {
+        this.timeSlots$.pipe(take(1)).subscribe((timeSlots) => {
+            const hovered = this.getHoveredTimeslot(ev, timeSlots);
+            this.hoveredTimeSlot$.next(hovered);
+            if (this.operation) {
+                switch (this.operation.operation) {
+                    case EDragOperation.createEvent:
+                        {
+                            if (this.operation.event && this.dragStartTimeslot && hovered && (this.operation.event.end.getTime() != hovered.end.getTime())) {
+                                if (this.dragStartTimeslot.start.getTime() === hovered.start.getTime()) {
+                                    // 1 slot
+                                }
+                                else if (this.dragStartTimeslot.start.getTime() < hovered.start.getTime()) {
+                                    // Drag down
+                                    // this.operation.event.start = this.dragStartTimeslot.start;
+                                    // this.operation.event.end = hovered.end;
+                                    // this.events$.next(this.events$.value);
+                                    this.previewEvent$
+                                        .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
+                                        .pipe(map((ev) => {
+                                        if (ev && this.dragStartTimeslot) {
+                                            ev.start = this.dragStartTimeslot.start;
+                                            ev.end = hovered.end;
+                                        }
+                                        return ev;
+                                    }))
+                                        .pipe(take(1))
+                                        .subscribe((ev) => this.previewEvent$.next(ev));
+                                }
+                                else if (this.dragStartTimeslot.start.getTime() > hovered.start.getTime()) {
+                                    // Drag up
+                                    // this.operation.event.start = hovered.start;
+                                    // this.operation.event.end = this.dragStartTimeslot.end;
+                                    // this.events$.next(this.events$.value);
+                                    this.previewEvent$
+                                        .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
+                                        .pipe(map((ev) => {
+                                        if (ev && this.dragStartTimeslot) {
+                                            ev.start = hovered.start;
+                                            ev.end = this.dragStartTimeslot.end;
+                                        }
+                                        return ev;
+                                    }))
+                                        .pipe(take(1))
+                                        .subscribe((ev) => this.previewEvent$.next(ev));
+                                }
+                            }
+                        }
+                        break;
+                    case EDragOperation.moveEvent:
+                        {
+                            if (hovered && this.dragStartTimeslot) {
+                                // this.operation.event.start.setTime(this.operation.event.start.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime());
+                                // this.operation.event.end.setTime(this.operation.event.end.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime());
+                                // this.dragStartTimeslot = hovered;
+                                // // this.events$.next(this.events$.value);
+                                this.previewEvent$
+                                    .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
+                                    .pipe(map((ev) => {
+                                    if (ev && this.dragStartTimeslot) {
+                                        ev.start.setTime(ev.start.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime());
+                                        ev.end.setTime(ev.end.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime());
+                                        this.dragStartTimeslot = hovered;
+                                    }
+                                    return ev;
+                                }))
+                                    .pipe(take(1))
+                                    .subscribe((ev) => this.previewEvent$.next(ev));
+                            }
+                        }
+                        break;
+                }
+            }
+        });
+    }
+    //#endregion
+    onMouseUp(ev) {
+        if (this.operation) {
+            switch (this.operation.operation) {
+                case EDragOperation.createEvent:
+                    {
+                        combineLatest([this.previewEvent$])
+                            .pipe(take(1))
+                            .subscribe(([previewEvent]) => {
+                            if (previewEvent) {
+                                this.operation = null;
+                                this.dragStartTimeslot = null;
+                                this.events$.next([...this.events$.value, {
+                                        start: previewEvent.start,
+                                        end: previewEvent.end,
+                                        color: '#F00',
+                                        description: 'New event'
+                                    }]);
+                                this.previewEvent$.next(null);
+                            }
+                        });
+                    }
+                    break;
+                case EDragOperation.moveEvent:
+                    {
+                        this.previewEvent$
+                            .pipe(filter((ev) => !!ev))
+                            .pipe(take(1))
+                            .subscribe((previewEvent) => {
+                            if (this.operation && this.operation.event && previewEvent) {
+                                this.operation.event.start = previewEvent.start;
+                                this.operation.event.end = previewEvent.end;
+                                this.operation = null;
+                                this.dragStartTimeslot = null;
+                                this.events$.next(this.events$.value);
+                                this.previewEvent$.next(null);
+                            }
+                        });
+                    }
+                    break;
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+    }
+}
+BsSchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerComponent, deps: [{ token: BsCalendarMonthService }, { token: BsTimelineService }], target: i0.ɵɵFactoryTarget.Component });
+BsSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsSchedulerComponent, selector: "bs-scheduler", inputs: { unitHeight: "unitHeight" }, outputs: { unitHeightChange: "unitHeightChange" }, host: { listeners: { "document:mousemove": "onMousemove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "timeSlotElements", predicate: ["slot"], descendants: true }], ngImport: i0, template: "<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"null\">\n    <div class=\"calendar-head\">\n        <div class=\"w-100 d-flex flex-row\">\n            <div class=\"d-flex calendar-left justify-content-between\">\n                <button class=\"btn btn-default flex-start\" (click)=\"onPreviousWeek()\">&lt;</button>\n                <button class=\"btn btn-default flex-end\" (click)=\"onNextWeek()\">&gt;</button>\n            </div>\n            <div class=\"flex-grow-1\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n                <span class=\"d-block col-form-label text-center\">\n                    {{ day | date: 'dd-MM-yyyy' }}\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"calendar-body\">\n        <div class=\"position-relative\">\n            <!-- Timeslots -->\n            <div *ngFor=\"let timeslots of (timeSlots$ | async); let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"unitHeight$ | async\">\n                <div class=\"calendar-cell calendar-left align-top py-0\">{{ timeslots[0].start | date: 'HH:mm:ss' }}</div>\n                <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots; let j = index\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n            </div>\n            \n            <!-- Events -->\n            <ng-container *ngIf=\"(timeSlotDuration$ | async) as timeSlotDuration\">\n                <ng-container *ngIf=\"(timelinedEventPartsForThisWeek$ | async) as partData\">\n                    <div *ngFor=\"let eventPart of partData.parts\" class=\"event p-0\"\n                        [style.top.px]=\"(eventPart.part | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n                        <div class=\"event-inner\"\n                             [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n                             [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n                             [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\"\n                             (mousedown)=\"onStartDragEvent(eventPart.part, $event)\">\n                            <div class=\"event-border\"></div>\n                            <ng-container *ngIf=\"eventPart.part.event\">\n                                <div class=\"event-bg\" [style.background-color]=\"eventPart.part.event.color\"></div>\n                                <div class=\"event-label\">{{ eventPart.part.event.description }}</div>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"(previewEventPartsForThisWeek$ | async) as previewPartData\">\n                    <div *ngFor=\"let eventPart of previewPartData\" class=\"event preview p-0\"\n                        [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n                        <div class=\"event-inner w-100\" [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"></div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>", styles: [":host{display:block}.table{flex-flow:column}.table .calendar-head{flex:0 0 auto}.table .calendar-head>div{padding-right:18px}.table .calendar-body{flex:1 1 auto;display:block;overflow-y:visible;overflow-x:hidden}.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.table .calendar-body .calendar-cell.hover{border-top-width:3px}.table .calendar-left{width:90px}.event{z-index:5;width:calc((100% - 90px) / 7);height:100px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none}.event.preview{background:#666;opacity:.6}.event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all}.event .event-inner .event-bg{opacity:.5;width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px);transition:opacity .15s ease-in-out}.event .event-inner .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner:hover .event-bg{opacity:.7}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe, "bsSecondsTodayOffset": BsSecondsTodayOffsetPipe, "bsSecondsTimespan": BsSecondsTimespanPipe, "dayOfWeek": DayOfWeekPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-scheduler', template: "<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"null\">\n    <div class=\"calendar-head\">\n        <div class=\"w-100 d-flex flex-row\">\n            <div class=\"d-flex calendar-left justify-content-between\">\n                <button class=\"btn btn-default flex-start\" (click)=\"onPreviousWeek()\">&lt;</button>\n                <button class=\"btn btn-default flex-end\" (click)=\"onNextWeek()\">&gt;</button>\n            </div>\n            <div class=\"flex-grow-1\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n                <span class=\"d-block col-form-label text-center\">\n                    {{ day | date: 'dd-MM-yyyy' }}\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"calendar-body\">\n        <div class=\"position-relative\">\n            <!-- Timeslots -->\n            <div *ngFor=\"let timeslots of (timeSlots$ | async); let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"unitHeight$ | async\">\n                <div class=\"calendar-cell calendar-left align-top py-0\">{{ timeslots[0].start | date: 'HH:mm:ss' }}</div>\n                <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots; let j = index\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n            </div>\n            \n            <!-- Events -->\n            <ng-container *ngIf=\"(timeSlotDuration$ | async) as timeSlotDuration\">\n                <ng-container *ngIf=\"(timelinedEventPartsForThisWeek$ | async) as partData\">\n                    <div *ngFor=\"let eventPart of partData.parts\" class=\"event p-0\"\n                        [style.top.px]=\"(eventPart.part | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n                        <div class=\"event-inner\"\n                             [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n                             [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n                             [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\"\n                             (mousedown)=\"onStartDragEvent(eventPart.part, $event)\">\n                            <div class=\"event-border\"></div>\n                            <ng-container *ngIf=\"eventPart.part.event\">\n                                <div class=\"event-bg\" [style.background-color]=\"eventPart.part.event.color\"></div>\n                                <div class=\"event-label\">{{ eventPart.part.event.description }}</div>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"(previewEventPartsForThisWeek$ | async) as previewPartData\">\n                    <div *ngFor=\"let eventPart of previewPartData\" class=\"event preview p-0\"\n                        [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n                        [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n                        <div class=\"event-inner w-100\" [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"></div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>", styles: [":host{display:block}.table{flex-flow:column}.table .calendar-head{flex:0 0 auto}.table .calendar-head>div{padding-right:18px}.table .calendar-body{flex:1 1 auto;display:block;overflow-y:visible;overflow-x:hidden}.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.table .calendar-body .calendar-cell.hover{border-top-width:3px}.table .calendar-left{width:90px}.event{z-index:5;width:calc((100% - 90px) / 7);height:100px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none}.event.preview{background:#666;opacity:.6}.event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all}.event .event-inner .event-bg{opacity:.5;width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px);transition:opacity .15s ease-in-out}.event .event-inner .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner:hover .event-bg{opacity:.7}\n"] }]
+        }], ctorParameters: function () { return [{ type: BsCalendarMonthService }, { type: BsTimelineService }]; }, propDecorators: { timeSlotElements: [{
+                type: ViewChildren,
+                args: ['slot']
+            }], unitHeightChange: [{
+                type: Output
+            }], unitHeight: [{
+                type: Input
+            }], onMousemove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }] } });
+
+class DateOffsetPipe {
+    transform(value) {
+        const today = new Date(value.start);
+        today.setHours(0);
+        today.setMinutes(0);
+        today.setSeconds(0);
+        return (value.start.getTime() - today.getTime()) / 1000;
+    }
+}
+DateOffsetPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DateOffsetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateOffsetPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DateOffsetPipe, name: "dateOffset" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DateOffsetPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateOffset'
+                }]
+        }] });
+
+class BsSchedulerModule {
+}
+BsSchedulerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsSchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerModule, declarations: [BsSchedulerComponent,
+        BsSecondsTimespanPipe,
+        BsSecondsTodayOffsetPipe,
+        DateOffsetPipe,
+        DayOfWeekPipe], imports: [CommonModule], exports: [BsSchedulerComponent] });
+BsSchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsSchedulerComponent,
+                        BsSecondsTimespanPipe,
+                        BsSecondsTodayOffsetPipe,
+                        DateOffsetPipe,
+                        DayOfWeekPipe
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsSchedulerComponent
+                    ]
+                }]
+        }] });
+
 class BsListGroupItemComponent {
     constructor() {
     }
@@ -2190,7 +2693,6 @@ class BsModalService {
             hasBackdrop: true
         });
         const componentInstance = overlayRef.attach(portal);
-        console.log('instance', componentInstance);
         componentInstance.instance['instance'] = {
             component: componentInstance,
             overlay: overlayRef
@@ -2326,6 +2828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class BsNavbarComponent {
     constructor() {
+        this.autoclose = true;
         this.expandButtonTemplate = null;
         this.isExpanded$ = new BehaviorSubject(false);
     }
@@ -2336,13 +2839,15 @@ 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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-end\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { state: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", 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"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe } });
+BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarComponent, selector: "bs-navbar", inputs: { autoclose: "autoclose" }, 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            <div class=\"flex-end d-md-none d-flex tw\">\n                <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                    <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { state: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n                </button>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", 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}}.tw{margin:-.5rem -.6666666667rem}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe } });
 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            <ng-content select=\"bs-navbar-brand\"></ng-content>\n            <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-end\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { state: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", 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            <div class=\"flex-end d-md-none d-flex tw\">\n                <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n                    <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { state: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n                </button>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n    <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", 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}}.tw{margin:-.5rem -.6666666667rem}\n"] }]
         }], propDecorators: { nav: [{
                 type: ViewChild,
                 args: ['nav']
+            }], autoclose: [{
+                type: Input
             }] } });
 
 class BsNavbarNavComponent {
@@ -2408,7 +2913,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             }] } });
 
 class BsNavbarItemComponent {
-    constructor(parentDropdown, element) {
+    constructor(navbar, parentDropdown, element) {
+        this.navbar = navbar;
         this.element = element;
         this.hasDropdown = false;
         this.anchorTag = null;
@@ -2435,7 +2941,7 @@ class BsNavbarItemComponent {
         }
         else {
             // Close if this is a link
-            if (this.parentDropdown && this.dropdowns.length === 0) {
+            if (this.dropdowns.length === 0) {
                 if (this.anchorTag && !this.anchorTag.onclick) {
                     this.anchorTag.onclick = (ev) => {
                         let d = this.parentDropdown;
@@ -2443,19 +2949,22 @@ class BsNavbarItemComponent {
                             d.isVisible = false;
                             d = d.parentDropdown;
                         }
+                        if (this.navbar.autoclose) {
+                            this.navbar.isExpanded$.next(false);
+                        }
                     };
                 }
             }
         }
     }
 }
-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 });
+BsNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarItemComponent, deps: [{ token: BsNavbarComponent }, { token: BsNavbarDropdownComponent, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 BsNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarItemComponent, selector: "bs-navbar-item", queries: [{ propertyName: "dropdowns", predicate: i0.forwardRef(function () { return BsNavbarDropdownComponent; }) }], ngImport: i0, template: "<li [class.nav-item]=\"parentDropdown === null\" [class.dropdown]=\"(dropdowns.length > 0) && (parentDropdown === null)\" [class.dropend]=\"(dropdowns.length > 0) && (parentDropdown !== null)\">\n    <ng-content></ng-content>\n</li>", styles: ["li.dropend ::ng-deep a.dropdown-toggle{padding-right:1.5rem}li.dropend ::ng-deep a.dropdown-toggle:after{position:absolute;right:.5rem;top:.75rem}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-navbar-item', template: "<li [class.nav-item]=\"parentDropdown === null\" [class.dropdown]=\"(dropdowns.length > 0) && (parentDropdown === null)\" [class.dropend]=\"(dropdowns.length > 0) && (parentDropdown !== null)\">\n    <ng-content></ng-content>\n</li>", styles: ["li.dropend ::ng-deep a.dropdown-toggle{padding-right:1.5rem}li.dropend ::ng-deep a.dropdown-toggle:after{position:absolute;right:.5rem;top:.75rem}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: BsNavbarDropdownComponent, decorators: [{
+        return [{ type: BsNavbarComponent }, { type: BsNavbarDropdownComponent, decorators: [{
                         type: Optional
                     }] }, { type: i0.ElementRef }];
     }, propDecorators: { dropdowns: [{
@@ -2636,7 +3145,7 @@ class BsNavbarTogglerComponent {
         this.stateChange.emit(this._state);
     }
     //#endregion
-    toggleState() {
+    toggleState(ev) {
         switch (this._state) {
             case 'open':
                 this.state = 'closed';
@@ -2648,14 +3157,17 @@ class BsNavbarTogglerComponent {
     }
 }
 BsNavbarTogglerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarTogglerComponent, selector: "bs-navbar-toggler", inputs: { state: "state" }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<div class=\"navbar-toggler float-left\" [ngClass]=\"state\" id=\"navbar-toggler\" (click)=\"toggleState()\">\n    <div></div>\n    <div></div>\n    <div></div>\n</div>", styles: [":host{align-self:start;position:absolute;top:0;right:0;padding:.5rem .75rem}.navbar-toggler{padding:.25rem;border:none}.navbar-toggler>div{width:25px;height:2px;background:#BBB;margin:6px 0;transition:.4s}.navbar-toggler.open>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.open>div:nth-of-type(2){opacity:0}.navbar-toggler.open>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}@media (min-width: 768px){.navbar-toggler.auto>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.auto>div:nth-of-type(2){opacity:0}.navbar-toggler.auto>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+BsNavbarTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarTogglerComponent, selector: "bs-navbar-toggler", inputs: { state: "state" }, outputs: { stateChange: "stateChange" }, host: { listeners: { "click": "toggleState($event)" } }, ngImport: i0, template: "<div class=\"navbar-toggler float-left\" [ngClass]=\"state\">\n    <div></div>\n    <div></div>\n    <div></div>\n</div>", styles: [":host{align-self:start;top:0;right:0}.navbar-toggler{padding:.75rem 1rem;border:none}.navbar-toggler>div{width:25px;height:2px;background:#BBB;margin:6px 0;transition:.4s}.navbar-toggler.open>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.open>div:nth-of-type(2){opacity:0}.navbar-toggler.open>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}@media (min-width: 768px){.navbar-toggler.auto>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.auto>div:nth-of-type(2){opacity:0}.navbar-toggler.auto>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarTogglerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-navbar-toggler', template: "<div class=\"navbar-toggler float-left\" [ngClass]=\"state\" id=\"navbar-toggler\" (click)=\"toggleState()\">\n    <div></div>\n    <div></div>\n    <div></div>\n</div>", styles: [":host{align-self:start;position:absolute;top:0;right:0;padding:.5rem .75rem}.navbar-toggler{padding:.25rem;border:none}.navbar-toggler>div{width:25px;height:2px;background:#BBB;margin:6px 0;transition:.4s}.navbar-toggler.open>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.open>div:nth-of-type(2){opacity:0}.navbar-toggler.open>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}@media (min-width: 768px){.navbar-toggler.auto>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.auto>div:nth-of-type(2){opacity:0}.navbar-toggler.auto>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}}\n"] }]
+            args: [{ selector: 'bs-navbar-toggler', template: "<div class=\"navbar-toggler float-left\" [ngClass]=\"state\">\n    <div></div>\n    <div></div>\n    <div></div>\n</div>", styles: [":host{align-self:start;top:0;right:0}.navbar-toggler{padding:.75rem 1rem;border:none}.navbar-toggler>div{width:25px;height:2px;background:#BBB;margin:6px 0;transition:.4s}.navbar-toggler.open>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.open>div:nth-of-type(2){opacity:0}.navbar-toggler.open>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}@media (min-width: 768px){.navbar-toggler.auto>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.auto>div:nth-of-type(2){opacity:0}.navbar-toggler.auto>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}}\n"] }]
         }], propDecorators: { stateChange: [{
                 type: Output
             }], state: [{
                 type: Input
+            }], toggleState: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
 class BsNavbarModule {
@@ -3593,5 +4105,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, BsButtonTemplateDirective, BsCalendarComponent, BsCalendarModule, BsCardComponent, BsCardHeaderComponent, BsCardModule, BsCarouselComponent, BsCarouselImageDirective, BsCarouselModule, BsCodeSnippetComponent, BsCodeSnippetModule, BsContextMenuDirective, BsContextMenuModule, BsCopyDirective, BsCopyModule, BsDatatableColumnDirective, BsDatatableComponent, BsDatatableModule, BsDatepickerComponent, BsDatepickerModule, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownToggleDirective, BsExpandButtonDirective, 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, BsNavbarTogglerComponent, 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 };
+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, BsExpandButtonDirective, 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, BsNavbarTogglerComponent, BsPaginationComponent, BsPaginationModule, BsProgressBarComponent, BsProgressBarModule, BsProgressComponent, BsRatingComponent, BsRatingModule, BsRowTemplateDirective, BsSchedulerComponent, BsSchedulerModule, 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