// #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);
};
var SchedulerEventElement_1;
import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
import { Emit } from '../../../../events/Decorators/EmitDecorator';
import { EID } from '../../../../Utilities/EId';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Boundable } from '../../../Behaviors/Boundable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Focusable } from '../../../Behaviors/Focusable';
import { Slottable } from '../../../Behaviors/Slottable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { addInheritanceConsumerController } from '../../../Controllers/InheritanceConsumerController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { SchedulerView } from '../../../Types/SchedulerView';
import { CustomElement } from '../../Abstracts/CustomElement';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { PopupElement } from '../../Primitives/Popup/PopupElement';
import { ISchedulerElementProps } from './ISchedulerElementProps';
import { ISchedulerEventElementProps } from './ISchedulerEventElementProps';
import { schedulerEventElementTemplate } from './SchedulerEventElementTemplate';
import { SCHEDULER_VIEW_INHERITANCE_CONTEXT } from './SchedulerViewInheritanceContext';
import { schedulerEventElementCosmopolitanStyle } from './Themes/SchedulerEventElement.Cosmopolitan';
import { schedulerEventElementJoyStyle } from './Themes/SchedulerEventElement.Joy';
import { schedulerEventElementMemphisStyle } from './Themes/SchedulerEventElement.Memphis';
// #endregion
/**
 * SchedulerEvent - A public event definition element for the Scheduler.
 *
 * @description
 * The SchedulerEvent component represents an event in the scheduler. It serves as
 * a data host that the parent Scheduler reads to position and render events in the grid.
 * The element's slots provide content for the rendered event box.
 * The `layout` property controls which slots are rendered and how the event is styled,
 * allowing the same element to adapt to different scheduler views.
 *
 * @name SchedulerEvent
 * @element mosaik-scheduler-event
 * @category Inputs
 *
 * @slot title - The title content of the event (all layouts)
 * @slot content - The content of the event (timeGrid and agenda layouts)
 * @slot footer - Footer content (timeGrid layout only)
 *
 * @csspart container - The main container element
 * @csspart layout-time-grid - Applied when layout="timeGrid"
 * @csspart layout-month - Applied when layout="month"
 * @csspart layout-agenda - Applied when layout="agenda"
 * @csspart focusRing - The focus indicator ring
 * @csspart ripple - The ripple effect container
 * @csspart content - The content wrapper
 * @csspart title - The title slot container
 * @csspart subtitle - The content/subtitle slot container
 * @csspart footer - The footer slot container (timeGrid only)
 * @csspart popup - The popup element (timeGrid only)
 *
 * @cssprop {String} --scheduler-event-agenda-gap - Gap between elements in agenda layout
 * @cssprop {String} --scheduler-event-agenda-min-height - Minimum height in agenda layout
 * @cssprop {String} --scheduler-event-agenda-padding - Padding in agenda layout
 * @cssprop {Color} --scheduler-event-all-day-background-color - Background color for all-day events
 * @cssprop {Color} --scheduler-event-all-day-foreground-color - Foreground color for all-day events
 * @cssprop {Color} --scheduler-event-background-color - Default background color
 * @cssprop {Color} --scheduler-event-border-color - Border color
 * @cssprop {String} --scheduler-event-border-radius - Border radius
 * @cssprop {String} --scheduler-event-border-style - Border style
 * @cssprop {String} --scheduler-event-border-width - Border width
 * @cssprop {String} --scheduler-event-box-shadow - Box shadow
 * @cssprop {Color} --scheduler-event-focus-ring-color - Color of the focus ring
 * @cssprop {String} --scheduler-event-font-family - Font family
 * @cssprop {String} --scheduler-event-font-line-height - Line height
 * @cssprop {String} --scheduler-event-font-size - Font size
 * @cssprop {String} --scheduler-event-font-weight - Font weight
 * @cssprop {Color} --scheduler-event-foreground-color - Foreground/text color
 * @cssprop {Color} --scheduler-event-hover-background-color - Background color on hover
 * @cssprop {String} --scheduler-event-month-border-radius - Border radius in month layout
 * @cssprop {String} --scheduler-event-month-font-size - Font size in month layout
 * @cssprop {String} --scheduler-event-month-gap - Gap between elements in month layout
 * @cssprop {String} --scheduler-event-month-line-height - Line height in month layout
 * @cssprop {String} --scheduler-event-month-min-height - Minimum height in month layout
 * @cssprop {String} --scheduler-event-month-padding - Padding in month layout
 * @cssprop {String} --scheduler-event-padding - Default padding
 * @cssprop {String} --scheduler-event-shadow-blur - Shadow blur radius
 * @cssprop {Color} --scheduler-event-shadow-color - Shadow color
 * @cssprop {String} --scheduler-event-shadow-offset-x - Shadow horizontal offset
 * @cssprop {String} --scheduler-event-shadow-offset-y - Shadow vertical offset
 * @cssprop {String} --scheduler-event-shadow-spread - Shadow spread radius
 * @cssprop {String} --scheduler-event-transition-duration - Transition duration
 * @cssprop {String} --scheduler-event-transition-mode - Transition timing function
 * @cssprop {String} --scheduler-event-transition-property - CSS properties to transition
 *
 * @dependency {FocusRingElement} - Keyboard focus indicator component
 * @dependency {RippleElement} - Click/tap ripple effect component
 * @dependency {PopupElement} - Popup component for displaying additional information on hover/focus
 *
 * @example
 * Basic event definition:
 * ```html
 * <mosaik-scheduler>
 *   <mosaik-scheduler-event event-key="meeting-1" start="2026-02-13T10:00" end="2026-02-13T11:00">
 *     <mosaik-text slot="title" text="Team Meeting" wrap></mosaik-text>
 *     <mosaik-text slot="content" text="Discuss project progress" wrap></mosaik-text>
 *     <mosaik-text slot="footer" text="Microsoft Teams" wrap></mosaik-text>
 *   </mosaik-scheduler-event>
 * </mosaik-scheduler>
 * ```
 *
 * @public
 */
