@mintplayer/ng-bootstrap 21.0.0 → 21.1.0

package/fesm2022/mintplayer-ng-bootstrap-scheduler.mjs

@@ -1,809 +1,235 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, Pipe, EventEmitter, HostListener, Output, ViewChildren, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, map, filter, combineLatest, take } from 'rxjs';
-import * as i1 from '@angular/platform-browser';
-import * as i2 from '@mintplayer/ng-bootstrap/calendar-month';
-import * as i5 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { inject, Injector, input, model, output, computed, signal, runInInjectionContext, effect, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import '@mintplayer/scheduler-wc';
+export { generateEventId, generateGroupId, generateResourceId } from '@mintplayer/scheduler-core';
 
-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";
-    EDragOperation[EDragOperation["createEvent"] = 1] = "createEvent";
-    EDragOperation[EDragOperation["resizeEvent"] = 2] = "resizeEvent";
-    EDragOperation[EDragOperation["moveEvent"] = 3] = "moveEvent";
-})(EDragOperation || (EDragOperation = {}));
-
-class BsTimelineService {
-    splitInParts(event) {
-        let startTime = event.start;
-        const result = [];
-        const eventOrNull = 'color' in event ? event : null;
-        while (!this.dateEquals(startTime, event.end)) {
-            const end = new Date(startTime.getFullYear(), startTime.getMonth(), startTime.getDate() + 1, 0, 0, 0);
-            result.push({ start: startTime, end: end, event: eventOrNull });
-            startTime = end;
-        }
-        if (startTime != event.end) {
-            result.push({ start: startTime, end: event.end, event: eventOrNull });
-        }
-        return { event: event, parts: result };
-    }
-    dateEquals(date1, date2) {
-        return (date1.getFullYear() === date2.getFullYear() &&
-            date1.getMonth() === date2.getMonth() &&
-            date1.getDate() === date2.getDate());
-    }
-    getTimeline(events) {
-        const timestamps = this.getTimestamps(events);
-        const tracks = [];
-        timestamps.forEach((timestamp, tIndex) => {
-            const starting = events.filter((e) => e.start === timestamp);
-            // const ending = events.filter((e) => e.end === timestamp);
-            starting.forEach((startedEvent, eIndex) => {
-                const freeTracks = tracks.filter(t => this.trackIsFreeAt(t, startedEvent));
-                if (freeTracks.length === 0) {
-                    tracks.push({ index: tracks.length, events: [startedEvent] });
-                }
-                else {
-                    freeTracks[0].events.push(startedEvent);
+/**
+ * Angular wrapper for the mp-scheduler web component using signals
+ */
+class BsSchedulerComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        // Input signals
+        this.view = input('week', ...(ngDevMode ? [{ debugName: "view" }] : []));
+        this.date = input(new Date(), ...(ngDevMode ? [{ debugName: "date" }] : []));
+        this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : []));
+        this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        // Two-way binding model signals
+        this.selectedEvent = model(null, ...(ngDevMode ? [{ debugName: "selectedEvent" }] : []));
+        this.selectedRange = model(null, ...(ngDevMode ? [{ debugName: "selectedRange" }] : []));
+        // Output signals (events)
+        this.eventClick = output();
+        this.eventDblClick = output();
+        this.eventCreate = output();
+        this.eventUpdate = output();
+        this.eventDelete = output();
+        this.dateClick = output();
+        this.dateSelect = output();
+        this.viewChange = output();
+        // Computed signals
+        this.currentWeekStart = computed(() => {
+            const d = new Date(this.date());
+            const day = d.getDay();
+            const diff = (day === 0 ? 6 : day - 1); // Adjust for Monday start
+            d.setDate(d.getDate() - diff);
+            d.setHours(0, 0, 0, 0);
+            return d;
+        }, ...(ngDevMode ? [{ debugName: "currentWeekStart" }] : []));
+        this.currentWeekEnd = computed(() => {
+            const start = this.currentWeekStart();
+            const end = new Date(start);
+            end.setDate(end.getDate() + 6);
+            end.setHours(23, 59, 59, 999);
+            return end;
+        }, ...(ngDevMode ? [{ debugName: "currentWeekEnd" }] : []));
+        this.visibleEvents = computed(() => {
+            const start = this.currentWeekStart();
+            const end = this.currentWeekEnd();
+            return this.events().filter((e) => e.start < end && e.end > start);
+        }, ...(ngDevMode ? [{ debugName: "visibleEvents" }] : []));
+        // Internal state
+        this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+        this.eventListeners = [];
+    }
+    ngAfterViewInit() {
+        runInInjectionContext(this.injector, () => {
+            // Set up effects to sync inputs to web component
+            effect(() => {
+                const el = this.schedulerRef?.nativeElement;
+                if (el) {
+                    el.view = this.view();
                 }
             });
-        });
-        return tracks;
-    }
-    getTimestamps(events) {
-        const allTimestamps = events.map(e => [e.start, e.end])
-            .reduce((flat, toFlatten) => flat.concat(toFlatten), []);
-        return allTimestamps
-            .filter((t, i) => allTimestamps.indexOf(t) === i)
-            .sort((t1, t2) => t1 - t2);
-    }
-    trackIsFreeAt(track, event) {
-        if (track.events.every((ev) => (ev.end <= event.start) || (event.end <= ev.start))) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTimelineService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTimelineService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class ResourceGroupPresenterComponent {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.level = 0;
-        this.resourceOrGroup$ = new BehaviorSubject(null);
-        this.timeSlots$ = new BehaviorSubject([]);
-        this.isExpanded$ = new BehaviorSubject(false);
-        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)));
-        import('bootstrap-icons/icons/chevron-down.svg').then((icon) => {
-            this.chevronDown = sanitizer.bypassSecurityTrustHtml(icon.default);
-        });
-        import('bootstrap-icons/icons/chevron-right.svg').then((icon) => {
-            this.chevronRight = sanitizer.bypassSecurityTrustHtml(icon.default);
-        });
-    }
-    //#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$.next(!this.isExpanded$.value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceGroupPresenterComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ResourceGroupPresenterComponent, isStandalone: false, selector: "bs-resource-group-presenter", inputs: { level: "level", resourceGroup: "resourceGroup", timeSlots: "timeSlots", isExpanded: "isExpanded" }, ngImport: i0, template: "@if (data$ | async; as data) {\n\n    <!-- Data is a resource group -->\n    @if (data.resourceGroup) {\n        <!-- Header -->\n        @if (timeSlots$ | async; as timeSlots) {\n            <tr class=\"p-0 cursor-pointer\" [title]=\"data.resourceGroup.description\">\n                @if (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                            @if (isExpanded$ | async) {\n                                <span [innerHTML]=\"chevronDown\" [style.padding-left.px]=\"level * 20\"></span>\n                            } @else {\n                                <span [innerHTML]=\"chevronRight\" [style.padding-left.px]=\"level * 20\"></span>\n                            }\n                            {{ data.resourceGroup.description }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n\n        <!-- Subgroups or resources -->\n        @if (isExpanded$ | async) {\n            @if (timeSlots$ | async; as timeSlots) {\n                @for (child of data.resourceGroup.children; track child) {\n                    <bs-resource-group-presenter [resourceGroup]=\"child\" [timeSlots]=\"timeSlots\" [level]=\"level + 1\"></bs-resource-group-presenter>\n                }\n            }\n        }\n    }\n\n    <!-- Data is a resource -->\n    @if (data.resource) {\n        <tr 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            @for (slots of (timeSlots$ | async); track $index) {\n                @for (slot of slots.slots; track slot) {\n                    <td class=\"bg-white border-1\">\n                        <!-- {{ slot.start | date: 'dd/MM/yyyy HH:mm:ss' }} -->\n                    </td>\n                }\n            }\n        </tr>\n    }\n}", styles: [":host{display:contents}tr{border-bottom-width:1px}tr:not(.bordered) td span.position-sticky{left:0;right:0}\n"], dependencies: [{ kind: "component", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: ["level", "resourceGroup", "timeSlots", "isExpanded"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceGroupPresenterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-resource-group-presenter', standalone: false, template: "@if (data$ | async; as data) {\n\n    <!-- Data is a resource group -->\n    @if (data.resourceGroup) {\n        <!-- Header -->\n        @if (timeSlots$ | async; as timeSlots) {\n            <tr class=\"p-0 cursor-pointer\" [title]=\"data.resourceGroup.description\">\n                @if (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                            @if (isExpanded$ | async) {\n                                <span [innerHTML]=\"chevronDown\" [style.padding-left.px]=\"level * 20\"></span>\n                            } @else {\n                                <span [innerHTML]=\"chevronRight\" [style.padding-left.px]=\"level * 20\"></span>\n                            }\n                            {{ data.resourceGroup.description }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n\n        <!-- Subgroups or resources -->\n        @if (isExpanded$ | async) {\n            @if (timeSlots$ | async; as timeSlots) {\n                @for (child of data.resourceGroup.children; track child) {\n                    <bs-resource-group-presenter [resourceGroup]=\"child\" [timeSlots]=\"timeSlots\" [level]=\"level + 1\"></bs-resource-group-presenter>\n                }\n            }\n        }\n    }\n\n    <!-- Data is a resource -->\n    @if (data.resource) {\n        <tr 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            @for (slots of (timeSlots$ | async); track $index) {\n                @for (slot of slots.slots; track slot) {\n                    <td class=\"bg-white border-1\">\n                        <!-- {{ slot.start | date: 'dd/MM/yyyy HH:mm:ss' }} -->\n                    </td>\n                }\n            }\n        </tr>\n    }\n}", styles: [":host{display:contents}tr{border-bottom-width:1px}tr:not(.bordered) td span.position-sticky{left:0;right:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { level: [{
-                type: Input
-            }], resourceGroup: [{
-                type: Input
-            }], timeSlots: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }] } });
-
-class BsSecondsTimespanPipe {
-    transform(value) {
-        return (value.end.getTime() - value.start.getTime()) / 1000;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSecondsTimespanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsSecondsTimespanPipe, isStandalone: false, name: "bsSecondsTimespan" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSecondsTimespanPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'bsSecondsTimespan',
-                    standalone: false,
-                }]
-        }] });
-
-class BsSecondsTodayOffsetPipe {
-    transform(value) {
-        const today = new Date(value.start);
-        today.setHours(0);
-        today.setMinutes(0);
-        today.setSeconds(0);
-        return (value.start.getTime() - today.getTime()) / 1000;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSecondsTodayOffsetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsSecondsTodayOffsetPipe, isStandalone: false, name: "bsSecondsTodayOffset" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSecondsTodayOffsetPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'bsSecondsTodayOffset',
-                    standalone: false,
-                }]
-        }] });
-
-class DayOfWeekPipe {
-    transform(value) {
-        const dayOfWeek = value.start.getDay();
-        if (dayOfWeek === 0) {
-            return 7;
-        }
-        else {
-            return dayOfWeek;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DayOfWeekPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DayOfWeekPipe, isStandalone: false, name: "dayOfWeek" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DayOfWeekPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'dayOfWeek',
-                    standalone: false,
-                }]
-        }] });
-
-/// <reference types="../../types" />
-class BsSchedulerComponent {
-    constructor(sanitizer, calendarMonthService, timelineService, destroy) {
-        this.sanitizer = sanitizer;
-        this.calendarMonthService = calendarMonthService;
-        this.timelineService = timelineService;
-        this.destroy = destroy;
-        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([]);
-        this.mouseState$ = new BehaviorSubject(false);
-        this.hoveredTimeSlot$ = new BehaviorSubject(null);
-        this.hoveredEvent$ = new BehaviorSubject(null);
-        this.resourceGroupPresenterCounter = 1;
-        //#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.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));
+            effect(() => {
+                const el = this.schedulerRef?.nativeElement;
+                if (el) {
+                    el.date = this.date();
                 }
-                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));
+            });
+            effect(() => {
+                const el = this.schedulerRef?.nativeElement;
+                if (el) {
+                    el.events = this.events();
                 }
-            }
-        }));
-        this.daysOfWeekWithTimestamps$ = this.shownDays$
-            .pipe(map((shownDays) => ({ 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 => jaggedParts.reduce((flat, toFlatten) => flat.concat(toFlatten), [])))
-        ])
-            .pipe(map(([startAndEnd, eventParts]) => {
-            return eventParts.filter(eventPart => {
-                return !((eventPart.end.getTime() <= startAndEnd.start) || (eventPart.start.getTime() >= startAndEnd.end));
             });
-        }));
-        this.previewEventParts$ = this.previewEvent$.pipe(map((event) => {
-            if (event) {
-                return this.timelineService.splitInParts(event);
-            }
-            else {
-                return null;
-            }
-        }));
-        this.previewEventPartsForThisWeek$ = combineLatest([this.daysOfWeekWithTimestamps$, this.previewEventParts$])
-            .pipe(map(([startAndEnd, previewEventParts]) => {
-            if (previewEventParts) {
-                return previewEventParts.parts.filter(eventPart => {
-                    return !((eventPart.end.getTime() <= startAndEnd.start) || (eventPart.start.getTime() >= startAndEnd.end));
-                });
-            }
-            else {
-                return [];
-            }
-        }));
-        this.timelinedEventPartsForThisWeek$ = this.eventPartsForThisWeek$
-            .pipe(map(eventParts => {
-            // We'll only use the events for this week
-            const events = eventParts.map(ep => ep.event)
-                .filter((e, i, list) => list.indexOf(e) === i)
-                .filter((e) => !!e)
-                .map((e) => e);
-            const timeline = this.timelineService.getTimeline(events);
-            const result = timeline.map(track => track.events.map(ev => ({ event: ev, index: track.index })))
-                .reduce((flat, toFlatten) => flat.concat(toFlatten), [])
-                .map((evi) => eventParts.filter(p => p.event === evi.event).map(p => ({ part: p, index: evi.index })))
-                .reduce((flat, toFlatten) => flat.concat(toFlatten), []);
-            return {
-                total: timeline.length,
-                parts: result
-            };
-        }));
-        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
-                        };
-                    });
+            effect(() => {
+                const el = this.schedulerRef?.nativeElement;
+                if (el) {
+                    el.resources = this.resources();
                 }
-                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
-                        };
-                    });
+            });
+            effect(() => {
+                const el = this.schedulerRef?.nativeElement;
+                if (el) {
+                    el.options = this.options();
                 }
-                default: {
-                    throw 'Unknown value for Mode: ' + mode;
+            });
+            // Sync selectedEvent to web component
+            effect(() => {
+                const el = this.schedulerRef?.nativeElement;
+                if (el) {
+                    el.selectedEvent = this.selectedEvent();
                 }
-            }
-        }))
-            .pipe(takeUntilDestroyed(this.destroy))
-            .subscribe((timeslots) => {
-            // For performance reasons, we're not using an observable here, but persist the timeslots in a BehaviorSubject.
-            this.timeSlots$.next(timeslots);
+            });
         });
