@3mo/date-time-fields 0.5.12-preview.2 → 0.7.0

package/dist/FieldDateTime.d.ts

@@ -5,11 +5,11 @@ import { FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.j
  * @i18n "Date & Time"
  */
 export declare class FieldDateTime extends FieldDateTimeBase<Date | undefined> {
-    protected get navigatingDate(): import("@3mo/date-time/DateTime.js").DateTime;
     protected get selectedDate(): import("@3mo/date-time/DateTime.js").DateTime | undefined;
     label: string;
     value?: Date;
     protected get placeholder(): string;
+    protected resetNavigatingDate(): void;
     protected get calendarTemplate(): import("lit-html").HTMLTemplateResult;
     protected handleSelectedDateChange(date: DateTime, precision: FieldDateTimePrecision): void;
     protected valueToInputValue(value: Date | undefined): string;

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,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAOlF;;;;GAIG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,cAAc,kDAAoE;IAChG,SAAS,KAAK,YAAY,8DAA+D;IAEpE,KAAK,SAAmB;IACjB,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,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,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAOlF;;;;GAIG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,YAAY,8DAA+D;IAEpE,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"}

package/dist/FieldDateTime.js

@@ -16,11 +16,13 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         super(...arguments);
         this.label = t('Date & Time');
     }
-    get navigatingDate() { return this.value ? new DateTime(this.value) : new DateTime(); }
     get selectedDate() { return this.value ? new DateTime(this.value) : undefined; }
     get placeholder() {
         return new DateTime().format(this.formatOptions);
     }
+    resetNavigatingDate() {
+        this.navigatingDate = this.selectedDate ?? new DateTime();
+    }
     get calendarTemplate() {
         return html `
 			<mo-selectable-calendar

package/dist/FieldDateTimeBase.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLTemplateResult } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
-import type { MaterialIcon } from '@3mo/icon';
+import { type MaterialIcon } from '@3mo/icon';
 export declare enum FieldDateTimePrecision {
     Year = "year",
     Month = "month",
@@ -20,14 +20,14 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     pickerHidden: boolean;
     shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
     precision: FieldDateTimePrecision;
-    private readonly smQuery;
-    private lastValue?;
+    navigatingDate: import("@3mo/date-time/DateTime.js").DateTime;
     protected readonly calendarIconButtonIcon: MaterialIcon;
-    protected abstract get navigatingDate(): DateTime;
     protected abstract get selectedDate(): DateTime | undefined;
     protected get formatOptions(): Intl.DateTimeFormatOptions;
     protected floorToPrecision(date: DateTime): import("@3mo/date-time/DateTime.js").DateTime;
     protected ceilToPrecision(date: DateTime): import("@3mo/date-time/DateTime.js").DateTime;
+    protected valueUpdated(): void;
+    protected abstract resetNavigatingDate(): void;
     protected handleChange(value?: T, e?: Event): void;
     protected get isActive(): boolean;
     protected get placeholder(): string;
@@ -40,7 +40,6 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected get calendarIconButtonTemplate(): HTMLTemplateResult;
     protected get popoverTemplate(): HTMLTemplateResult;
     protected get popoverContentTemplate(): HTMLTemplateResult;
-    protected get compactPopoverContentTemplate(): HTMLTemplateResult;
     protected get dateTemplate(): HTMLTemplateResult;
     private get yearListTemplate();
     private get monthListTemplate();

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,EAA4D,MAAM,WAAW,CAAA;AAE7G,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,oBAAY,sBAAsB;IACjC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;CACjB;AAcD;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAWrE,IAAI,UAAQ;IACc,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACpD,SAAS,yBAAgC;IAErD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuD;IAE/E,OAAO,CAAC,SAAS,CAAC,CAAG;IAErB,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,cAAc,IAAI,QAAQ,CAAA;IAEjD,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAYxD;IAED,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAWzC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ;cAWrB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAwDzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAKrC;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,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBA0B5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,6BAA6B,uBAW1C;IAED,SAAS,KAAK,YAAY,uBAMzB;IAED,OAAO,KAAK,gBAAgB,GAqB3B;IAED,OAAO,KAAK,iBAAiB,GA0B5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAyGvB;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;CAKpF"}
+{"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;AAE7C,oBAAY,sBAAsB;IACjC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;CACjB;AAcD;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACpD,SAAS,yBAAgC;IAE5C,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,CAYxD;IAED,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAWzC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ;cAWrB,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,kCAwCzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAKrC;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,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"}

package/dist/FieldDateTimeBase.js

@@ -1,6 +1,5 @@
 import { __decorate } from "tslib";
-import { cache, css, html, live, property, style, bind, ifDefined } from '@a11d/lit';
-import { MediaQueryController } from '@3mo/media-query-observer';
+import { cache, css, html, live, property, style, bind, state } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
 export var FieldDateTimePrecision;
 (function (FieldDateTimePrecision) {
@@ -35,7 +34,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.pickerHidden = false;
         this.shortcutReferenceDate = new DateTime;
         this.precision = FieldDateTimePrecision.Minute;
-        this.smQuery = new MediaQueryController(this, '(max-width: 576px)');
+        this.navigatingDate = new DateTime();
         this.calendarIconButtonIcon = 'today';
     }
     get formatOptions() {
@@ -71,6 +70,10 @@ export class FieldDateTimeBase extends InputFieldComponent {
             .with({ day: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Day) ? date.daysInMonth : date.day })
             .with({ hour: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Hour) ? date.hoursInDay : date.hour });
     }
+    valueUpdated() {
+        super.valueUpdated();
+        this.resetNavigatingDate();
+    }
     handleChange(value, e) {
         super.handleChange(value, e);
         this.inputStringValue = this.valueToInputValue(value);
@@ -120,22 +123,6 @@ export class FieldDateTimeBase extends InputFieldComponent {
 			mo-field[active]:not([dense]) input::placeholder {
 				color: var(--mo-color-gray);
 			}
-
-			@media (width <= 576px) {
-				mo-popover {
-					left: 0 !important;
-					bottom: 0 !important;
-					top: unset !important;
-					right: unset !important;
-					width: 100% !important;
-					border-radius: 12px 12px 0 0;
-
-					mo-selectable-calendar,
-          mo-selectable-range-calendar {
-          	--mo-calendar-day-size: calc((100vw - 20px) / 7);
-          }
-				}
-			}
 		`;
     }
     get template() {
@@ -154,10 +141,10 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return html `
 			<input
 				part='input'
-				?readonly=${this.readonly || this.smQuery.matches}
+				?readonly=${this.readonly}
 				?required=${this.required}
 				?disabled=${this.disabled}
-				placeholder=${ifDefined(this.smQuery.matches ? undefined : this.placeholder)}
+				placeholder=${this.placeholder}
 				.value=${live(this.inputStringValue || '')}
 				@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
 				@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
@@ -166,59 +153,27 @@ export class FieldDateTimeBase extends InputFieldComponent {
     }
     get calendarIconButtonTemplate() {
         return this.pickerHidden ? html.nothing : html `
-			<mo-icon tabindex='-1' dense slot='end'
+			<mo-icon tabindex='-1' slot='end'
 				icon=${this.calendarIconButtonIcon}
 				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginTop: '2px', cursor: 'pointer', userSelect: 'none' })}
 			></mo-icon>
 		`;
     }
     get popoverTemplate() {
-        if (this.pickerHidden) {
-            return html.nothing;
-        }
-        if (this.smQuery.matches) {
-            return html `
-				<mo-popover tabindex='-1' fixed .anchor=${this} ?open=${bind(this, 'open')}>
-					<mo-flex>
-						<mo-icon-button icon='close'
-							${style({ color: 'var(--mo-color-gray)', margin: '12px 16px -8px auto' })}
-							@click=${() => {
-                this.pickerHidden = true;
-                this.open = false;
-                setTimeout(() => this.pickerHidden = false, 0);
-            }}
-						></mo-icon-button>
-						${cache(!this.open ? html.nothing : this.popoverContentTemplate)}
-					</mo-flex>
-				</mo-popover>
-			 `;
-        }
-        return html `
+        return this.pickerHidden ? html.nothing : html `
 			<mo-popover tabindex='-1' fixed .anchor=${this} ?open=${bind(this, 'open')}>
 				${cache(!this.open ? html.nothing : this.popoverContentTemplate)}
 			</mo-popover>
 		`;
     }
     get popoverContentTemplate() {
-        return this.smQuery.matches ? this.compactPopoverContentTemplate : html `
+        return html `
 			<mo-flex id='selector' direction='horizontal' style='height: 100%'>
 				${this.dateTemplate}
 				${this.timeTemplate}
 			</mo-flex>
 		`;
     }
-    get compactPopoverContentTemplate() {
-        return html `
-			<mo-flex alignItems='center' ${style({ paddingBlock: '10px' })}>
-				<mo-flex direction='horizontal' gap='8px' ${style({ width: 'calc(100% - 20px)' })}>
-					${this.monthListTemplate}
-					${this.yearListTemplate}
-				</mo-flex>
-				${this.dayTemplate}
-				${this.timeTemplate}
-			</mo-flex>
-		`;
-    }
     get dateTemplate() {
         return html `
 			${this.yearListTemplate}
@@ -227,46 +182,18 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get yearListTemplate() {
-        if (this.smQuery.matches) {
-            return html `
-				<mo-field-year ${style({ width: '80px' })}
-					.value=${this.selectedDate?.getFullYear()}
-					@change=${(e) => {
-                const currentDate = this.selectedDate ?? new DateTime();
-                currentDate.setFullYear(e.detail);
-                this.handleSelectedDateChange(currentDate, FieldDateTimePrecision.Year);
-            }}
-				></mo-field-year>
-			`;
-        }
         return html `
 			<mo-year-list
-				.navigatingValue=${this.navigatingDate}
+				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Year)}
 			></mo-year-list>
 		`;
     }
     get monthListTemplate() {
-        if ([FieldDateTimePrecision.Year].includes(this.precision)) {
-            return html.nothing;
-        }
-        if (this.smQuery.matches) {
-            return html `
-				<mo-field-month ${style({ flexGrow: '1' })}
-					.navigatingDate=${this.navigatingDate}
-					.value=${this.selectedDate?.getMonth()}
-					@change=${(e) => {
-                const currentDate = this.selectedDate ?? new DateTime();
-                currentDate.setMonth(e.detail);
-                this.handleSelectedDateChange(currentDate, FieldDateTimePrecision.Month);
-            }}
-				></mo-field-month>
-			`;
-        }
-        return html `
+        return [FieldDateTimePrecision.Year].includes(this.precision) ? html.nothing : html `
 			<mo-month-list
-				.navigatingValue=${this.navigatingDate}
+				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Month)}
 			></mo-month-list>
