// #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 { Listen } from '../../../../events/Decorators/ListenDecorator';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Focusable } from '../../../Behaviors/Focusable';
import { Rippleable } from '../../../Behaviors/Rippleable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { StackElement } from '../../Layouts/Stack/StackElement';
import { DotElement } from '../../Primitives/Dot/DotElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { calendarItemElementTemplate } from './CalendarItemElementTemplate';
import { calendarItemElementCosmopolitanStyle } from './Themes/CalendarItemElement.Cosmopolitan';
import { calendarItemElementJoyStyle } from './Themes/CalendarItemElement.Joy';
import { calendarItemElementMemphisStyle } from './Themes/CalendarItemElement.Memphis';
// #endregion
/**
 * Calendar Item - An individual day, month, or year cell within a calendar date picker.
 *
 * @description
 * The Calendar Item component represents a single selectable date unit in calendar interfaces.
 * It supports various states including selected, today, weekend, adjacent month, blackout dates,
 * special dates, and range selections. The component includes visual markers for events or
 * important dates, ripple effects for interaction feedback, and comprehensive accessibility
 * features. It can display range states (start, middle, end) and preview states for hover
 * interactions. The component is highly versatile and used across day, month, and year views.
 *
 * @name CalendarItem
 * @element mosaik-calendar-item
 * @category Inputs
 *
 * @csspart focusRing - The keyboard focus indicator ring
 * @csspart marker - Individual event or date marker dots
 * @csspart ripple - The ripple part.
 * @csspart text - The text display area showing the day/month/year number or label
 *
 * @cssprop {String} --calendar-item-background-color - The background color of the calendar cell
 * @cssprop {String} --calendar-item-border-color - The border color
 * @cssprop {String} --calendar-item-border-radius - The corner rounding radius
 * @cssprop {String} --calendar-item-border-style - The border line style
 * @cssprop {String} --calendar-item-border-width - The border thickness
 * @cssprop {String} --calendar-item-focus-ring-active-width - The focus ring width when active (from focusRing mixin)
 * @cssprop {String} --calendar-item-focus-ring-color - The focus ring color (from focusRing mixin)
 * @cssprop {String} --calendar-item-focus-ring-inward-offset - The focus ring inward offset (from focusRing mixin)
 * @cssprop {String} --calendar-item-focus-ring-outward-offset - The focus ring outward offset (from focusRing mixin)
 * @cssprop {String} --calendar-item-font-family - The font family for date text
 * @cssprop {String} --calendar-item-font-letter-spacing - The letter spacing for date text
 * @cssprop {String} --calendar-item-font-line-height - The line height for date text
 * @cssprop {String} --calendar-item-font-size - The font size for date text
 * @cssprop {String} --calendar-item-font-text-decoration - The text decoration style
 * @cssprop {String} --calendar-item-font-text-transform - The text transformation style
 * @cssprop {String} --calendar-item-font-weight - The font weight for date text
 * @cssprop {String} --calendar-item-foreground-color - The text color
 * @cssprop {String} --calendar-item-gap - The spacing between text and markers
 * @cssprop {String} --calendar-item-padding-bottom - The bottom padding inside the cell
 * @cssprop {String} --calendar-item-padding-left - The left padding inside the cell
 * @cssprop {String} --calendar-item-padding-right - The right padding inside the cell
 * @cssprop {String} --calendar-item-padding-top - The top padding inside the cell
 * @cssprop {String} --calendar-item-ripple-color - The ripple effect color (from ripple mixin)
 * @cssprop {String} --calendar-item-ripple-duration - The ripple animation duration (from ripple mixin)
 * @cssprop {String} --calendar-item-shadow - The item shadow CSS custom property.
 * @cssprop {String} --calendar-item-shadow-blur - The item shadow blur CSS custom property.
 * @cssprop {String} --calendar-item-shadow-color - The item shadow color CSS custom property.
 * @cssprop {String} --calendar-item-shadow-offset-x - The item shadow offset x CSS custom property.
 * @cssprop {String} --calendar-item-shadow-offset-y - The item shadow offset y CSS custom property.
 * @cssprop {String} --calendar-item-shadow-spread - The item shadow spread CSS custom property.
 * @cssprop {String} --calendar-item-transition-duration - The duration of state transitions
 * @cssprop {String} --calendar-item-transition-mode - The timing function for transitions
 * @cssprop {String} --calendar-item-transition-property - The CSS properties to transition
 * @cssprop {String} --calendar-item-translate - The item translate CSS custom property.
 *
 * @fires click {MouseEvent} - Fired when the calendar item is clicked (prevented when disabled or blackout)
 *
 * @dependency mosaik-dot - The Dot element.
 * @dependency mosaik-focus-ring - The Focus Ring element.
 * @dependency mosaik-ripple - The Ripple element.
 * @dependency mosaik-stack - The Stack element.
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Basic calendar day item:
 * ```html
 * <mosaik-calendar-item text="15" value="2024-01-15"></mosaik-calendar-item>
 * ```
 *
 * @example
 * Selected item with today marker:
 * ```html
 * <mosaik-calendar-item text="15"
 *                       value="2024-01-15"
 *                       is-selected
 *                       is-today
 *                       variant="primary"></mosaik-calendar-item>
 * ```
 *
 * @example
 * Weekend item with event markers (set via JavaScript):
 * ```html
 * <mosaik-calendar-item id="item20" text="20" value="2024-01-20" is-weekend></mosaik-calendar-item>
 * <script>
 *   document.getElementById('item20').markers = [
 *     { variant: 'primary', size: 'tiny' },
 *     { variant: 'success', size: 'tiny' }
 *   ];
 * </script>
 * ```
 *
 * @example
 * Blackout date (disabled):
 * ```html
 * <mosaik-calendar-item text="25"
 *                       value="2024-01-25"
 *                       is-blackout
 *                       disabled></mosaik-calendar-item>
 * ```
 *
 * @example
 * Range selection:
 * ```html
 * <mosaik-calendar-item text="10" value="2024-01-10" is-range-start></mosaik-calendar-item>
 * <mosaik-calendar-item text="11" value="2024-01-11" is-range-middle></mosaik-calendar-item>
 * <mosaik-calendar-item text="12" value="2024-01-12" is-range-end></mosaik-calendar-item>
 * ```
 *
 * @public
 */
