// #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 { generateTimeSlots } from '../../../../Extensions/DateExtensions';
import { TimeFormatter } from '../../../../Intl/Formatters/TimeFormatter';
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 { ISchedulerTimescaleElementProps } from './ISchedulerTimescaleElementProps';
import { schedulerTimescaleElementTemplate } from './SchedulerTimescaleElementTemplate';
import { schedulerTimescaleElementCosmopolitanStyle } from './Themes/SchedulerTimescaleElement.Cosmopolitan';
import { schedulerTimescaleElementJoyStyle } from './Themes/SchedulerTimescaleElement.Joy';
import { schedulerTimescaleElementMemphisStyle } from './Themes/SchedulerTimescaleElement.Memphis';
// #endregion
/**
 * SchedulerTimescale - Container for time labels in the scheduler.
 *
 * @description
 * Displays vertical time labels along the left side of the scheduler body.
 * Uses an internal table to ensure row heights match the grid table exactly.
 *
 * @element mosaik-scheduler-timescale
 *
 * @csspart time-cell - The cell containing the time label
 * @csspart time-label - The time-label part.
 * @csspart time-panel - The table containing time labels
 *
 * @cssprop {Color} --scheduler-timescale-background-color - Background color of the timescale
 * @cssprop {Color} --scheduler-timescale-cell-border-color - Border color for time cells
 * @cssprop {String} --scheduler-timescale-cell-border-radius - The timescale cell border radius CSS custom property.
 * @cssprop {String} --scheduler-timescale-cell-border-style - Border style for time cells
 * @cssprop {String} --scheduler-timescale-cell-border-width - Border width for time cells
 * @cssprop {String} --scheduler-timescale-cell-height - Height of each time cell
 * @cssprop {String} --scheduler-timescale-font-family - Font family for time labels
 * @cssprop {String} --scheduler-timescale-font-letter-spacing - Letter spacing for time labels
 * @cssprop {String} --scheduler-timescale-font-line-height - Line height for time labels
 * @cssprop {String} --scheduler-timescale-font-size - Font size for time labels
 * @cssprop {String} --scheduler-timescale-font-text-decoration - Text decoration for time labels
 * @cssprop {String} --scheduler-timescale-font-text-transform - Text transform for time labels
 * @cssprop {String} --scheduler-timescale-font-weight - Font weight for time labels
 * @cssprop {String} --scheduler-timescale-gap - The timescale gap CSS custom property.
 * @cssprop {Color} --scheduler-timescale-hour-cell-border-color - Border color for hour cells
 * @cssprop {String} --scheduler-timescale-hour-cell-border-radius - The timescale hour cell border radius CSS custom property.
 * @cssprop {String} --scheduler-timescale-hour-cell-border-style - Border style for hour cells
 * @cssprop {String} --scheduler-timescale-hour-cell-border-width - Border width for hour cells
 * @cssprop {Color} --scheduler-timescale-label-color - Color of the time labels
 * @cssprop {String} --scheduler-timescale-padding-bottom - Bottom padding for time cells
 * @cssprop {String} --scheduler-timescale-padding-left - Left padding for time cells
 * @cssprop {String} --scheduler-timescale-padding-right - Right padding for time cells
 * @cssprop {String} --scheduler-timescale-padding-top - Top padding for time cells
 * @cssprop {String} --scheduler-timescale-shadow - The timescale shadow CSS custom property.
 * @cssprop {String} --scheduler-timescale-shadow-blur - The timescale shadow blur CSS custom property.
 * @cssprop {String} --scheduler-timescale-shadow-color - The timescale shadow color CSS custom property.
 * @cssprop {String} --scheduler-timescale-shadow-offset-x - The timescale shadow offset x CSS custom property.
 * @cssprop {String} --scheduler-timescale-shadow-offset-y - The timescale shadow offset y CSS custom property.
 * @cssprop {String} --scheduler-timescale-shadow-spread - The timescale shadow spread CSS custom property.
 * @cssprop {String} --scheduler-timescale-timescale-width - The timescale timescale width CSS custom property.
 * @cssprop {String} --scheduler-timescale-transition-duration - The timescale transition duration CSS custom property.
 * @cssprop {String} --scheduler-timescale-transition-mode - The timescale transition mode CSS custom property.
 * @cssprop {String} --scheduler-timescale-transition-property - The timescale transition property CSS custom property.
 * @cssprop {String} --scheduler-timescale-translate - The timescale translate CSS custom property.
 *
 * @example
 * ```html
 * <!-- Internal component - used by the scheduler to display time labels.
 *      Configure via the parent scheduler's properties. -->
 * <mosaik-scheduler-timescale></mosaik-scheduler-timescale>
 * ```
 *
 * @internal
 */
let SchedulerTimescaleElement = class SchedulerTimescaleElement extends Themeable(Localeable(CustomElement)) {
    // #region Fields
    _hourStart;
    _hourEnd;
    _stepMinutes;
    _timeFormat;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._hourStart = ISchedulerTimescaleElementProps.DEFAULTS.hourStart;
        this._hourEnd = ISchedulerTimescaleElementProps.DEFAULTS.hourEnd;
        this._stepMinutes = ISchedulerTimescaleElementProps.DEFAULTS.stepMinutes;
        this._timeFormat = ISchedulerTimescaleElementProps.DEFAULTS.timeFormat;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-scheduler-timescale';
    }
    /**
     * Gets or sets the start hour.
     *
     * @internal
     */
    get hourStart() {
        return this._hourStart;
    }
    set hourStart(value) {
        if (this._hourStart !== value) {
            this._hourStart = value;
            this.requestUpdate('hourStart');
        }
    }
    /**
     * Gets or sets the end hour.
     *
     * @internal
     */
    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.
     *
     * @internal
     */
    get stepMinutes() {
        return this._stepMinutes;
    }
    set stepMinutes(value) {
        if (this._stepMinutes !== value) {
            this._stepMinutes = value;
            this.requestUpdate('stepMinutes');
        }
    }
    /**
     * Gets or sets the time format string.
     *
     * @internal
     */
    get timeFormat() {
        return this._timeFormat;
    }
    set timeFormat(value) {
        if (this._timeFormat !== value) {
            this._timeFormat = value;
            this.requestUpdate('timeFormat');
        }
    }
    /**
     * Gets the time slots to display.
     *
     * @internal
     * @readonly
     */
    get timeSlots() {
        return generateTimeSlots(this._hourStart, this._hourEnd, this._stepMinutes, this.locale, (date, locale) => TimeFormatter.format(date, this._timeFormat, locale));
    }
};
__decorate([
    Property({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], SchedulerTimescaleElement.prototype, "hourStart", null);
__decorate([
    Property({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], SchedulerTimescaleElement.prototype, "hourEnd", null);
__decorate([
    Property({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], SchedulerTimescaleElement.prototype, "stepMinutes", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SchedulerTimescaleElement.prototype, "timeFormat", null);
SchedulerTimescaleElement = __decorate([
    Component({
        selector: 'mosaik-scheduler-timescale',
        template: schedulerTimescaleElementTemplate,
        themes: {
            joy: schedulerTimescaleElementJoyStyle,
            cosmopolitan: schedulerTimescaleElementCosmopolitanStyle,
            memphis: schedulerTimescaleElementMemphisStyle
        }
    }),
    __metadata("design:paramtypes", [])
], SchedulerTimescaleElement);
export { SchedulerTimescaleElement };
//# sourceMappingURL=SchedulerTimescaleElement.js.map