@mintplayer/ng-bootstrap 13.1.24 → 13.1.25

package/fesm2020/mintplayer-ng-bootstrap.mjs

@@ -925,7 +925,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(),
@@ -1804,7 +1803,6 @@ class BsFileUploadComponent {
         this.filesDropped = new EventEmitter();
     }
     onChange(event) {
-        console.log('event', event);
         if (!event.target)
             return;
         if (!('files' in event.target))
@@ -1999,6 +1997,69 @@ var EDragOperation;
     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);
@@ -2052,9 +2113,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class BsSchedulerComponent {
-    constructor(calendarMonthService) {
+    constructor(calendarMonthService, timelineService) {
         this.calendarMonthService = calendarMonthService;
-        this.eventPartsForThisWeek$ = new BehaviorSubject([]);
+        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);
@@ -2070,45 +2133,69 @@ class BsSchedulerComponent {
             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.events$ = new BehaviorSubject([]);
-        this.eventParts$ = this.events$.pipe(map((events) => {
-            return events.map((ev) => {
-                let startTime = ev.start;
-                const result = [];
-                while (!this.dateEquals(startTime, ev.end)) {
-                    const end = new Date(startTime.getFullYear(), startTime.getMonth(), startTime.getDate() + 1, 0, 0, 0);
-                    result.push({ start: startTime, end: end, event: ev });
-                    startTime = end;
-                }
-                if (startTime != ev.end) {
-                    result.push({ start: startTime, end: ev.end, event: ev });
-                }
-                return { event: ev, parts: result };
-            });
+        this.daysOfWeekWithTimestamps$ = this.daysOfWeek$
+            .pipe(map((daysOfWeek) => {
+            return { start: daysOfWeek[0].getTime(), end: daysOfWeek[daysOfWeek.length - 1].getTime() + 24 * 60 * 60 * 1000 };
         }));
-        combineLatest([
-            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), []);
-            })),
-            this.eventParts$
+            }))
         ])
-            .pipe(map(([startAndEnd, eventParts, originalEventParts]) => {
+            .pipe(map(([startAndEnd, eventParts]) => {
             return eventParts.filter(eventPart => {
-                return !((eventPart.end.getTime() < startAndEnd.start) || (eventPart.start.getTime() > startAndEnd.end));
+                return !((eventPart.end.getTime() <= startAndEnd.start) || (eventPart.start.getTime() >= startAndEnd.end));
             });
-        }))
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((eventPartsForThisWeek) => {
-            this.eventPartsForThisWeek$.next(eventPartsForThisWeek);
-        });
+        }));
+        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);
@@ -2122,10 +2209,12 @@ class BsSchedulerComponent {
                     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 };
                 });
             });
@@ -2143,11 +2232,6 @@ class BsSchedulerComponent {
         this.unitHeight$.next(value);
     }
     //#endregion
-    dateEquals(date1, date2) {
-        return (date1.getFullYear() === date2.getFullYear() &&
-            date1.getMonth() === date2.getMonth() &&
-            date1.getDate() === date2.getDate());
-    }
     addDays(date, days) {
         const result = new Date(date);
         result.setDate(result.getDate() + days);
@@ -2172,20 +2256,24 @@ class BsSchedulerComponent {
             event: {
                 start: slot.start,
                 end: slot.end,
-                color: '#F00',
+                color: '#5AC8FA',
                 description: 'Test event',
             }
         };
-        this.events$.next([...this.events$.value, this.operation.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) => {
-            this.dragStartTimeslot = hoveredTimeSlot;
-            this.operation = {
-                operation: EDragOperation.moveEvent,
-                event: eventPart.event
-            };
+            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$
@@ -2230,15 +2318,37 @@ class BsSchedulerComponent {
                                 }
                                 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.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.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));
                                 }
                             }
                         }
@@ -2246,10 +2356,22 @@ class BsSchedulerComponent {
                     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.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;
@@ -2263,16 +2385,38 @@ class BsSchedulerComponent {
             switch (this.operation.operation) {
                 case EDragOperation.createEvent:
                     {
-                        if (this.operation.event) {
-                            this.operation = null;
-                            this.dragStartTimeslot = null;
-                        }
+                        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.operation = null;
-                        this.dragStartTimeslot = null;
+                        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;
             }
@@ -2282,12 +2426,12 @@ class BsSchedulerComponent {
         this.destroyed$.next(true);
     }
 }
-BsSchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerComponent, deps: [{ token: BsCalendarMonthService }], 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: "{{ unitHeight$ | async }}\n<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"400\">\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\n                <div *ngFor=\"let eventPart of (eventPartsForThisWeek$ | async)\" class=\"position-absolute event\"\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\" [style.background-color]=\"eventPart.event.color\" (mousedown)=\"onStartDragEvent(eventPart, $event)\">\n                        {{ eventPart.event.description }}\n                        <br>\n                        {{ eventPart.start | date: 'HH:mm:ss' }}\n                        <br>\n                        {{ eventPart.end | date: 'HH:mm:ss' }}\n                    </div>\n                </div>\n                \n                <!-- <ng-container *ngFor=\"let eventWithParts of (eventParts$ | async)\">\n                    <div *ngFor=\"let eventPart of eventWithParts.parts\" class=\"position-absolute event\"\n                        [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * 40\"\n                        [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * 40\"\n                        [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n                        <div class=\"event-inner\">\n                            {{ eventPart.start | date: 'HH:mm:ss' }} - {{ eventPart.end | date: 'HH:mm:ss' }}\n                        </div>\n                    </div>\n                </ng-container> -->\n                \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:relative;-webkit-user-select:none;user-select:none}.event .event-inner{position:absolute;left:4px;right:5px;top:4px;bottom:5px;cursor:move}\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 } });
+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: "{{ unitHeight$ | async }}\n<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"400\">\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\n                <div *ngFor=\"let eventPart of (eventPartsForThisWeek$ | async)\" class=\"position-absolute event\"\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\" [style.background-color]=\"eventPart.event.color\" (mousedown)=\"onStartDragEvent(eventPart, $event)\">\n                        {{ eventPart.event.description }}\n                        <br>\n                        {{ eventPart.start | date: 'HH:mm:ss' }}\n                        <br>\n                        {{ eventPart.end | date: 'HH:mm:ss' }}\n                    </div>\n                </div>\n                \n                <!-- <ng-container *ngFor=\"let eventWithParts of (eventParts$ | async)\">\n                    <div *ngFor=\"let eventPart of eventWithParts.parts\" class=\"position-absolute event\"\n                        [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * 40\"\n                        [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * 40\"\n                        [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n                        <div class=\"event-inner\">\n                            {{ eventPart.start | date: 'HH:mm:ss' }} - {{ eventPart.end | date: 'HH:mm:ss' }}\n                        </div>\n                    </div>\n                </ng-container> -->\n                \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:relative;-webkit-user-select:none;user-select:none}.event .event-inner{position:absolute;left:4px;right:5px;top:4px;bottom:5px;cursor:move}\n"] }]
-        }], ctorParameters: function () { return [{ type: BsCalendarMonthService }]; }, propDecorators: { timeSlotElements: [{
+            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: [{
@@ -2536,7 +2680,6 @@ class BsModalService {
             hasBackdrop: true
         });
         const componentInstance = overlayRef.attach(portal);
-        console.log('instance', componentInstance);
         componentInstance.instance['instance'] = {
             component: componentInstance,
             overlay: overlayRef