@3mo/date-time-fields/dist/selection/HourList.js

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

import { __decorate } from "tslib";
import { component, html, range } from '@a11d/lit';
import { DateList } from './DateList.js';
let HourList = class HourList extends DateList {
    get listItemsTemplate() {
        return html `
			${[...range(0, this.navigationDate.hoursInDay)].map(hour => html `
				<mo-selectable-list-item
					?selected=${this.value?.hour === hour}
					?data-navigating=${this.navigationDate.hour === hour}
					@navigate=${() => this.navigate.dispatch(this.navigationDate.with({ hour }))}
					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ hour }))}
				>${hour.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
			`)}
		`;
    }
};
HourList = __decorate([
    component('mo-hour-list')
], HourList);
export { HourList };