@3mo/date-time-fields 0.10.0 → 0.10.2

package/dist/FieldDate.d.ts

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

package/dist/FieldDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDate.d.ts","sourceRoot":"","sources":["../FieldDate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAM/D;;;;GAIG;AACH,qBACa,SAAU,SAAQ,aAAa;IACtB,SAAS,yBAA6B;IACtC,KAAK,SAAY;CACtC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,aAAa,CAAA;KAC9B;CACD"}
+{"version":3,"file":"FieldDate.d.ts","sourceRoot":"","sources":["../FieldDate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAMpE;;;;GAIG;AACH,qBACa,SAAU,SAAQ,aAAa;IAClC,SAAS,yBAA6B;IACtC,KAAK,SAAY;CAC1B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,aAAa,CAAA;KAC9B;CACD"}

package/dist/FieldDate.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
-import { component, property } from '@a11d/lit';
+import { component } from '@a11d/lit';
 import { Localizer } from '@3mo/localization';
 import { FieldDateTime } from './FieldDateTime.js';
-import { FieldDateTimePrecision } from './FieldDateTimeBase.js';
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 Localizer.dictionaries.add('de', {
     'Date': 'Datum',
 });
@@ -18,12 +18,6 @@ let FieldDate = class FieldDate extends FieldDateTime {
         this.label = t('Date');
     }
 };
-__decorate([
-    property()
-], FieldDate.prototype, "precision", void 0);
-__decorate([
-    property()
-], FieldDate.prototype, "label", void 0);
 FieldDate = __decorate([
     component('mo-field-date')
 ], FieldDate);

package/dist/FieldDateRange.d.ts