-        this.weekOptions$.pipe(takeUntilDestroyed())
-            .subscribe(weekOptions => this.weekOptionsChange.emit(weekOptions));
-        this.timelineOptions$.pipe(takeUntilDestroyed())
-            .subscribe(timelineOptions => this.timelineOptionsChange.emit(timelineOptions));
-        // combineLatest([this.mode$, this.scale$])
-        //   .pipe(filter(([mode, scale]) => mode === ESchedulerMode.timeline))
-        import('bootstrap-icons/icons/chevron-left.svg').then((icon) => {
-            this.chevronLeft = sanitizer.bypassSecurityTrustHtml(icon.default);
+        // Set up event listeners
+        this.setupEventListeners();
+        this.initialized.set(true);
+    }
+    ngOnDestroy() {
+        this.removeEventListeners();
+    }
+    setupEventListeners() {
+        const el = this.schedulerRef?.nativeElement;
+        if (!el)
+            return;
+        const addListener = (type, handler) => {
+            const listener = (e) => handler(e);
+            el.addEventListener(type, listener);
+            this.eventListeners.push({ type, listener });
+        };
+        addListener('event-click', (e) => {
+            this.eventClick.emit(e.detail);
+            this.selectedEvent.set(e.detail.event);
         });
-        import('bootstrap-icons/icons/chevron-right.svg').then((icon) => {
-            this.chevronRight = sanitizer.bypassSecurityTrustHtml(icon.default);
+        addListener('event-dblclick', (e) => {
+            this.eventDblClick.emit(e.detail);
         });
-    }
-    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 mode() {
-        return this.mode$.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) {
-        const result = new Date(date);
-        result.setDate(result.getDate() + days);
-        return result;
-    }
-    onPreviousWeekOrMonth() {
-        this.onChangeWeekOrMonth(false);
-    }
-    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), takeUntilDestroyed(this.destroy))
-            .subscribe((w) => this.currentWeekOrMonth$.next(w));
-    }
-    onHoverEvent(ev) {
-        this.hoveredEvent$.next(ev);
-    }
-    onLeaveEvent(ev) {
-        this.hoveredEvent$.next(null);
-    }
-    onCreateEvent(ev, slot) {
-        ev.preventDefault();
-        this.mouseState$.next(true);
-        this.dragStartTimeslot = slot;
-        this.operation = {
-            operation: EDragOperation.createEvent,
-            event: {
-                start: slot.start,
-                end: slot.end,
-                color: '#F00',
-                description: 'Test event',
-            },
-            meta: null,
-        };
-        this.previewEvent$.next({ start: slot.start, end: slot.end });
-    }
-    randomColor() {
-        const brightness = 128;
-        return '#' + this.randomChannel(brightness) + this.randomChannel(brightness) + this.randomChannel(brightness);
-    }
-    randomChannel(brightness) {
-        const r = 255 - brightness;
-        const n = 0 | ((Math.random() * r) + brightness);
-        const s = n.toString(16);
-        return (s.length == 1) ? '0' + s : s;
-    }
-    onStartDragEvent(eventPart, ev) {
-        ev.preventDefault();
-        this.hoveredTimeSlot$.pipe(take(1), takeUntilDestroyed(this.destroy)).subscribe((hoveredTimeSlot) => {
-            if (eventPart.event) {
-                this.dragStartTimeslot = hoveredTimeSlot;
-                this.operation = {
-                    operation: EDragOperation.moveEvent,
-                    event: eventPart.event,
-                    meta: null,
-                };
-                this.previewEvent$.next({ start: eventPart.event.start, end: eventPart.event.end });
-            }
+        addListener('event-create', (e) => {
+            this.eventCreate.emit(e.detail);
         });
-    }
-    onStartResizeEvent(event, position) {
-        if (event) {
-            switch (position) {
-                case 'top':
-                    {
-                        this.operation = {
-                            operation: EDragOperation.resizeEvent,
-                            event: event,
-                            meta: { position },
-                        };
-                        this.previewEvent$.next({ start: event.start, end: event.end });
-                    }
-                    break;
-                case 'bottom':
-                    {
-                        this.operation = {
-                            operation: EDragOperation.resizeEvent,
-                            event: event,
-                            meta: { position },
-                        };
-                        this.previewEvent$.next({ start: event.start, end: event.end });
-                    }
-                    break;
-            }
-        }
-    }
-    //#region hoveredTimeslot$
-    getHoveredTimeslot(ev, timeSlots) {
-        const hoveredSlots = this.timeSlotElements.filter((el) => {
-            const rct = el.nativeElement.getBoundingClientRect();
-            if (rct.left <= ev.x && ev.x <= rct.right && rct.top <= ev.y && ev.y <= rct.bottom) {
-                return true;
-            }
-            else {
-                return false;
-            }
+        addListener('event-update', (e) => {
+            this.eventUpdate.emit(e.detail);
         });
-        if (!hoveredSlots || hoveredSlots.length === 0) {
-            return null;
-        }
-        const slotElement = hoveredSlots[0].nativeElement;
-        const strRow = slotElement.getAttribute('data-row');
-        if (!strRow) {
-            return null;
-        }
-        const row = parseInt(strRow);
-        const strColumn = slotElement.getAttribute('data-column');
-        if (!strColumn) {
-            return null;
-        }
-        const column = parseInt(strColumn);
-        const slot = timeSlots[row].slots[column];
-        return slot;
-    }
-    onMousemove(ev) {
-        this.timeSlots$.pipe(take(1), takeUntilDestroyed(this.destroy)).subscribe((timeSlots) => {
-            const hovered = this.getHoveredTimeslot(ev, timeSlots);
-            this.hoveredTimeSlot$.next(hovered);
-            if (this.operation) {
-                switch (this.operation.operation) {
-                    case EDragOperation.createEvent:
-                        {
-                            if (this.operation.event && this.dragStartTimeslot && hovered && (this.operation.event.end.getTime() != hovered.end.getTime())) {
-                                if (this.dragStartTimeslot.start.getTime() === hovered.start.getTime()) {
-                                    // 1 slot
-                                }
-                                else if (this.dragStartTimeslot.start.getTime() < hovered.start.getTime()) {
-                                    // Drag down
-                                    this.previewEvent$
-                                        .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
-                                        .pipe(map((ev) => {
-                                        if (ev && this.dragStartTimeslot) {
-                                            ev.start = this.dragStartTimeslot.start;
-                                            ev.end = hovered.end;
-                                        }
-                                        return ev;
-                                    }))
-                                        .pipe(take(1), takeUntilDestroyed(this.destroy))
-                                        .subscribe((ev) => this.previewEvent$.next(ev));
-                                }
-                                else if (this.dragStartTimeslot.start.getTime() > hovered.start.getTime()) {
-                                    // Drag up
-                                    this.previewEvent$
-                                        .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
-                                        .pipe(map((ev) => {
-                                        if (ev && this.dragStartTimeslot) {
-                                            ev.start = hovered.start;
-                                            ev.end = this.dragStartTimeslot.end;
-                                        }
-                                        return ev;
-                                    }))
-                                        .pipe(take(1), takeUntilDestroyed(this.destroy))
-                                        .subscribe((ev) => this.previewEvent$.next(ev));
-                                }
-                            }
-                        }
-                        break;
-                    case EDragOperation.moveEvent:
-                        {
-                            if (hovered && this.dragStartTimeslot) {
-                                this.previewEvent$
-                                    .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
-                                    .pipe(map((ev) => {
-                                    if (ev && this.dragStartTimeslot) {
-                                        const result = {
-                                            start: new Date(ev.start.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime()),
-                                            end: new Date(ev.end.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime())
-                                        };
-                                        this.dragStartTimeslot = hovered;
-                                        return result;
-                                    }
-                                    else {
-                                        return ev;
-                                    }
-                                }))
-                                    .pipe(take(1), takeUntilDestroyed(this.destroy))
-                                    .subscribe(ev => this.previewEvent$.next(ev));
-                            }
-                        }
-                        break;
-                    case EDragOperation.resizeEvent:
-                        {
-                            if (hovered) {
-                                this.previewEvent$
-                                    .pipe(filter((ev) => !!ev))
-                                    .pipe(map((ev) => {
-                                    if (ev && this.operation && this.operation.event) {
-                                        if (this.operation.meta.position === 'top') {
-                                            ev.start = hovered.start;
-                                            ev.end = this.operation.event.end;
-                                        }
-                                        else if (this.operation.meta.position === 'bottom') {
-                                            ev.start = this.operation.event.start;
-                                            ev.end = hovered.end;
-                                        }
-                                    }
-                                    return ev;
-                                }))
-                                    .pipe(take(1), takeUntilDestroyed(this.destroy))
-                                    .subscribe((ev) => this.previewEvent$.next(ev));
-                            }
-                        }
-                        break;
-                }
-            }
+        addListener('event-delete', (e) => {
+            this.eventDelete.emit(e.detail);
+        });
+        addListener('date-click', (e) => {
+            this.dateClick.emit(e.detail);
+        });
+        addListener('date-select', (e) => {
+            this.dateSelect.emit(e.detail);
+            this.selectedRange.set({ start: e.detail.start, end: e.detail.end });
+        });
+        addListener('view-change', (e) => {
+            this.viewChange.emit(e.detail);
+        });
+        addListener('selection-change', (e) => {
+            this.selectedEvent.set(e.detail.selectedEvent);
         });
     }
-    //#endregion
-    onMouseUp(ev) {
-        if (this.operation) {
-            switch (this.operation.operation) {
-                case EDragOperation.createEvent:
-                    {
-                        combineLatest([this.previewEvent$])
-                            .pipe(take(1), takeUntilDestroyed(this.destroy))
-                            .subscribe(([previewEvent]) => {
-                            if (previewEvent) {
-                                this.operation = null;
-                                this.dragStartTimeslot = null;
-                                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);
-                            }
-                        });
-                    }
-                    break;
-                case EDragOperation.moveEvent:
-                case EDragOperation.resizeEvent:
-                    {
-                        this.previewEvent$
-                            .pipe(filter((ev) => !!ev))
-                            .pipe(take(1), takeUntilDestroyed(this.destroy))
-                            .subscribe((previewEvent) => {
-                            if (this.operation && this.operation.event && previewEvent) {
-                                this.operation.event.start = previewEvent.start;
-                                this.operation.event.end = previewEvent.end;
-                                this.operation = null;
-                                this.dragStartTimeslot = null;
-                                this.resources$.next(this.resources$.value);
-                                this.previewEvent$.next(null);
-                            }
-                        });
-                    }
-                    break;
-            }
+    removeEventListeners() {
+        const el = this.schedulerRef?.nativeElement;
+        if (!el)
+            return;
+        for (const { type, listener } of this.eventListeners) {
+            el.removeEventListener(type, listener);
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerComponent, deps: [{ token: i1.DomSanitizer }, { token: i2.BsCalendarMonthService }, { token: BsTimelineService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsSchedulerComponent, isStandalone: false, 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: "@switch (mode$ | async) {\n    @case (modes.week) {\n        <div class=\"d-flex flex-column w-100 overflow-y-auto mb-0 week-schedule\" [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)=\"onPreviousWeekOrMonth()\">\n                            <span [innerHTML]=\"chevronLeft\" class=\"px-0\"></span>\n                        </button>\n                        <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n                            <span [innerHTML]=\"chevronRight\" class=\"px-0\"></span>\n                        </button>\n                    </div>\n                    @for (day of (shownDays$ | async); track day) {\n                        <div class=\"flex-grow-1 calendar-head-cell\">\n                            <span class=\"d-block col-form-label text-center text-nowrap\">\n                                <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n                            </span>\n                        </div>\n                    }\n                </div>\n            </div>\n            <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n                @if (timeSlots$ | async; as row) {\n                    <div class=\"position-relative\">\n                        @if (weekOptions$ | async; as weekOptions) {\n                            <!-- Timeslots -->\n                            @for (timeslots of row; track timeslots; let i = $index) {\n                                <div 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                                    @for (slot of timeslots.slots; track slot.start; let j = $index) {\n                                        <div class=\"calendar-cell flex-grow-1\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n                                    }\n                                </div>\n                            }\n            \n                            <!-- Events -->\n                            @if (timeSlotDuration$ | async; as timeSlotDuration) {\n                                @if (timelinedEventPartsForThisWeek$ | async; as partData) {\n                                    @for (eventPart of partData.parts; track eventPart) {\n                                        <div 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                                                @if (eventPart.part.start === eventPart.part.event?.start) {\n                                                    <div class=\"event-resize top\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n                                                }\n                                                <div class=\"event-border\"></div>\n                                                @if (eventPart.part.event) {\n                                                    <div class=\"event-wrapper\"\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                                                }\n                                                @if (eventPart.part.end === eventPart.part.event?.end) {\n                                                    <div class=\"event-resize bottom\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                }\n                                @if (previewEventPartsForThisWeek$ | async; as previewPartData) {\n                                    @for (eventPart of previewPartData; track eventPart) {\n                                        <div 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                                    }\n                                }\n                            }\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n    }\n    @case (modes.timeline) {\n        <div class=\"d-flex flex-column-100 overflow-y-auto mb-0 bg-white timeline\">\n            <div class=\"calendar-head d-flex\">\n                <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n                    <span [innerHTML]=\"chevronLeft\" class=\"px-0\"></span>\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                    <span [innerHTML]=\"chevronRight\" class=\"px-0\"></span>\n                </button>\n            </div>\n            \n            <div class=\"calendar-body table-responsive overflow-x-auto\">\n                <table class=\"table mb-0\">\n                    @if (timeSlots$ | async; as timeSlots) {\n                        <tr>\n                            <td></td>\n                            @for (day of timeSlots; track day) {\n                                <td [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                            }\n                        </tr>\n                        <tr>\n                            <td></td>\n                            @if (timelineOptions$ | async; as timelineOptions) {\n                                @for (day of timeSlots; track day) {\n                                    @for (slot of day.slots; track slot) {\n                                        <td>\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                                    }\n                                }\n                            }\n                        </tr>\n                        @for (group of (resources$ | async); track group) {\n                            <bs-resource-group-presenter [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n                        }\n                    }\n                </table>\n            </div>\n        </div>\n    }\n}", 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}.tabel .calendar-head{flex:0 0 auto}.tabel .calendar-body{display:block;flex:1 1 auto}.week-schedule .calendar-head>div{padding-right:18px}.week-schedule .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule .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:#000;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;inset:0 5px 5px 0;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.tabel .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.tabel{flex-flow:column}.timeline .calendar-body .tabel{background-color:#f7f7f7}.timeline .calendar-body .tabel tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .tabel tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .tabel tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .tabel tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .tabel>:not(:first-child){border-top:none!important}\n"], dependencies: [{ kind: "component", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: ["level", "resourceGroup", "timeSlots", "isExpanded"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: BsSecondsTimespanPipe, name: "bsSecondsTimespan" }, { kind: "pipe", type: BsSecondsTodayOffsetPipe, name: "bsSecondsTodayOffset" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }] }); }
+        this.eventListeners = [];
+    }
+    // Public API methods (delegate to web component)
+    /**
+     * Navigate to next period
+     */
+    next() {
+        this.schedulerRef?.nativeElement?.next();
+    }
+    /**
+     * Navigate to previous period
+     */
+    prev() {
+        this.schedulerRef?.nativeElement?.prev();
+    }
+    /**
+     * Navigate to today
+     */
+    today() {
+        this.schedulerRef?.nativeElement?.today();
+    }
+    /**
+     * Navigate to a specific date
+     */
+    gotoDate(date) {
+        this.schedulerRef?.nativeElement?.gotoDate(date);
+    }
+    /**
+     * Change the current view
+     */
+    changeView(view) {
+        this.schedulerRef?.nativeElement?.changeView(view);
+    }
+    /**
+     * Add an event
+     */
+    addEvent(event) {
+        this.schedulerRef?.nativeElement?.addEvent(event);
+    }
+    /**
+     * Update an event
+     */
+    updateEvent(event) {
+        this.schedulerRef?.nativeElement?.updateEvent(event);
+    }
+    /**
+     * Remove an event
+     */
+    removeEvent(eventId) {
+        this.schedulerRef?.nativeElement?.removeEvent(eventId);
+    }
+    /**
+     * Get an event by ID
+     */
+    getEventById(eventId) {
+        return this.schedulerRef?.nativeElement?.getEventById(eventId) ?? null;
+    }
+    /**
+     * Refetch/refresh events
+     */
+    refetchEvents() {
+        this.schedulerRef?.nativeElement?.refetchEvents();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BsSchedulerComponent, isStandalone: true, selector: "bs-scheduler", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedEvent: { classPropertyName: "selectedEvent", publicName: "selectedEvent", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedEvent: "selectedEventChange", selectedRange: "selectedRangeChange", eventClick: "eventClick", eventDblClick: "eventDblClick", eventCreate: "eventCreate", eventUpdate: "eventUpdate", eventDelete: "eventDelete", dateClick: "dateClick", dateSelect: "dateSelect", viewChange: "viewChange" }, viewQueries: [{ propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, static: true }], ngImport: i0, template: `<mp-scheduler #scheduler></mp-scheduler>`, isInline: true, styles: [":host{display:block;height:100%}mp-scheduler{display:block;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-scheduler', standalone: false, template: "@switch (mode$ | async) {\n    @case (modes.week) {\n        <div class=\"d-flex flex-column w-100 overflow-y-auto mb-0 week-schedule\" [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)=\"onPreviousWeekOrMonth()\">\n                            <span [innerHTML]=\"chevronLeft\" class=\"px-0\"></span>\n                        </button>\n                        <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n                            <span [innerHTML]=\"chevronRight\" class=\"px-0\"></span>\n                        </button>\n                    </div>\n                    @for (day of (shownDays$ | async); track day) {\n                        <div class=\"flex-grow-1 calendar-head-cell\">\n                            <span class=\"d-block col-form-label text-center text-nowrap\">\n                                <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n                            </span>\n                        </div>\n                    }\n                </div>\n            </div>\n            <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n                @if (timeSlots$ | async; as row) {\n                    <div class=\"position-relative\">\n                        @if (weekOptions$ | async; as weekOptions) {\n                            <!-- Timeslots -->\n                            @for (timeslots of row; track timeslots; let i = $index) {\n                                <div 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                                    @for (slot of timeslots.slots; track slot.start; let j = $index) {\n                                        <div class=\"calendar-cell flex-grow-1\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n                                    }\n                                </div>\n                            }\n            \n                            <!-- Events -->\n                            @if (timeSlotDuration$ | async; as timeSlotDuration) {\n                                @if (timelinedEventPartsForThisWeek$ | async; as partData) {\n                                    @for (eventPart of partData.parts; track eventPart) {\n                                        <div 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                                                @if (eventPart.part.start === eventPart.part.event?.start) {\n                                                    <div class=\"event-resize top\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n                                                }\n                                                <div class=\"event-border\"></div>\n                                                @if (eventPart.part.event) {\n                                                    <div class=\"event-wrapper\"\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                                                }\n                                                @if (eventPart.part.end === eventPart.part.event?.end) {\n                                                    <div class=\"event-resize bottom\" (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                }\n                                @if (previewEventPartsForThisWeek$ | async; as previewPartData) {\n                                    @for (eventPart of previewPartData; track eventPart) {\n                                        <div 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                                    }\n                                }\n                            }\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n    }\n    @case (modes.timeline) {\n        <div class=\"d-flex flex-column-100 overflow-y-auto mb-0 bg-white timeline\">\n            <div class=\"calendar-head d-flex\">\n                <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n                    <span [innerHTML]=\"chevronLeft\" class=\"px-0\"></span>\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                    <span [innerHTML]=\"chevronRight\" class=\"px-0\"></span>\n                </button>\n            </div>\n            \n            <div class=\"calendar-body table-responsive overflow-x-auto\">\n                <table class=\"table mb-0\">\n                    @if (timeSlots$ | async; as timeSlots) {\n                        <tr>\n                            <td></td>\n                            @for (day of timeSlots; track day) {\n                                <td [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                            }\n                        </tr>\n                        <tr>\n                            <td></td>\n                            @if (timelineOptions$ | async; as timelineOptions) {\n                                @for (day of timeSlots; track day) {\n                                    @for (slot of day.slots; track slot) {\n                                        <td>\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                                    }\n                                }\n                            }\n                        </tr>\n                        @for (group of (resources$ | async); track group) {\n                            <bs-resource-group-presenter [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n                        }\n                    }\n                </table>\n            </div>\n        </div>\n    }\n}", 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}.tabel .calendar-head{flex:0 0 auto}.tabel .calendar-body{display:block;flex:1 1 auto}.week-schedule .calendar-head>div{padding-right:18px}.week-schedule .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule .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:#000;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;inset:0 5px 5px 0;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.tabel .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.tabel{flex-flow:column}.timeline .calendar-body .tabel{background-color:#f7f7f7}.timeline .calendar-body .tabel tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .tabel tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .tabel tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .tabel tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .tabel>:not(:first-child){border-top:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2.BsCalendarMonthService }, { type: BsTimelineService }, { type: i0.DestroyRef }], propDecorators: { timeSlotElements: [{
-                type: ViewChildren,
-                args: ['slot']
-            }], modeChange: [{
-                type: Output
-            }], 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']]
-            }], onMouseUp: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }] } });
-
-const availableScales = [
-    { time: 60, pixels: 60, markerSize: 900 }, // 60s / 60px     = 1 s/px    = 1  min / 60 px
-    { time: 120, pixels: 60, markerSize: 900 }, // 120s / 60px    = 2 s/px    = 2  min / 60 px
-    { time: 300, pixels: 60, markerSize: 900 }, // 180s / 60px    = 3 s/px    = 5  min / 60 px
-    { time: 900, pixels: 60, markerSize: 900 }, // 360s / 60px    = 6 s/px    = 15 min / 60 px
-    { time: 3600, pixels: 60, markerSize: 21600 }, // 600s / 60px    = 10 s/px   = 1    u / 60 px
-    { time: 7200, pixels: 60, markerSize: 21600 }, // 1200s / 60px   = 20 s/px
-    { time: 10800, pixels: 60, markerSize: 21600 }, // 1800s / 60px   = 30 s/px
-    { time: 21600, pixels: 60, markerSize: 21600 }, // 3600s / 60px   = 60 s/px
-    { time: 86400, pixels: 60, markerSize: 604800 }, // 6000s / 60px   = 100 s/px
-];
-
-class DateOffsetPipe {
-    transform(value) {
-        const today = new Date(value.start);
-        today.setHours(0);
-        today.setMinutes(0);
-        today.setSeconds(0);
-        return (value.start.getTime() - today.getTime()) / 1000;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateOffsetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DateOffsetPipe, isStandalone: false, name: "dateOffset" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateOffsetPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'dateOffset',
-                    standalone: false,
-                }]
-        }] });
+            args: [{ selector: 'bs-scheduler', standalone: true, template: `<mp-scheduler #scheduler></mp-scheduler>`, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [":host{display:block;height:100%}mp-scheduler{display:block;height:100%}\n"] }]
+        }], propDecorators: { schedulerRef: [{
+                type: ViewChild,
+                args: ['scheduler', { static: true }]
+            }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEvent", required: false }] }, { type: i0.Output, args: ["selectedEventChange"] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", required: false }] }, { type: i0.Output, args: ["selectedRangeChange"] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], eventDblClick: [{ type: i0.Output, args: ["eventDblClick"] }], eventCreate: [{ type: i0.Output, args: ["eventCreate"] }], eventUpdate: [{ type: i0.Output, args: ["eventUpdate"] }], eventDelete: [{ type: i0.Output, args: ["eventDelete"] }], dateClick: [{ type: i0.Output, args: ["dateClick"] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
 
 class BsSchedulerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerModule, declarations: [BsSchedulerComponent,
-            BsSecondsTimespanPipe,
-            BsSecondsTodayOffsetPipe,
-            DateOffsetPipe,
-            DayOfWeekPipe,
-            ResourceGroupPresenterComponent], imports: [CommonModule], exports: [BsSchedulerComponent,
-            ResourceGroupPresenterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerModule, imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerModule, imports: [BsSchedulerComponent], exports: [BsSchedulerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSchedulerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        BsSchedulerComponent,
-                        BsSecondsTimespanPipe,
-                        BsSecondsTodayOffsetPipe,
-                        DateOffsetPipe,
-                        DayOfWeekPipe,
-                        ResourceGroupPresenterComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [
-                        BsSchedulerComponent,
-                        ResourceGroupPresenterComponent
-                    ]
+                    imports: [BsSchedulerComponent],
+                    exports: [BsSchedulerComponent],
                 }]
         }] });
 
@@ -811,5 +237,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BsSchedulerComponent, BsSchedulerModule, ESchedulerMode, ResourceGroupPresenterComponent, availableScales };
+export { BsSchedulerComponent, BsSchedulerModule };
 //# sourceMappingURL=mintplayer-ng-bootstrap-scheduler.mjs.map