@mintplayer/ng-bootstrap 13.3.3 → 13.3.7

package/fesm2015/mintplayer-ng-bootstrap.mjs

@@ -315,7 +315,7 @@ class BsCalendarComponent {
         this.weeks$ = this.currentMonth$
             .pipe(map((month) => this.calendarMonthService.getWeeks(month)))
             .pipe(takeUntil(this.destroyed$));
-        this.daysOfWeek$ = this.weeks$
+        this.shownDays$ = this.weeks$
             .pipe(filter((weeks) => weeks.length > 1))
             .pipe(map((weeks) => weeks[1].days))
             .pipe(map((days) => {
@@ -384,10 +384,10 @@ class BsCalendarComponent {
     }
 }
 BsCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsCalendarComponent, deps: [{ token: BsCalendarMonthService }], target: i0.ɵɵFactoryTarget.Component });
-BsCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsCalendarComponent, selector: "bs-calendar", inputs: { currentMonth: "currentMonth", selectedDate: "selectedDate" }, outputs: { currentMonthChange: "currentMonthChange", selectedDateChange: "selectedDateChange" }, ngImport: i0, template: "<table class=\"table w-auto mb-0\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ currentMonth$ | async | monthName | ucFirst }}\n            {{ (currentMonth$ | async)?.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of daysOfWeek$ | async\" [title]=\"dayOfWeek.long\">\n            {{ dayOfWeek.short }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of (weeks$ | async)\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate$ | async, day.date)\" *ngFor=\"let day of week.days\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\" [class.text-muted]=\"!day.isInMonth\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: [".text-muted{color:#9ea7af!important}table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125);background:#fff}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "ucFirst": UcFirstPipe, "monthName": MonthNamePipe, "async": i1.AsyncPipe } });
+BsCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsCalendarComponent, selector: "bs-calendar", inputs: { currentMonth: "currentMonth", selectedDate: "selectedDate" }, outputs: { currentMonthChange: "currentMonthChange", selectedDateChange: "selectedDateChange" }, ngImport: i0, template: "<table class=\"table w-auto mb-0\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ currentMonth$ | async | monthName | ucFirst }}\n            {{ (currentMonth$ | async)?.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of shownDays$ | async\" [title]=\"dayOfWeek.long\">\n            {{ dayOfWeek.short }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of (weeks$ | async)\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate$ | async, day.date)\" *ngFor=\"let day of week.days\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\" [class.text-muted]=\"!day.isInMonth\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: [".text-muted{color:#9ea7af!important}table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125);background:#fff}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "ucFirst": UcFirstPipe, "monthName": MonthNamePipe, "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-calendar', template: "<table class=\"table w-auto mb-0\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ currentMonth$ | async | monthName | ucFirst }}\n            {{ (currentMonth$ | async)?.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of daysOfWeek$ | async\" [title]=\"dayOfWeek.long\">\n            {{ dayOfWeek.short }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of (weeks$ | async)\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate$ | async, day.date)\" *ngFor=\"let day of week.days\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\" [class.text-muted]=\"!day.isInMonth\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: [".text-muted{color:#9ea7af!important}table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125);background:#fff}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"] }]
+            args: [{ selector: 'bs-calendar', template: "<table class=\"table w-auto mb-0\">\n    <tr>\n        <td>\n            <button class=\"btn btn-default\" (click)=\"previousMonth()\">\n                <i class=\"bi bi-chevron-left fw-bolder\"></i>\n            </button>\n        </td>\n        <td colspan=\"6\" class=\"fw-bolder\">\n            {{ currentMonth$ | async | monthName | ucFirst }}\n            {{ (currentMonth$ | async)?.getFullYear() }}\n        </td>\n        <td>\n            <button class=\"btn btn-default border-bottom-0\" (click)=\"nextMonth()\">\n                <i class=\"bi bi-chevron-right fw-bolder\"></i>\n            </button>\n        </td>\n    </tr>\n    <tr>\n        <th></th>\n        <th *ngFor=\"let dayOfWeek of shownDays$ | async\" [title]=\"dayOfWeek.long\">\n            {{ dayOfWeek.short }}\n        </th>\n    </tr>\n    <tr *ngFor=\"let week of (weeks$ | async)\">\n        <th>\n            {{ week.number }}\n        </th>\n        <td [class.selected]=\"day === null ? false : isSameDate(selectedDate$ | async, day.date)\" *ngFor=\"let day of week.days\" (click)=\"goto(day)\">\n            <span *ngIf=\"day !== null\" [class.text-muted]=\"!day.isInMonth\">{{ day.dayOfMonth }}</span>\n        </td>\n    </tr>\n</table>", styles: [".text-muted{color:#9ea7af!important}table{border-collapse:collapse;border:1px solid rgba(0,0,0,.125);background:#fff}table td,table th{width:40px;height:40px;text-align:center}table td span,table th span{cursor:pointer;white-space:nowrap}table td.selected{background-color:#0d6efd;color:#fff}table th{background-color:#f8f9fa}table tr{border-top:none}table tr:first-child>td{border-bottom:1px solid rgba(0,0,0,.125)}table tr:nth-of-type(2)>th:not(:nth-of-type(1)){border-bottom:1px solid rgba(0,0,0,.125)}table tr:not(:nth-of-type(2))>th:nth-of-type(1){border-right:1px solid rgba(0,0,0,.125)}\n"] }]
         }], ctorParameters: function () { return [{ type: BsCalendarMonthService }]; }, propDecorators: { currentMonthChange: [{
                 type: Output
             }], currentMonth: [{
@@ -732,10 +732,7 @@ BsSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         BsSnackbarCloseDirective], imports: [CommonModule,
         OverlayModule], exports: [BsSnackbarComponent,
         BsSnackbarCloseDirective] });
-BsSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSnackbarModule, providers: [
-    // { provide: BsSnackbarComponent, useExisting: forwardRef(() => BsSnackbarComponent) }
-    // { provide: BsSnackbarComponent, useClass: BsSnackbarComponent }
-    ], imports: [[
+BsSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSnackbarModule, imports: [[
             CommonModule,
             OverlayModule
         ]] });
@@ -753,26 +750,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     exports: [
                         BsSnackbarComponent,
                         BsSnackbarCloseDirective
-                    ],
-                    providers: [
-                    // { provide: BsSnackbarComponent, useExisting: forwardRef(() => BsSnackbarComponent) }
-                    // { provide: BsSnackbarComponent, useClass: BsSnackbarComponent }
                     ]
                 }]
         }] });
 
 class BsSnackbarService {
-    constructor(overlay, parentInjector, componentFactoryResolver) {
+    constructor(overlay, parentInjector) {
         this.overlay = overlay;
         this.parentInjector = parentInjector;
-        this.componentFactoryResolver = componentFactoryResolver;
     }
     show(template) {
         const injector = Injector.create({
             providers: [{ provide: SNACKBAR_CONTENT, useValue: template }],
             parent: this.parentInjector
         });
-        const portal = new ComponentPortal(BsSnackbarComponent, null, injector, this.componentFactoryResolver);
+        const portal = new ComponentPortal(BsSnackbarComponent, null, injector);
         const overlayRef = this.overlay.create({
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             positionStrategy: this.overlay.position()
@@ -794,14 +786,14 @@ class BsSnackbarService {
         snackbar.animationState = 'void';
     }
 }
-BsSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSnackbarService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+BsSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSnackbarService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 BsSnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSnackbarService, providedIn: BsSnackbarModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: BsSnackbarModule
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
 
 class BsCopyDirective {
     constructor(doc) {
@@ -2007,6 +1999,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 }]
         }] });
 
