@3mo/date-time-fields 0.10.3 → 0.11.0-preview.1

package/dist/selection/Calendar.js

@@ -0,0 +1,347 @@
+var Calendar_1;
+import { __decorate } from "tslib";
+import { Component, css, component, html, property, event, repeat, state, unsafeCSS } from '@a11d/lit';
+import { CalendarDatesController } from './CalendarDatesController.js';
+import { FieldDateTimePrecision } from '../FieldDateTimePrecision.js';
+/**
+ * @fires dateClick - Dispatched when a date is clicked, with the clicked date as detail.
+ */
+let Calendar = Calendar_1 = class Calendar extends Component {
+    constructor() {
+        super(...arguments);
+        this.includeWeek = false;
+        this.view = FieldDateTimePrecision.Day;
+        this.datesController = new CalendarDatesController(this);
+        this.handleItemClick = (date, precision) => {
+            return () => {
+                if (this.precision === precision) {
+                    this.dateClick.dispatch(date);
+                    this.setNavigatingValue(date, 'smooth');
+                }
+                else {
+                    const nextView = this.view !== precision
+                        ? precision
+                        : this.view === FieldDateTimePrecision.Year
+                            ? FieldDateTimePrecision.Month
+                            : this.view === FieldDateTimePrecision.Month
+                                ? FieldDateTimePrecision.Day
+                                : this.view;
+                    this.setView(nextView, date);
+                }
+            };
+        };
+    }
+    get navigationDate() { return this.datesController.navigationDate; }
+    async setNavigatingValue(date, behavior = 'instant') {
+        this.datesController.disableObservers = true;
+        this.datesController.navigationDate = date;
+        await this.updateComplete;
+        await new Promise(r => setTimeout(r, 10));
+        this.renderRoot.querySelector(`.${this.view}[data-navigating]`)
+            ?.scrollIntoView({ block: 'center', behavior });
+        await new Promise(r => setTimeout(r, behavior === 'instant' ? 10 : 100));
+        this.datesController.disableObservers = false;
+    }
+    setView(view, navigationDate = this.datesController.navigationDate) {
+        this.view = view;
+        this.setNavigatingValue(navigationDate);
+    }
+    static get styles() {
+        const year = unsafeCSS(FieldDateTimePrecision.Year.key);
+        const month = unsafeCSS(FieldDateTimePrecision.Month.key);
+        const day = unsafeCSS(FieldDateTimePrecision.Day.key);
+        return css `
+			:host {
+				--mo-calendar-item-size: 2.25rem;
+				flex: 1;
+			}
+
+			.scroller {
+				height: min(450px, 100vh);
+
+				display: grid;
+				position: relative;
+				scrollbar-width: none;
+				overflow-x: hidden;
+				scroll-behavior: smooth;
+
+				&[data-view=${day}] {
+					grid-template-columns: repeat(1, 1fr);
+				}
+
+				&[data-view=${month}] {
+					grid-template-columns: repeat(3, 1fr);
+				}
+
+				&[data-view=${year}] {
+					grid-template-columns: repeat(5, 1fr);
+				}
+			}
+
+			.year, .month, .day {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				transition: 0.2s;
+
+				user-select: none;
+
+				font-weight: 500;
+
+				border-radius: var(--mo-border-radius);
+
+				&:hover {
+					background: var(--mo-color-transparent-gray-3);
+				}
+
+				&[data-now] {
+					outline: 2px dashed var(--mo-color-gray-transparent);
+				}
+
+				&[data-start], &[data-end] {
+					background: var(--mo-color-accent-transparent);
+					opacity: 1;
+					color: color-mix(in srgb, var(--mo-color-accent), var(--mo-color-foreground)) !important;
+				}
+
+				&[data-in-range] {
+					background: color-mix(in srgb, var(--mo-color-accent), transparent 92%);
+				}
+			}
+
+			/* Headings */
+			.year[data-view=${month}], .month[data-view=${day}] {
+				font-size: 1.125rem;
+				font-weight: 500;
+				height: 2rem;
+				padding: 0.5rem;
+			}
+
+			/* Selection */
+			.year[data-view=${year}], .month[data-view=${month}], .day {
+				opacity: 0.875;
+				font-size: 0.94rem;
+				cursor: pointer;
+				height: var(--mo-calendar-item-size);
+			}
+
+			.year {
+				&[data-view=${day}] {
+					display: none;
+				}
+				&:not([data-view=${year}]) {
+					grid-column: -1 / 1;
+					border-block-start: 1px solid var(--mo-color-transparent-gray-3);
+				}
+				padding-inline: 0.5rem;
+			}
+
+			.month-container {
+				width: 100%;
+				position: relative;
+				&[data-view=${day}] {
+					&::before {
+						content: ' ';
+						position: absolute;
+						display: inline-block;
+						width: 1px;
+						height: 100%;
+						inset-block: 0;
+						background: var(--mo-color-transparent-gray-3);
+					}
+					&::after {
+						content: ' ';
+						position: absolute;
+						display: inline-block;
+						height: 1px;
+						width: 100%;
+						inset-inline: 0;
+						background: var(--mo-color-transparent-gray-3);
+					}
+				}
+
+				& > mo-grid {
+					padding-inline: 0.5rem;
+					padding-block-end: 0.5rem;
+					margin-block-start: -0.375rem;
+				}
+
+				&[data-view=${month}] {
+					& > mo-grid {
+						display: none;
+					}
+				}
+			}
+
+			.weekdays {
+				text-align: center;
+				opacity: 0.5;
+				font-size: 0.75rem;
+				font-weight: 500;
+				grid-column: -1 / 1;
+				user-select: none;
+				span {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+
+			.month {
+				padding-inline: 0.5rem;
+			}
+
+			.week {
+				opacity: 0.5;
+			}
+
+			.day {
+				width: var(--mo-calendar-item-size);
+				height: var(--mo-calendar-item-size);
+			}
+		`;
+    }
+    get columns() {
+        return [
+            !this.includeWeek ? undefined : '[week] var(--mo-calendar-item-size)',
+            ...CalendarDatesController.sampleWeek.map(day => `[${this.getColumnName(day)}] var(--mo-calendar-item-size)`),
+        ].join(' ');
+    }
+    getColumnName(date) {
+        return `day-${date.dayOfWeek}`;
+    }
+    get template() {
+        return html `
+			<div class='scroller' data-view=${this.view.key}>
+				${repeat(this.datesController.data, d => d.toString(), d => html `
+					${this.getYearTemplate(d)}
+					${this.getMonthTemplate(d)}
+				`)}
+			</div>
+		`;
+    }
+    getYearTemplate(date) {
+        return date.dayOfYear !== 1 ? html.nothing : html `
+			<div class='year' role='button'
+				data-view=${this.view.key}
+				?data-navigating=${this.isNavigating(date, FieldDateTimePrecision.Year)}
+				?data-now=${this.isNow(date, FieldDateTimePrecision.Year)}
+				?data-start=${this.isStart(date, FieldDateTimePrecision.Year)}
+				?data-end=${this.isEnd(date, FieldDateTimePrecision.Year)}
+				?data-in-range=${this.isInRange(date, FieldDateTimePrecision.Year)}
+				@click=${this.handleItemClick(date, FieldDateTimePrecision.Year)}
+				${this.datesController.observerIntersectionNavigation(date, FieldDateTimePrecision.Month, FieldDateTimePrecision.Year)}
+			>
+				${date.format({ year: 'numeric' })}
+			</div>
+		`;
+    }
+    static get weekDaysTemplate() {
+        return html `
+			<mo-grid class='weekdays' columns='subgrid'>
+				${CalendarDatesController.sampleWeek.map((day, index) => {
+            const { narrow, short, long } = {
+                narrow: day.format({ weekday: 'narrow' }),
+                short: day.format({ weekday: 'short' }),
+                long: day.format({ weekday: 'long' }),
+            };
+            return html `
+						<span style='grid-column: day-${index + 1}' title=${long}>
+							${long === short ? narrow : short}
+						</span>
+					`;
+        })}
+			</mo-grid>
+		`;
+    }
+    getMonthTemplate(date) {
+        return this.view === FieldDateTimePrecision.Year || date.day !== 1 ? html.nothing : html `
+			<mo-flex class='month-container' data-view=${this.view.key}>
+				<div class='month' role='button'
+					data-view=${this.view.key}
+					?data-navigating=${this.isNavigating(date, FieldDateTimePrecision.Month)}
+					?data-now=${this.isNow(date, FieldDateTimePrecision.Month)}
+					?data-start=${this.isStart(date, FieldDateTimePrecision.Month)}
+					?data-end=${this.isEnd(date, FieldDateTimePrecision.Month)}
+					?data-in-range=${this.isInRange(date, FieldDateTimePrecision.Month)}
+					@click=${this.handleItemClick(date, FieldDateTimePrecision.Month)}
+					${this.datesController.observerIntersectionNavigation(date, FieldDateTimePrecision.Day)}
+				>
+					${this.view === FieldDateTimePrecision.Day ? date.format({ year: 'numeric', month: 'long' }) : date.format({ month: 'long' })}
+				</div>
+				<mo-grid justifyContent='center' autoRows='var(--mo-calendar-item-size)' columns=${this.view === FieldDateTimePrecision.Day ? this.columns : 'auto'}>
+					${this.view !== FieldDateTimePrecision.Day ? html.nothing : Calendar_1.weekDaysTemplate}
+					${this.datesController.data.filter(d => d.year === date.year && d.month === date.month).map(day => this.getDayTemplate(day))}
+				</mo-grid>
+			</mo-flex>
+		`;
+    }
+    getDayTemplate(day) {
+        return this.view === FieldDateTimePrecision.Month ? html.nothing : html `
+			${this.includeWeek === false || day.dayOfWeek !== 1 ? html.nothing : html `
+				<div class='week' style='grid-column: week'>${day.weekOfYear}</div>
+			`}
+			<div tabindex='0' role='button' class='day'
+				style='grid-column: ${this.getColumnName(day)}'
+				?data-navigating=${this.isNavigating(day, FieldDateTimePrecision.Day)}
+				?data-now=${this.isNow(day, FieldDateTimePrecision.Day)}
+				?data-start=${this.isStart(day, FieldDateTimePrecision.Day)}
+				?data-end=${this.isEnd(day, FieldDateTimePrecision.Day)}
+				?data-in-range=${this.isInRange(day, FieldDateTimePrecision.Day)}
+				@click=${this.handleItemClick(day, FieldDateTimePrecision.Day)}
+			>
+				${day.format({ day: 'numeric' })}
+			</div>
+		`;
+    }
+    isNavigating(date, precision) {
+        return this.view === precision
+            && this.navigationDate.year === date.year
+            && (precision === FieldDateTimePrecision.Year || this.navigationDate.month === date.month)
+            && (precision !== FieldDateTimePrecision.Day || this.navigationDate.day === date.day);
+    }
+    isEqual(precision, left, right) {
+        return left.year === right.year
+            && (precision === FieldDateTimePrecision.Year || left.month === right.month)
+            && (precision !== FieldDateTimePrecision.Day || left.day === right.day);
+    }
+    isLower(precision, left, right) {
+        return left.year < right.year
+            || (precision !== FieldDateTimePrecision.Year && left.year === right.year && left.month < right.month)
+            || (precision === FieldDateTimePrecision.Day && left.year === right.year && left.month === right.month && left.day < right.day);
+    }
+    isNow(date, precision) {
+        return this.view === precision && this.isEqual(precision, date, CalendarDatesController.today);
+    }
+    isStart(date, precision) {
+        return precision === this.precision && !!this.value?.start && this.isEqual(precision, date, this.value?.start);
+    }
+    isEnd(date, precision) {
+        return precision === this.precision && !!this.value?.end && this.isEqual(precision, date, this.value?.end);
+    }
+    isInRange(date, precision) {
+        return precision === this.precision && !!this.value?.start && !!this.value?.end
+            && this.isLower(precision, this.value.start, date)
+            && this.isLower(precision, date, this.value.end);
+    }
+};
+__decorate([
+    event()
+], Calendar.prototype, "dateClick", void 0);
+__decorate([
+    property({ type: Object })
+], Calendar.prototype, "value", void 0);
+__decorate([
+    property({ type: Object, updated() { this.setView(this.precision); } })
+], Calendar.prototype, "precision", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Calendar.prototype, "includeWeek", void 0);
+__decorate([
+    state()
+], Calendar.prototype, "view", void 0);
+Calendar = Calendar_1 = __decorate([
+    component('mo-calendar')
+], Calendar);
+export { Calendar };