@@ -1,4 +1,4 @@
-import { FieldDateTimePrecision } from './FieldDateTimeBase.js';
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 import { FieldDateTimeRange } from './FieldDateTimeRange.js';
 /** @element mo-field-date */
 export declare class FieldDateRange extends FieldDateTimeRange {

package/dist/FieldDateRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateRange.d.ts","sourceRoot":"","sources":["../FieldDateRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,6BAA6B;AAC7B,qBACa,cAAe,SAAQ,kBAAkB;IAChC,SAAS,yBAA6B;CAC3D;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAA;KACrC;CACD"}
+{"version":3,"file":"FieldDateRange.d.ts","sourceRoot":"","sources":["../FieldDateRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,6BAA6B;AAC7B,qBACa,cAAe,SAAQ,kBAAkB;IAC5C,SAAS,yBAA6B;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAA;KACrC;CACD"}

package/dist/FieldDateRange.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { component, property } from '@a11d/lit';
-import { FieldDateTimePrecision } from './FieldDateTimeBase.js';
+import { component } from '@a11d/lit';
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 import { FieldDateTimeRange } from './FieldDateTimeRange.js';
 /** @element mo-field-date */
 let FieldDateRange = class FieldDateRange extends FieldDateTimeRange {
@@ -9,9 +9,6 @@ let FieldDateRange = class FieldDateRange extends FieldDateTimeRange {
         this.precision = FieldDateTimePrecision.Day;
     }
 };
-__decorate([
-    property()
-], FieldDateRange.prototype, "precision", void 0);
 FieldDateRange = __decorate([
     component('mo-field-date-range')
 ], FieldDateRange);

package/dist/FieldDateTime.d.ts

@@ -1,4 +1,5 @@
-import { FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
+import { FieldDateTimeBase } from './FieldDateTimeBase.js';
+import { 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,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"}
+{"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"}

package/dist/FieldDateTime.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
 import { component, html, property } from '@a11d/lit';
 import { Localizer } from '@3mo/localization';
-import { FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
+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',
@@ -16,7 +17,15 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         super(...arguments);
         this.label = t('Date & Time');
     }
-    get selectedDate() { return this.value ? new DateTime(this.value) : undefined; }
+    get selectedDate() {
+        if (!this.value) {
+            return undefined;
+        }
+        if (this.value instanceof Date) {
+            return new DateTime(this.value);
+        }
+        return this.value;
+    }
     get placeholder() {
         return new DateTime().format(this.formatOptions);
     }
@@ -27,13 +36,13 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         return html `
 			<mo-selectable-calendar
 				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
+				.value=${new DateTimeRange(this.selectedDate, this.selectedDate)}
+				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
 			></mo-selectable-calendar>
 		`;
     }
     handleSelectedDateChange(date, precision) {
-        this.value = !date ? undefined : this.floorToPrecision(date);
+        this.value = !date ? undefined : this.precision.getRange(date).start;
         super.handleSelectedDateChange(date, precision);
     }
     valueToInputValue(value) {

package/dist/FieldDateTimeBase.d.ts

@@ -1,14 +1,7 @@
 import { type HTMLTemplateResult } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
 import { type MaterialIcon } from '@3mo/icon';
-export declare enum FieldDateTimePrecision {
-    Year = "year",
-    Month = "month",
-    Day = "day",
-    Hour = "hour",
-    Minute = "minute",
-    Second = "second"
-}
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 /**
  * @attr open - Whether the date picker is open
  * @attr pickerHidden - Hide the date picker
@@ -24,8 +17,6 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected readonly calendarIconButtonIcon: MaterialIcon;
     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;

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;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,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,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"}

package/dist/FieldDateTimeBase.js

@@ -1,26 +1,7 @@
 import { __decorate } from "tslib";
 import { cache, css, html, live, property, style, bind, state } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
-export var FieldDateTimePrecision;
-(function (FieldDateTimePrecision) {
-    FieldDateTimePrecision["Year"] = "year";
-    FieldDateTimePrecision["Month"] = "month";
-    FieldDateTimePrecision["Day"] = "day";
-    FieldDateTimePrecision["Hour"] = "hour";
-    FieldDateTimePrecision["Minute"] = "minute";
-    FieldDateTimePrecision["Second"] = "second";
-})(FieldDateTimePrecision || (FieldDateTimePrecision = {}));
-function isDateTimePrecisionSmaller(precision, other) {
-    const precisions = [
-        FieldDateTimePrecision.Year,
-        FieldDateTimePrecision.Month,
-        FieldDateTimePrecision.Day,
-        FieldDateTimePrecision.Hour,
-        FieldDateTimePrecision.Minute,
-        FieldDateTimePrecision.Second,
-    ];
-    return precisions.indexOf(precision) < precisions.indexOf(other);
-}
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 /**
  * @attr open - Whether the date picker is open
  * @attr pickerHidden - Hide the date picker
@@ -41,35 +22,9 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return {
             calendar: this.selectedDate?.calendarId,
             timeZone: this.selectedDate?.timeZoneId,
-            year: 'numeric',
-            month: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Month) ? undefined : '2-digit',
-            day: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Day) ? undefined : '2-digit',
-            hour: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Hour) ? undefined : '2-digit',
-            minute: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Minute) ? undefined : '2-digit',
-            second: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Second) ? undefined : '2-digit',
-            hourCycle: 'h23',
+            ...this.precision.formatOptions,
         };
     }
-    floorToPrecision(date) {
-        return date.with({
-            year: date.year,
-            month: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Month) ? 1 : date.month,
-            day: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Day) ? 1 : date.day,
-            hour: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Hour) ? 0 : date.hour,
-            minute: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Minute) ? 0 : date.minute,
-            second: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Second) ? 0 : date.second,
-        });
-    }
-    ceilToPrecision(date) {
-        return date.with({
-            year: date.year,
-            minute: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Minute) ? 60 : date.minute,
-            second: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Second) ? 60 : date.second,
-        })
-            .with({ month: isDateTimePrecisionSmaller(this.precision, FieldDateTimePrecision.Month) ? date.monthsInYear : date.month })
-            .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();
@@ -211,7 +166,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get monthListTemplate() {
-        return [FieldDateTimePrecision.Year].includes(this.precision) ? html.nothing : html `
+        return this.precision < FieldDateTimePrecision.Month ? html.nothing : html `
 			<mo-month-list
 				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
@@ -220,10 +175,10 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get dayTemplate() {
-        return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month].includes(this.precision) ? html.nothing : this.calendarTemplate;
+        return this.precision < FieldDateTimePrecision.Day ? html.nothing : this.calendarTemplate;
     }
     get timeTemplate() {
-        return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision) ? html.nothing : html `
+        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}
@@ -238,7 +193,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get hourListTemplate() {
-        return html `
+        return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
 			<mo-hour-list style='flex: 1'
 				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
@@ -247,7 +202,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get minuteListTemplate() {
-        return [FieldDateTimePrecision.Hour].includes(this.precision) ? html.nothing : html `
+        return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
 			<mo-minute-list style='flex: 1'
 				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
@@ -256,7 +211,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get secondListTemplate() {
-        return [FieldDateTimePrecision.Hour, FieldDateTimePrecision.Minute].includes(this.precision) ? html.nothing : html `
+        return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
 			<mo-second-list style='flex: 1'
 				.navigatingValue=${bind(this, 'navigatingDate')}
 				.value=${this.selectedDate}
@@ -281,7 +236,7 @@ __decorate([
     property({ type: Object })
 ], FieldDateTimeBase.prototype, "shortcutReferenceDate", void 0);
 __decorate([
-    property()
+    property({ type: String, converter: value => FieldDateTimePrecision.parse(value || undefined) })
 ], FieldDateTimeBase.prototype, "precision", void 0);
 __decorate([
     state()

package/dist/FieldDateTimePrecision.d.ts

@@ -0,0 +1,20 @@
+export type FieldDateTimePrecisionKey = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+export declare class FieldDateTimePrecision {
+    readonly value: number;
+    readonly key: FieldDateTimePrecisionKey;
+    private static readonly _all;
+    static get all(): ReadonlyArray<FieldDateTimePrecision>;
+    static parse(value?: string): FieldDateTimePrecision | undefined;
+    static readonly Year: FieldDateTimePrecision;
+    static readonly Month: FieldDateTimePrecision;
+    static readonly Day: FieldDateTimePrecision;
+    static readonly Hour: FieldDateTimePrecision;
+    static readonly Minute: FieldDateTimePrecision;
+    static readonly Second: FieldDateTimePrecision;
+    private constructor();
+    get formatOptions(): Intl.DateTimeFormatOptions;
+    getRange(date: DateTime): import("@3mo/date-time/DateTimeRange.js").DateTimeRange;
+    valueOf(): number;
+    toString(): FieldDateTimePrecisionKey;
+}
+//# sourceMappingURL=FieldDateTimePrecision.d.ts.map

package/dist/FieldDateTimePrecision.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDateTimePrecision.d.ts","sourceRoot":"","sources":["../FieldDateTimePrecision.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE/F,qBAAa,sBAAsB;IAgBd,QAAQ,CAAC,KAAK,EAAE,MAAM;IAAE,QAAQ,CAAC,GAAG,EAAE,yBAAyB;IAfnF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAsC;IAClE,MAAM,KAAK,GAAG,IAA2C,aAAa,CAAC,sBAAsB,CAAC,CAAE;IAEhG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,sBAAsB,GAAG,SAAS;IAIhE,MAAM,CAAC,QAAQ,CAAC,IAAI,yBAAwC;IAE5D,MAAM,CAAC,QAAQ,CAAC,KAAK,yBAAyC;IAC9D,MAAM,CAAC,QAAQ,CAAC,GAAG,yBAAuC;IAC1D,MAAM,CAAC,QAAQ,CAAC,IAAI,yBAAwC;IAC5D,MAAM,CAAC,QAAQ,CAAC,MAAM,yBAA0C;IAChE,MAAM,CAAC,QAAQ,CAAC,MAAM,yBAA0C;IAEhE,OAAO;IAIP,IAAI,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAU9C;IAED,QAAQ,CAAC,IAAI,EAAE,QAAQ;IAYvB,OAAO;IAIP,QAAQ;CAGR"}

package/dist/FieldDateTimePrecision.js

@@ -0,0 +1,47 @@
+export class FieldDateTimePrecision {
+    static get all() { return FieldDateTimePrecision._all; }
+    static parse(value) {
+        return !value ? undefined : this._all.find(precision => precision.key === value);
+    }
+    constructor(value, key) {
+        this.value = value;
+        this.key = key;
+        FieldDateTimePrecision._all.push(this);
+    }
+    get formatOptions() {
+        return {
+            year: 'numeric',
+            month: this < FieldDateTimePrecision.Month ? undefined : '2-digit',
+            day: this < FieldDateTimePrecision.Day ? undefined : '2-digit',
+            hour: this < FieldDateTimePrecision.Hour ? undefined : '2-digit',
+            minute: this < FieldDateTimePrecision.Minute ? undefined : '2-digit',
+            second: this < FieldDateTimePrecision.Second ? undefined : '2-digit',
+            hourCycle: 'h23',
+        };
+    }
+    getRange(date) {
+        const start = date.with({
+            year: date.year,
+            month: this < FieldDateTimePrecision.Month ? 1 : date.month,
+            day: this < FieldDateTimePrecision.Day ? 1 : date.day,
+            hour: this < FieldDateTimePrecision.Hour ? 0 : date.hour,
+            minute: this < FieldDateTimePrecision.Minute ? 0 : date.minute,
+            second: this < FieldDateTimePrecision.Second ? 0 : date.second,
+        });
+        return new DateTimeRange(start, start.add({ [`${this.key}s`]: 1 }).subtract({ seconds: 1 }));
+    }
+    valueOf() {
+        return this.value;
+    }
+    toString() {
+        return this.key;
+    }
+}
+FieldDateTimePrecision._all = new Array();
+FieldDateTimePrecision.Year = new FieldDateTimePrecision(1, 'year');
+// static readonly Week = new FieldDateTimePrecision(2, 'week')
+FieldDateTimePrecision.Month = new FieldDateTimePrecision(3, 'month');
+FieldDateTimePrecision.Day = new FieldDateTimePrecision(4, 'day');
+FieldDateTimePrecision.Hour = new FieldDateTimePrecision(5, 'hour');
+FieldDateTimePrecision.Minute = new FieldDateTimePrecision(6, 'minute');
+FieldDateTimePrecision.Second = new FieldDateTimePrecision(7, 'second');

package/dist/FieldDateTimeRange.d.ts

@@ -1,5 +1,6 @@
 import { type MaterialIcon } from '@3mo/icon';
-import { FieldDateTimeBase as FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
+import { FieldDateTimeBase as FieldDateTimeBase } from './FieldDateTimeBase.js';
+import { 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;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,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;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;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"}

package/dist/FieldDateTimeRange.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
 import { bind, component, css, html, property } from '@a11d/lit';
-import { FieldDateTimeBase as FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
-import { DateRangeParser } from './DateRangeParser.js';
-import { Memoize as memoize } from 'typescript-memoize';
 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',
     'Start': 'Start',
@@ -58,12 +59,12 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     }
     get calendarTemplate() {
         return html `
-			<mo-selectable-range-calendar
+			<mo-selectable-calendar
 				data-selection=${this.selection}
 				.navigatingValue=${this.navigatingDate}
-				.dateRange=${this.value}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
-			></mo-selectable-range-calendar>
+				.value=${this.value}
+				@dayClick=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
+			></mo-selectable-calendar>
 		`;
     }
     get popoverContentTemplate() {
@@ -88,9 +89,10 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
 		`;
     }
     handleSelectedDateChange(date, precision) {
+        const { start, end } = this.precision.getRange(date);
         this.value = this.selection === FieldDateRangeSelection.Start
-            ? new DateTimeRange(this.floorToPrecision(date), this.value?.end)
-            : new DateTimeRange(this.value?.start, this.ceilToPrecision(date));
+            ? new DateTimeRange(start, this.value?.end)
+            : new DateTimeRange(this.value?.start, end);
         if (this.precision === precision) {
             this.selection = this.selection === FieldDateRangeSelection.Start
                 ? FieldDateRangeSelection.End
@@ -99,7 +101,7 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
         super.handleSelectedDateChange(date, precision);
     }
     valueToInputValue(value) {
-        return value ? value.format(this.formatOptions) ?? '' : '';
+        return value?.format(this.formatOptions) ?? '';
     }
     inputValueToValue(value) {
         return value ? DateRangeParser.parse(value, this.shortcutReferenceDate) : undefined;

package/dist/FieldToggleableDateTimeRange.d.ts

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

package/dist/FieldToggleableDateTimeRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldToggleableDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldToggleableDateTimeRange.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAO/D;;;;GAIG;AACH,qBACa,4BAA6B,SAAQ,kBAAkB;IAC1D,SAAS,yBAA6B;IAE/C,IAAI,WAAW,YAA8D;IAC7E,IAAI,WAAW,CAAC,WAAW,SAAA,EAA+F;IAE1H,cAAuB,sBAAsB,0CAO5C;IAED,OAAO,KAAK,cAAc,GAIzB;CACD"}
+{"version":3,"file":"FieldToggleableDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldToggleableDateTimeRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAMpE;;;;GAIG;AACH,qBACa,4BAA6B,SAAQ,kBAAkB;IAC1D,SAAS,yBAA6B;IAE/C,IAAI,WAAW,YAA8D;IAC7E,IAAI,WAAW,CAAC,WAAW,SAAA,EAA+F;IAE1H,cAAuB,sBAAsB,0CAO5C;IAED,OAAO,KAAK,cAAc,GAIzB;CACD"}

package/dist/FieldToggleableDateTimeRange.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { bind, component, html } from '@a11d/lit';
-import { FieldDateTimeRange } from './FieldDateTimeRange.js';
-import { FieldDateTimePrecision } from './FieldDateTimeBase.js';
 import { Localizer } from '@3mo/localization';
+import { FieldDateTimeRange } from './FieldDateTimeRange.js';
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 Localizer.dictionaries.add('de', {
     'Include time': 'Zeitauswahl',
 });