+var ESchedulerMode;
+(function (ESchedulerMode) {
+    ESchedulerMode[ESchedulerMode["week"] = 0] = "week";
+    ESchedulerMode[ESchedulerMode["timeline"] = 1] = "timeline";
+})(ESchedulerMode || (ESchedulerMode = {}));
+
 var EDragOperation;
 (function (EDragOperation) {
     EDragOperation[EDragOperation["none"] = 0] = "none";
@@ -2078,6 +2076,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 }]
         }] });
 
+class ResourceGroupPresenterComponent {
+    constructor() {
+        this.level = 0;
+        this.resourceOrGroup$ = new BehaviorSubject(null);
+        this.timeSlots$ = new BehaviorSubject([]);
+        this.isExpanded$ = new BehaviorSubject(false);
+        this.destroyed$ = new Subject();
+        this.data$ = this.resourceOrGroup$
+            .pipe(map((resourceOrGroup) => {
+            if (!resourceOrGroup) {
+                return null;
+            }
+            else if ('children' in resourceOrGroup) {
+                return {
+                    resource: null,
+                    resourceGroup: resourceOrGroup
+                };
+            }
+            else {
+                return {
+                    resource: resourceOrGroup,
+                    resourceGroup: null
+                };
+            }
+        }))
+            .pipe(filter((resourceOrGroup) => !!resourceOrGroup))
+            .pipe(map((resourceOrGroup) => resourceOrGroup));
+        this.colSpan$ = this.timeSlots$
+            .pipe(map(timeSlots => timeSlots
+            .map(timeslot => timeslot.slots.length)
+            .reduce((sum, current) => sum + current, 0)));
+    }
+    //#region resourceOrGroup
+    get resourceOrGroup() {
+        return this.resourceOrGroup$.value;
+    }
+    set resourceGroup(value) {
+        this.resourceOrGroup$.next(value);
+    }
+    //#endregion
+    //#region timeSlots
+    get timeSlots() {
+        return this.timeSlots$.value;
+    }
+    set timeSlots(value) {
+        this.timeSlots$.next(value);
+    }
+    //#endregion
+    //#region isExpanded
+    get isExpanded() {
+        return this.isExpanded$.value;
+    }
+    set isExpanded(value) {
+        this.isExpanded$.next(value);
+    }
+    //#endregion
+    toggleExpanded() {
+        this.isExpanded$.pipe(take(1)).subscribe((isExpanded) => {
+            this.isExpanded$.next(!isExpanded);
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+    }
+}
+ResourceGroupPresenterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ResourceGroupPresenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ResourceGroupPresenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: { level: "level", resourceGroup: "resourceGroup", timeSlots: "timeSlots", isExpanded: "isExpanded" }, ngImport: i0, template: "<ng-container *ngIf=\"(data$ | async) as data\">\n\n    <!-- Data is a resource group -->\n    <ng-container *ngIf=\"data.resourceGroup\">\n        <!-- Header -->\n        <tr class=\"p-0 cursor-pointer\" *ngIf=\"(timeSlots$ | async) as timeSlots\" [title]=\"data.resourceGroup.description\">\n            <ng-container *ngIf=\"(colSpan$ | async) as colspan\">\n                <td class=\"p-2 cursor-pointer\" [colSpan]=\"colspan + 1\" (click)=\"toggleExpanded()\">\n                    <span class=\"p-2 align-middle position-sticky\">\n                        <i class=\"bi bi-chevron-down\" [style.padding-left.px]=\"level * 20\" *ngIf=\"isExpanded$ | async\"></i>\n                        <i class=\"bi bi-chevron-right\" [style.padding-left.px]=\"level * 20\" *ngIf=\"(isExpanded$ | async) === false\"></i>\n                        {{ data.resourceGroup.description }}\n                    </span>\n                </td>\n            </ng-container>\n        </tr>\n\n        <!-- Subgroups or resources -->\n        <ng-container *ngIf=\"isExpanded$ | async\">\n            <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n                <ng-container *ngFor=\"let child of data.resourceGroup.children\">\n                    <bs-resource-group-presenter [resourceGroup]=\"child\" [timeSlots]=\"timeSlots\" [level]=\"level + 1\"></bs-resource-group-presenter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <!-- Data is a resource -->\n    <tr *ngIf=\"data.resource\" class=\"p-0 bordered\" [title]=\"data.resource.description\">\n        <td class=\"p-0 bg-white\">\n            <div class=\"p-2\">{{ data.resource.description }}</div>\n        </td>\n        <ng-container *ngFor=\"let slots of (timeSlots$ | async)\">\n            <td class=\"bg-white border-1\" *ngFor=\"let slot of slots.slots\">\n                <!-- {{ slot.start | date: 'dd/MM/yyyy HH:mm:ss' }} -->\n            </td>\n        </ng-container>\n    </tr>\n</ng-container>", styles: [":host{display:contents}tr{border-bottom-width:1px}tr:not(.bordered) td span.position-sticky{left:0;right:0}\n"], components: [{ type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: ["level", "resourceGroup", "timeSlots", "isExpanded"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ResourceGroupPresenterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-resource-group-presenter', template: "<ng-container *ngIf=\"(data$ | async) as data\">\n\n    <!-- Data is a resource group -->\n    <ng-container *ngIf=\"data.resourceGroup\">\n        <!-- Header -->\n        <tr class=\"p-0 cursor-pointer\" *ngIf=\"(timeSlots$ | async) as timeSlots\" [title]=\"data.resourceGroup.description\">\n            <ng-container *ngIf=\"(colSpan$ | async) as colspan\">\n                <td class=\"p-2 cursor-pointer\" [colSpan]=\"colspan + 1\" (click)=\"toggleExpanded()\">\n                    <span class=\"p-2 align-middle position-sticky\">\n                        <i class=\"bi bi-chevron-down\" [style.padding-left.px]=\"level * 20\" *ngIf=\"isExpanded$ | async\"></i>\n                        <i class=\"bi bi-chevron-right\" [style.padding-left.px]=\"level * 20\" *ngIf=\"(isExpanded$ | async) === false\"></i>\n                        {{ data.resourceGroup.description }}\n                    </span>\n                </td>\n            </ng-container>\n        </tr>\n\n        <!-- Subgroups or resources -->\n        <ng-container *ngIf=\"isExpanded$ | async\">\n            <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n                <ng-container *ngFor=\"let child of data.resourceGroup.children\">\n                    <bs-resource-group-presenter [resourceGroup]=\"child\" [timeSlots]=\"timeSlots\" [level]=\"level + 1\"></bs-resource-group-presenter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <!-- Data is a resource -->\n    <tr *ngIf=\"data.resource\" class=\"p-0 bordered\" [title]=\"data.resource.description\">\n        <td class=\"p-0 bg-white\">\n            <div class=\"p-2\">{{ data.resource.description }}</div>\n        </td>\n        <ng-container *ngFor=\"let slots of (timeSlots$ | async)\">\n            <td class=\"bg-white border-1\" *ngFor=\"let slot of slots.slots\">\n                <!-- {{ slot.start | date: 'dd/MM/yyyy HH:mm:ss' }} -->\n            </td>\n        </ng-container>\n    </tr>\n</ng-container>", styles: [":host{display:contents}tr{border-bottom-width:1px}tr:not(.bordered) td span.position-sticky{left:0;right:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { level: [{
+                type: Input
+            }], resourceGroup: [{
+                type: Input
+            }], timeSlots: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }] } });
+
 class BsSecondsTodayOffsetPipe {
     transform(value) {
         const today = new Date(value.start);
@@ -2134,7 +2212,9 @@ class BsSchedulerComponent {
     constructor(calendarMonthService, timelineService) {
         this.calendarMonthService = calendarMonthService;
         this.timelineService = timelineService;
-        this.events$ = new BehaviorSubject([]);
+        this.resources$ = new BehaviorSubject([]);
+        this.weekOptions$ = new BehaviorSubject({ unitHeight: 30 });
+        this.timelineOptions$ = new BehaviorSubject({ unitWidth: 50 });
         this.previewEvent$ = new BehaviorSubject(null);
         this.timeSlotDuration$ = new BehaviorSubject(1800);
         this.timeSlots$ = new BehaviorSubject([]);
@@ -2142,35 +2222,66 @@ class BsSchedulerComponent {
         this.hoveredTimeSlot$ = new BehaviorSubject(null);
         this.hoveredEvent$ = new BehaviorSubject(null);
         this.destroyed$ = new Subject();
-        //#region UnitHeight
-        this.unitHeight$ = new BehaviorSubject(40);
-        this.unitHeightChange = new EventEmitter();
+        //#region Mode
+        this.modes = ESchedulerMode;
+        this.mode$ = new BehaviorSubject(ESchedulerMode.week);
+        this.modeChange = new EventEmitter();
+        //#endregion
+        // //#region Scale
+        // scale$ = new BehaviorSubject<SchedulerScale>(availableScales[4]);
+        // @Output() public scaleChange = new EventEmitter<SchedulerScale>();
+        // public get scale() {
+        //   return this.scale$.value;
+        // }
+        // @Input() public set scale(value: SchedulerScale) {
+        //   this.scale$.next(value);
+        // }
+        // //#endregion
+        //#region WeekOptions
+        this.weekOptionsChange = new EventEmitter();
+        //#endregion
+        //#region TimelineOptions
+        this.timelineOptionsChange = new EventEmitter();
         //#endregion
         //#region maxInnerHeight
         this.maxInnerHeight = null;
         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.currentWeekOrMonth$ = new BehaviorSubject(monday);
+        this.shownDays$ = combineLatest([this.currentWeekOrMonth$, this.mode$])
+            .pipe(map(([currentDay, mode]) => {
+            currentDay.setHours(0);
+            currentDay.setMinutes(0);
+            currentDay.setSeconds(0);
+            currentDay.setMilliseconds(0);
+            switch (mode) {
+                case ESchedulerMode.week: {
+                    return Array.from(Array(7).keys()).map((x) => this.addDays(currentDay, x));
+                }
+                case ESchedulerMode.timeline: {
+                    const firstDay = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1);
+                    const daysOfMonth = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0).getDate();
+                    return Array.from(Array(daysOfMonth).keys()).map((x) => this.addDays(firstDay, x));
+                }
+            }
         }));
-        this.daysOfWeekWithTimestamps$ = this.daysOfWeek$
-            .pipe(map((daysOfWeek) => {
-            return { start: daysOfWeek[0].getTime(), end: daysOfWeek[daysOfWeek.length - 1].getTime() + 24 * 60 * 60 * 1000 };
+        this.daysOfWeekWithTimestamps$ = this.shownDays$
+            .pipe(map((shownDays) => {
+            return { start: shownDays[0].getTime(), end: shownDays[shownDays.length - 1].getTime() + 24 * 60 * 60 * 1000 };
         }));
+        this.events$ = this.resources$
+            .pipe(map((resourcesOrGroups) => resourcesOrGroups.map(resOrGroup => this.getResourcesForGroup(resOrGroup))))
+            .pipe(map(jaggedResources => jaggedResources.reduce((flat, toFlatten) => flat.concat(toFlatten), [])))
+            .pipe(map(resources => resources.map(res => res.events)))
+            .pipe(map(jaggedEvents => jaggedEvents.reduce((flat, toFlatten) => flat.concat(toFlatten), [])));
+        // groups.reduce((flat, toFlatten) => flat.concat(toFlatten.children), [])
         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(jaggedParts => jaggedParts.reduce((flat, toFlatten) => flat.concat(toFlatten), [])))
         ])
             .pipe(map(([startAndEnd, eventParts]) => {
             return eventParts.filter(eventPart => {
@@ -2219,45 +2330,109 @@ class BsSchedulerComponent {
                 parts: result
             };
         }));
-        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.setTime(+timeSlotStart.getTime() + index * duration * 1000);
-                const timeSlotEnd = new Date(timeSlotStart);
-                timeSlotEnd.setTime(+timeSlotEnd.getTime() + duration * 1000);
-                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());
-                    end.setDate(end.getDate() + timeSlotEnd.getDate() - timeSlotStart.getDate());
-                    return { start, end };
-                });
-            });
+        combineLatest([this.mode$, this.shownDays$, this.timeSlotDuration$])
+            .pipe(filter(([mode, shownDays, duration]) => mode !== null))
+            .pipe(map(([mode, shownDays, duration]) => {
+            switch (mode) {
+                case ESchedulerMode.week: {
+                    const timeSlotsPerDay = Math.floor((60 * 60 * 24) / duration);
+                    return Array.from(Array(timeSlotsPerDay).keys()).map((index) => {
+                        const timeslotForMonday = this.createTimeslot(shownDays[0], index, duration);
+                        return {
+                            slots: shownDays.map((day) => {
+                                const start = new Date(day);
+                                start.setHours(timeslotForMonday.start.getHours());
+                                start.setMinutes(timeslotForMonday.start.getMinutes());
+                                start.setSeconds(timeslotForMonday.start.getSeconds());
+                                start.setMilliseconds(timeslotForMonday.start.getMilliseconds());
+                                const end = new Date(day);
+                                end.setHours(timeslotForMonday.end.getHours());
+                                end.setMinutes(timeslotForMonday.end.getMinutes());
+                                end.setSeconds(timeslotForMonday.end.getSeconds());
+                                end.setMilliseconds(timeslotForMonday.end.getMilliseconds());
+                                end.setDate(end.getDate() + timeslotForMonday.end.getDate() - timeslotForMonday.start.getDate());
+                                return { start, end };
+                            }),
+                            stamp: timeslotForMonday.start
+                        };
+                    });
+                }
+                case ESchedulerMode.timeline: {
+                    const totalTimeslots = (24 * 60 * 60) / duration;
+                    return shownDays.map((day) => {
+                        return {
+                            slots: Array.from(Array(totalTimeslots).keys())
+                                .map((index) => {
+                                return this.createTimeslot(day, index, duration);
+                            }),
+                            stamp: day
+                        };
+                    });
+                }
+                default: {
+                    throw 'Unknown value for Mode: ' + mode;
+                }
+            }
         }))
             .subscribe((timeslots) => {
             // For performance reasons, we're not using an observable here, but persist the timeslots in a BehaviorSubject.
             this.timeSlots$.next(timeslots);
         });
