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

package/dist/FieldDateTime.d.ts

@@ -1,5 +1,5 @@
 import { FieldDateTimeBase } from './FieldDateTimeBase.js';
-import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
+import { type FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 /**
  * @element mo-field-date-time
  *

package/dist/FieldDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTime.d.ts","sourceRoot":"","sources":["../FieldDateTime.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAOpE;;;;GAIG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,YAAY,8DAQzB;IAEoB,KAAK,SAAmB;IACjB,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,SAAS,CAAC,mBAAmB;IAI7B,SAAS,KAAK,gBAAgB,0CAQ7B;cAEkB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAK7F,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS;IAInD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGzC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,aAAa,CAAA;KACnC;CACD"}
+{"version":3,"file":"FieldDateTime.d.ts","sourceRoot":"","sources":["../FieldDateTime.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAOzE;;;;GAIG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,YAAY,8DAQzB;IAEoB,KAAK,SAAmB;IACjB,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,SAAS,CAAC,mBAAmB;IAI7B,SAAS,KAAK,gBAAgB,0CAQ7B;cAEkB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAO7F,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS;IAInD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGzC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,aAAa,CAAA;KACnC;CACD"}

package/dist/FieldDateTime.js

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { component, html, property } from '@a11d/lit';
 import { Localizer } from '@3mo/localization';
 import { FieldDateTimeBase } from './FieldDateTimeBase.js';
-import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 import { Memoize as memoize } from 'typescript-memoize';
 Localizer.dictionaries.add('de', {
     'Date & Time': 'Datum & Uhrzeit',
@@ -34,14 +33,16 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
     }
     get calendarTemplate() {
         return html `
-			<mo-selectable-calendar
-				.navigatingValue=${this.navigatingDate}
+			<mo-calendar
+				precision=${this.precision.key}
 				.value=${new DateTimeRange(this.selectedDate, this.selectedDate)}
-				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
-			></mo-selectable-calendar>
+				@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
+			></mo-calendar>
 		`;
     }
     handleSelectedDateChange(date, precision) {
+        const { hour, minute, second } = this.navigatingDate;
+        date = date.with({ hour, minute, second });
         this.value = !date ? undefined : this.precision.getRange(date).start;
         super.handleSelectedDateChange(date, precision);
     }

package/dist/FieldDateTimeBase.d.ts

@@ -2,6 +2,7 @@ import { type HTMLTemplateResult } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
 import { type MaterialIcon } from '@3mo/icon';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
+import type { Calendar } from './selection/index.js';
 /**
  * @attr open - Whether the date picker is open
  * @attr pickerHidden - Hide the date picker
@@ -14,6 +15,10 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
     precision: FieldDateTimePrecision;
     navigatingDate: import("@3mo/date-time/DateTime.js").DateTime;
+    protected readonly calendar?: Calendar;
+    protected connected(): void;
+    protected disconnected(): void;
+    private handleLanguageChange;
     protected readonly calendarIconButtonIcon: MaterialIcon;
     protected abstract get selectedDate(): DateTime | undefined;
     protected get formatOptions(): Intl.DateTimeFormatOptions;
@@ -33,9 +38,6 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected get popoverTemplate(): HTMLTemplateResult;
     protected get popoverContentTemplate(): HTMLTemplateResult;
     protected get dateTemplate(): HTMLTemplateResult;
-    private get yearListTemplate();
-    private get monthListTemplate();
-    private get dayTemplate();
     protected abstract get calendarTemplate(): HTMLTemplateResult;
     private get timeTemplate();
     private get hourListTemplate();

package/dist/FieldDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAwD,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACkC,SAAS,yBAAgC;IAElI,cAAc,gDAAiB;IAExC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCA8CzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAMrC;IAED,cAAuB,aAAa,uBAanC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,OAAO,KAAK,uBAAuB,GAYlC;IAED,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAM5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,YAAY,uBAMzB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAcvB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAMpF"}
+{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAA0E,MAAM,WAAW,CAAA;AAC3H,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEpD;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACkC,SAAS,yBAAgC;IAElI,cAAc,gDAAiB;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;cAEzC,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,oBAAoB,CAE3B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCA8CzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAMrC;IAED,cAAuB,aAAa,uBAanC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,OAAO,KAAK,uBAAuB,GAYlC;IAED,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAS5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,YAAY,uBAEzB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAavB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAMpF"}

package/dist/FieldDateTimeBase.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { cache, css, html, live, property, style, bind, state } from '@a11d/lit';
+import { cache, css, html, live, property, style, bind, state, query, ifDefined } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 /**
@@ -16,8 +16,17 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.shortcutReferenceDate = new DateTime;
         this.precision = FieldDateTimePrecision.Minute;
         this.navigatingDate = new DateTime();
+        this.handleLanguageChange = () => {
+            this.navigatingDate = new DateTime(this.navigatingDate);
+        };
         this.calendarIconButtonIcon = 'today';
     }
+    connected() {
+        Localizer.languages.change.subscribe(this.handleLanguageChange);
+    }
+    disconnected() {
+        Localizer.languages.change.unsubscribe(this.handleLanguageChange);
+    }
     get formatOptions() {
         return {
             calendar: this.selectedDate?.calendarId,
@@ -70,9 +79,9 @@ export class FieldDateTimeBase extends InputFieldComponent {
 			}
 
 			.timezone {
-				padding: 3px;
+				padding: 0.4rem;
 				font-size: small;
-				text-align: end;
+				text-align: center;
 				font-weight: 500;
 				color: var(--mo-color-gray);
 			}
@@ -136,7 +145,10 @@ export class FieldDateTimeBase extends InputFieldComponent {
     }
     get popoverTemplate() {
         return this.pickerHidden ? html.nothing : html `
-			<mo-popover tabindex='-1' .anchor=${this} target='field' ?open=${bind(this, 'open')}>
+			<mo-popover tabindex='-1'
+				.anchor=${this} target='field'
+				?open=${bind(this, 'open', { sourceUpdated: () => setTimeout(() => this.calendar?.scrollToNavigatingItem()) })}
+			>
 				${cache(!this.open ? html.nothing : this.popoverContentTemplate)}
 			</mo-popover>
 		`;
@@ -150,45 +162,19 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get dateTemplate() {
-        return html `
-			${this.yearListTemplate}
-			${this.monthListTemplate}
-			${this.dayTemplate}
-		`;
-    }
-    get yearListTemplate() {
-        return html `
-			<mo-year-list
-				.navigatingValue=${bind(this, 'navigatingDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Year)}
-			></mo-year-list>
-		`;
-    }
-    get monthListTemplate() {
-        return this.precision < FieldDateTimePrecision.Month ? html.nothing : html `
-			<mo-month-list
-				.navigatingValue=${bind(this, 'navigatingDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Month)}
-			></mo-month-list>
-		`;
-    }
-    get dayTemplate() {
-        return this.precision < FieldDateTimePrecision.Day ? html.nothing : this.calendarTemplate;
+        return this.calendarTemplate;
     }
     get timeTemplate() {
         return this.precision <= FieldDateTimePrecision.Day ? html.nothing : html `
-			<mo-flex gap='6px'>
-				<div class='timezone'>
-					${this.navigatingDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value}
-					(${this.navigatingDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value})
-				</div>
+			<mo-flex gap='0.5rem'>
 				<mo-flex direction='horizontal' style='flex: 1'>
 					${this.hourListTemplate}
 					${this.minuteListTemplate}
 					${this.secondListTemplate}
 				</mo-flex>
+				<div class='timezone' title=${ifDefined(this.navigatingDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
+					${this.navigatingDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
+				</div>
 			</mo-flex>
 		`;
     }
@@ -241,3 +227,6 @@ __decorate([
 __decorate([
     state()
 ], FieldDateTimeBase.prototype, "navigatingDate", void 0);
+__decorate([
+    query('mo-calendar')
+], FieldDateTimeBase.prototype, "calendar", void 0);

package/dist/FieldDateTimeRange.d.ts

@@ -1,6 +1,6 @@
 import { type MaterialIcon } from '@3mo/icon';
 import { FieldDateTimeBase as FieldDateTimeBase } from './FieldDateTimeBase.js';
-import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
+import { type FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 declare enum FieldDateRangeSelection {
     Start = "start",
     End = "end"

package/dist/FieldDateTimeRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAG7C,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AASpE,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;;GASG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,YAAY,8DAAoG;IAEzG,KAAK,SAAc;IAC5B,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,SAAS,CAAC,mBAAmB;IAM7B,WAAoB,MAAM,kCAezB;IAED,UAAmB,sBAAsB,EAAE,YAAY,CAAe;IAEtE,cACuB,WAAW,WAEjC;IAED,SAAS,KAAK,gBAAgB,0CAS7B;IAED,cAAuB,sBAAsB,0CAK5C;IAED,SAAS,KAAK,sBAAsB,0CAInC;IAED,OAAO,KAAK,sBAAsB,GASjC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAenF,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS;cAIzC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,kBAAkB,CAAA;KAC9C;CACD"}
+{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAG7C,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/E,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AASzE,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;;GASG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,YAAY,8DAAoG;IAEzG,KAAK,SAAc;IAC5B,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,SAAS,CAAC,mBAAmB;IAM7B,WAAoB,MAAM,kCAezB;IAED,UAAmB,sBAAsB,EAAE,YAAY,CAAe;IAEtE,cACuB,WAAW,WAEjC;IAED,SAAS,KAAK,gBAAgB,0CAQ7B;IAED,cAAuB,sBAAsB,0CAK5C;IAED,SAAS,KAAK,sBAAsB,0CAInC;IAED,OAAO,KAAK,sBAAsB,GASjC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAiBnF,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS;cAIzC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,kBAAkB,CAAA;KAC9C;CACD"}

package/dist/FieldDateTimeRange.js

@@ -3,7 +3,6 @@ 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 { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 import { DateRangeParser } from './DateRangeParser.js';
 Localizer.dictionaries.add('de', {
     'Period': 'Zeitraum',
@@ -59,12 +58,11 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     }
     get calendarTemplate() {
         return html `
-			<mo-selectable-calendar
-				data-selection=${this.selection}
-				.navigatingValue=${this.navigatingDate}
+			<mo-calendar
+				precision=${this.precision.key}
 				.value=${this.value}
-				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
-			></mo-selectable-calendar>
+				@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
+			></mo-calendar>
 		`;
     }
     get popoverContentTemplate() {
@@ -89,6 +87,8 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
 		`;
     }
     handleSelectedDateChange(date, precision) {
+        const { hour, minute, second } = this.navigatingDate;
+        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)

package/dist/custom-elements.json

@@ -3425,68 +3425,45 @@
 			]
 		},
 		{
-			"name": "mo-hour-list",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\HourList.d.ts",
+			"name": "mo-calendar",
+			"path": ".\\packages\\DateTimeFields\\dist\\selection\\Calendar.d.ts",
 			"properties": [
 				{
-					"name": "change",
+					"name": "dateClick",
 					"type": "EventDispatcher<DateTime>"
 				},
-				{
-					"name": "navigate",
-					"type": "EventDispatcher<DateTime>"
-				},
-				{
-					"name": "navigatingValue",
-					"type": "DateTime"
-				},
 				{
 					"name": "value",
-					"type": "DateTime | undefined"
+					"type": "DateTimeRange | undefined"
 				},
 				{
-					"name": "zero",
-					"type": "number"
+					"name": "precision",
+					"type": "DatePrecision"
 				},
 				{
-					"name": "navigateOnScroll",
+					"name": "includeWeek",
 					"type": "boolean"
-				}
-			]
-		},
-		{
-			"name": "mo-minute-list",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\MinuteList.d.ts",
-			"properties": [
-				{
-					"name": "change",
-					"type": "EventDispatcher<DateTime>"
 				},
 				{
-					"name": "navigate",
-					"type": "EventDispatcher<DateTime>"
+					"name": "view",
+					"type": "DatePrecision"
 				},
 				{
-					"name": "navigatingValue",
+					"name": "navigationDate",
 					"type": "DateTime"
-				},
-				{
-					"name": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "zero",
-					"type": "number"
-				},
+				}
+			],
+			"events": [
 				{
-					"name": "navigateOnScroll",
-					"type": "boolean"
+					"name": "dateClick",
+					"description": "Dispatched when a date is clicked, with the clicked date as detail.",
+					"type": "CustomEvent<DateTime>"
 				}
 			]
 		},
 		{
-			"name": "mo-month-list",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\MonthList.d.ts",
+			"name": "mo-hour-list",
+			"path": ".\\packages\\DateTimeFields\\dist\\selection\\HourList.d.ts",
 			"properties": [
 				{
 					"name": "change",
@@ -3515,8 +3492,8 @@
 			]
 		},
 		{
-			"name": "mo-second-list",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\SecondList.d.ts",
+			"name": "mo-minute-list",
+			"path": ".\\packages\\DateTimeFields\\dist\\selection\\MinuteList.d.ts",
 			"properties": [
 				{
 					"name": "change",
@@ -3545,8 +3522,8 @@
 			]
 		},
 		{
-			"name": "mo-year-list",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\YearList.d.ts",
+			"name": "mo-second-list",
+			"path": ".\\packages\\DateTimeFields\\dist\\selection\\SecondList.d.ts",
 			"properties": [
 				{
 					"name": "change",
@@ -3576,157 +3553,64 @@
 		},
 		{
 			"name": "mo-calendar",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\calendar\\Calendar.d.ts",
-			"properties": [
-				{
-					"name": "dayClick",
-					"type": "EventDispatcher<DateTime>"
-				},
-				{
-					"name": "includeWeek",
-					"type": "boolean"
-				},
-				{
-					"name": "navigatingValue",
-					"type": "DateTime"
-				}
-			],
-			"events": [
-				{
-					"name": "dayClick",
-					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
-					"type": "CustomEvent<DateTime>"
-				}
-			]
-		},
-		{
-			"name": "mo-selectable-calendar",
-			"path": ".\\packages\\DateTimeFields\\dist\\selection\\calendar\\SelectableCalendar.d.ts",
-			"properties": [
+			"path": ".\\packages\\DateTimeFields\\selection\\Calendar.ts",
+			"attributes": [
 				{
 					"name": "value",
 					"type": "DateTimeRange | undefined"
 				},
 				{
-					"name": "dayClick",
-					"type": "EventDispatcher<DateTime>"
+					"name": "precision",
+					"type": "DatePrecision"
 				},
 				{
 					"name": "includeWeek",
-					"type": "boolean"
-				},
-				{
-					"name": "navigatingValue",
-					"type": "DateTime"
-				}
-			],
-			"events": [
-				{
-					"name": "dayClick",
-					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
-					"type": "CustomEvent<DateTime>"
-				}
-			]
-		},
-		{
-			"name": "mo-hour-list",
-			"path": ".\\packages\\DateTimeFields\\selection\\HourList.ts",
-			"attributes": [
-				{
-					"name": "navigatingValue",
-					"type": "DateTime"
-				},
-				{
-					"name": "value",
-					"type": "DateTime | undefined"
+					"type": "boolean",
+					"default": "false"
 				}
 			],
 			"properties": [
 				{
-					"name": "change",
-					"type": "EventDispatcher<DateTime>"
-				},
-				{
-					"name": "navigate",
+					"name": "dateClick",
 					"type": "EventDispatcher<DateTime>"
 				},
-				{
-					"name": "navigatingValue",
-					"attribute": "navigatingValue",
-					"type": "DateTime"
-				},
 				{
 					"name": "value",
 					"attribute": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "zero",
-					"type": "number"
+					"type": "DateTimeRange | undefined"
 				},
 				{
-					"name": "navigateOnScroll",
-					"type": "boolean"
-				}
-			],
-			"events": [
-				{
-					"name": "navigate",
-					"type": "CustomEvent<DateTime>"
-				}
-			]
-		},
-		{
-			"name": "mo-minute-list",
-			"path": ".\\packages\\DateTimeFields\\selection\\MinuteList.ts",
-			"attributes": [
-				{
-					"name": "navigatingValue",
-					"type": "DateTime"
+					"name": "precision",
+					"attribute": "precision",
+					"type": "DatePrecision"
 				},
 				{
-					"name": "value",
-					"type": "DateTime | undefined"
-				}
-			],
-			"properties": [
-				{
-					"name": "change",
-					"type": "EventDispatcher<DateTime>"
+					"name": "includeWeek",
+					"attribute": "includeWeek",
+					"type": "boolean",
+					"default": "false"
 				},
 				{
-					"name": "navigate",
-					"type": "EventDispatcher<DateTime>"
+					"name": "view",
+					"type": "DatePrecision",
+					"default": "\"day\""
 				},
 				{
-					"name": "navigatingValue",
-					"attribute": "navigatingValue",
+					"name": "navigationDate",
 					"type": "DateTime"
-				},
-				{
-					"name": "value",
-					"attribute": "value",
-					"type": "DateTime | undefined"
-				},
-				{
-					"name": "zero",
-					"type": "number"
-				},
-				{
-					"name": "navigateOnScroll",
-					"type": "boolean"
 				}
 			],
 			"events": [
 				{
-					"name": "navigate",
+					"name": "dateClick",
+					"description": "Dispatched when a date is clicked, with the clicked date as detail.",
 					"type": "CustomEvent<DateTime>"
 				}
 			]
 		},
 		{
-			"name": "mo-month-list",
-			"path": ".\\packages\\DateTimeFields\\selection\\MonthList.ts",
+			"name": "mo-hour-list",
+			"path": ".\\packages\\DateTimeFields\\selection\\HourList.ts",
 			"attributes": [
 				{
 					"name": "navigatingValue",
@@ -3773,8 +3657,8 @@
 			]
 		},
 		{
-			"name": "mo-second-list",
-			"path": ".\\packages\\DateTimeFields\\selection\\SecondList.ts",
+			"name": "mo-minute-list",
+			"path": ".\\packages\\DateTimeFields\\selection\\MinuteList.ts",
 			"attributes": [
 				{
 					"name": "navigatingValue",
@@ -3821,8 +3705,8 @@
 			]
 		},
 		{
-			"name": "mo-year-list",
-			"path": ".\\packages\\DateTimeFields\\selection\\YearList.ts",
+			"name": "mo-second-list",
+			"path": ".\\packages\\DateTimeFields\\selection\\SecondList.ts",
 			"attributes": [
 				{
 					"name": "navigatingValue",
@@ -3867,97 +3751,6 @@
 					"type": "CustomEvent<DateTime>"
 				}
 			]
-		},
-		{
-			"name": "mo-calendar",
-			"path": ".\\packages\\DateTimeFields\\selection\\calendar\\Calendar.ts",
-			"attributes": [
-				{
-					"name": "includeWeek",
-					"type": "boolean",
-					"default": "false"
-				},
-				{
-					"name": "navigatingValue",
-					"type": "DateTime",
-					"default": "\"new DateTime\""
-				}
-			],
-			"properties": [
-				{
-					"name": "dayClick",
-					"type": "EventDispatcher<DateTime>"
-				},
-				{
-					"name": "includeWeek",
-					"attribute": "includeWeek",
-					"type": "boolean",
-					"default": "false"
-				},
-				{
-					"name": "navigatingValue",
-					"attribute": "navigatingValue",
-					"type": "DateTime",
-					"default": "\"new DateTime\""
-				}
-			],
-			"events": [
-				{
-					"name": "dayClick",
-					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
-					"type": "CustomEvent<DateTime>"
-				}
-			]
-		},
-		{
-			"name": "mo-selectable-calendar",
-			"path": ".\\packages\\DateTimeFields\\selection\\calendar\\SelectableCalendar.ts",
-			"attributes": [
-				{
-					"name": "value",
-					"type": "DateTimeRange | undefined"
-				},
-				{
-					"name": "includeWeek",
-					"type": "boolean",
-					"default": "false"
-				},
-				{
-					"name": "navigatingValue",
-					"type": "DateTime",
-					"default": "\"new DateTime\""
-				}
-			],
-			"properties": [
-				{
-					"name": "value",
-					"attribute": "value",
-					"type": "DateTimeRange | undefined"
-				},
-				{
-					"name": "dayClick",
-					"type": "EventDispatcher<DateTime>"
-				},
-				{
-					"name": "includeWeek",
-					"attribute": "includeWeek",
-					"type": "boolean",
-					"default": "false"
-				},
-				{
-					"name": "navigatingValue",
-					"attribute": "navigatingValue",
-					"type": "DateTime",
-					"default": "\"new DateTime\""
-				}
-			],
-			"events": [
-				{
-					"name": "dayClick",
-					"description": "Dispatched when a day is clicked, with the clicked date as detail.",
-					"type": "CustomEvent<DateTime>"
-				}
-			]
 		}
 	]
 }