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

package/dist/selection/Calendar.js

@@ -1,7 +1,8 @@
 var Calendar_1;
 import { __decorate } from "tslib";
-import { Component, css, component, html, property, event, repeat, state } from '@a11d/lit';
+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.
  */
@@ -9,7 +10,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
     constructor() {
         super(...arguments);
         this.includeWeek = false;
-        this.view = 'day';
+        this.view = FieldDateTimePrecision.Day;
         this.datesController = new CalendarDatesController(this);
         this.handleItemClick = (date, precision) => {
             return () => {
@@ -20,10 +21,10 @@ let Calendar = Calendar_1 = class Calendar extends Component {
                 else {
                     const nextView = this.view !== precision
                         ? precision
-                        : this.view === 'year'
-                            ? 'month'
-                            : this.view === 'month'
-                                ? 'day'
+                        : this.view === FieldDateTimePrecision.Year
+                            ? FieldDateTimePrecision.Month
+                            : this.view === FieldDateTimePrecision.Month
+                                ? FieldDateTimePrecision.Day
                                 : this.view;
                     this.setView(nextView, date);
                 }
@@ -32,45 +33,47 @@ let Calendar = Calendar_1 = class Calendar extends Component {
     }
     get navigationDate() { return this.datesController.navigationDate; }
     async setNavigatingValue(date, behavior = 'instant') {
+        this.datesController.disableObservers = true;
         this.datesController.navigationDate = date;
         await this.updateComplete;
-        this.scrollToNavigatingItem(behavior);
-    }
-    scrollToNavigatingItem(behavior = 'instant') {
-        this.renderRoot
-            .querySelector(`.${this.view}[data-navigating]`)
+        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, navigatingDate = this.datesController.navigationDate) {
+    setView(view, navigationDate = this.datesController.navigationDate) {
         this.view = view;
-        this.setNavigatingValue(navigatingDate);
+        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;
 			}
 
-			mo-scroller {
+			.scroller {
 				height: min(450px, 100vh);
 
-				&::part(container) {
-					display: grid;
-					position: relative;
-					scrollbar-width: none;
-					overflow-x: hidden;
-					scroll-behavior: smooth;
-				}
+				display: grid;
+				position: relative;
+				scrollbar-width: none;
+				overflow-x: hidden;
+				scroll-behavior: smooth;
 
-				&[data-view=day]::part(container) {
+				&[data-view=${day}] {
 					grid-template-columns: repeat(1, 1fr);
 				}
 
-				&[data-view=month]::part(container) {
+				&[data-view=${month}] {
 					grid-template-columns: repeat(3, 1fr);
 				}
 
-				&[data-view=year]::part(container) {
+				&[data-view=${year}] {
 					grid-template-columns: repeat(5, 1fr);
 				}
 			}
@@ -108,7 +111,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
 			}
 
 			/* Headings */
-			.year[data-view=month], .month[data-view=day] {
+			.year[data-view=${month}], .month[data-view=${day}] {
 				font-size: 1.125rem;
 				font-weight: 500;
 				height: 2rem;
@@ -116,7 +119,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
 			}
 
 			/* Selection */
-			.year[data-view=year], .month[data-view=month], .day {
+			.year[data-view=${year}], .month[data-view=${month}], .day {
 				opacity: 0.875;
 				font-size: 0.94rem;
 				cursor: pointer;
@@ -124,10 +127,10 @@ let Calendar = Calendar_1 = class Calendar extends Component {
 			}
 
 			.year {
-				&[data-view=day] {
+				&[data-view=${day}] {
 					display: none;
 				}
-				&:not([data-view=year]) {
+				&:not([data-view=${year}]) {
 					grid-column: -1 / 1;
 					border-block-start: 1px solid var(--mo-color-transparent-gray-3);
 				}
@@ -137,7 +140,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
 			.month-container {
 				width: 100%;
 				position: relative;
-				&[data-view=day] {
+				&[data-view=${day}] {
 					&::before {
 						content: ' ';
 						position: absolute;
@@ -164,7 +167,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
 					margin-block-start: -0.375rem;
 				}
 
-				&[data-view=month] {
+				&[data-view=${month}] {
 					& > mo-grid {
 						display: none;
 					}
@@ -210,25 +213,25 @@ let Calendar = Calendar_1 = class Calendar extends Component {
     }
     get template() {
         return html `
-			<mo-scroller data-view=${this.view}>
+			<div class='scroller' data-view=${this.view.key}>
 				${repeat(this.datesController.data, d => d.toString(), d => html `
 					${this.getYearTemplate(d)}
 					${this.getMonthTemplate(d)}
 				`)}
-			</mo-scroller>
+			</div>
 		`;
     }
     getYearTemplate(date) {
         return date.dayOfYear !== 1 ? html.nothing : html `
 			<div class='year' role='button'
-				data-view=${this.view}
-				?data-navigating=${this.isNavigating(date, 'year')}
-				?data-now=${this.isNow(date, 'year')}
-				?data-start=${this.isStart(date, 'year')}
-				?data-end=${this.isEnd(date, 'year')}
-				?data-in-range=${this.isInRange(date, 'year')}
-				@click=${this.handleItemClick(date, 'year')}
-				${this.datesController.observerIntersectionNavigation(date, 'month', 'year')}
+				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>
@@ -253,40 +256,40 @@ let Calendar = Calendar_1 = class Calendar extends Component {
 		`;
     }
     getMonthTemplate(date) {
-        return this.view === 'year' || date.day !== 1 ? html.nothing : html `
-			<mo-flex class='month-container' data-view=${this.view}>
+        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}
-					?data-navigating=${this.isNavigating(date, 'month')}
-					?data-now=${this.isNow(date, 'month')}
-					?data-start=${this.isStart(date, 'month')}
-					?data-end=${this.isEnd(date, 'month')}
-					?data-in-range=${this.isInRange(date, 'month')}
-					@click=${this.handleItemClick(date, 'month')}
-					${this.datesController.observerIntersectionNavigation(date, 'day')}
+					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 === 'day' ? date.format({ year: 'numeric', month: 'long' }) : date.format({ month: 'long' })}
+					${this.view === FieldDateTimePrecision.Day ? date.format({ year: 'numeric', month: 'long' }) : date.format({ month: 'long' })}
 				</div>
-				<mo-grid autoRows='var(--mo-calendar-item-size)' columns=${this.view === 'day' ? this.columns : 'auto'}>
-					${this.view !== 'day' ? html.nothing : Calendar_1.weekDaysTemplate}
+				<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 === 'month' ? html.nothing : html `
+        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, 'day')}
-				?data-now=${this.isNow(day, 'day')}
-				?data-start=${this.isStart(day, 'day')}
-				?data-end=${this.isEnd(day, 'day')}
-				?data-in-range=${this.isInRange(day, 'day')}
-				@click=${this.handleItemClick(day, '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>
@@ -295,18 +298,18 @@ let Calendar = Calendar_1 = class Calendar extends Component {
     isNavigating(date, precision) {
         return this.view === precision
             && this.navigationDate.year === date.year
-            && (precision === 'year' || this.navigationDate.month === date.month)
-            && (precision !== 'day' || this.navigationDate.day === date.day);
+            && (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 === 'year' || left.month === right.month)
-            && (precision !== 'day' || left.day === right.day);
+            && (precision === FieldDateTimePrecision.Year || left.month === right.month)
+            && (precision !== FieldDateTimePrecision.Day || left.day === right.day);
     }
     isLower(precision, left, right) {
         return left.year < right.year
-            || (precision !== 'year' && left.year === right.year && left.month < right.month)
-            || (precision === 'day' && left.year === right.year && left.month === right.month && left.day < right.day);
+            || (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);
@@ -330,7 +333,7 @@ __decorate([
     property({ type: Object })
 ], Calendar.prototype, "value", void 0);
 __decorate([
-    property({ updated() { this.setView(this.precision); } })
+    property({ type: Object, updated() { this.setView(this.precision); } })
 ], Calendar.prototype, "precision", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/selection/CalendarDatesController.d.ts

@@ -1,5 +1,6 @@
 import { Controller, type DirectiveResult } from '@a11d/lit';
-import type { Calendar, DatePrecision } from './Calendar.js';
+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;
@@ -7,7 +8,8 @@ export declare class CalendarDatesController extends Controller {
     private static _sampleWeek;
     static get sampleWeek(): ReadonlyArray<DateTime>;
     private static generateWeek;
-    observerIntersectionNavigation(date: DateTime, ...views: Array<DatePrecision>): DirectiveResult<any>;
+    disableObservers: boolean;
+    observerIntersectionNavigation(date: DateTime, ...views: Array<FieldDateTimePrecision>): DirectiveResult<any>;
     constructor(host: Calendar);
     private days;
     private months;

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

@@ -1 +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,aAAa,EAAE,MAAM,eAAe,CAAA;AAE5D,qBAAa,uBAAwB,SAAQ,UAAU;aAgCxB,IAAI,EAAE,QAAQ;IA9B5C,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,8BAA8B,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;gBAQ/C,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"}
+{"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

@@ -2,23 +2,24 @@ 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 = 'days') {
+    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)];
+        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 (data.some(entry => entry.isIntersecting)) {
+            if (!this.disableObservers && data.some(entry => entry.isIntersecting)) {
                 this.navigationDate = date;
             }
         });
@@ -26,6 +27,7 @@ export class CalendarDatesController extends Controller {
     constructor(host) {
         super(host);
         this.host = host;
+        this.disableObservers = false;
         this.days = new Array();
         this.months = new Array();
         this.years = new Array();
@@ -33,9 +35,9 @@ export class CalendarDatesController extends Controller {
     }
     get data() {
         switch (this.host.view) {
-            case 'year':
+            case FieldDateTimePrecision.Year:
                 return this.years;
-            case 'month':
+            case FieldDateTimePrecision.Month:
                 return this.months;
             default:
                 return this.days;
@@ -45,17 +47,17 @@ export class CalendarDatesController extends Controller {
     set navigationDate(value) {
         let changed = false;
         const daysOffset = 75;
-        if (this.host.view === 'day' && (!this.days.length || value.isBefore(this.days.at(daysOffset)) || value.isAfter(this.days.at(-daysOffset)))) {
+        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 === 'month' && (!this.months.length || value.isBefore(this.months.at(monthsOffset)) || value.isAfter(this.months.at(-monthsOffset)))) {
+        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 === 'year' && (!this.years.length || value.isBefore(this.years.at(yearsOffset)) || value.isAfter(this.years.at(-yearsOffset)))) {
+        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;
         }

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;

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,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"}
+{"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

@@ -42,7 +42,7 @@ 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}
@@ -97,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>
 			`)}