package/dist/selection/CalendarDatesController.d.ts

@@ -0,0 +1,22 @@
+import { Controller, type DirectiveResult } from '@a11d/lit';
+import type { Calendar } from './Calendar.js';
+import { FieldDateTimePrecision } from '../FieldDateTimePrecision.js';
+export declare class CalendarDatesController extends Controller {
+    readonly host: Calendar;
+    static get today(): import("@3mo/date-time/DateTime.js").DateTime;
+    private static generate;
+    private static _sampleWeek;
+    static get sampleWeek(): ReadonlyArray<DateTime>;
+    private static generateWeek;
+    disableObservers: boolean;
+    observerIntersectionNavigation(date: DateTime, ...views: Array<FieldDateTimePrecision>): DirectiveResult<any>;
+    constructor(host: Calendar);
+    private days;
+    private months;
+    private years;
+    get data(): import("@3mo/date-time/DateTime.js").DateTime[];
+    private _navigationDate;
+    get navigationDate(): import("@3mo/date-time/DateTime.js").DateTime;
+    set navigationDate(value: import("@3mo/date-time/DateTime.js").DateTime);
+}
+//# sourceMappingURL=CalendarDatesController.d.ts.map

package/dist/selection/CalendarDatesController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDatesController.d.ts","sourceRoot":"","sources":["../../selection/CalendarDatesController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,eAAe,EAAE,MAAM,WAAW,CAAA;AAGlE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAErE,qBAAa,uBAAwB,SAAQ,UAAU;aAkCxB,IAAI,EAAE,QAAQ;IAhC5C,MAAM,KAAK,KAAK,kDAAqC;IAErD,OAAO,CAAC,MAAM,CAAE,QAAQ;IAMxB,OAAO,CAAC,MAAM,CAAC,WAAW,CAAwB;IAClD,MAAM,KAAK,UAAU,IAAgC,aAAa,CAAC,QAAQ,CAAC,CAAE;IAE9E,OAAO,CAAC,MAAM,CAAC,YAAY;IAW3B,gBAAgB,UAAQ;IAExB,8BAA8B,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAK,CAAC,sBAAsB,CAAC;gBAQxD,IAAI,EAAE,QAAQ;IAK5C,OAAO,CAAC,IAAI,CAAwB;IACpC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,KAAK,CAAwB;IAErC,IAAI,IAAI,oDASP;IAED,OAAO,CAAC,eAAe,CAAW;IAClC,IAAI,cAAc,kDAAkC;IACpD,IAAI,cAAc,CAAC,KAAK,+CAAA,EAsCvB;CACD"}

