@3mo/date-time-fields/dist/FieldDateTimeRange.js

Date time fields let people select dates, date-ranges, and times.

import { __decorate } from "tslib";
import { bind, component, css, html, property } from '@a11d/lit';
import { Localizer } from '@3mo/localization';
import { Memoize as memoize } from 'typescript-memoize';
import { FieldDateTimeBase as FieldDateTimeBase } from './FieldDateTimeBase.js';
import { DateRangeParser } from './DateRangeParser.js';
Localizer.dictionaries.add('de', {
    'Period': 'Zeitraum',
    'Start': 'Start',
    'End': 'Ende',
});
var FieldDateRangeSelection;
(function (FieldDateRangeSelection) {
    FieldDateRangeSelection["Start"] = "start";
    FieldDateRangeSelection["End"] = "end";
})(FieldDateRangeSelection || (FieldDateRangeSelection = {}));
/**
 * @element mo-field-date-range
 *
 * @attr selection - The selected date range. Either "start" or "end". Defaults to "start".
 * @attr value - The selected date range.
 *
 * @i18n "Period"
 * @i18n "Start"
 * @i18n "End"
 */
let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
    constructor() {
        super(...arguments);
        this.label = t('Period');
        this.selection = FieldDateRangeSelection.Start;
        this.calendarIconButtonIcon = 'date_range';
    }
    get selectedDate() { return this.selection === FieldDateRangeSelection.Start ? this.value?.start : this.value?.end; }
    resetNavigationDate() {
        this.navigationDate = this.selection === FieldDateRangeSelection.Start
            ? this.value?.start ?? this.navigationDate
            : this.value?.end ?? this.navigationDate;
    }
    static get styles() {
        return css `
			${super.styles}

			mo-tab-bar {
				max-width: 200px;
				place-self: center;
				padding-block: 4px;
				mo-tab {
					&:not([active]) {
						opacity: 0.5;
					}
				}
			}
		`;
    }
    get placeholder() {
        return new DateTimeRange(new DateTime().subtract({ years: 1 }), new DateTime()).format(this.formatOptions);
    }
    get calendarValue() {
        return this.value;
    }
    get popoverContentTemplate() {
        return html `
			${this.popoverToolbarTemplate}
			${super.popoverContentTemplate}
		`;
    }
    get popoverToolbarTemplate() {
        return html `
			${this.startEndTabBarTemplate}
		`;
    }
    get startEndTabBarTemplate() {
        return html `
			<mo-flex>
				<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigationDate() })}>
					<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
					<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
				</mo-tab-bar>
			</mo-flex>
		`;
    }
    handleSelectedDateChange(date, precision) {
        const { hour, minute, second } = this.navigationDate;
        date = date.with({ hour, minute, second });
        const { start, end } = this.precision.getRange(date);
        this.value = this.selection === FieldDateRangeSelection.Start
            ? new DateTimeRange(start, this.value?.end)
            : new DateTimeRange(this.value?.start, end);
        if (this.precision === precision) {
            this.selection = this.selection === FieldDateRangeSelection.Start
                ? FieldDateRangeSelection.End
                : FieldDateRangeSelection.Start;
        }
        super.handleSelectedDateChange(date, precision);
    }
    valueToInputValue(value) {
        return value?.format(this.formatOptions) ?? '';
    }
    inputValueToValue(value) {
        return value ? DateRangeParser.parse(value, this.shortcutReferenceDate) : undefined;
    }
};
__decorate([
    property()
], FieldDateTimeRange.prototype, "label", void 0);
__decorate([
    property()
], FieldDateTimeRange.prototype, "selection", void 0);
__decorate([
    property({ type: Object })
], FieldDateTimeRange.prototype, "value", void 0);
__decorate([
    memoize()
], FieldDateTimeRange.prototype, "placeholder", null);
FieldDateTimeRange = __decorate([
    component('mo-field-date-time-range')
], FieldDateTimeRange);
export { FieldDateTimeRange };