let CalendarItemElement = class CalendarItemElement extends Themeable(Rippleable(Appearanceable(Variantable(Disableable(Valueable(Focusable(CustomElement))))))) {
    // #region Fields
    _text;
    _value;
    _isSelected;
    _isBlackout;
    _isSpecial;
    _isToday;
    _isWeekend;
    _isAdjacent;
    _markers;
    _isRangeStart;
    _isRangeMiddle;
    _isRangeEnd;
    _isRangePreview;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._text = '';
        this._value = null;
        this._isSelected = false;
        this._isBlackout = false;
        this._isSpecial = false;
        this._isToday = false;
        this._isWeekend = false;
        this._isAdjacent = false;
        this._markers = [];
        this._isRangeStart = false;
        this._isRangeMiddle = false;
        this._isRangeEnd = false;
        this._isRangePreview = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-calendar-item';
    }
    /**
     * Gets or sets the `text` property.
     *
     * @public
     * @attr
     */
    get text() {
        return this._text;
    }
    set text(value) {
        if (this._text !== value) {
            this._text = value;
            this.requestUpdate('text');
        }
    }
    /**
     * Gets or sets the `value` property.
     *
     * @public
     * @override
     */
    get value() {
        return this._value;
    }
    set value(value) {
        if (this._value !== value) {
            this._value = value;
            this.requestUpdate('value');
        }
    }
    /**
     * Gets or sets the `isSelected` property.
     *
     * @public
     * @attr
     */
    get isSelected() {
        return this._isSelected;
    }
    set isSelected(value) {
        if (this._isSelected !== value) {
            this._isSelected = value;
            this.requestUpdate('isSelected');
        }
    }
    /**
     * Gets or sets the `isBlackout` property.
     *
     * @public
     * @attr
     */
    get isBlackout() {
        return this._isBlackout;
    }
    set isBlackout(value) {
        if (this._isBlackout !== value) {
            this._isBlackout = value;
            this.requestUpdate('isBlackout');
        }
    }
    /**
     * Gets or sets the `isSpecial` property.
     *
     * @public
     * @attr
     */
    get isSpecial() {
        return this._isSpecial;
    }
    set isSpecial(value) {
        if (this._isSpecial !== value) {
            this._isSpecial = value;
            this.requestUpdate('isSpecial');
        }
    }
    /**
     * Gets or sets the `isToday` property.
     *
     * @public
     * @attr
     */
    get isToday() {
        return this._isToday;
    }
    set isToday(value) {
        if (this._isToday !== value) {
            this._isToday = value;
            this.requestUpdate('isToday');
        }
    }
    /**
     * Gets or sets the `isWeekend` property.
     *
     * @public
     * @attr
     */
    get isWeekend() {
        return this._isWeekend;
    }
    set isWeekend(value) {
        if (this._isWeekend !== value) {
            this._isWeekend = value;
            this.requestUpdate('isWeekend');
        }
    }
    /**
     * Gets or sets the `isAdjacent` property.
     *
     * @public
     * @attr
     */
    get isAdjacent() {
        return this._isAdjacent;
    }
    set isAdjacent(value) {
        if (this._isAdjacent !== value) {
            this._isAdjacent = value;
            this.requestUpdate('isAdjacent');
        }
    }
    /**
     * Gets or sets the `markers` property.
     *
     * @public
     */
    get markers() {
        return this._markers;
    }
    set markers(value) {
        if (this._markers !== value) {
            this._markers = value;
            this.requestUpdate('markers');
        }
    }
    /**
     * Gets or sets the `isRangeStart` property.
     *
     * @public
     * @attr
     */
    get isRangeStart() {
        return this._isRangeStart;
    }
    set isRangeStart(value) {
        if (this._isRangeStart !== value) {
            this._isRangeStart = value;
            this.requestUpdate('isRangeStart');
        }
    }
    /**
     * Gets or sets the `isRangeMiddle` property.
     *
     * @public
     * @attr
     */
    get isRangeMiddle() {
        return this._isRangeMiddle;
    }
    set isRangeMiddle(value) {
        if (this._isRangeMiddle !== value) {
            this._isRangeMiddle = value;
            this.requestUpdate('isRangeMiddle');
        }
    }
    /**
     * Gets or sets the `isRangeEnd` property.
     *
     * @public
     * @attr
     */
    get isRangeEnd() {
        return this._isRangeEnd;
    }
    set isRangeEnd(value) {
        if (this._isRangeEnd !== value) {
            this._isRangeEnd = value;
            this.requestUpdate('isRangeEnd');
        }
    }
    /**
     * Gets or sets the `isRangePreview` property.
     *
     * @public
     * @attr
     */
    get isRangePreview() {
        return this._isRangePreview;
    }
    set isRangePreview(value) {
        if (this._isRangePreview !== value) {
            this._isRangePreview = value;
            this.requestUpdate('isRangePreview');
        }
    }
    // #endregion
    // #region Methods
    onClick(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], CalendarItemElement.prototype, "text", null);