package/dist/selection/CalendarDatesController.js

@@ -0,0 +1,76 @@
+import { __decorate } from "tslib";
+import { Controller, html } from '@a11d/lit';
+import { observeIntersection } from '@3mo/intersection-observer';
+import { MemoizeExpiring as memoizeExpiring } from 'typescript-memoize';
+import { FieldDateTimePrecision } from '../FieldDateTimePrecision.js';
+export class CalendarDatesController extends Controller {
+    static get today() { return new DateTime().dayStart; }
+    static *generate(start, count, step) {
+        for (let i = 0; i < count; i++) {
+            yield start.add({ [step]: i });
+        }
+    }
+    static get sampleWeek() { return this._sampleWeek; }
+    static generateWeek() {
+        const sample = [...CalendarDatesController.generate(CalendarDatesController.today, CalendarDatesController.today.daysInWeek * 2, 'days')];
+        const indexOfFirstWeekStart = sample.findIndex(d => d.dayOfWeek === 1);
+        const daysInWeek = sample[0].daysInWeek;
+        CalendarDatesController._sampleWeek = sample.slice(indexOfFirstWeekStart, indexOfFirstWeekStart + daysInWeek).map(d => d.dayStart);
+    }
+    observerIntersectionNavigation(date, ...views) {
+        return !views.includes(this.host.view) ? html.nothing : observeIntersection(data => {
+            if (!this.disableObservers && data.some(entry => entry.isIntersecting)) {
+                this.navigationDate = date;
+            }
+        });
+    }
+    constructor(host) {
+        super(host);
+        this.host = host;
+        this.disableObservers = false;
+        this.days = new Array();
+        this.months = new Array();
+        this.years = new Array();
+        this.navigationDate = CalendarDatesController.today;
+    }
+    get data() {
+        switch (this.host.view) {
+            case FieldDateTimePrecision.Year:
+                return this.years;
+            case FieldDateTimePrecision.Month:
+                return this.months;
+            default:
+                return this.days;
+        }
+    }
+    get navigationDate() { return this._navigationDate; }
+    set navigationDate(value) {
+        let changed = false;
+        const daysOffset = 75;
+        if (this.host.view === FieldDateTimePrecision.Day && (!this.days.length || value.isBefore(this.days.at(daysOffset)) || value.isAfter(this.days.at(-daysOffset)))) {
+            this.days = [...CalendarDatesController.generate(value.yearStart.add({ years: -1 }), value.daysInYear * 3, 'days')];
+            changed = true;
+        }
+        const monthsOffset = 25;
+        if (this.host.view === FieldDateTimePrecision.Month && (!this.months.length || value.isBefore(this.months.at(monthsOffset)) || value.isAfter(this.months.at(-monthsOffset)))) {
+            this.months = [...CalendarDatesController.generate(value.yearStart.add({ years: -10 }), value.monthsInYear * 20, 'months')];
+            changed = true;
+        }
+        const yearsOffset = 15;
+        if (this.host.view === FieldDateTimePrecision.Year && (!this.years.length || value.isBefore(this.years.at(yearsOffset)) || value.isAfter(this.years.at(-yearsOffset)))) {
+            this.years = [...CalendarDatesController.generate(value.yearStart.add({ years: -100 }), 200, 'years')];
+            changed = true;
+        }
+        if (changed) {
+            this.host.requestUpdate();
+        }
+        this._navigationDate = value.dayStart;
+    }
+}
+CalendarDatesController._sampleWeek = new Array();
+(() => {
+    CalendarDatesController.generateWeek();
+})();
+__decorate([
+    memoizeExpiring(60000)
+], CalendarDatesController, "today", null);