@@ -276,95 +203,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month].includes(this.precision) ? html.nothing : this.calendarTemplate;
     }
     get timeTemplate() {
-        if ([FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision)) {
-            return html.nothing;
-        }
-        if (this.smQuery.matches) {
-            const hours = (this.selectedDate ?? this.navigatingDate).getHours();
-            const minutes = (this.selectedDate ?? this.navigatingDate).getMinutes();
-            const setHours = (hours) => {
-                const currentDate = this.selectedDate ?? new DateTime();
-                currentDate.setHours(hours);
-                this.handleSelectedDateChange(currentDate, FieldDateTimePrecision.Hour);
-            };
-            const setMinutes = (minutes) => {
-                const currentDate = this.selectedDate ?? new DateTime();
-                currentDate.setMinutes(minutes);
-                this.handleSelectedDateChange(currentDate, FieldDateTimePrecision.Minute);
-            };
-            return html `
-				<mo-flex direction='horizontal' alignItems='center'>
-					<mo-flex alignItems='center'>
-						<mo-icon-button icon='keyboard_arrow_up'
-							${style({ color: 'var(--mo-color-gray)' })}
-							@click=${() => setHours(hours - 1)}
-						></mo-icon-button>
-						<span contenteditable inputmode='decimal' ${style({ fontSize: '1.5em' })}
-							@keydown=${(e) => {
-                if (e.key.length === 1 && isNaN(Number(e.key))) {
-                    e.preventDefault();
-                }
-                if (e.key === 'Enter') {
-                    e.target?.blur();
-                }
-            }}
-							@change=${(e) => {
-                const textNode = e.target;
-                const value = Number(textNode?.innerText);
-                if (isNaN(value) || value < 0 || value > 23) {
-                    textNode.innerText = hours.toString();
-                }
-                else {
-                    setHours(value);
-                }
-            }}
-						>
-							${hours}
-						</span>
-						<mo-icon-button icon='keyboard_arrow_down'
-							${style({ color: 'var(--mo-color-gray)' })}
-							@click=${() => setHours(hours + 1)}
-						></mo-icon-button>
-					</mo-flex>
-
-					<span ${style({ fontSize: '1.5em' })}>:</span>
-
-					<mo-flex alignItems='center'>
-						<mo-icon-button icon='keyboard_arrow_up'
-							${style({ color: 'var(--mo-color-gray)' })}
-							@click=${() => setMinutes(minutes - 1)}
-						></mo-icon-button>
-						<span contenteditable inputmode='decimal' ${style({ fontSize: '1.5em' })}
-							@keydown=${(e) => {
-                if (e.key.length === 1 && isNaN(Number(e.key))) {
-                    e.preventDefault();
-                }
-                if (e.key === 'Enter') {
-                    e.target?.blur();
-                }
-            }}
-							@change=${(e) => {
-                const textNode = e.target;
-                const value = Number(textNode?.innerText);
-                if (isNaN(value) || value < 0 || value > 59) {
-                    textNode.innerText = minutes < 10 ? `0${minutes}` : minutes.toString();
-                }
-                else {
-                    setMinutes(value);
-                }
-            }}
-						>
-							${minutes < 10 ? `0${minutes}` : minutes}
-						</span>
-						<mo-icon-button icon='keyboard_arrow_down'
-							${style({ color: 'var(--mo-color-gray)' })}
-							@click=${() => setMinutes(minutes + 1)}
-						></mo-icon-button>
-					</mo-flex>
-				</mo-flex>
-			`;
-        }
-        return html `
+        return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision) ? html.nothing : html `
 			<mo-flex gap='6px'>
 				<div class='timezone'>
 					${this.navigatingDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value}
@@ -381,7 +220,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
     get hourListTemplate() {
         return html `
 			<mo-hour-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
+				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
 			></mo-hour-list>
@@ -390,7 +229,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
     get minuteListTemplate() {
         return [FieldDateTimePrecision.Hour].includes(this.precision) ? html.nothing : html `
 			<mo-minute-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
+				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
 			></mo-minute-list>
@@ -399,7 +238,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
     get secondListTemplate() {
         return [FieldDateTimePrecision.Hour, FieldDateTimePrecision.Minute].includes(this.precision) ? html.nothing : html `
 			<mo-second-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
+				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
 				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
 			></mo-second-list>
@@ -408,22 +247,12 @@ export class FieldDateTimeBase extends InputFieldComponent {
     handleSelectedDateChange(date, precision) {
         date;
         precision;
+        this.change.dispatch(this.value);
         this.requestUpdate();
     }
 }
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        updated(open, wasOpen) {
-            if (open === true && wasOpen === false) {
-                this.lastValue = this.value;
-            }
-            else if (open === false && wasOpen === true && this.lastValue !== this.value) {
-                this.change.dispatch(this.value);
-            }
-        }
-    })
+    property({ type: Boolean, reflect: true })
 ], FieldDateTimeBase.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean })
@@ -434,3 +263,6 @@ __decorate([
 __decorate([
     property()
 ], FieldDateTimeBase.prototype, "precision", void 0);
+__decorate([
+    state()
+], FieldDateTimeBase.prototype, "navigatingDate", void 0);

package/dist/FieldDateTimeRange.d.ts

@@ -15,11 +15,11 @@ declare enum FieldDateRangeSelection {
  * @i18n "End"
  */
 export declare class FieldDateTimeRange extends FieldDateTimeBase<DateTimeRange | undefined> {
-    protected get navigatingDate(): import("@3mo/date-time/DateTime.js").DateTime;
     protected get selectedDate(): import("@3mo/date-time/DateTime.js").DateTime | undefined;
     label: string;
     selection: FieldDateRangeSelection;
     value?: DateTimeRange;
+    protected resetNavigatingDate(): void;
     static get styles(): import("@a11d/lit").CSSResult;
     protected calendarIconButtonIcon: MaterialIcon;
     protected get placeholder(): string;

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;AAC7C,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAWvG,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;;GASG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,cAAc,kDAAwH;IAEpJ,SAAS,KAAK,YAAY,8DAAoG;IAEzG,KAAK,SAAc;IAC5B,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,WAAoB,MAAM,kCAkBzB;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;IAcnF,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;AAC7C,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAWvG,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,kCAiBzB;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;IAcnF,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

@@ -31,8 +31,12 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
         this.selection = FieldDateRangeSelection.Start;
         this.calendarIconButtonIcon = 'date_range';
     }
-    get navigatingDate() { return (this.selection === FieldDateRangeSelection.Start ? this.value?.start : this.value?.end) ?? new DateTime(); }
     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;
+    }
     static get styles() {
         return css `
 			${super.styles}
@@ -45,10 +49,9 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
 
 			mo-tab {
 				--mdc-tab-height: 40px;
-			}
-
-			mo-tab:not([active]) {
-				opacity: 0.5;
+				&:not([active]) {
+					opacity: 0.5;
+				}
 			}
 		`;
     }
@@ -78,7 +81,7 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     get startEndTabBarTemplate() {
         return html `
 			<mo-flex>
-				<mo-tab-bar ${bind(this, 'selection')}>
+				<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigatingDate() })}>
 					<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
 					<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
 				</mo-tab-bar>