-        this.unitHeight$
+        this.weekOptions$
             .pipe(takeUntil(this.destroyed$))
-            .subscribe((unitHeight) => {
-            this.unitHeightChange.emit(unitHeight);
+            .subscribe((weekOptions) => {
+            this.weekOptionsChange.emit(weekOptions);
         });
+        this.timelineOptions$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((timelineOptions) => {
+            this.timelineOptionsChange.emit(timelineOptions);
+        });
+        // combineLatest([this.mode$, this.scale$])
+        //   .pipe(filter(([mode, scale]) => mode === ESchedulerMode.timeline))
+    }
+    createTimeslot(date, index, duration) {
+        const timeSlotStart = new Date(date);
+        timeSlotStart.setTime(+timeSlotStart.getTime() + index * duration * 1000);
+        const timeSlotEnd = new Date(timeSlotStart);
+        timeSlotEnd.setTime(+timeSlotEnd.getTime() + duration * 1000);
+        return { start: timeSlotStart, end: timeSlotEnd };
+    }
+    getResourcesForGroup(resourceOrGroup) {
+        if ('children' in resourceOrGroup) {
+            return resourceOrGroup.children
+                .map((child) => this.getResourcesForGroup(child))
+                .reduce((flat, toFlatten) => flat.concat(toFlatten), []);
+        }
+        else {
+            return [resourceOrGroup];
+        }
     }
-    get unitHeight() {
-        return this.unitHeight$.value;
+    get mode() {
+        return this.mode$.value;
     }
-    set unitHeight(value) {
-        this.unitHeight$.next(value);
+    set mode(value) {
+        this.mode$.next(value);
+    }
+    get weekOptions() {
+        return this.weekOptions$.value;
+    }
+    set weekOptions(value) {
+        this.weekOptions$.next(value);
+    }
+    get timelineOptions() {
+        return this.timelineOptions$.value;
+    }
+    set timelineOptions(value) {
+        this.timelineOptions$.next(value);
+    }
+    //#endregion
+    //#region Resources
+    get resources() {
+        return this.resources$.value;
+    }
+    set resources(value) {
+        this.resources$.next(value);
     }
     //#endregion
     addDays(date, days) {
@@ -2265,15 +2440,25 @@ class BsSchedulerComponent {
         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));
+    onPreviousWeekOrMonth() {
+        this.onChangeWeekOrMonth(false);
     }
-    onNextWeek() {
-        this.currentWeek$
-            .pipe(map((w) => this.addDays(w, 7)), take(1))
-            .subscribe((w) => this.currentWeek$.next(w));
+    onNextWeekOrMonth() {
+        this.onChangeWeekOrMonth(true);
+    }
+    onChangeWeekOrMonth(next) {
+        combineLatest([this.currentWeekOrMonth$, this.mode$])
+            .pipe(map(([currentWeekOrMonth, mode]) => {
+            switch (mode) {
+                case ESchedulerMode.week: {
+                    return this.addDays(currentWeekOrMonth, (next ? 7 : -7));
+                }
+                case ESchedulerMode.timeline: {
+                    return new Date(currentWeekOrMonth.getFullYear(), currentWeekOrMonth.getMonth() + (next ? 1 : -1), 1);
+                }
+            }
+        }), take(1))
+            .subscribe((w) => this.currentWeekOrMonth$.next(w));
     }
     onHoverEvent(ev) {
         console.log('hovered', ev);
@@ -2373,7 +2558,7 @@ class BsSchedulerComponent {
             return null;
         }
         const column = parseInt(strColumn);
-        const slot = timeSlots[row][column];
+        const slot = timeSlots[row].slots[column];
         return slot;
     }
     onMousemove(ev) {
@@ -2481,12 +2666,18 @@ class BsSchedulerComponent {
                             if (previewEvent) {
                                 this.operation = null;
                                 this.dragStartTimeslot = null;
-                                this.events$.next([...this.events$.value, {
-                                        start: previewEvent.start,
-                                        end: previewEvent.end,
-                                        color: this.randomColor(),
-                                        description: 'New event'
-                                    }]);
+                                this.resources$.next([
+                                    ...this.resources$.value,
+                                    {
+                                        description: 'New resource group',
+                                        events: [{
+                                                start: previewEvent.start,
+                                                end: previewEvent.end,
+                                                color: this.randomColor(),
+                                                description: 'New event'
+                                            }]
+                                    }
+                                ]);
                                 this.previewEvent$.next(null);
                             }
                         });
@@ -2504,7 +2695,7 @@ class BsSchedulerComponent {
                                 this.operation.event.end = previewEvent.end;
                                 this.operation = null;
                                 this.dragStartTimeslot = null;
-                                this.events$.next(this.events$.value);
+                                this.resources$.next(this.resources$.value);
                                 this.previewEvent$.next(null);
                             }
                         });
@@ -2518,19 +2709,29 @@ class BsSchedulerComponent {
     }
 }
 BsSchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSchedulerComponent, deps: [{ token: BsCalendarMonthService }, { token: BsTimelineService }], target: i0.ɵɵFactoryTarget.Component });
-BsSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsSchedulerComponent, selector: "bs-scheduler", inputs: { unitHeight: "unitHeight", maxInnerHeight: "maxInnerHeight" }, 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 calendar-head-cell\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n                <span class=\"d-block col-form-label text-center\">\n                    <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\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 px-2 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=\"(unitHeight$ | async) as unitHeight\">\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\"\n                            [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n                            [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n                            <div class=\"event-inner\"\n                                [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n                                [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n                                [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n                                [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n                                <div class=\"event-resize top\" *ngIf=\"eventPart.part.start === eventPart.part.event?.start\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n                                <div class=\"event-border\"></div>\n                                <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n                                    (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n                                    (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n                                    (mouseleave)=\"onLeaveEvent(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                                </div>\n                                <div class=\"event-resize bottom\" *ngIf=\"eventPart.part.end === eventPart.part.event?.end\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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\"\n                            [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\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\"></div>\n                        </div>\n                    </ng-container>\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:scroll;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;overflow:hidden}.event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.event .event-inner .event-resize.top{top:0}.event .event-inner .event-resize.bottom{bottom:0}.event .event-inner .event-resize:hover{background:#DDD}.event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.table .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsSchedulerComponent, selector: "bs-scheduler", inputs: { mode: "mode", weekOptions: "weekOptions", timelineOptions: "timelineOptions", maxInnerHeight: "maxInnerHeight", resources: "resources" }, outputs: { modeChange: "modeChange", weekOptionsChange: "weekOptionsChange", timelineOptionsChange: "timelineOptionsChange" }, 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 mb-0 week-schedule\" [style.max-height.px]=\"null\"\n    *ngIf=\"(mode$ | async) === modes.week\">\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)=\"onPreviousWeekOrMonth()\">\n                    <i class=\"bi-chevron-left px-0\"></i>\n                </button>\n                <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n                    <i class=\"bi-chevron-right px-0\"></i>\n                </button>\n            </div>\n            <div class=\"flex-grow-1 calendar-head-cell\" *ngFor=\"let day of (shownDays$ | async)\">\n                <span class=\"d-block col-form-label text-center\">\n                    <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n        <div class=\"position-relative\" *ngIf=\"(timeSlots$ | async) as row\">\n            <ng-container *ngIf=\"(weekOptions$ | async) as weekOptions\">\n                <!-- Timeslots -->\n                <div *ngFor=\"let timeslots of row; let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"weekOptions.unitHeight\">\n                    <div class=\"calendar-cell calendar-left align-top px-2 py-0\">{{ timeslots.slots[0].start | date: 'HH:mm:ss' }}</div>\n                    <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots.slots; 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 * weekOptions.unitHeight\"\n                            [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n                            [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n                            <div class=\"event-inner\" [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n                                [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n                                [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n                                [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n                                <div class=\"event-resize top\"\n                                    *ngIf=\"eventPart.part.start === eventPart.part.event?.start\"\n                                    (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n                                <div class=\"event-border\"></div>\n                                <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n                                    (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n                                    (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n                                    (mouseleave)=\"onLeaveEvent(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                                </div>\n                                <div class=\"event-resize bottom\"\n                                    *ngIf=\"eventPart.part.end === eventPart.part.event?.end\"\n                                    (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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 * weekOptions.unitHeight\"\n                            [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n                            [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n                            <div class=\"event-inner w-100\"\n                                [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\">\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<div class=\"table d-flex w-100 overflow-y-auto mb-0 bg-white timeline\" *ngIf=\"(mode$ | async) === modes.timeline\">\n    <div class=\"calendar-head d-flex\">\n        <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n            <i class=\"bi-chevron-left px-0\"></i>\n        </button>\n        <div class=\"flex-grow-1 h3 py-2 mb-0 text-center\">{{ currentWeekOrMonth$ | async | date: 'MMMM yyyy' }}</div>\n        <button class=\"btn flex-start\" (click)=\"onNextWeekOrMonth()\">\n            <i class=\"bi-chevron-right px-0\"></i>\n        </button>\n    </div>\n    <div class=\"calendar-body table-responsive overflow-x-auto\">\n        <table class=\"table mb-0\">\n            <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n                <tr>\n                    <td></td>\n                    <td *ngFor=\"let day of timeSlots\" [attr.colspan]=\"day.slots.length\" class=\"text-center px-2\">\n                        <span class=\"position-sticky day-label\">{{ day.stamp | date: 'd EE' }}</span>\n                    </td>\n                </tr>\n                <tr>\n                    <td></td>\n                    <ng-container *ngIf=\"(timelineOptions$ | async) as timelineOptions\">\n                        <ng-container *ngFor=\"let day of timeSlots\">\n                            <td *ngFor=\"let slot of day.slots\">\n                                <span class=\"d-block p-0 text-center\" [style.width.px]=\"timelineOptions.unitWidth\">\n                                    {{ slot.start | date: 'HH:mm' }}\n                                </span>\n                            </td>\n                        </ng-container>\n                    </ng-container>\n                </tr>\n                <bs-resource-group-presenter *ngFor=\"let group of (resources$ | async)\" [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n            </ng-container>\n        </table>\n    </div>\n</div>", styles: [":host{display:block;border:1px solid #333;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden}.calendar-head{background:#F7F7F7;color:#007aff}.table .calendar-head{flex:0 0 auto}.table .calendar-body{display:block;flex:1 1 auto}.week-schedule.table{flex-flow:column}.week-schedule.table .calendar-head>div{padding-right:18px}.week-schedule.table .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule.table .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule.table .calendar-left{width:90px}.week-schedule .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}.week-schedule .event.preview{background:#666;opacity:.6}.week-schedule .event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all;overflow:hidden}.week-schedule .event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.week-schedule .event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.week-schedule .event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.week-schedule .event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.week-schedule .event .event-inner .event-resize.top{top:0}.week-schedule .event .event-inner .event-resize.bottom{bottom:0}.week-schedule .event .event-inner .event-resize:hover{background:#DDD}.week-schedule .event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.week-schedule.table .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.table{flex-flow:column}.timeline .calendar-body .table{background-color:#f7f7f7}.timeline .calendar-body .table tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .table tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .table tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .table tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .table>:not(:first-child){border-top:none!important}\n"], components: [{ type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: ["level", "resourceGroup", "timeSlots", "isExpanded"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe, "bsSecondsTodayOffset": BsSecondsTodayOffsetPipe, "bsSecondsTimespan": BsSecondsTimespanPipe, "dayOfWeek": DayOfWeekPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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 calendar-head-cell\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n                <span class=\"d-block col-form-label text-center\">\n                    <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\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 px-2 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=\"(unitHeight$ | async) as unitHeight\">\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\"\n                            [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n                            [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n                            <div class=\"event-inner\"\n                                [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n                                [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n                                [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n                                [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n                                <div class=\"event-resize top\" *ngIf=\"eventPart.part.start === eventPart.part.event?.start\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n                                <div class=\"event-border\"></div>\n                                <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n                                    (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n                                    (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n                                    (mouseleave)=\"onLeaveEvent(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                                </div>\n                                <div class=\"event-resize bottom\" *ngIf=\"eventPart.part.end === eventPart.part.event?.end\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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\"\n                            [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\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\"></div>\n                        </div>\n                    </ng-container>\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:scroll;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;overflow:hidden}.event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.event .event-inner .event-resize.top{top:0}.event .event-inner .event-resize.bottom{bottom:0}.event .event-inner .event-resize:hover{background:#DDD}.event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.table .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}\n"] }]
+            args: [{ selector: 'bs-scheduler', template: "<div class=\"table d-flex w-100 overflow-y-auto mb-0 week-schedule\" [style.max-height.px]=\"null\"\n    *ngIf=\"(mode$ | async) === modes.week\">\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)=\"onPreviousWeekOrMonth()\">\n                    <i class=\"bi-chevron-left px-0\"></i>\n                </button>\n                <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n                    <i class=\"bi-chevron-right px-0\"></i>\n                </button>\n            </div>\n            <div class=\"flex-grow-1 calendar-head-cell\" *ngFor=\"let day of (shownDays$ | async)\">\n                <span class=\"d-block col-form-label text-center\">\n                    <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n        <div class=\"position-relative\" *ngIf=\"(timeSlots$ | async) as row\">\n            <ng-container *ngIf=\"(weekOptions$ | async) as weekOptions\">\n                <!-- Timeslots -->\n                <div *ngFor=\"let timeslots of row; let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"weekOptions.unitHeight\">\n                    <div class=\"calendar-cell calendar-left align-top px-2 py-0\">{{ timeslots.slots[0].start | date: 'HH:mm:ss' }}</div>\n                    <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots.slots; 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 * weekOptions.unitHeight\"\n                            [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n                            [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n                            <div class=\"event-inner\" [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n                                [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n                                [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n                                [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n                                <div class=\"event-resize top\"\n                                    *ngIf=\"eventPart.part.start === eventPart.part.event?.start\"\n                                    (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n                                <div class=\"event-border\"></div>\n                                <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n                                    (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n                                    (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n                                    (mouseleave)=\"onLeaveEvent(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                                </div>\n                                <div class=\"event-resize bottom\"\n                                    *ngIf=\"eventPart.part.end === eventPart.part.event?.end\"\n                                    (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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 * weekOptions.unitHeight\"\n                            [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n                            [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n                            <div class=\"event-inner w-100\"\n                                [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\">\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<div class=\"table d-flex w-100 overflow-y-auto mb-0 bg-white timeline\" *ngIf=\"(mode$ | async) === modes.timeline\">\n    <div class=\"calendar-head d-flex\">\n        <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n            <i class=\"bi-chevron-left px-0\"></i>\n        </button>\n        <div class=\"flex-grow-1 h3 py-2 mb-0 text-center\">{{ currentWeekOrMonth$ | async | date: 'MMMM yyyy' }}</div>\n        <button class=\"btn flex-start\" (click)=\"onNextWeekOrMonth()\">\n            <i class=\"bi-chevron-right px-0\"></i>\n        </button>\n    </div>\n    <div class=\"calendar-body table-responsive overflow-x-auto\">\n        <table class=\"table mb-0\">\n            <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n                <tr>\n                    <td></td>\n                    <td *ngFor=\"let day of timeSlots\" [attr.colspan]=\"day.slots.length\" class=\"text-center px-2\">\n                        <span class=\"position-sticky day-label\">{{ day.stamp | date: 'd EE' }}</span>\n                    </td>\n                </tr>\n                <tr>\n                    <td></td>\n                    <ng-container *ngIf=\"(timelineOptions$ | async) as timelineOptions\">\n                        <ng-container *ngFor=\"let day of timeSlots\">\n                            <td *ngFor=\"let slot of day.slots\">\n                                <span class=\"d-block p-0 text-center\" [style.width.px]=\"timelineOptions.unitWidth\">\n                                    {{ slot.start | date: 'HH:mm' }}\n                                </span>\n                            </td>\n                        </ng-container>\n                    </ng-container>\n                </tr>\n                <bs-resource-group-presenter *ngFor=\"let group of (resources$ | async)\" [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n            </ng-container>\n        </table>\n    </div>\n</div>", styles: [":host{display:block;border:1px solid #333;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden}.calendar-head{background:#F7F7F7;color:#007aff}.table .calendar-head{flex:0 0 auto}.table .calendar-body{display:block;flex:1 1 auto}.week-schedule.table{flex-flow:column}.week-schedule.table .calendar-head>div{padding-right:18px}.week-schedule.table .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule.table .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule.table .calendar-left{width:90px}.week-schedule .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}.week-schedule .event.preview{background:#666;opacity:.6}.week-schedule .event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all;overflow:hidden}.week-schedule .event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.week-schedule .event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.week-schedule .event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.week-schedule .event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.week-schedule .event .event-inner .event-resize.top{top:0}.week-schedule .event .event-inner .event-resize.bottom{bottom:0}.week-schedule .event .event-inner .event-resize:hover{background:#DDD}.week-schedule .event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.week-schedule.table .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.table{flex-flow:column}.timeline .calendar-body .table{background-color:#f7f7f7}.timeline .calendar-body .table tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .table tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .table tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .table tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .table>:not(:first-child){border-top:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: BsCalendarMonthService }, { type: BsTimelineService }]; }, propDecorators: { timeSlotElements: [{
                 type: ViewChildren,
                 args: ['slot']
-            }], unitHeightChange: [{
+            }], modeChange: [{
                 type: Output
-            }], unitHeight: [{
+            }], mode: [{
+                type: Input
+            }], weekOptionsChange: [{
+                type: Output
+            }], weekOptions: [{
+                type: Input
+            }], timelineOptionsChange: [{
+                type: Output
+            }], timelineOptions: [{
                 type: Input
             }], maxInnerHeight: [{
                 type: Input
+            }], resources: [{
+                type: Input
             }], onMousemove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
@@ -2539,6 +2740,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 args: ['document:mouseup', ['$event']]
             }] } });
 