package/dist/selection/DateList.d.ts

@@ -2,7 +2,7 @@ import { Component, type HTMLTemplateResult } from '@a11d/lit';
 export declare abstract class DateList extends Component {
     readonly change: EventDispatcher<DateTime>;
     readonly navigate: EventDispatcher<DateTime>;
-    navigatingValue: DateTime;
+    navigationDate: DateTime;
     value?: DateTime;
     private readonly selector;
     private readonly items;
@@ -16,7 +16,7 @@ export declare abstract class DateList extends Component {
     private _navigateOnScroll;
     get navigateOnScroll(): boolean;
     set navigateOnScroll(value: boolean);
-    protected handleScroll(): void;
+    protected handleScroll(e: Event): void;
     protected abstract get listItemsTemplate(): HTMLTemplateResult;
 }
 //# sourceMappingURL=DateList.d.ts.map

package/dist/selection/DateList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateList.d.ts","sourceRoot":"","sources":["../../selection/DateList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,kBAAkB,EAA6D,MAAM,WAAW,CAAA;AAGzH,8BAAsB,QAAS,SAAQ,SAAS;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAC3C,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAEP,eAAe,EAAG,QAAQ,CAAA;IAC7C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAExB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAc;IACtB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA4B;IACpC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAoB;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAoB;IAE9F,IAAI,IAAI,WAAe;IAEvB,WAAoB,MAAM,kCA+BzB;cAEkB,SAAS;IAI5B,cAAuB,QAAQ,uBAiB9B;YAEa,cAAc;IAM5B,OAAO,CAAC,iBAAiB,CAAQ;IACjC,IAAI,gBAAgB,YAAoC;IACxD,IAAI,gBAAgB,CAAC,KAAK,SAAA,EAMzB;IAID,SAAS,CAAC,YAAY;IAYtB,SAAS,CAAC,QAAQ,KAAK,iBAAiB,IAAI,kBAAkB,CAAA;CAC9D"}
+{"version":3,"file":"DateList.d.ts","sourceRoot":"","sources":["../../selection/DateList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,kBAAkB,EAA6D,MAAM,WAAW,CAAA;AAGzH,8BAAsB,QAAS,SAAQ,SAAS;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAC3C,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAEP,cAAc,EAAG,QAAQ,CAAA;IAC5C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAExB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAc;IACtB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA4B;IACpC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAoB;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAoB;IAE9F,IAAI,IAAI,WAAe;IAEvB,WAAoB,MAAM,kCA+BzB;cAEkB,SAAS;IAI5B,cAAuB,QAAQ,uBAkB9B;YAEa,cAAc;IAM5B,OAAO,CAAC,iBAAiB,CAAQ;IACjC,IAAI,gBAAgB,YAAoC;IACxD,IAAI,gBAAgB,CAAC,KAAK,SAAA,EAMzB;IAID,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAe/B,SAAS,CAAC,QAAQ,KAAK,iBAAiB,IAAI,kBAAkB,CAAA;CAC9D"}

package/dist/selection/DateList.js

@@ -13,7 +13,8 @@ export class DateList extends Component {
 			}
 
 			mo-scroller {
-				min-width: 70px;
+				min-width: 50px;
+				scrollbar-width: none;
 			}
 
 			.selector {
@@ -27,14 +28,13 @@ export class DateList extends Component {
 			}
 
 			.pad {
-				height: 130px;
+				height: 200px;
 			}
 
 			mo-selectable-list-item {
 				min-height: 32px;
 				padding-block: 8px;
 				scroll-snap-align: center;
-				scroll-snap-stop: always;
 			}
 		`;
     }
@@ -42,10 +42,11 @@ export class DateList extends Component {
         this.scrollIntoItem('navigating', 'instant');
     }
     get template() {
-        return this.navigatingValue === undefined ? html.nothing : html `
+        return this.navigationDate === undefined ? html.nothing : html `
 			<div class='selector'></div>
 			<mo-scroller snapType='y mandatory'
 				@scroll=${this.handleScroll}
+				@scrollend=${this.handleScroll}
 				@mouseenter=${() => this.navigateOnScroll = true}
 				@mouseleave=${() => this.navigateOnScroll = false}
 				@touchstart=${() => this.navigateOnScroll = true}
@@ -73,7 +74,10 @@ export class DateList extends Component {
             setTimeout(() => this._navigateOnScroll = value, 100);
         }
     }
-    handleScroll() {
+    handleScroll(e) {
+        if (e.type === 'scroll' && 'onscrollend' in HTMLElement.prototype) {
+            return;
+        }
         if (!this.navigateOnScroll) {
             return;
         }
@@ -93,7 +97,7 @@ __decorate([
 ], DateList.prototype, "navigate", void 0);
 __decorate([
     property({ type: Object, event: 'navigate' })
-], DateList.prototype, "navigatingValue", void 0);
+], DateList.prototype, "navigationDate", void 0);
 __decorate([
     property({ type: Object })
 ], DateList.prototype, "value", void 0);

package/dist/selection/HourList.js

@@ -4,11 +4,11 @@ import { DateList } from './DateList.js';
 let HourList = class HourList extends DateList {
     get listItemsTemplate() {
         return html `
-			${[...range(0, this.navigatingValue.hoursInDay)].map(hour => html `
+			${[...range(0, this.navigationDate.hoursInDay)].map(hour => html `
 				<mo-selectable-list-item
 					?selected=${this.value?.hour === hour}
-					?data-navigating=${this.navigatingValue.hour === hour}
-					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ 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>
 			`)}

package/dist/selection/MinuteList.js

@@ -7,8 +7,8 @@ let MinuteList = class MinuteList extends DateList {
 			${[...range(0, 60)].map(minute => html `
 				<mo-selectable-list-item
 					?selected=${this.value?.minute === minute}
-					?data-navigating=${this.navigatingValue.minute === minute}
-					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ minute }))}
+					?data-navigating=${this.navigationDate.minute === minute}
+					@navigate=${() => this.navigate.dispatch(this.navigationDate.with({ minute }))}
 					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ minute }))}
 				>${minute.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
 			`)}

package/dist/selection/SecondList.js

@@ -7,8 +7,8 @@ let SecondList = class SecondList extends DateList {
 			${[...range(0, 60)].map(second => html `
 				<mo-selectable-list-item
 					?selected=${this.value?.second === second}
-					?data-navigating=${this.navigatingValue.second === second}
-					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ second }))}
+					?data-navigating=${this.navigationDate.second === second}
+					@navigate=${() => this.navigate.dispatch(this.navigationDate.with({ second }))}
 					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ second }))}
 				>${second.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
 			`)}

package/dist/selection/index.d.ts

@@ -1,7 +1,5 @@
-export * from './MonthList.js';
-export * from './YearList.js';
+export * from './Calendar.js';
 export * from './HourList.js';
 export * from './MinuteList.js';
 export * from './SecondList.js';
-export * from './calendar/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/selection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../selection/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../selection/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA"}

package/dist/selection/index.js

@@ -1,6 +1,4 @@
-export * from './MonthList.js';
-export * from './YearList.js';
+export * from './Calendar.js';
 export * from './HourList.js';
 export * from './MinuteList.js';
 export * from './SecondList.js';
-export * from './calendar/index.js';