let SchedulerEventElement = SchedulerEventElement_1 = class SchedulerEventElement extends Themeable(Slottable(Focusable(Disableable(Variantable(Valueable(Appearanceable(Boundable(CustomElement)))))))) {
    // #region Fields
    _inheritance = addInheritanceConsumerController(this, {
        context: SCHEDULER_VIEW_INHERITANCE_CONTEXT
    });
    _schedulerEventChange;
    _eventKey;
    _start;
    _end;
    _allDay;
    _status;
    _keyGenerated;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._eventKey = ISchedulerEventElementProps.DEFAULTS.eventKey;
        this._start = ISchedulerEventElementProps.DEFAULTS.start;
        this._end = ISchedulerEventElementProps.DEFAULTS.end;
        this._allDay = ISchedulerEventElementProps.DEFAULTS.allDay;
        this._status = ISchedulerEventElementProps.DEFAULTS.status;
        this._schedulerEventChange = new HTMLElementEventEmitter(this, 'schedulerEventChange');
        this._keyGenerated = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-scheduler-event';
    }
    /**
     * Gets or sets the unique key for the event.
     * If not provided, a key will be generated on connect.
     *
     * @public
     * @attr
     */
    get eventKey() {
        return this._eventKey;
    }
    set eventKey(value) {
        if (this._eventKey !== value) {
            this._eventKey = value;
            this.requestUpdate('eventKey');
        }
    }
    /**
     * Gets or sets whether this is an all-day event.
     *
     * @public
     * @attr
     */
    get allDay() {
        return this._allDay;
    }
    set allDay(value) {
        if (this._allDay !== value) {
            this._allDay = value;
            this.requestUpdate('allDay');
        }
    }
    /**
     * Gets or sets the status of the event.
     *
     * @public
     * @attr
     */
    get status() {
        return this._status;
    }
    set status(value) {
        if (this._status !== value) {
            this._status = value;
            this.requestUpdate('status');
        }
    }
    /**
     * Gets the layout mode for rendering the event.
     * This value is inherited from the parent scheduler view.
     *
     * - `timeGrid` - Vertical card layout with title, content, footer (default)
     * - `month` - Compact chip layout with time and title only
     * - `agenda` - Horizontal row layout for list views
     *
     * @public
     * @attr
     * @readonly
     */
    get view() {
        return this._inheritance.get('view', ISchedulerElementProps.DEFAULTS.view);
    }
    /**
     * Called when the event data changes (start, end).
     * Provides reference to `{@link ISchedulerEventChangeEventDetail}` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get schedulerEventChange() {
        return this._schedulerEventChange;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        // Generate a stable key if not provided
        if (!this._eventKey && !this._keyGenerated) {
            this._eventKey = EID.next(SchedulerEventElement_1.is);
            this._keyGenerated = true;
            this.requestUpdate('eventKey');
        }
    }
    /**
     * Handles changes to the start property and notifies the parent scheduler.
     *
     * @protected
     */
    onStartChanged(prev, next) {
        this._schedulerEventChange.emit({
            eventKey: this._eventKey,
            property: 'start',
            previousValue: prev ?? this._start,
            newValue: next ?? this._start
        });
    }
    /**
     * Handles changes to the end property and notifies the parent scheduler.
     *
     * @protected
     */
    onEndChanged(prev, next) {
        this._schedulerEventChange.emit({
            eventKey: this._eventKey,
            property: 'end',
            previousValue: prev ?? this._end,
            newValue: next ?? this._end
        });
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SchedulerEventElement.prototype, "eventKey", null);
__decorate([
    Attribute({ type: Boolean, useDefault: true }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SchedulerEventElement.prototype, "allDay", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SchedulerEventElement.prototype, "status", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [])
], SchedulerEventElement.prototype, "view", null);
__decorate([
    Emit({ eventName: 'schedulerEventChange' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], SchedulerEventElement.prototype, "schedulerEventChange", null);
__decorate([
    Watch('start'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Date, Date]),
    __metadata("design:returntype", void 0)
], SchedulerEventElement.prototype, "onStartChanged", null);
__decorate([
    Watch('end'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Date, Date]),
    __metadata("design:returntype", void 0)
], SchedulerEventElement.prototype, "onEndChanged", null);
SchedulerEventElement = SchedulerEventElement_1 = __decorate([
    Component({
        selector: 'mosaik-scheduler-event',
        template: schedulerEventElementTemplate,
        themes: {
            joy: schedulerEventElementJoyStyle,
            cosmopolitan: schedulerEventElementCosmopolitanStyle,
            memphis: schedulerEventElementMemphisStyle
        },
        host: {
            tabIndex: '0'
        },
        imports: [
            FocusRingElement,
            RippleElement,
            PopupElement
        ]
    }),
    __metadata("design:paramtypes", [])
], SchedulerEventElement);
export { SchedulerEventElement };
//# sourceMappingURL=SchedulerEventElement.js.map