+const availableScales = [
+    { time: 60, pixels: 60, markerSize: 900 },
+    { time: 120, pixels: 60, markerSize: 900 },
+    { time: 300, pixels: 60, markerSize: 900 },
+    { time: 900, pixels: 60, markerSize: 900 },
+    { time: 3600, pixels: 60, markerSize: 21600 },
+    { time: 7200, pixels: 60, markerSize: 21600 },
+    { time: 10800, pixels: 60, markerSize: 21600 },
+    { time: 21600, pixels: 60, markerSize: 21600 },
+    { time: 86400, pixels: 60, markerSize: 604800 }, // 6000s / 60px   = 100 s/px
+];
+
 class DateOffsetPipe {
     transform(value) {
         const today = new Date(value.start);
@@ -2564,7 +2777,9 @@ BsSchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         BsSecondsTimespanPipe,
         BsSecondsTodayOffsetPipe,
         DateOffsetPipe,
-        DayOfWeekPipe], imports: [CommonModule], exports: [BsSchedulerComponent] });
+        DayOfWeekPipe,
+        ResourceGroupPresenterComponent], imports: [CommonModule], exports: [BsSchedulerComponent,
+        ResourceGroupPresenterComponent] });
 BsSchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsSchedulerModule, imports: [[
             CommonModule
         ]] });
