@3mo/date-time-fields 0.9.1 → 0.10.1

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,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

@@ -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',
@@ -33,7 +34,7 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
 		`;
     }
     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,kCAwCzB;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();
@@ -96,7 +51,13 @@ export class FieldDateTimeBase extends InputFieldComponent {
 				pointer-events: none;
 			}
 
+			mo-field {
+				anchor-name: --mo-field-date-time;
+			}
+
 			mo-popover {
+				position-anchor: --mo-field-date-time;
+				position-visibility: anchors-visible;
 				background: var(--mo-color-background);
 				box-shadow: var(--mo-shadow);
 				border-radius: var(--mo-border-radius);
@@ -175,7 +136,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
     }
     get popoverTemplate() {
         return this.pickerHidden ? html.nothing : html `
-			<mo-popover tabindex='-1' .anchor=${this} ?open=${bind(this, 'open')}>
+			<mo-popover tabindex='-1' .anchor=${this} target='field' ?open=${bind(this, 'open')}>
 				${cache(!this.open ? html.nothing : this.popoverContentTemplate)}
 			</mo-popover>
 		`;
@@ -205,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}
@@ -214,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}
@@ -232,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}
@@ -241,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}
@@ -250,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}
@@ -275,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',
@@ -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',
 });

package/dist/custom-elements.json

@@ -27,7 +27,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -103,7 +103,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",
@@ -245,7 +245,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -328,7 +328,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",
@@ -470,7 +470,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -553,7 +553,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",
@@ -689,7 +689,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -765,7 +765,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "inputElement",
@@ -907,7 +907,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -990,7 +990,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "inputElement",
@@ -1132,7 +1132,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -1215,7 +1215,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"minute\""
+					"default": "\"Minute\""
 				},
 				{
 					"name": "inputElement",
@@ -1552,7 +1552,7 @@
 					"name": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "selectOnFocus",
@@ -1639,7 +1639,7 @@
 					"attribute": "precision",
 					"description": "The precision of the date picker. Defaults to 'minute'",
 					"type": "FieldDateTimePrecision",
-					"default": "\"day\""
+					"default": "\"Day\""
 				},
 				{
 					"name": "inputElement",

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import '@3mo/scroller';
 import '@3mo/list';
 export * from './selection/index.js';
 export * from './FieldTime.js';
+export * from './FieldDateTimePrecision.js';
 export * from './FieldDateTime.js';
 export * from './FieldDateTimeRange.js';
 export * from './FieldDateRange.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,YAAY,CAAA;AACnB,OAAO,UAAU,CAAA;AACjB,OAAO,eAAe,CAAA;AACtB,OAAO,WAAW,CAAA;AAClB,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mCAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,YAAY,CAAA;AACnB,OAAO,UAAU,CAAA;AACjB,OAAO,eAAe,CAAA;AACtB,OAAO,WAAW,CAAA;AAClB,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mCAAmC,CAAA"}

package/dist/index.js

@@ -10,6 +10,7 @@ import '@3mo/scroller';
 import '@3mo/list';
 export * from './selection/index.js';
 export * from './FieldTime.js';
+export * from './FieldDateTimePrecision.js';
 export * from './FieldDateTime.js';
 export * from './FieldDateTimeRange.js';
 export * from './FieldDateRange.js';