@breadstone/mosaik-elements-foundation 0.0.226 → 0.0.227

package/Controls/Components/Inputs/Scheduler/SchedulerElement.js

@@ -0,0 +1,1496 @@
+// #region Imports
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
+import { Emit } from '../../../../events/Decorators/EmitDecorator';
+import { calculateTimeHeight, calculateTimePosition, formatDateToIso, generateTimeSlots, generateVisibleDates, getDayKey, getStartOfWeek } from '../../../../Extensions/DateExtensions';
+import { TimeFormatter } from '../../../../Intl/Formatters/TimeFormatter';
+import { addIntlController } from '../../../../Intl/IntlController';
+import { Appearanceable } from '../../../Behaviors/Appearanceable';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Localeable } from '../../../Behaviors/Localeable';
+import { Sizeable } from '../../../Behaviors/Sizeable';
+import { Slottable } from '../../../Behaviors/Slottable';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { Variantable } from '../../../Behaviors/Variantable';
+import { addInheritanceProviderController } from '../../../Controllers/InheritanceProviderController';
+import { addSlotController } from '../../../Controllers/SlotController';
+import { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { Watch } from '../../../Decorators/WatchDecorator';
+import { AllDayVisibility } from '../../../Types/AllDayVisibility';
+import { DayOfWeek } from '../../../Types/DayOfWeek';
+import { SchedulerView } from '../../../Types/SchedulerView';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { ButtonElement } from '../../Buttons/Button/ButtonElement';
+import { ButtonGroupElement } from '../../Buttons/Button/ButtonGroupElement';
+import { ToolbarElement } from '../../Grouping/Toolbar/ToolbarElement';
+import { SchedulerElementIntl } from './Intl/SchedulerElementIntl';
+import { ISchedulerElementProps } from './ISchedulerElementProps';
+import { schedulerElementTemplate } from './SchedulerElementTemplate';
+import { SchedulerEventElement } from './SchedulerEventElement';
+import { SCHEDULER_INHERITANCE_CONTEXT } from './SchedulerInheritanceContext';
+import { SchedulerNowIndicatorElement } from './SchedulerNowIndicatorElement';
+import { SchedulerTimescaleElement } from './SchedulerTimescaleElement';
+import { SCHEDULER_VIEW_INHERITANCE_CONTEXT } from './SchedulerViewInheritanceContext';
+import { schedulerElementCosmopolitanStyle } from './Themes/SchedulerElement.Cosmopolitan';
+import { schedulerElementJoyStyle } from './Themes/SchedulerElement.Joy';
+import { schedulerElementMemphisStyle } from './Themes/SchedulerElement.Memphis';
+import { SchedulerAgendaViewElement } from './views/SchedulerAgendaViewElement';
+import { SchedulerMonthViewElement } from './views/SchedulerMonthViewElement';
+import { SchedulerTimeGridViewElement } from './views/SchedulerTimeGridViewElement';
+// #endregion
+/**
+ * Scheduler - A calendar-like time grid component with day and week views.
+ *
+ * @description
+ * The Scheduler component provides a calendar-like interface for displaying and managing
+ * time-based events. It supports day view (single column) and week view (multiple columns),
+ * with features like event positioning, overlap handling, selection, and a "now" indicator.
+ * The scheduler supports vertical scrolling with a fixed header row containing day headers.
+ * Uses a table-based layout for consistent row heights between the timescale and grid.
+ *
+ * @name Scheduler
+ * @element mosaik-scheduler
+ * @category Inputs
+ *
+ * @slot - Default slot for mosaik-scheduler-event elements
+ *
+ * @csspart container - The main scheduler container
+ * @csspart toolbar - The toolbar container
+ * @csspart header - The fixed header row
+ * @csspart header-table - The table containing day headers
+ * @csspart header-spacer - The spacer cell (aligned with timescale width)
+ * @csspart header-cell - Individual day header cells
+ * @csspart header-weekday - The weekday name in the header
+ * @csspart header-day - The day number in the header
+ * @csspart body - The scrollable body area
+ * @csspart timescale - The time labels on the left
+ * @csspart grid-wrapper - Container for grid and appointments overlay
+ * @csspart grid - The table containing time slot cells
+ * @csspart grid-row - A single row in the grid
+ * @csspart grid-cell - Individual grid cells
+ * @csspart appointments - Overlay container for positioned events
+ * @csspart appointment-column - Column container for events of a day
+ * @csspart event - Individual event items
+ *
+ * @cssprop {Color} --scheduler-background-color - Background color of the scheduler
+ * @cssprop {Color} --scheduler-border-color - Border color
+ * @cssprop {String} --scheduler-border-radius - Border radius
+ * @cssprop {String} --scheduler-border-style - Border style
+ * @cssprop {String} --scheduler-border-width - Border width
+ * @cssprop {Color} --scheduler-cell-border-color - Border color for time cells
+ * @cssprop {String} --scheduler-cell-border-radius - Border radius for time cells
+ * @cssprop {String} --scheduler-cell-border-style - Border style for time cells
+ * @cssprop {String} --scheduler-cell-border-width - Border width for time cells
+ * @cssprop {String} --scheduler-cell-height - Height of each time slot cell
+ * @cssprop {String} --scheduler-column-min-width - Minimum width of day columns
+ * @cssprop {String} --scheduler-event-padding-bottom - Bottom padding for events
+ * @cssprop {String} --scheduler-event-padding-left - Left padding for events
+ * @cssprop {String} --scheduler-event-padding-right - Right padding for events
+ * @cssprop {String} --scheduler-event-padding-top - Top padding for events
+ * @cssprop {String} --scheduler-font-family - Font family
+ * @cssprop {String} --scheduler-font-letter-spacing - Letter spacing
+ * @cssprop {String} --scheduler-font-line-height - Line height
+ * @cssprop {String} --scheduler-font-size - Font size
+ * @cssprop {String} --scheduler-font-text-decoration - Text decoration
+ * @cssprop {String} --scheduler-font-text-transform - Text transform
+ * @cssprop {String} --scheduler-font-weight - Font weight
+ * @cssprop {Color} --scheduler-foreground-color - Foreground/text color
+ * @cssprop {String} --scheduler-header-cell-padding-bottom - Bottom padding for header cells
+ * @cssprop {String} --scheduler-header-cell-padding-left - Left padding for header cells
+ * @cssprop {String} --scheduler-header-cell-padding-right - Right padding for header cells
+ * @cssprop {String} --scheduler-header-cell-padding-top - Top padding for header cells
+ * @cssprop {String} --scheduler-header-day-font-family - Font family for day numbers in header
+ * @cssprop {String} --scheduler-header-day-font-letter-spacing - Letter spacing for day numbers
+ * @cssprop {String} --scheduler-header-day-font-line-height - Line height for day numbers
+ * @cssprop {String} --scheduler-header-day-font-size - Font size for day numbers
+ * @cssprop {String} --scheduler-header-day-font-text-decoration - Text decoration for day numbers
+ * @cssprop {String} --scheduler-header-day-font-text-transform - Text transform for day numbers
+ * @cssprop {String} --scheduler-header-day-font-weight - Font weight for day numbers
+ * @cssprop {String} --scheduler-header-font-family - Font family for header
+ * @cssprop {String} --scheduler-header-font-letter-spacing - Letter spacing for header
+ * @cssprop {String} --scheduler-header-font-line-height - Line height for header
+ * @cssprop {String} --scheduler-header-font-size - Font size for header
+ * @cssprop {String} --scheduler-header-font-text-decoration - Text decoration for header
+ * @cssprop {String} --scheduler-header-font-text-transform - Text transform for header
+ * @cssprop {String} --scheduler-header-font-weight - Font weight for header
+ * @cssprop {String} --scheduler-header-weekday-font-family - Font family for weekday labels
+ * @cssprop {String} --scheduler-header-weekday-font-letter-spacing - Letter spacing for weekday labels
+ * @cssprop {String} --scheduler-header-weekday-font-line-height - Line height for weekday labels
+ * @cssprop {String} --scheduler-header-weekday-font-size - Font size for weekday labels
+ * @cssprop {String} --scheduler-header-weekday-font-text-decoration - Text decoration for weekday labels
+ * @cssprop {String} --scheduler-header-weekday-font-text-transform - Text transform for weekday labels
+ * @cssprop {String} --scheduler-header-weekday-font-weight - Font weight for weekday labels
+ * @cssprop {Color} --scheduler-hour-border-color - Border color for hour boundaries
+ * @cssprop {String} --scheduler-hour-border-radius - Border radius for hour boundaries
+ * @cssprop {String} --scheduler-hour-border-style - Border style for hour boundaries
+ * @cssprop {String} --scheduler-hour-border-width - Border width for hour boundaries
+ * @cssprop {String} --scheduler-timescale-width - Width of the timescale
+ * @cssprop {Color} --scheduler-today-background-color - Background color for today's column
+ * @cssprop {String} --scheduler-transition-duration - Duration for transitions
+ * @cssprop {String} --scheduler-transition-mode - Timing function for transitions
+ * @cssprop {Array<String>} --scheduler-transition-property - CSS properties to transition
+ *
+ * @dependency {SchedulerTimescaleElement} - Timescale component
+ * @dependency {SchedulerNowIndicatorElement} - Now indicator component
+ * @dependency {SchedulerEventElement} - Event definition component
+ * @dependency {ToolbarElement} - For the header toolbar
+ * @dependency {ButtonGroupElement} - For grouping navigation buttons
+ * @dependency {ButtonElement} - For individual buttons in the toolbar
+ *
+ * @fires schedulerBeforeEventActivate {SchedulerBeforeEventActivateEvent} - Before event activation (cancelable)
+ * @fires schedulerEventActivate {SchedulerEventActivateEvent} - After event activation
+ * @fires schedulerBeforeSelectRange {SchedulerBeforeSelectRangeEvent} - Before range selection (cancelable)
+ * @fires schedulerSelectRange {SchedulerSelectRangeEvent} - After range selection
+ * @fires schedulerRangeChange {SchedulerRangeChangeEvent} - When visible range changes
+ *
+ * @example
+ * Day view:
+ * ```html
+ * <mosaik-scheduler view="day" start-date="2026-02-13" hour-start="9" hour-end="18">
+ *   <mosaik-scheduler-event event-key="meeting" start="2026-02-13T10:00" end="2026-02-13T11:00" color="blue">
+ *     <div slot="title">Team Meeting</div>
+ *   </mosaik-scheduler-event>
+ * </mosaik-scheduler>
+ * ```
+ *
+ * @public
+ */
+let SchedulerElement = class SchedulerElement extends Themeable(Appearanceable(Variantable(Localeable(Sizeable(Slottable(Disableable(CustomElement))))))) {
+    // #region Fields
+    _intl;
+    _schedulerBeforeEventActivate;
+    _schedulerEventActivate;
+    _schedulerBeforeSelectRange;
+    _schedulerSelectRange;
+    _schedulerRangeChange;
+    _view;
+    _startDate;
+    _days;
+    _hourStart;
+    _hourEnd;
+    _stepMinutes;
+    _timezone;
+    _blackoutDates;
+    _specialDates;
+    _firstDayOfWeek;
+    _isTodayHighlighted;
+    _isWeekendHighlighted;
+    _showWeekNumbers;
+    _showAdjacent;
+    _daysAhead;
+    _visibleDates;
+    _collectedEvents;
+    _eventsByDay;
+    _allDayEventsByDay;
+    _allDayVisibility;
+    _mutationObserver;
+    _nowIndicatorIntervalId;
+    _weekdayFormat;
+    _dayFormat;
+    _timeFormat;
+    _monthDayFormat;
+    // #endregion
+    // #region Ctor
+    constructor() {
+        super();
+        this._intl = addIntlController(this, {
+            factory: () => new SchedulerElementIntl(this.locale)
+        });
+        addInheritanceProviderController(this, {
+            context: SCHEDULER_INHERITANCE_CONTEXT,
+            values: () => ({
+                disabled: this.disabled,
+                appearance: this.appearance,
+                variant: this.variant,
+                size: this.size,
+                locale: this.locale,
+                dir: this.dir,
+                themeName: this.themeName,
+                startDate: this.startDate,
+                firstDayOfWeek: this.firstDayOfWeek,
+                blackoutDates: this.blackoutDates,
+                specialDates: this.specialDates,
+                isTodayHighlighted: this.isTodayHighlighted,
+                isWeekendHighlighted: this.isWeekendHighlighted,
+                intl: this._intl.intl,
+                weekdayFormat: this.weekdayFormat,
+                dayFormat: this.dayFormat,
+                timeFormat: this.timeFormat,
+                monthDayFormat: this.monthDayFormat
+            })
+        });
+        addInheritanceProviderController(this, {
+            context: SCHEDULER_VIEW_INHERITANCE_CONTEXT,
+            values: () => ({
+                view: this.view
+            })
+        });
+        addSlotController(this);
+        this._view = ISchedulerElementProps.DEFAULTS.view;
+        this._startDate = ISchedulerElementProps.DEFAULTS.startDate;
+        this._days = ISchedulerElementProps.DEFAULTS.days;
+        this._hourStart = ISchedulerElementProps.DEFAULTS.hourStart;
+        this._hourEnd = ISchedulerElementProps.DEFAULTS.hourEnd;
+        this._stepMinutes = ISchedulerElementProps.DEFAULTS.stepMinutes;
+        this._timezone = ISchedulerElementProps.DEFAULTS.timezone;
+        this._blackoutDates = ISchedulerElementProps.DEFAULTS.blackoutDates;
+        this._specialDates = ISchedulerElementProps.DEFAULTS.specialDates;
+        this._firstDayOfWeek = ISchedulerElementProps.DEFAULTS.firstDayOfWeek;
+        this._isTodayHighlighted = ISchedulerElementProps.DEFAULTS.isTodayHighlighted;
+        this._isWeekendHighlighted = ISchedulerElementProps.DEFAULTS.isWeekendHighlighted;
+        this._showWeekNumbers = ISchedulerElementProps.DEFAULTS.showWeekNumbers;
+        this._showAdjacent = ISchedulerElementProps.DEFAULTS.showAdjacent;
+        this._daysAhead = ISchedulerElementProps.DEFAULTS.daysAhead;
+        this._allDayVisibility = ISchedulerElementProps.DEFAULTS.allDayVisibility;
+        this._visibleDates = [];
+        this._collectedEvents = [];
+        this._eventsByDay = new Map();
+        this._allDayEventsByDay = new Map();
+        this._schedulerBeforeEventActivate = new HTMLElementEventEmitter(this, 'schedulerBeforeEventActivate');
+        this._schedulerEventActivate = new HTMLElementEventEmitter(this, 'schedulerEventActivate');
+        this._schedulerBeforeSelectRange = new HTMLElementEventEmitter(this, 'schedulerBeforeSelectRange');
+        this._schedulerSelectRange = new HTMLElementEventEmitter(this, 'schedulerSelectRange');
+        this._schedulerRangeChange = new HTMLElementEventEmitter(this, 'schedulerRangeChange');
+        this._mutationObserver = null;
+        this._nowIndicatorIntervalId = null;
+        this._weekdayFormat = ISchedulerElementProps.DEFAULTS.weekdayFormat;
+        this._dayFormat = ISchedulerElementProps.DEFAULTS.dayFormat;
+        this._timeFormat = ISchedulerElementProps.DEFAULTS.timeFormat;
+        this._monthDayFormat = ISchedulerElementProps.DEFAULTS.monthDayFormat;
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `is` property.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is() {
+        return 'mosaik-scheduler';
+    }
+    /**
+     * Gets or sets the current view mode of the scheduler.
+     *
+     * @remarks
+     * Available views:
+     * - `timeGrid` - Time grid view with configurable day columns (default)
+     * - `month` - Month calendar view with event chips
+     * - `agenda` - Chronological list view of events
+     *
+     * @public
+     * @attr
+     */
+    get view() {
+        return this._view;
+    }
+    set view(value) {
+        if (this._view !== value) {
+            this._view = value;
+            this.requestUpdate('view');
+        }
+    }
+    /**
+     * Gets or sets the start date for the visible range.
+     * When null, defaults to today.
+     *
+     * @public
+     * @attr
+     */
+    get startDate() {
+        return this._startDate;
+    }
+    set startDate(value) {
+        if (this._startDate !== value) {
+            this._startDate = value;
+            this.requestUpdate('startDate');
+        }
+    }
+    /**
+     * Gets the effective start date, defaulting to today if startDate is null.
+     *
+     * @private
+     * @readonly
+     */
+    get effectiveStartDate() {
+        return this._startDate ?? new Date();
+    }
+    /**
+     * Gets or sets the number of days to display.
+     *
+     * @public
+     * @attr
+     */
+    get days() {
+        return this._days;
+    }
+    set days(value) {
+        if (this._days !== value) {
+            this._days = value;
+            this.requestUpdate('days');
+        }
+    }
+    /**
+     * Gets or sets the start hour of the time range.
+     *
+     * @public
+     * @attr
+     */
+    get hourStart() {
+        return this._hourStart;
+    }
+    set hourStart(value) {
+        if (this._hourStart !== value) {
+            this._hourStart = value;
+            this.requestUpdate('hourStart');
+        }
+    }
+    /**
+     * Gets or sets the end hour of the time range.
+     *
+     * @public
+     * @attr
+     */
+    get hourEnd() {
+        return this._hourEnd;
+    }
+    set hourEnd(value) {
+        if (this._hourEnd !== value) {
+            this._hourEnd = value;
+            this.requestUpdate('hourEnd');
+        }
+    }
+    /**
+     * Gets or sets the step interval in minutes.
+     *
+     * @public
+     * @attr
+     */
+    get stepMinutes() {
+        return this._stepMinutes;
+    }
+    set stepMinutes(value) {
+        if (this._stepMinutes !== value) {
+            this._stepMinutes = value;
+            this.requestUpdate('stepMinutes');
+        }
+    }
+    /**
+     * Gets or sets the timezone for calculations.
+     *
+     * @public
+     * @attr
+     */
+    get timezone() {
+        return this._timezone;
+    }
+    set timezone(value) {
+        if (this._timezone !== value) {
+            this._timezone = value;
+            this.requestUpdate('timezone');
+        }
+    }
+    /**
+     * Gets or sets the blackout dates that should be disabled.
+     *
+     * @public
+     */
+    get blackoutDates() {
+        return this._blackoutDates;
+    }
+    set blackoutDates(value) {
+        if (this._blackoutDates !== value) {
+            this._blackoutDates = value;
+            this.requestUpdate('blackoutDates');
+        }
+    }
+    /**
+     * Gets or sets the special dates that should be highlighted.
+     *
+     * @public
+     */
+    get specialDates() {
+        return this._specialDates;
+    }
+    set specialDates(value) {
+        if (this._specialDates !== value) {
+            this._specialDates = value;
+            this.requestUpdate('specialDates');
+        }
+    }
+    /**
+     * Gets or sets the first day of the week.
+     *
+     * @public
+     * @attr
+     */
+    get firstDayOfWeek() {
+        return this._firstDayOfWeek;
+    }
+    set firstDayOfWeek(value) {
+        if (this._firstDayOfWeek !== value) {
+            this._firstDayOfWeek = value;
+            this.requestUpdate('firstDayOfWeek');
+        }
+    }
+    /**
+     * Gets or sets whether today is highlighted.
+     *
+     * @public
+     * @attr
+     */
+    get isTodayHighlighted() {
+        return this._isTodayHighlighted;
+    }
+    set isTodayHighlighted(value) {
+        if (this._isTodayHighlighted !== value) {
+            this._isTodayHighlighted = value;
+            this.requestUpdate('isTodayHighlighted');
+        }
+    }
+    /**
+     * Gets or sets whether weekends are highlighted.
+     *
+     * @public
+     * @attr
+     */
+    get isWeekendHighlighted() {
+        return this._isWeekendHighlighted;
+    }
+    set isWeekendHighlighted(value) {
+        if (this._isWeekendHighlighted !== value) {
+            this._isWeekendHighlighted = value;
+            this.requestUpdate('isWeekendHighlighted');
+        }
+    }
+    /**
+     * Gets or sets the visibility mode for all-day events.
+     *
+     * @public
+     * @attr
+     */
+    get allDayVisibility() {
+        return this._allDayVisibility;
+    }
+    set allDayVisibility(value) {
+        if (this._allDayVisibility !== value) {
+            this._allDayVisibility = value;
+            this.requestUpdate('allDayVisibility');
+        }
+    }
+    /**
+     * Gets or sets whether to show week numbers in month view.
+     *
+     * @remarks
+     * Applies to: `month` view only.
+     *
+     * @public
+     * @attr
+     */
+    get showWeekNumbers() {
+        return this._showWeekNumbers;
+    }
+    set showWeekNumbers(value) {
+        if (this._showWeekNumbers !== value) {
+            this._showWeekNumbers = value;
+            this.requestUpdate('showWeekNumbers');
+        }
+    }
+    /**
+     * Gets or sets whether to show days from adjacent months in month view.
+     *
+     * @remarks
+     * Applies to: `month` view only.
+     *
+     * @public
+     * @attr
+     */
+    get showAdjacent() {
+        return this._showAdjacent;
+    }
+    set showAdjacent(value) {
+        if (this._showAdjacent !== value) {
+            this._showAdjacent = value;
+            this.requestUpdate('showAdjacent');
+        }
+    }
+    /**
+     * Gets or sets the number of days ahead to show in agenda view.
+     *
+     * @remarks
+     * Applies to: `agenda` view only.
+     *
+     * @public
+     * @attr
+     */
+    get daysAhead() {
+        return this._daysAhead;
+    }
+    set daysAhead(value) {
+        if (this._daysAhead !== value) {
+            this._daysAhead = value;
+            this.requestUpdate('daysAhead');
+        }
+    }
+    /**
+     * Gets or sets the format string for weekday headers.
+     *
+     * @remarks
+     * Supports: `d` (day number 1-7), `dd` (01-07), `ddd` (Mon), `dddd` (Monday).
+     * Default: `ddd`.
+     *
+     * @public
+     * @attr
+     */
+    get weekdayFormat() {
+        return this._weekdayFormat;
+    }
+    set weekdayFormat(value) {
+        if (this._weekdayFormat !== value) {
+            this._weekdayFormat = value;
+            this.requestUpdate('weekdayFormat');
+        }
+    }
+    /**
+     * Gets or sets the format string for day numbers.
+     *
+     * @remarks
+     * Supports: `d` (1-31), `dd` (01-31).
+     * Default: `d`.
+     *
+     * @public
+     * @attr
+     */
+    get dayFormat() {
+        return this._dayFormat;
+    }
+    set dayFormat(value) {
+        if (this._dayFormat !== value) {
+            this._dayFormat = value;
+            this.requestUpdate('dayFormat');
+        }
+    }
+    /**
+     * Gets or sets the format string for time display.
+     *
+     * @remarks
+     * Supports: `H` (0-23), `HH` (00-23), `h` (1-12), `hh` (01-12), `m` (0-59), `mm` (00-59), `tt` (AM/PM).
+     * Default: `HH:mm`.
+     *
+     * @public
+     * @attr
+     */
+    get timeFormat() {
+        return this._timeFormat;
+    }
+    set timeFormat(value) {
+        if (this._timeFormat !== value) {
+            this._timeFormat = value;
+            this.requestUpdate('timeFormat');
+        }
+    }
+    /**
+     * Gets or sets the format string for month-day display.
+     *
+     * @remarks
+     * Supports: `M` (1-12), `MM` (01-12), `MMM` (Jan), `MMMM` (January), `d` (1-31), `dd` (01-31).
+     * Default: `MMM d`.
+     *
+     * @public
+     * @attr
+     */
+    get monthDayFormat() {
+        return this._monthDayFormat;
+    }
+    set monthDayFormat(value) {
+        if (this._monthDayFormat !== value) {
+            this._monthDayFormat = value;
+            this.requestUpdate('monthDayFormat');
+        }
+    }
+    /**
+     * Gets the visible dates array.
+     *
+     * @public
+     * @readonly
+     */
+    get visibleDates() {
+        return this._visibleDates;
+    }
+    /**
+     * Gets the collected events.
+     *
+     * @public
+     * @readonly
+     */
+    get collectedEvents() {
+        return this._collectedEvents;
+    }
+    /**
+     * Gets the events organized by day.
+     *
+     * @public
+     * @readonly
+     */
+    get eventsByDay() {
+        return this._eventsByDay;
+    }
+    /**
+     * Gets the time slots for rendering the grid.
+     *
+     * @public
+     * @readonly
+     */
+    get timeSlots() {
+        return generateTimeSlots(this._hourStart, this._hourEnd, this._stepMinutes, this.locale, (date, locale) => TimeFormatter.format(date, this.timeFormat, locale));
+    }
+    /**
+     * Gets the internationalization helper.
+     *
+     * @public
+     * @readonly
+     */
+    get intl() {
+        return this._intl.intl;
+    }
+    /**
+     * Called before an event is activated (cancelable).
+     * Provides reference to `{@link ISchedulerBeforeEventActivateEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get schedulerBeforeEventActivate() {
+        return this._schedulerBeforeEventActivate;
+    }
+    /**
+     * Called after an event is activated.
+     * Provides reference to `{@link ISchedulerEventActivateEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get schedulerEventActivate() {
+        return this._schedulerEventActivate;
+    }
+    /**
+     * Called before a range is selected (cancelable).
+     * Provides reference to `{@link ISchedulerBeforeSelectRangeEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get schedulerBeforeSelectRange() {
+        return this._schedulerBeforeSelectRange;
+    }
+    /**
+     * Called after a range is selected.
+     * Provides reference to `{@link ISchedulerSelectRangeEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get schedulerSelectRange() {
+        return this._schedulerSelectRange;
+    }
+    /**
+     * Called when the visible date range changes.
+     * Provides reference to `{@link ISchedulerRangeChangeEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get schedulerRangeChange() {
+        return this._schedulerRangeChange;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateVisibleDates();
+        this.collectEvents();
+        this.positionEvents();
+        // Listen for event time changes from child scheduler-event elements
+        this.on('schedulerEventChange', () => {
+            this.collectEvents();
+            this.positionEvents();
+        });
+        // Use MutationObserver to detect child changes (since we use manual slot assignment)
+        this._mutationObserver = new MutationObserver(() => {
+            this.collectEvents();
+            this.positionEvents();
+        });
+        this._mutationObserver.observe(this, { childList: true });
+        this.startNowIndicatorSync();
+    }
+    /**
+     * @public
+     * @override
+     */
+    disconnectedCallback() {
+        this._mutationObserver?.disconnect();
+        this._mutationObserver = null;
+        this.stopNowIndicatorSync();
+        super.disconnectedCallback();
+    }
+    /**
+     * @protected
+     * @override
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.assignEventsToSlots();
+    }
+    /**
+     * Returns true when a date is configured as blackout date.
+     *
+     * @public
+     * @param date The date to check.
+     */
+    isBlackoutDate(date) {
+        const normalizedBlackoutDates = this._blackoutDates.length === 0
+            ? new Set()
+            : new Set(this._blackoutDates.map((date) => formatDateToIso(date)));
+        return normalizedBlackoutDates.has(getDayKey(date));
+    }
+    /**
+     * Returns true when a date is configured as special date.
+     *
+     * @public
+     * @param date The date to check.
+     */
+    isSpecialDate(date) {
+        const normalizedSpecialDates = this._specialDates.length === 0
+            ? new Set()
+            : new Set(this._specialDates.map((date) => formatDateToIso(date)));
+        return normalizedSpecialDates.has(getDayKey(date));
+    }
+    /**
+     * Returns true when the given date is weekend.
+     *
+     * @public
+     * @param date The date to check.
+     */
+    isWeekend(date) {
+        const dayOfWeek = date.getDay();
+        return dayOfWeek === 0 || dayOfWeek === 6;
+    }
+    /**
+     * Returns true when the given date is today.
+     *
+     * @public
+     * @param date The date to check.
+     */
+    isToday(date) {
+        return getDayKey(date) === formatDateToIso(new Date());
+    }
+    /**
+     * Handles default slot changes to update events.
+     *
+     * @private
+     */
+    onDefaultSlotChange(_event) {
+        this.collectEvents();
+        this.positionEvents();
+    }
+    /**
+     * Gets events for a specific day.
+     *
+     * @public
+     * @param dayKey - The day key (YYYY-MM-DD).
+     * @returns Array of positioned events for that day.
+     */
+    getEventsForDay(dayKey) {
+        return this._eventsByDay.get(dayKey) ?? [];
+    }
+    /**
+     * Gets all-day events for a specific day.
+     *
+     * @public
+     * @param dayKey - The day key (YYYY-MM-DD).
+     * @returns Array of all-day events for that day.
+     */
+    getAllDayEventsForDay(dayKey) {
+        return this._allDayEventsByDay.get(dayKey) ?? [];
+    }
+    /**
+     * Gets all all-day events across all visible days.
+     *
+     * @public
+     * @returns Array of all all-day events.
+     */
+    getAllDayEvents() {
+        const events = [];
+        for (const dayEvents of this._allDayEventsByDay.values()) {
+            events.push(...dayEvents);
+        }
+        return events;
+    }
+    /**
+     * Returns whether there are any all-day events.
+     *
+     * @public
+     * @readonly
+     */
+    get hasAllDayEvents() {
+        return this._allDayEventsByDay.size > 0;
+    }
+    /**
+     * Calculates the now indicator top position as percentage.
+     *
+     * @public
+     * @returns The top position percentage (0-100), or -1 if outside visible range.
+     */
+    getNowIndicatorTop() {
+        const now = new Date();
+        const currentHour = now.getHours() + now.getMinutes() / 60;
+        // Check if current time is within visible range
+        if (currentHour < this._hourStart || currentHour > this._hourEnd) {
+            return -1;
+        }
+        return calculateTimePosition(now, this._hourStart, this._hourEnd);
+    }
+    /**
+     * Activates an event programmatically.
+     *
+     * @public
+     * @param eventKey - The event key to activate.
+     * @param trigger - The activation trigger.
+     * @returns True if activation succeeded.
+     */
+    activateEvent(eventKey, trigger = 'click') {
+        const beforeDetail = {
+            eventKey,
+            trigger,
+            cancel: false
+        };
+        this._schedulerBeforeEventActivate.emit(beforeDetail);
+        if (beforeDetail.cancel) {
+            return false;
+        }
+        this._schedulerEventActivate.emit({
+            eventKey,
+            trigger
+        });
+        return true;
+    }
+    /**
+     * Navigates to a specific date.
+     *
+     * @public
+     * @param date - The date to navigate to.
+     */
+    navigateToDate(date) {
+        this.startDate = date;
+    }
+    /**
+     * Navigates to today.
+     *
+     * @public
+     */
+    navigateToday() {
+        this.startDate = new Date();
+    }
+    /**
+     * Navigates to the previous period.
+     *
+     * @public
+     */
+    navigatePrevious() {
+        const currentStart = new Date(this.effectiveStartDate);
+        currentStart.setDate(currentStart.getDate() - this._days);
+        this.startDate = currentStart;
+    }
+    /**
+     * Navigates to the next period.
+     *
+     * @public
+     */
+    navigateNext() {
+        const currentStart = new Date(this.effectiveStartDate);
+        currentStart.setDate(currentStart.getDate() + this._days);
+        this.startDate = currentStart;
+    }
+    /**
+     * Handles click on an event renderer.
+     *
+     * @internal
+     */
+    onEventClick(eventKey) {
+        this.activateEvent(eventKey, 'click');
+    }
+    /**
+     * Handles click on a grid cell to create a new event.
+     *
+     * @param date - The date of the cell.
+     * @param time - The time slot string (e.g., "09:00").
+     * @internal
+     */
+    onGridCellClick(date, time) {
+        const [hours, minutes] = time.split(':').map(Number);
+        const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes);
+        const end = new Date(start.getTime() + this._stepMinutes * 60 * 1000);
+        const dayKey = formatDateToIso(date);
+        this.emitSelectRange(start, end, dayKey, false);
+    }
+    /**
+     * Handles click on an all-day cell to create a new all-day event.
+     *
+     * @param date - The date of the cell.
+     * @internal
+     */
+    onAllDayCellClick(date) {
+        const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
+        const end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
+        const dayKey = formatDateToIso(date);
+        this.emitSelectRange(start, end, dayKey, true);
+    }
+    /**
+     * Handles keyboard activation of an event.
+     *
+     * @internal
+     */
+    onEventKeydown(event, eventKey) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.activateEvent(eventKey, 'keyboard');
+        }
+    }
+    onStartDateChanged() {
+        this.updateVisibleDates();
+        this.collectEvents();
+        this.positionEvents();
+        this.emitRangeChange();
+    }
+    onDaysChanged() {
+        this.updateVisibleDates();
+        this.collectEvents();
+        this.positionEvents();
+        this.emitRangeChange();
+    }
+    onHourStartChanged() {
+        this.positionEvents();
+    }
+    onHourEndChanged() {
+        this.positionEvents();
+    }
+    onStepMinutesChanged() {
+        this.positionEvents();
+    }
+    onFirstDayOfWeekChanged() {
+        this.updateVisibleDates();
+        this.collectEvents();
+        this.positionEvents();
+        this.emitRangeChange();
+    }
+    onLocaleChanged() {
+        this._intl.setLocale(this.locale);
+    }
+    onSizeChanged() {
+        this.positionEvents();
+    }
+    updateVisibleDates() {
+        let alignedStartDate = this.effectiveStartDate;
+        // Align to start of week when showing multiple days (week view or multi-day view)
+        if (this._days > 1) {
+            alignedStartDate = getStartOfWeek(this.effectiveStartDate, this._firstDayOfWeek);
+        }
+        this._visibleDates = generateVisibleDates(alignedStartDate, this._days);
+        this.requestUpdate('visibleDates');
+    }
+    /**
+     * Collects events from the Light DOM and parses their data.
+     * This method only reads the DOM and stores raw event data.
+     *
+     * @private
+     */
+    collectEvents() {
+        const eventElements = Array.from(this.querySelectorAll(':scope > mosaik-scheduler-event'));
+        this._collectedEvents = [];
+        for (const eventEl of eventElements) {
+            const rawStart = eventEl.start;
+            const rawEnd = eventEl.end;
+            if (!rawStart || !rawEnd) {
+                continue;
+            }
+            // Ensure we always have Date objects (properties might be strings from attribute binding)
+            const startTime = rawStart instanceof Date ? rawStart : new Date(rawStart);
+            const endTime = rawEnd instanceof Date ? rawEnd : new Date(rawEnd);
+            // Skip invalid dates
+            if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
+                continue;
+            }
+            this._collectedEvents.push({
+                eventKey: eventEl.eventKey,
+                startTime,
+                endTime,
+                allDay: eventEl.allDay,
+                element: eventEl
+            });
+        }
+    }
+    /**
+     * Calculates positions for all collected events.
+     * This method uses the previously collected events and calculates
+     * their visual positions based on the current hour range and visible dates.
+     *
+     * @private
+     */
+    positionEvents() {
+        // Separate all-day events and timed events
+        const timedEvents = this._collectedEvents.filter(e => !e.allDay);
+        const allDayEvents = this._collectedEvents.filter(e => e.allDay);
+        // Group timed events by day
+        const eventsByDay = new Map();
+        for (const event of timedEvents) {
+            const dayKey = getDayKey(event.startTime);
+            if (!eventsByDay.has(dayKey)) {
+                eventsByDay.set(dayKey, []);
+            }
+            eventsByDay.get(dayKey).push({
+                eventKey: event.eventKey,
+                startTime: event.startTime,
+                endTime: event.endTime,
+                element: event.element
+            });
+        }
+        // Calculate positions for timed events
+        this._eventsByDay = new Map();
+        for (const [dayKey, events] of eventsByDay) {
+            const positioned = this.calculateEventLanes(events, this._hourStart, this._hourEnd, this._stepMinutes);
+            this._eventsByDay.set(dayKey, positioned);
+        }
+        // Process all-day events
+        this._allDayEventsByDay = new Map();
+        // Get the visible date range boundaries
+        const visibleStart = this._visibleDates[0];
+        const visibleEnd = this._visibleDates[this._visibleDates.length - 1];
+        for (const event of allDayEvents) {
+            // Normalize dates to midnight
+            const eventStart = new Date(event.startTime.getFullYear(), event.startTime.getMonth(), event.startTime.getDate());
+            const eventEnd = new Date(event.endTime.getFullYear(), event.endTime.getMonth(), event.endTime.getDate());
+            const visibleStartNorm = new Date(visibleStart.getFullYear(), visibleStart.getMonth(), visibleStart.getDate());
+            const visibleEndNorm = new Date(visibleEnd.getFullYear(), visibleEnd.getMonth(), visibleEnd.getDate());
+            // Skip events that are completely outside the visible range
+            if (eventEnd < visibleStartNorm || eventStart > visibleEndNorm) {
+                continue;
+            }
+            // Determine overflow flags
+            const overflowsStart = eventStart < visibleStartNorm;
+            const overflowsEnd = eventEnd > visibleEndNorm;
+            // Calculate the effective start within visible range
+            const effectiveStart = eventStart < visibleStartNorm ? visibleStartNorm : eventStart;
+            // Calculate the effective end within visible range
+            const effectiveEnd = eventEnd > visibleEndNorm ? visibleEndNorm : eventEnd;
+            // Find the day index for the effective start
+            const dayIndex = this._visibleDates.findIndex(d => {
+                const dNorm = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+                return dNorm.getTime() === effectiveStart.getTime();
+            });
+            // Calculate span days within visible range
+            const spanDays = Math.max(1, Math.ceil((effectiveEnd.getTime() - effectiveStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
+            // Use an artificial key based on visible position (not original start date)
+            const dayKey = getDayKey(effectiveStart);
+            if (!this._allDayEventsByDay.has(dayKey)) {
+                this._allDayEventsByDay.set(dayKey, []);
+            }
+            this._allDayEventsByDay.get(dayKey).push({
+                eventKey: event.eventKey,
+                startDate: event.startTime,
+                endDate: event.endTime,
+                spanDays: Math.min(spanDays, this._days - dayIndex),
+                dayIndex,
+                element: event.element,
+                overflowStart: overflowsStart,
+                overflowEnd: overflowsEnd
+            });
+        }
+        this.requestUpdate('eventsByDay');
+    }
+    /**
+     * @private
+     */
+    assignEventsToSlots() {
+        // Assign timed events
+        for (const [_dayKey, events] of this._eventsByDay) {
+            for (const event of events) {
+                const slot = this.shadowRoot?.querySelector(`slot[name="event-${event.eventKey}"]`);
+                if (slot && event.element) {
+                    slot.assign(event.element);
+                }
+            }
+        }
+        // Assign all-day events
+        for (const [_dayKey, events] of this._allDayEventsByDay) {
+            for (const event of events) {
+                const slot = this.shadowRoot?.querySelector(`slot[name="allday-${event.eventKey}"]`);
+                if (slot && event.element) {
+                    slot.assign(event.element);
+                }
+            }
+        }
+    }
+    emitRangeChange() {
+        this._schedulerRangeChange.emit({
+            startDate: this.effectiveStartDate,
+            days: this._days
+        });
+    }
+    emitSelectRange(start, end, dayKey, isAllDay) {
+        const beforeDetail = {
+            start,
+            end,
+            dayKey,
+            isAllDay,
+            cancel: false
+        };
+        this._schedulerBeforeSelectRange.emit(beforeDetail);
+        if (!beforeDetail.cancel) {
+            this._schedulerSelectRange.emit({
+                start,
+                end,
+                dayKey,
+                isAllDay
+            });
+        }
+    }
+    startNowIndicatorSync() {
+        this.stopNowIndicatorSync();
+        this._nowIndicatorIntervalId = window.setInterval(() => {
+            this.requestUpdate();
+        }, 30_000);
+    }
+    stopNowIndicatorSync() {
+        if (this._nowIndicatorIntervalId !== null) {
+            clearInterval(this._nowIndicatorIntervalId);
+            this._nowIndicatorIntervalId = null;
+        }
+    }
+    /**
+     * Calculates lane positions for overlapping events.
+     *
+     * @private
+     * @param events - Array of events with start/end times.
+     * @param hourStart - The visible start hour.
+     * @param hourEnd - The visible end hour.
+     * @param stepMinutes - The step interval in minutes (used for minimum height calculation).
+     * @returns Array of positioned events with lane information.
+     */
+    calculateEventLanes(events, hourStart, hourEnd, stepMinutes = 30) {
+        if (events.length === 0) {
+            return [];
+        }
+        // Calculate minimum height percentage (at least one step)
+        const totalMinutes = (hourEnd - hourStart) * 60;
+        const minHeightPercent = (stepMinutes / totalMinutes) * 100;
+        // Convert events to time ranges (in minutes from day start)
+        const ranges = events.map((e) => ({
+            eventKey: e.eventKey,
+            start: e.startTime.getHours() * 60 + e.startTime.getMinutes(),
+            end: e.endTime.getHours() * 60 + e.endTime.getMinutes(),
+            element: e.element,
+            originalEvent: {
+                startTime: e.startTime,
+                endTime: e.endTime
+            }
+        }));
+        // Sort by start time, then by duration (longer first)
+        ranges.sort((a, b) => {
+            if (a.start !== b.start) {
+                return a.start - b.start;
+            }
+            return (b.end - b.start) - (a.end - a.start);
+        });
+        // Find overlapping groups
+        const groups = [];
+        let currentGroup = [];
+        let groupEnd = 0;
+        for (const range of ranges) {
+            if (currentGroup.length === 0 || range.start < groupEnd) {
+                currentGroup.push(range);
+                groupEnd = Math.max(groupEnd, range.end);
+            }
+            else {
+                groups.push(currentGroup);
+                currentGroup = [range];
+                groupEnd = range.end;
+            }
+        }
+        if (currentGroup.length > 0) {
+            groups.push(currentGroup);
+        }
+        // Assign lanes within each group
+        const positioned = [];
+        for (const group of groups) {
+            const lanes = [];
+            for (const range of group) {
+                let assigned = false;
+                for (let laneIndex = 0; laneIndex < lanes.length; laneIndex++) {
+                    const lane = lanes[laneIndex];
+                    const lastInLane = lane[lane.length - 1];
+                    if (range.start >= lastInLane.end) {
+                        lane.push(range);
+                        assigned = true;
+                        break;
+                    }
+                }
+                if (!assigned) {
+                    lanes.push([range]);
+                }
+            }
+            const totalLanes = lanes.length;
+            const laneWidth = 100 / totalLanes;
+            for (let laneIndex = 0; laneIndex < lanes.length; laneIndex++) {
+                for (const range of lanes[laneIndex]) {
+                    const top = calculateTimePosition(range.originalEvent.startTime, hourStart, hourEnd);
+                    const rawHeight = calculateTimeHeight(range.originalEvent.startTime, range.originalEvent.endTime, hourStart, hourEnd);
+                    const height = Math.max(rawHeight, minHeightPercent);
+                    positioned.push({
+                        eventKey: range.eventKey,
+                        top,
+                        height,
+                        left: laneIndex * laneWidth,
+                        width: laneWidth,
+                        startTime: range.originalEvent.startTime,
+                        endTime: range.originalEvent.endTime,
+                        element: range.element
+                    });
+                }
+            }
+        }
+        return positioned;
+    }
+};
+__decorate([
+    Attribute({ type: SchedulerView }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SchedulerElement.prototype, "view", null);
+__decorate([
+    Attribute({
+        type: Date,
+        converter: {
+            fromAttribute: (value) => value ? new Date(value) : null,
+            toAttribute: (value) => value ? value.toISOString().split('T')[0] : ''
+        }
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], SchedulerElement.prototype, "startDate", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SchedulerElement.prototype, "days", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SchedulerElement.prototype, "hourStart", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SchedulerElement.prototype, "hourEnd", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SchedulerElement.prototype, "stepMinutes", null);
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SchedulerElement.prototype, "timezone", null);
+__decorate([
+    Property({ type: Array }),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], SchedulerElement.prototype, "blackoutDates", null);
+__decorate([
+    Property({ type: Array }),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], SchedulerElement.prototype, "specialDates", null);
+__decorate([
+    Attribute({ type: DayOfWeek }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SchedulerElement.prototype, "firstDayOfWeek", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SchedulerElement.prototype, "isTodayHighlighted", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SchedulerElement.prototype, "isWeekendHighlighted", null);
+__decorate([
+    Attribute({ type: AllDayVisibility }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SchedulerElement.prototype, "allDayVisibility", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SchedulerElement.prototype, "showWeekNumbers", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SchedulerElement.prototype, "showAdjacent", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SchedulerElement.prototype, "daysAhead", null);
+__decorate([
+    Attribute({ type: String, useDefault: true }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SchedulerElement.prototype, "weekdayFormat", null);
+__decorate([
+    Attribute({ type: String, useDefault: true }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SchedulerElement.prototype, "dayFormat", null);
+__decorate([
+    Attribute({ type: String, useDefault: true }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SchedulerElement.prototype, "timeFormat", null);
+__decorate([
+    Attribute({ type: String, useDefault: true }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SchedulerElement.prototype, "monthDayFormat", null);
+__decorate([
+    Emit({ eventName: 'schedulerBeforeEventActivate' }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SchedulerElement.prototype, "schedulerBeforeEventActivate", null);
+__decorate([
+    Emit({ eventName: 'schedulerEventActivate' }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SchedulerElement.prototype, "schedulerEventActivate", null);
+__decorate([
+    Emit({ eventName: 'schedulerBeforeSelectRange' }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SchedulerElement.prototype, "schedulerBeforeSelectRange", null);
+__decorate([
+    Emit({ eventName: 'schedulerSelectRange' }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SchedulerElement.prototype, "schedulerSelectRange", null);
+__decorate([
+    Emit({ eventName: 'schedulerRangeChange' }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SchedulerElement.prototype, "schedulerRangeChange", null);
+__decorate([
+    Watch('startDate'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onStartDateChanged", null);
+__decorate([
+    Watch('days'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onDaysChanged", null);
+__decorate([
+    Watch('hourStart'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onHourStartChanged", null);
+__decorate([
+    Watch('hourEnd'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onHourEndChanged", null);
+__decorate([
+    Watch('stepMinutes'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onStepMinutesChanged", null);
+__decorate([
+    Watch('firstDayOfWeek'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onFirstDayOfWeekChanged", null);
+__decorate([
+    Watch('locale'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onLocaleChanged", null);
+__decorate([
+    Watch('size'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SchedulerElement.prototype, "onSizeChanged", null);
+SchedulerElement = __decorate([
+    Component({
+        selector: 'mosaik-scheduler',
+        template: schedulerElementTemplate,
+        themes: {
+            joy: schedulerElementJoyStyle,
+            cosmopolitan: schedulerElementCosmopolitanStyle,
+            memphis: schedulerElementMemphisStyle
+        },
+        options: {
+            mode: 'open',
+            delegatesFocus: true,
+            slotAssignment: 'manual'
+        },
+        imports: [
+            SchedulerTimescaleElement,
+            SchedulerNowIndicatorElement,
+            SchedulerEventElement,
+            ToolbarElement,
+            ButtonGroupElement,
+            ButtonElement,
+            SchedulerTimeGridViewElement,
+            SchedulerMonthViewElement,
+            SchedulerAgendaViewElement
+        ],
+        host: {
+            'attr.role': 'grid',
+            'attr.aria-label': 'Scheduler'
+        }
+    }),
+    __metadata("design:paramtypes", [])
+], SchedulerElement);
+export { SchedulerElement };
+//# sourceMappingURL=SchedulerElement.js.map