__decorate([
    Attribute({
        type: Date,
        converter: {
            fromAttribute: (value) => value ? new Date(value) : undefined,
            toAttribute: (value) => value?.toISOString()
        }
    }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], CalendarItemElement.prototype, "value", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isSelected", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isBlackout", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isSpecial", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isToday", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isWeekend", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isAdjacent", null);
__decorate([
    Property({ type: (Array) }),
    __metadata("design:type", Array),
    __metadata("design:paramtypes", [Array])
], CalendarItemElement.prototype, "markers", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isRangeStart", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isRangeMiddle", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isRangeEnd", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CalendarItemElement.prototype, "isRangePreview", null);
__decorate([
    Listen('click'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Event]),
    __metadata("design:returntype", void 0)
], CalendarItemElement.prototype, "onClick", null);
CalendarItemElement = __decorate([
    Component({
        selector: 'mosaik-calendar-item',
        template: calendarItemElementTemplate,
        themes: {
            joy: calendarItemElementJoyStyle,
            memphis: calendarItemElementMemphisStyle,
            cosmopolitan: calendarItemElementCosmopolitanStyle
        },
        imports: [
            TextElement,
            FocusRingElement,
            RippleElement,
            DotElement,
            StackElement
        ]
    }),
    __metadata("design:paramtypes", [])
], CalendarItemElement);
export { CalendarItemElement };
//# sourceMappingURL=CalendarItemElement.js.map