// #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 { Localeable } from '../../../Behaviors/Localeable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { ISchedulerDatescaleElementProps } from './ISchedulerDatescaleElementProps';
import { schedulerDatescaleElementTemplate } from './SchedulerDatescaleElementTemplate';
import { schedulerDatescaleElementCosmopolitanStyle } from './Themes/SchedulerDatescaleElement.Cosmopolitan';
import { schedulerDatescaleElementJoyStyle } from './Themes/SchedulerDatescaleElement.Joy';
import { schedulerDatescaleElementMemphisStyle } from './Themes/SchedulerDatescaleElement.Memphis';
// #endregion
/**
 * SchedulerDatescale - Container for date labels in the scheduler.
 *
 * @description
 * Displays vertical date labels along the left side of the scheduler body.
 * Used in views like Agenda to show date groupings for events.
 *
 * @element mosaik-scheduler-datescale
 *
 * @csspart date-panel - The container for date items
 * @csspart day-number - The day number label
 * @csspart weekday - The weekday label
 *
 * @cssprop {Color} --scheduler-datescale-background-color - Background color of the datescale
 * @cssprop {Color} --scheduler-datescale-blackout-stripe-color - Color of blackout day stripes
 * @cssprop {String} --scheduler-datescale-blackout-stripe-size - Size of blackout day stripe pattern
 * @cssprop {String} --scheduler-datescale-cell-width - Width of each date cell
 * @cssprop {Color} --scheduler-datescale-day-number-color - Color of the day number
 * @cssprop {String} --scheduler-datescale-day-number-font-size - Font size of the day number
 * @cssprop {String} --scheduler-datescale-day-number-font-weight - Font weight of the day number
 * @cssprop {String} --scheduler-datescale-font-family - Font family for datescale text
 * @cssprop {String} --scheduler-datescale-font-letter-spacing - Letter spacing for datescale text
 * @cssprop {String} --scheduler-datescale-font-line-height - Line height for datescale text
 * @cssprop {String} --scheduler-datescale-font-size - Font size for datescale text
 * @cssprop {String} --scheduler-datescale-font-text-decoration - Text decoration for datescale text
 * @cssprop {String} --scheduler-datescale-font-text-transform - Text transform for datescale text
 * @cssprop {String} --scheduler-datescale-font-weight - Font weight for datescale text
 * @cssprop {String} --scheduler-datescale-gap - The datescale gap CSS custom property.
 * @cssprop {String} --scheduler-datescale-padding-bottom - Bottom padding for date cells
 * @cssprop {String} --scheduler-datescale-padding-left - Left padding for date cells
 * @cssprop {String} --scheduler-datescale-padding-right - Right padding for date cells
 * @cssprop {String} --scheduler-datescale-padding-top - Top padding for date cells
 * @cssprop {Color} --scheduler-datescale-row-border-color - Border color for date rows
 * @cssprop {String} --scheduler-datescale-row-border-style - Border style for date rows
 * @cssprop {String} --scheduler-datescale-row-border-width - Border width for date rows
 * @cssprop {String} --scheduler-datescale-row-height - Height of each date row
 * @cssprop {String} --scheduler-datescale-shadow - The datescale shadow CSS custom property.
 * @cssprop {String} --scheduler-datescale-shadow-blur - The datescale shadow blur CSS custom property.
 * @cssprop {String} --scheduler-datescale-shadow-color - The datescale shadow color CSS custom property.
 * @cssprop {String} --scheduler-datescale-shadow-offset-x - The datescale shadow offset x CSS custom property.
 * @cssprop {String} --scheduler-datescale-shadow-offset-y - The datescale shadow offset y CSS custom property.
 * @cssprop {String} --scheduler-datescale-shadow-spread - The datescale shadow spread CSS custom property.
 * @cssprop {Color} --scheduler-datescale-today-background-color - Background color for today's date
 * @cssprop {Color} --scheduler-datescale-today-day-number-color - Color of today's day number
 * @cssprop {Color} --scheduler-datescale-today-weekday-color - Color of today's weekday label
 * @cssprop {String} --scheduler-datescale-transition-duration - The datescale transition duration CSS custom property.
 * @cssprop {String} --scheduler-datescale-transition-mode - The datescale transition mode CSS custom property.
 * @cssprop {String} --scheduler-datescale-transition-property - The datescale transition property CSS custom property.
 * @cssprop {String} --scheduler-datescale-translate - The datescale translate CSS custom property.
 * @cssprop {Color} --scheduler-datescale-weekday-color - Color of weekday labels
 * @cssprop {String} --scheduler-datescale-weekday-font-size - Font size for weekday labels
 * @cssprop {String} --scheduler-datescale-weekday-font-weight - Font weight for weekday labels
 * @cssprop {String} --scheduler-datescale-weekday-text-transform - Text transform for weekday labels
 * @cssprop {Color} --scheduler-datescale-weekend-background-color - Background color for weekend dates
 *
 * @example
 * ```html
 * <!-- Internal component - used by the scheduler to display date labels.
 *      Configure via the parent scheduler's properties. -->
 * <mosaik-scheduler-datescale></mosaik-scheduler-datescale>
 * ```
 *
 * @internal
 */
let SchedulerDatescaleElement = class SchedulerDatescaleElement extends Themeable(Localeable(CustomElement)) {
    // #region Fields
    _items;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._items = ISchedulerDatescaleElementProps.DEFAULTS.items;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-scheduler-datescale';
    }
    /**
     * Gets or sets the date items to display.
     *
     * @internal
     */
    get items() {
        return this._items;
    }
    set items(value) {
        if (this._items !== value) {
            this._items = value;
            this.requestUpdate('items');
        }
    }
};
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Array),
    __metadata("design:paramtypes", [Array])
], SchedulerDatescaleElement.prototype, "items", null);
SchedulerDatescaleElement = __decorate([
    Component({
        selector: 'mosaik-scheduler-datescale',
        template: schedulerDatescaleElementTemplate,
        themes: {
            joy: schedulerDatescaleElementJoyStyle,
            cosmopolitan: schedulerDatescaleElementCosmopolitanStyle,
            memphis: schedulerDatescaleElementMemphisStyle
        }
    }),
    __metadata("design:paramtypes", [])
], SchedulerDatescaleElement);
export { SchedulerDatescaleElement };
//# sourceMappingURL=SchedulerDatescaleElement.js.map