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

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

import { __decorate } from "tslib";
import { bind, component, html } from '@a11d/lit';
import { Localizer } from '@3mo/localization';
import { FieldDateTimeRange } from './FieldDateTimeRange.js';
import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
Localizer.dictionaries.add('de', {
    'Include time': 'Zeitauswahl',
});
/**
 * @element mo-field-toggleable-date-time-range
 *
 * @i18n "Include time"
 */
let FieldToggleableDateTimeRange = class FieldToggleableDateTimeRange extends FieldDateTimeRange {
    constructor() {
        super(...arguments);
        this.precision = FieldDateTimePrecision.Day;
    }
    get includeTime() { return this.precision === FieldDateTimePrecision.Minute; }
    set includeTime(includeTime) { this.precision = includeTime ? FieldDateTimePrecision.Minute : FieldDateTimePrecision.Day; }
    get popoverToolbarTemplate() {
        return html `
			<mo-grid style='width: calc(100% - 16px); padding-inline: 8px;' columns='* auto'>
				${super.popoverToolbarTemplate}
				${this.toggleTemplate}
			</mo-grid>
		`;
    }
    get toggleTemplate() {
        return html `
			<mo-switch label=${t('Include time')} ${bind(this, 'includeTime')}></mo-switch>
		`;
    }
};
FieldToggleableDateTimeRange = __decorate([
    component('mo-field-toggleable-date-time-range')
], FieldToggleableDateTimeRange);
export { FieldToggleableDateTimeRange };