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

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
  *
@@ -10,8 +10,8 @@ export declare class FieldDateTime extends FieldDateTimeBase<Date | undefined> {
     label: string;
     value?: Date;
     protected get placeholder(): string;
-    protected resetNavigatingDate(): void;
-    protected get calendarTemplate(): import("lit-html").HTMLTemplateResult;
+    protected resetNavigationDate(): void;
+    protected get calendarValue(): import("@3mo/date-time/DateTimeRange.js").DateTimeRange;
     protected handleSelectedDateChange(date: DateTime, precision: FieldDateTimePrecision): void;
     protected valueToInputValue(value: Date | undefined): string;
     protected inputValueToValue(value: string): import("@3mo/date-time/DateTime.js").DateTime | undefined;

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,aAAa,4DAE1B;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

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
-import { component, html, property } from '@a11d/lit';
+import { component, 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',
@@ -29,19 +28,15 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
     get placeholder() {
         return new DateTime().format(this.formatOptions);
     }
-    resetNavigatingDate() {
-        this.navigatingDate = this.selectedDate ?? new DateTime();
+    resetNavigationDate() {
+        this.navigationDate = this.selectedDate ?? new DateTime();
     }
-    get calendarTemplate() {
-        return html `
-			<mo-selectable-calendar
-				.navigatingValue=${this.navigatingDate}
-				.value=${new DateTimeRange(this.selectedDate, this.selectedDate)}
-				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
-			></mo-selectable-calendar>
-		`;
+    get calendarValue() {
+        return new DateTimeRange(this.selectedDate, this.selectedDate);
     }
     handleSelectedDateChange(date, precision) {
+        const { hour, minute, second } = this.navigationDate;
+        date = date.with({ hour, minute, second });
         this.value = !date ? undefined : this.precision.getRange(date).start;
         super.handleSelectedDateChange(date, precision);
     }

package/dist/FieldDateTimeBase.d.ts

@@ -1,7 +1,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
@@ -13,7 +13,8 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     pickerHidden: boolean;
     shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
     precision: FieldDateTimePrecision;
-    navigatingDate: import("@3mo/date-time/DateTime.js").DateTime;
+    navigationDate: import("@3mo/date-time/DateTime.js").DateTime;
+    protected readonly calendar?: Calendar;
     protected connected(): void;
     protected disconnected(): void;
     private handleLanguageChange;
@@ -21,25 +22,23 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected abstract get selectedDate(): DateTime | undefined;
     protected get formatOptions(): Intl.DateTimeFormatOptions;
     protected valueUpdated(): void;
-    protected abstract resetNavigatingDate(): void;
+    protected abstract resetNavigationDate(): void;
     protected handleChange(value?: T, e?: Event): void;
     protected get isActive(): boolean;
     protected get placeholder(): string;
     static get styles(): import("@a11d/lit").CSSResult;
-    protected get template(): HTMLTemplateResult;
-    protected get endSlotTemplate(): HTMLTemplateResult;
-    protected get inputTemplate(): HTMLTemplateResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+    protected get endSlotTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get inputTemplate(): import("lit-html").HTMLTemplateResult;
     protected abstract inputValueToValue(value: string): T | undefined;
     protected abstract valueToInputValue(value: T | undefined): string;
     private get clearIconButtonTemplate();
-    protected get calendarIconButtonTemplate(): HTMLTemplateResult;
-    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;
+    protected get calendarIconButtonTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get popoverTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get popoverContentTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get dateTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get calendarTemplate(): import("lit-html").HTMLTemplateResult;
+    protected abstract get calendarValue(): DateTimeRange | undefined;
     private get timeTemplate();
     private get hourListTemplate();
     private get minuteListTemplate();

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;cAErB,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,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":"AAEA,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,0CAK9B;IAED,cAAuB,eAAe,0CAMrC;IAED,cAAuB,aAAa,0CAanC;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,0CAOvC;IAED,SAAS,KAAK,eAAe,0CAS5B;IAED,SAAS,KAAK,sBAAsB,0CAOnC;IAED,SAAS,KAAK,YAAY,0CAEzB;IAED,SAAS,KAAK,gBAAgB,0CAQ7B;IAED,SAAS,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,GAAG,SAAS,CAAA;IAEjE,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';
 /**
@@ -15,9 +15,9 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.pickerHidden = false;
         this.shortcutReferenceDate = new DateTime;
         this.precision = FieldDateTimePrecision.Minute;
-        this.navigatingDate = new DateTime();
+        this.navigationDate = new DateTime();
         this.handleLanguageChange = () => {
-            this.navigatingDate = new DateTime(this.navigatingDate);
+            this.navigationDate = new DateTime(this.navigationDate);
         };
         this.calendarIconButtonIcon = 'today';
     }
@@ -36,7 +36,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
     }
     valueUpdated() {
         super.valueUpdated();
-        this.resetNavigatingDate();
+        this.resetNavigationDate();
     }
     handleChange(value, e) {
         super.handleChange(value, e);
@@ -79,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);
 			}
@@ -145,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?.setNavigatingValue(this.navigationDate)) })}
+			>
 				${cache(!this.open ? html.nothing : this.popoverContentTemplate)}
 			</mo-popover>
 		`;
@@ -159,52 +162,35 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get dateTemplate() {
-        return html `
-			${this.yearListTemplate}
-			${this.monthListTemplate}
-			${this.dayTemplate}
-		`;
+        return this.calendarTemplate;
     }
-    get yearListTemplate() {
+    get calendarTemplate() {
         return html `
-			<mo-year-list
-				.navigatingValue=${bind(this, 'navigatingDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Year)}
-			></mo-year-list>
+			<mo-calendar
+				.precision=${this.precision}
+				.value=${this.calendarValue}
+				@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
+			></mo-calendar>
 		`;
     }
-    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;
-    }
     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.navigationDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
+					${this.navigationDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
+				</div>
 			</mo-flex>
 		`;
     }
     get hourListTemplate() {
         return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
 			<mo-hour-list style='flex: 1'
-				.navigatingValue=${bind(this, 'navigatingDate')}
+				.navigationDate=${bind(this, 'navigationDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
 			></mo-hour-list>
@@ -213,7 +199,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
     get minuteListTemplate() {
         return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
 			<mo-minute-list style='flex: 1'
-				.navigatingValue=${bind(this, 'navigatingDate')}
+				.navigationDate=${bind(this, 'navigationDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
 			></mo-minute-list>
@@ -222,7 +208,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
     get secondListTemplate() {
         return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
 			<mo-second-list style='flex: 1'
-				.navigatingValue=${bind(this, 'navigatingDate')}
+				.navigationDate=${bind(this, 'navigationDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
 			></mo-second-list>
@@ -249,4 +235,7 @@ __decorate([
 ], FieldDateTimeBase.prototype, "precision", void 0);
 __decorate([
     state()
-], FieldDateTimeBase.prototype, "navigatingDate", void 0);
+], FieldDateTimeBase.prototype, "navigationDate", 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"
@@ -20,11 +20,11 @@ export declare class FieldDateTimeRange extends FieldDateTimeBase<DateTimeRange
     label: string;
     selection: FieldDateRangeSelection;
     value?: DateTimeRange;
-    protected resetNavigatingDate(): void;
+    protected resetNavigationDate(): void;
     static get styles(): import("@a11d/lit").CSSResult;
     protected calendarIconButtonIcon: MaterialIcon;
     protected get placeholder(): string;
-    protected get calendarTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get calendarValue(): import("@3mo/date-time/DateTimeRange.js").DateTimeRange | undefined;
     protected get popoverContentTemplate(): import("lit-html").HTMLTemplateResult;
     protected get popoverToolbarTemplate(): import("lit-html").HTMLTemplateResult;
     private get startEndTabBarTemplate();

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,aAAa,wEAE1B;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',
@@ -33,10 +32,10 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
         this.calendarIconButtonIcon = 'date_range';
     }
     get selectedDate() { return this.selection === FieldDateRangeSelection.Start ? this.value?.start : this.value?.end; }
-    resetNavigatingDate() {
-        this.navigatingDate = this.selection === FieldDateRangeSelection.Start
-            ? this.value?.start ?? this.navigatingDate
-            : this.value?.end ?? this.navigatingDate;
+    resetNavigationDate() {
+        this.navigationDate = this.selection === FieldDateRangeSelection.Start
+            ? this.value?.start ?? this.navigationDate
+            : this.value?.end ?? this.navigationDate;
     }
     static get styles() {
         return css `
@@ -57,15 +56,8 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     get placeholder() {
         return new DateTimeRange(new DateTime().subtract({ years: 1 }), new DateTime()).format(this.formatOptions);
     }
-    get calendarTemplate() {
-        return html `
-			<mo-selectable-calendar
-				data-selection=${this.selection}
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.value}
-				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
-			></mo-selectable-calendar>
-		`;
+    get calendarValue() {
+        return this.value;
     }
     get popoverContentTemplate() {
         return html `
@@ -81,7 +73,7 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     get startEndTabBarTemplate() {
         return html `
 			<mo-flex>
-				<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigatingDate() })}>
+				<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigationDate() })}>
 					<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
 					<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
 				</mo-tab-bar>
@@ -89,6 +81,8 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
 		`;
     }
     handleSelectedDateChange(date, precision) {
+        const { hour, minute, second } = this.navigationDate;
+        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)