@@ -2576,13 +2791,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         BsSecondsTimespanPipe,
                         BsSecondsTodayOffsetPipe,
                         DateOffsetPipe,
-                        DayOfWeekPipe
+                        DayOfWeekPipe,
+                        ResourceGroupPresenterComponent
                     ],
                     imports: [
                         CommonModule
                     ],
                     exports: [
-                        BsSchedulerComponent
+                        BsSchedulerComponent,
+                        ResourceGroupPresenterComponent
                     ]
                 }]
         }] });
@@ -2921,10 +3138,10 @@ class BsNavbarComponent {
     }
 }
 BsNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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: { $implicit: (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 } });
+BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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: { $implicit: (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: ["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.2.0", 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            <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: { $implicit: (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"] }]
+            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: { $implicit: (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: ["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']
@@ -3155,28 +3372,50 @@ class NavbarContentDirective {
     constructor(element, platformId) {
         this.element = element;
         this.platformId = platformId;
+        this.destroyed$ = new Subject();
+        this.viewInit$ = new BehaviorSubject(false);
+        this.navbar$ = new BehaviorSubject(null);
+        this.resizeObserver = null;
         this.initialPadding = 0;
-        if (!isPlatformServer(platformId)) {
-            this.resizeObserver = new ResizeObserver((entries) => {
-                const height = entries[0].contentRect.height;
-                this.element.nativeElement.style.paddingTop = (this.initialPadding + height) + 'px';
-            });
-        }
-        else {
-            this.resizeObserver = null;
-        }
+        combineLatest([this.viewInit$, this.navbar$])
+            .pipe(filter(([viewInit, navbar]) => {
+            return viewInit && !!navbar;
+        }))
+            .pipe(take(1))
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe(([viewInit, navbar]) => {
+            if (!isPlatformServer(platformId)) {
+                // Initialize the ResizeObserver
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    const height = navbar
+                        ? navbar.nav.nativeElement.offsetHeight
+                        : entries[0].contentRect.height;
+                    this.element.nativeElement.style.paddingTop = (this.initialPadding + height) + 'px';
+                });
+                // Monitor the size
+                const px = getComputedStyle(this.element.nativeElement).getPropertyValue('padding-top');
+                const pt = parseInt(px.replace(/px$/, ''));
+                this.initialPadding = isNaN(pt) ? 0 : pt;
+                if (this.resizeObserver && navbar) {
+                    this.resizeObserver.observe(navbar.nav.nativeElement);
+                }
+            }
+        });
+        this.destroyed$
+            .pipe(filter(d => !!d))
+            .subscribe(() => {
+            var _a, _b;
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve((_b = this.navbar$.value) === null || _b === void 0 ? void 0 : _b.nav.nativeElement);
+        });
+    }
+    set navbar(value) {
+        this.navbar$.next(value);
     }
     ngAfterViewInit() {
-        const pt = parseInt(this.element.nativeElement.style.paddingTop.replace(/px$/, ''));
-        this.initialPadding = isNaN(pt) ? 0 : pt;
-        if (this.resizeObserver) {
-            this.resizeObserver.observe(this.navbar.nav.nativeElement);
-        }
+        this.viewInit$.next(true);
     }
     ngOnDestroy() {
-        if (this.resizeObserver) {
-            this.resizeObserver.unobserve(this.navbar.nav.nativeElement);
-        }
+        this.destroyed$.next(true);
     }
 }
 NavbarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: NavbarContentDirective, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3336,6 +3575,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 }]
         }] });
 
+class BsOffcanvasHeaderComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+BsOffcanvasHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsOffcanvasHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsOffcanvasHeaderComponent, selector: "bs-offcanvas-header", ngImport: i0, template: "<div class=\"offcanvas-header\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-offcanvas-header', template: "<div class=\"offcanvas-header\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class BsOffcanvasBodyComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+BsOffcanvasBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsOffcanvasBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsOffcanvasBodyComponent, selector: "bs-offcanvas-body", ngImport: i0, template: "<div class=\"offcanvas-body small\">\n    <ng-content></ng-content>\n</div>", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-offcanvas-body', template: "<div class=\"offcanvas-body small\">\n    <ng-content></ng-content>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+const OFFCANVAS_CONTENT = new InjectionToken('OffcanvasContent');
+
+class BsOffcanvasComponent {
+    constructor(content) {
+        this.size = null;
+        this.displayBlock = true;
+        this.instance = null;
+        this.show$ = new BehaviorSubject(false);
+        this.position$ = new BehaviorSubject('bottom');
+        this.content = content;
+        this.offcanvasClass$ = this.position$
+            .pipe(map((pos) => `offcanvas-${pos}`));
+        this.offcanvasHeight100$ = this.position$
+            .pipe(map((pos) => {
+            switch (this.position) {
+                case 'top':
+                case 'bottom':
+                    return false;
+                default:
+                    return true;
+            }
+        }));
+    }
+    get width100() {
+        switch (this.position) {
+            case 'top':
+            case 'bottom':
+                return true;
+            default:
+                return false;
+        }
+    }
+    ;
+    //#region Position
+    set position(value) {
+        this.position$.next(value);
+    }
+    get position() {
+        return this.position$.value;
+    }
+}
+BsOffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasComponent, deps: [{ token: OFFCANVAS_CONTENT }], target: i0.ɵɵFactoryTarget.Component });
+BsOffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsOffcanvasComponent, selector: "bs-offcanvas", inputs: { size: "size" }, host: { properties: { "class.d-block": "this.displayBlock", "class.w-100": "this.width100" } }, ngImport: i0, template: "<div class=\"offcanvas\" [class]=\"offcanvasClass$ | async\"\n     [class.show]=\"show$ | async\"\n     [class.h-100]=\"offcanvasHeight100$ | async\"\n     [style.height.px]=\"size\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n</div>", styles: [".offcanvas{position:relative;visibility:unset}.offcanvas.offcanvas-bottom,.offcanvas.offcanvas-top{height:auto}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-offcanvas', template: "<div class=\"offcanvas\" [class]=\"offcanvasClass$ | async\"\n     [class.show]=\"show$ | async\"\n     [class.h-100]=\"offcanvasHeight100$ | async\"\n     [style.height.px]=\"size\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: this }\" ></ng-container>\n</div>", styles: [".offcanvas{position:relative;visibility:unset}.offcanvas.offcanvas-bottom,.offcanvas.offcanvas-top{height:auto}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Inject,
+                        args: [OFFCANVAS_CONTENT]
+                    }] }];
+    }, propDecorators: { size: [{
+                type: Input
+            }], displayBlock: [{
+                type: HostBinding,
+                args: ['class.d-block']
+            }], width100: [{
+                type: HostBinding,
+                args: ['class.w-100']
+            }] } });
+
+class BsOffcanvasCloseDirective {
+    constructor(offcanvasService) {
+        this.offcanvasService = offcanvasService;
+    }
+    onClick() {
+        this.offcanvasService.hide(this.bsOffcanvasClose);
+    }
+}
+BsOffcanvasCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasCloseDirective, deps: [{ token: BsOffcanvasService }], target: i0.ɵɵFactoryTarget.Directive });
+BsOffcanvasCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: BsOffcanvasCloseDirective, selector: "[bsOffcanvasClose]", inputs: { bsOffcanvasClose: "bsOffcanvasClose" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsOffcanvasClose]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsOffcanvasService }]; }, propDecorators: { bsOffcanvasClose: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BsOffcanvasModule {
+}
+BsOffcanvasModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsOffcanvasModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasModule, declarations: [BsOffcanvasComponent,
+        BsOffcanvasHeaderComponent,
+        BsOffcanvasBodyComponent,
+        BsOffcanvasCloseDirective], imports: [CommonModule,
+        OverlayModule], exports: [BsOffcanvasComponent,
+        BsOffcanvasHeaderComponent,
+        BsOffcanvasBodyComponent,
+        BsOffcanvasCloseDirective] });
+BsOffcanvasModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasModule, imports: [[
+            CommonModule,
+            OverlayModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsOffcanvasComponent,
+                        BsOffcanvasHeaderComponent,
+                        BsOffcanvasBodyComponent,
+                        BsOffcanvasCloseDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        OverlayModule
+                    ],
+                    exports: [
+                        BsOffcanvasComponent,
+                        BsOffcanvasHeaderComponent,
+                        BsOffcanvasBodyComponent,
+                        BsOffcanvasCloseDirective
+                    ]
+                }]
+        }] });
+
+class BsOffcanvasService {
+    constructor(overlay, parentInjector) {
+        this.overlay = overlay;
+        this.parentInjector = parentInjector;
+    }
+    show(template, position, hasBackdrop = false, backdropClick = null) {
+        const injector = Injector.create({
+            providers: [{ provide: OFFCANVAS_CONTENT, useValue: template }],
+            parent: this.parentInjector
+        });
+        const portal = new ComponentPortal(BsOffcanvasComponent, null, injector);
+        const positioning = this.overlay.position().global();
+        const config = {
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy: positioning,
+            hasBackdrop,
+        };
+        switch (position) {
+            case 'bottom':
+                positioning.centerHorizontally().bottom('0');
+                config.width = '100%';
+                break;
+            case 'top':
+                positioning.centerHorizontally().top('0');
+                config.width = '100%';
+                break;
+            case 'start':
+                positioning.centerVertically().left('0');
+                config.height = '100%';
+                break;
+            case 'end':
+                positioning.centerVertically().right('0');
+                config.height = '100%';
+                break;
+            default:
+                throw 'Invalid value for position';
+        }
+        const overlayRef = this.overlay.create(config);
+        const componentInstance = overlayRef.attach(portal);
+        componentInstance.instance.position = position;
+        setTimeout(() => componentInstance.instance.show$.next(true));
+        componentInstance.instance['instance'] = {
+            component: componentInstance,
+            overlay: overlayRef
+        };
+        if (hasBackdrop && backdropClick) {
+            overlayRef.backdropClick().subscribe(() => backdropClick(componentInstance.instance));
+        }
+        return componentInstance.instance;
+    }
+    hide(offcanvas) {
+        offcanvas.show$.next(false);
+        setTimeout(() => { var _a; return (_a = offcanvas['instance']) === null || _a === void 0 ? void 0 : _a.overlay.dispose(); }, 300);
+    }
+}
+BsOffcanvasService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+BsOffcanvasService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasService, providedIn: BsOffcanvasModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsOffcanvasService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: BsOffcanvasModule
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
+
 class BsRatingComponent {
     constructor() {
         this.destroyed$ = new Subject();
@@ -4417,5 +4864,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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, BsSchedulerComponent, BsSchedulerModule, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsSelect2Component, BsSelect2Module, BsSnackbarCloseDirective, BsSnackbarComponent, BsSnackbarModule, BsSnackbarService, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, BsTimepickerComponent, BsTimepickerModule, 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, BsOffcanvasBodyComponent, BsOffcanvasCloseDirective, BsOffcanvasComponent, BsOffcanvasHeaderComponent, BsOffcanvasModule, BsOffcanvasService, BsPaginationComponent, BsPaginationModule, BsProgressBarComponent, BsProgressBarModule, BsProgressComponent, BsRatingComponent, BsRatingModule, BsRowTemplateDirective, BsSchedulerComponent, BsSchedulerModule, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsSelect2Component, BsSelect2Module, BsSnackbarCloseDirective, BsSnackbarComponent, BsSnackbarModule, BsSnackbarService, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, BsTimepickerComponent, BsTimepickerModule, BsToggleButtonComponent, BsToggleButtonModule, BsTooltipDirective, BsTooltipModule, BsTypeaheadComponent, BsTypeaheadModule, Color, DatatableSettings, DropdownToggleDirective, ESchedulerMode, NavLinkDirective, NavbarContentDirective, Position, ResourceGroupPresenterComponent, availableScales };
 //# sourceMappingURL=mintplayer-ng-bootstrap.mjs.map