@universal-material/web/calendar/range-calendar.js

Material web components

import { __decorate } from "tslib";
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { UmCalendarBase } from './calendar-base';
import { styles } from './range-calendar.styles.js';
let UmRangeCalendar = class UmRangeCalendar extends UmCalendarBase {
    constructor() {
        super(...arguments);
        this.startDateValue = null;
        this.endDateValue = null;
    }
    static { this.styles = [styles, UmCalendarBase.styles]; }
    get value() {
        if (!this.startDateValue && !this.endDateValue) {
            return '';
        }
        return `${this._getDateString(this.startDateValue)} - ${this._getDateString(this.endDateValue)}`;
    }
    set value(value) {
        if (!value) {
            this.startDateValue = null;
            this.endDateValue = null;
            return;
        }
        const values = value.split(' - ');
        if (values.length !== 2) {
            this.startDateValue = null;
            this.endDateValue = null;
            return;
        }
        const startDateString = values[0];
        const endDateString = values[1];
        this.startDateValue = this._getDateFromString(startDateString);
        this.endDateValue = this._getDateFromString(endDateString);
    }
    #setStartEndDates(startDate, endDate) {
        this.startDateValue = startDate;
        this.endDateValue = endDate;
        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
        this.dispatchEvent(new Event('change', { bubbles: true }));
    }
    _selectDate(date) {
        if (!this.startDateValue || !!this.endDateValue) {
            this.#setStartEndDates(date, null);
            return;
        }
        if (date > this.startDateValue) {
            this.#setStartEndDates(this.startDateValue, date);
            return;
        }
        this.#setStartEndDates(date, this.startDateValue);
    }
    _getCalendarClassMap() {
        const map = {};
        if (!this.startDateValue) {
            return null;
        }
        if (this.startDateValue) {
            const className = this.endDateValue
                ? 'selected'
                : 'selecting';
            map[className] = true;
        }
        map[this.#getStartDateClass()] = true;
        if (this.endDateValue) {
            map[this.#getEndDateClass()] = true;
        }
        return classMap(map);
    }
    #getStartDateClass() {
        return this.#getDateClass('start', this.startDateValue);
    }
    #getEndDateClass() {
        return this.#getDateClass('end', this.endDateValue);
    }
    #getDateClass(name, date) {
        const month = date.getMonth();
        const year = date.getFullYear();
        if (this.month === month && this.year === year) {
            return `on-${name}-date-month`;
        }
        if (this.year > year || this.year === year && this.month > month) {
            return `after-${name}-date-month`;
        }
        return `before-${name}-date-month`;
    }
    _getSelectedDateClasses(date) {
        const classes = {};
        if (this.startDateValue?.getTime() === date.getTime()) {
            classes['selected-date'] = true;
            classes['start-date'] = true;
        }
        if (this.endDateValue?.getTime() === date.getTime()) {
            classes['selected-date'] = true;
            classes['end-date'] = true;
        }
        return classes;
    }
};
__decorate([
    state()
], UmRangeCalendar.prototype, "startDateValue", void 0);
__decorate([
    state()
], UmRangeCalendar.prototype, "endDateValue", void 0);
__decorate([
    property()
], UmRangeCalendar.prototype, "value", null);
UmRangeCalendar = __decorate([
    customElement('u-range-calendar')
], UmRangeCalendar);
export { UmRangeCalendar };
//# sourceMappingURL=range-calendar.js.map