@3mo/date-time-fields 0.1.6 → 0.2.0

package/dist/DateRangeParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeParser.d.ts","sourceRoot":"","sources":["../DateRangeParser.ts"],"names":[],"mappings":"AAEA,qBAAa,eAAe;IAC3B,MAAM,CAAC,QAAQ,CAAC,kBAAkB,cAAQ;IAC1C,MAAM,CAAC,QAAQ,CAAC,uBAAuB,WAAsD;IAE7F,MAAM,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,aAAa,gDAAe;IAqBhE,OAAO,CAAC,MAAM,CAAC,yBAAyB;CAiBxC"}
+{"version":3,"file":"DateRangeParser.d.ts","sourceRoot":"","sources":["../DateRangeParser.ts"],"names":[],"mappings":"AAAA,qBAAa,eAAe;IAC3B,MAAM,CAAC,QAAQ,CAAC,kBAAkB,cAAQ;IAC1C,MAAM,CAAC,QAAQ,CAAC,uBAAuB,WAAsD;IAE7F,MAAM,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,aAAa,gDAAe;IAqBhE,OAAO,CAAC,MAAM,CAAC,yBAAyB;CAiBxC"}

package/dist/DateRangeParser.js

@@ -1,4 +1,3 @@
-import { DateParser } from './DateParser.js';
 class DateRangeParser {
     static parse(dateRangeText, referenceDate = new DateTime) {
         const keywordResult = DateRangeParser.parseDateRangeFromKeyword(dateRangeText, referenceDate);
@@ -11,8 +10,8 @@ class DateRangeParser {
             separator = DateRangeParser.dateRangeSeparator;
         }
         const [startDateText, endDateText] = dateRangeText.toLowerCase().split(separator);
-        const startDate = DateParser.parse(startDateText, referenceDate);
-        const endDate = DateParser.parse(endDateText, referenceDate);
+        const startDate = DateTime.parseAsDateTime(startDateText, referenceDate);
+        const endDate = DateTime.parseAsDateTime(endDateText, referenceDate);
         return new DateTimeRange(startDate, endDate);
     }
     static parseDateRangeFromKeyword(keyword, referenceDate = new DateTime) {

package/dist/FieldDate.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
 import { component, property } from '@a11d/lit';
 import { FieldDateTime } from './FieldDateTime.js';
+import { FieldDateTimePrecision } from './FieldDateTimeBase.js';
 /** @element mo-field-date */
 let FieldDate = class FieldDate extends FieldDateTime {
     constructor() {
         super(...arguments);
-        this.precision = "day" /* FieldDateTimePrecision.Day */;
+        this.precision = FieldDateTimePrecision.Day;
     }
 };
 __decorate([

package/dist/FieldDateRange.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
 import { component, property } from '@a11d/lit';
+import { FieldDateTimePrecision } from './FieldDateTimeBase.js';
 import { FieldDateTimeRange } from './FieldDateTimeRange.js';
 /** @element mo-field-date */
 let FieldDateRange = class FieldDateRange extends FieldDateTimeRange {
     constructor() {
         super(...arguments);
-        this.precision = "day" /* FieldDateTimePrecision.Day */;
+        this.precision = FieldDateTimePrecision.Day;
     }
 };
 __decorate([

package/dist/FieldDateTime.d.ts

@@ -4,6 +4,7 @@ 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;
     value?: Date;
+    protected get placeholder(): string;
     protected get calendarTemplate(): import("lit-html").TemplateResult<1>;
     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;AAElF,kCAAkC;AAClC,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,cAAc,kDAAoE;IAChG,SAAS,KAAK,YAAY,8DAA+D;IAE7D,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,SAAS,KAAK,gBAAgB,yCAQ7B;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":"AAEA,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAGlF,kCAAkC;AAClC,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,cAAc,kDAAoE;IAChG,SAAS,KAAK,YAAY,8DAA+D;IAE7D,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,SAAS,KAAK,gBAAgB,yCAQ7B;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,17 +1,20 @@
 import { __decorate } from "tslib";
 import { component, html, property } from '@a11d/lit';
-import { DateParser } from './DateParser.js';
-import { FieldDateTimeBase } from './FieldDateTimeBase.js';
+import { FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
+import { Memoize as memoize } from 'typescript-memoize';
 /** @element mo-field-date-time */
 let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
     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);
+    }
     get calendarTemplate() {
         return html `
 			<mo-selectable-calendar
 				.navigatingValue=${this.navigatingDate}
 				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "day" /* FieldDateTimePrecision.Day */)}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
 			></mo-selectable-calendar>
 		`;
     }
@@ -24,12 +27,15 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         return value ? (_a = value.format(this.formatOptions)) !== null && _a !== void 0 ? _a : '' : '';
     }
     inputValueToValue(value) {
-        return value ? DateParser.parse(value, this.shortcutReferenceDate) : undefined;
+        return value ? DateTime.parseAsDateTime(value, this.shortcutReferenceDate) : undefined;
     }
 };
 __decorate([
     property({ type: Object })
 ], FieldDateTime.prototype, "value", void 0);
+__decorate([
+    memoize()
+], FieldDateTime.prototype, "placeholder", null);
 FieldDateTime = __decorate([
     component('mo-field-date-time')
 ], FieldDateTime);

package/dist/FieldDateTimeBase.d.ts

@@ -1,7 +1,7 @@
 import { HTMLTemplateResult } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
 import type { MaterialIcon } from '@3mo/icon';
-export declare const enum FieldDateTimePrecision {
+export declare enum FieldDateTimePrecision {
     Year = "year",
     Month = "month",
     Day = "day",
@@ -27,6 +27,7 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected roundToPrecision(date: DateTime): import("@3mo/date-time/DateTime.js").DateTime;
     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(): import("lit-html").TemplateResult<1>;
     protected get endSlotTemplate(): import("lit-html").TemplateResult<1>;

package/dist/FieldDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAoD,MAAM,WAAW,CAAA;AAChG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,0BAAkB,sBAAsB;IACvC,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;IASrE,IAAI,UAAQ;IACc,cAAc,UAAQ;IACvB,qBAAqB,gDAAe;IACpD,SAAS,yBAAgC;IAErD,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;cAWtB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,WAAoB,MAAM,kCA2BzB;IAED,cAAuB,QAAQ,yCAK9B;IAED,cAAuB,eAAe,yCAKrC;IAED,cAAuB,aAAa,yCAYnC;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,uBAQ5B;IAED,SAAS,KAAK,sBAAsB,yCAOnC;IAED,SAAS,KAAK,YAAY,yCAMzB;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;CAKpF"}
+{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAoD,MAAM,WAAW,CAAA;AAChG,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;IASrE,IAAI,UAAQ;IACc,cAAc,UAAQ;IACvB,qBAAqB,gDAAe;IACpD,SAAS,yBAAgC;IAErD,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;cAWtB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAmCzB;IAED,cAAuB,QAAQ,yCAK9B;IAED,cAAuB,eAAe,yCAKrC;IAED,cAAuB,aAAa,yCAanC;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,uBAQ5B;IAED,SAAS,KAAK,sBAAsB,yCAOnC;IAED,SAAS,KAAK,YAAY,yCAMzB;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;CAKpF"}

package/dist/FieldDateTimeBase.js

@@ -1,14 +1,23 @@
 import { __decorate } from "tslib";
 import { cache, css, html, live, nothing, property, style } 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 || (FieldDateTimePrecision = {}));
 function isDateTimePrecisionSmaller(precision, other) {
     const precisions = [
-        "year" /* FieldDateTimePrecision.Year */,
-        "month" /* FieldDateTimePrecision.Month */,
-        "day" /* FieldDateTimePrecision.Day */,
-        "hour" /* FieldDateTimePrecision.Hour */,
-        "minute" /* FieldDateTimePrecision.Minute */,
-        "second" /* FieldDateTimePrecision.Second */,
+        FieldDateTimePrecision.Year,
+        FieldDateTimePrecision.Month,
+        FieldDateTimePrecision.Day,
+        FieldDateTimePrecision.Hour,
+        FieldDateTimePrecision.Minute,
+        FieldDateTimePrecision.Second,
     ];
     return precisions.indexOf(precision) < precisions.indexOf(other);
 }
@@ -24,7 +33,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.open = false;
         this.hideDatePicker = false;
         this.shortcutReferenceDate = new DateTime;
-        this.precision = "minute" /* FieldDateTimePrecision.Minute */;
+        this.precision = FieldDateTimePrecision.Minute;
         this.calendarIconButtonIcon = 'today';
     }
     get formatOptions() {
@@ -33,22 +42,22 @@ export class FieldDateTimeBase extends InputFieldComponent {
             calendar: (_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.calendarId,
             timeZone: (_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.timeZoneId,
             year: 'numeric',
-            month: isDateTimePrecisionSmaller(this.precision, "month" /* FieldDateTimePrecision.Month */) ? undefined : '2-digit',
-            day: isDateTimePrecisionSmaller(this.precision, "day" /* FieldDateTimePrecision.Day */) ? undefined : '2-digit',
-            hour: isDateTimePrecisionSmaller(this.precision, "hour" /* FieldDateTimePrecision.Hour */) ? undefined : '2-digit',
-            minute: isDateTimePrecisionSmaller(this.precision, "minute" /* FieldDateTimePrecision.Minute */) ? undefined : '2-digit',
-            second: isDateTimePrecisionSmaller(this.precision, "second" /* FieldDateTimePrecision.Second */) ? undefined : '2-digit',
+            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',
         };
     }
     roundToPrecision(date) {
         return date.with({
             year: date.year,
-            month: isDateTimePrecisionSmaller(this.precision, "month" /* FieldDateTimePrecision.Month */) ? 1 : date.month,
-            day: isDateTimePrecisionSmaller(this.precision, "day" /* FieldDateTimePrecision.Day */) ? 1 : date.day,
-            hour: isDateTimePrecisionSmaller(this.precision, "hour" /* FieldDateTimePrecision.Hour */) ? 0 : date.hour,
-            minute: isDateTimePrecisionSmaller(this.precision, "minute" /* FieldDateTimePrecision.Minute */) ? 0 : date.minute,
-            second: isDateTimePrecisionSmaller(this.precision, "second" /* FieldDateTimePrecision.Second */) ? 0 : date.second,
+            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,
         });
     }
     handleChange(value, e) {
@@ -58,6 +67,9 @@ export class FieldDateTimeBase extends InputFieldComponent {
     get isActive() {
         return super.isActive || this.open;
     }
+    get placeholder() {
+        return '';
+    }
     static get styles() {
         return css `
 			${super.styles}
@@ -84,6 +96,14 @@ export class FieldDateTimeBase extends InputFieldComponent {
 				font-weight: 500;
 				color: var(--mo-color-gray);
 			}
+
+			input::placeholder {
+				color: transparent;
+			}
+
+			mo-field[active] input::placeholder {
+				color: var(--mo-color-gray);
+			}
 		`;
     }
     get template() {
@@ -105,6 +125,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
 				?readonly=${this.readonly}
 				?required=${this.required}
 				?disabled=${this.disabled}
+				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)}
@@ -148,25 +169,25 @@ export class FieldDateTimeBase extends InputFieldComponent {
 			<mo-year-list
 				.navigatingValue=${this.navigatingDate}
 				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "year" /* FieldDateTimePrecision.Year */)}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Year)}
 			></mo-year-list>
 		`;
     }
     get monthListTemplate() {
-        return ["year" /* FieldDateTimePrecision.Year */].includes(this.precision) ? nothing : html `
+        return [FieldDateTimePrecision.Year].includes(this.precision) ? nothing : html `
 			<mo-month-list
 				.navigatingValue=${this.navigatingDate}
 				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "month" /* FieldDateTimePrecision.Month */)}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Month)}
 			></mo-month-list>
 		`;
     }
     get dayTemplate() {
-        return ["year" /* FieldDateTimePrecision.Year */, "month" /* FieldDateTimePrecision.Month */].includes(this.precision) ? nothing : this.calendarTemplate;
+        return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month].includes(this.precision) ? nothing : this.calendarTemplate;
     }
     get timeTemplate() {
         var _a, _b, _c, _d;
-        return ["year" /* FieldDateTimePrecision.Year */, "month" /* FieldDateTimePrecision.Month */, "day" /* FieldDateTimePrecision.Day */].includes(this.precision) ? nothing : html `
+        return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision) ? nothing : html `
 			<mo-flex gap='6px'>
 				<div class='timezone'>
 					${(_b = (_a = this.navigatingDate) === null || _a === void 0 ? void 0 : _a.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')) === null || _b === void 0 ? void 0 : _b.value}
@@ -185,25 +206,25 @@ export class FieldDateTimeBase extends InputFieldComponent {
 			<mo-hour-list style='flex: 1'
 				.navigatingValue=${this.navigatingDate}
 				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "hour" /* FieldDateTimePrecision.Hour */)}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
 			></mo-hour-list>
 		`;
     }
     get minuteListTemplate() {
-        return ["hour" /* FieldDateTimePrecision.Hour */].includes(this.precision) ? nothing : html `
+        return [FieldDateTimePrecision.Hour].includes(this.precision) ? nothing : html `
 			<mo-minute-list style='flex: 1'
 				.navigatingValue=${this.navigatingDate}
 				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "minute" /* FieldDateTimePrecision.Minute */)}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
 			></mo-minute-list>
 		`;
     }
     get secondListTemplate() {
-        return ["hour" /* FieldDateTimePrecision.Hour */, "minute" /* FieldDateTimePrecision.Minute */].includes(this.precision) ? nothing : html `
+        return [FieldDateTimePrecision.Hour, FieldDateTimePrecision.Minute].includes(this.precision) ? nothing : html `
 			<mo-second-list style='flex: 1'
 				.navigatingValue=${this.navigatingDate}
 				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "second" /* FieldDateTimePrecision.Second */)}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
 			></mo-second-list>
 		`;
     }

package/dist/FieldDateTimeRange.d.ts

@@ -1,6 +1,6 @@
 import { MaterialIcon } from '@3mo/icon';
 import { FieldDateTimeBase as FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
-declare const enum FieldDateRangeSelection {
+declare enum FieldDateRangeSelection {
     Start = "start",
     End = "end"
 }
@@ -20,6 +20,7 @@ export declare class FieldDateTimeRange extends FieldDateTimeBase<DateTimeRange
     value?: DateTimeRange;
     static get styles(): import("@a11d/lit").CSSResult;
     protected calendarIconButtonIcon: MaterialIcon;
+    protected get placeholder(): string;
     protected get calendarTemplate(): import("lit-html").TemplateResult<1>;
     protected get popoverContentTemplate(): import("lit-html").TemplateResult<1>;
     handleSelectedDateChange(date: DateTime, precision: FieldDateTimePrecision): void;

package/dist/FieldDateTimeRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAGvG,mBAAW,uBAAuB;IACjC,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;GAQG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,cAAc,kDAAwH;IAEpJ,SAAS,KAAK,YAAY,8DAAoG;IAElH,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,WAAoB,MAAM,kCAkBzB;IAED,UAAmB,sBAAsB,EAAE,YAAY,CAAe;IAEtE,SAAS,KAAK,gBAAgB,yCAQ7B;IAED,cAAuB,sBAAsB,yCAW5C;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,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAIvG,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;GAQG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,cAAc,kDAAwH;IAEpJ,SAAS,KAAK,YAAY,8DAAoG;IAElH,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,yCAQ7B;IAED,cAAuB,sBAAsB,yCAW5C;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

@@ -1,7 +1,13 @@
 import { __decorate } from "tslib";
 import { component, css, html, property } from '@a11d/lit';
-import { FieldDateTimeBase as FieldDateTimeBase } from './FieldDateTimeBase.js';
+import { FieldDateTimeBase as FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
 import { DateRangeParser } from './DateRangeParser.js';
+import { Memoize as memoize } from 'typescript-memoize';
+var FieldDateRangeSelection;
+(function (FieldDateRangeSelection) {
+    FieldDateRangeSelection["Start"] = "start";
+    FieldDateRangeSelection["End"] = "end";
+})(FieldDateRangeSelection || (FieldDateRangeSelection = {}));
 /**
  * @element mo-field-date-range
  *
@@ -14,11 +20,11 @@ import { DateRangeParser } from './DateRangeParser.js';
 let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     constructor() {
         super(...arguments);
-        this.selection = "start" /* FieldDateRangeSelection.Start */;
+        this.selection = FieldDateRangeSelection.Start;
         this.calendarIconButtonIcon = 'date_range';
     }
-    get navigatingDate() { var _a, _b, _c; return (_c = (this.selection === "start" /* FieldDateRangeSelection.Start */ ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.start : (_b = this.value) === null || _b === void 0 ? void 0 : _b.end)) !== null && _c !== void 0 ? _c : new DateTime(); }
-    get selectedDate() { var _a, _b; return this.selection === "start" /* FieldDateRangeSelection.Start */ ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.start : (_b = this.value) === null || _b === void 0 ? void 0 : _b.end; }
+    get navigatingDate() { var _a, _b, _c; return (_c = (this.selection === FieldDateRangeSelection.Start ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.start : (_b = this.value) === null || _b === void 0 ? void 0 : _b.end)) !== null && _c !== void 0 ? _c : new DateTime(); }
+    get selectedDate() { var _a, _b; return this.selection === FieldDateRangeSelection.Start ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.start : (_b = this.value) === null || _b === void 0 ? void 0 : _b.end; }
     static get styles() {
         return css `
 			${super.styles}
@@ -38,12 +44,15 @@ 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-range-calendar
 				.navigatingValue=${this.navigatingDate}
 				.dateRange=${this.value}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "day" /* FieldDateTimePrecision.Day */)}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
 			></mo-selectable-range-calendar>
 		`;
     }
@@ -51,8 +60,8 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
         return html `
 			<mo-flex>
 				<mo-tab-bar value=${this.selection} @change=${(e) => this.selection = e.detail}>
-					<mo-tab value=${"start" /* FieldDateRangeSelection.Start */} label=${t('Start')}></mo-tab>
-					<mo-tab value=${"end" /* FieldDateRangeSelection.End */} label=${t('End')}></mo-tab>
+					<mo-tab value=${FieldDateRangeSelection.Start} label=${t('Start')}></mo-tab>
+					<mo-tab value=${FieldDateRangeSelection.End} label=${t('End')}></mo-tab>
 				</mo-tab-bar>
 			</mo-flex>
 
@@ -61,13 +70,13 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     }
     handleSelectedDateChange(date, precision) {
         var _a, _b;
-        this.value = this.selection === "start" /* FieldDateRangeSelection.Start */
+        this.value = this.selection === FieldDateRangeSelection.Start
             ? new DateTimeRange(this.roundToPrecision(date), (_a = this.value) === null || _a === void 0 ? void 0 : _a.end)
             : new DateTimeRange((_b = this.value) === null || _b === void 0 ? void 0 : _b.start, this.roundToPrecision(date));
         if (this.precision === precision) {
-            this.selection = this.selection === "start" /* FieldDateRangeSelection.Start */
-                ? "end" /* FieldDateRangeSelection.End */
-                : "start" /* FieldDateRangeSelection.Start */;
+            this.selection = this.selection === FieldDateRangeSelection.Start
+                ? FieldDateRangeSelection.End
+                : FieldDateRangeSelection.Start;
         }
         super.handleSelectedDateChange(date, precision);
     }
@@ -85,6 +94,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], FieldDateTimeRange.prototype, "value", void 0);
+__decorate([
+    memoize()
+], FieldDateTimeRange.prototype, "placeholder", null);
 FieldDateTimeRange = __decorate([
     component('mo-field-date-time-range')
 ], FieldDateTimeRange);

package/dist/selection/YearList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YearList.d.ts","sourceRoot":"","sources":["../../selection/YearList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,QAAS,SAAQ,QAAQ;IACrC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsB;IAC9C,OAAO,CAAC,KAAK,CAE0B;IAEvC,cAAuB,iBAAiB,yCAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}
+{"version":3,"file":"YearList.d.ts","sourceRoot":"","sources":["../../selection/YearList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,QAAS,SAAQ,QAAQ;IACrC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsB;IAC9C,OAAO,CAAC,KAAK,CAE0B;IAEvC,cAAuB,iBAAiB,yCAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}

package/dist/selection/YearList.js

@@ -10,13 +10,14 @@ let YearList = class YearList extends DateList {
             .map((_, i) => this.nowYear - 100 + i);
     }
     get listItemsTemplate() {
+        const now = this.now;
         return html `
 			${this.years.map(year => {
             var _a;
             return html `
 				<mo-selectable-list-item
 					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.year) === year}
-					?data-now=${this.now.year === year}
+					?data-now=${now.year === year}
 					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ year })); }}
 				>${year.format()}</mo-selectable-list-item>
 			`;

package/dist/selection/calendar/Calendar.d.ts

@@ -3,11 +3,13 @@ import '@a11d/array.prototype.group';
 export declare class Calendar extends Component {
     includeWeekNumbers: boolean;
     navigatingValue: import("@3mo/date-time/DateTime.js").DateTime;
+    private days;
     static get styles(): import("@a11d/lit").CSSResult;
     protected get template(): import("lit-html").TemplateResult<1>;
     private rangeOf;
     protected getDayTemplate(day: DateTime): import("lit-html").TemplateResult<1>;
     protected handleDayClick(day: DateTime): void;
+    private get now();
     protected getDayElementClasses(day: DateTime): ClassInfo;
 }
 declare global {

package/dist/selection/calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4D,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1G,OAAO,6BAA6B,CAAA;AAEpC,qBACa,QAAS,SAAQ,SAAS;IACM,kBAAkB,UAAQ;IAC1C,eAAe,gDAAe;IAE1D,WAAoB,MAAM,kCAmDzB;IAED,cAAuB,QAAQ,yCA0B9B;IAED,OAAO,CAAG,OAAO;IAOjB,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAQtC,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAItC,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS;CAQxD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4D,SAAS,EAAS,MAAM,WAAW,CAAA;AACjH,OAAO,6BAA6B,CAAA;AAGpC,qBACa,QAAS,SAAQ,SAAS;IACM,kBAAkB,UAAQ;IAUnE,eAAe,gDAAe;IAExB,OAAO,CAAC,IAAI,CAA2D;IAEhF,WAAoB,MAAM,kCAmDzB;IAED,cAAuB,QAAQ,yCAqB9B;IAED,OAAO,CAAG,OAAO;IAOjB,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAQtC,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAKtC,OAAO,KAAK,GAAG,GAA0B;IAEzC,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS;CAOxD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}

package/dist/selection/calendar/Calendar.js

@@ -1,11 +1,13 @@
 import { __decorate } from "tslib";
-import { Component, css, component, html, nothing, property, classMap, style } from '@a11d/lit';
+import { Component, css, component, html, nothing, property, classMap, style, state } from '@a11d/lit';
 import '@a11d/array.prototype.group';
+import { MemoizeExpiring as memoizeExpiring } from 'typescript-memoize';
 let Calendar = class Calendar extends Component {
     constructor() {
         super(...arguments);
         this.includeWeekNumbers = false;
         this.navigatingValue = new DateTime;
+        this.days = new Array();
     }
     static get styles() {
         return css `
@@ -60,11 +62,6 @@ let Calendar = class Calendar extends Component {
 		`;
     }
     get template() {
-        const start = this.navigatingValue.monthStart.weekStart;
-        const end = this.navigatingValue.monthEnd.weekEnd;
-        const range = [...this.rangeOf(start, end)];
-        const weekDaysInMonth = [...range.groupToMap(d => String(d.weekOfYear))]
-            .sort(([, dates1], [, dates2]) => { var _a; return ((_a = dates1[0]) === null || _a === void 0 ? void 0 : _a.isBefore(dates2[0])) ? -1 : +1; });
         return html `
 			<mo-grid class='month'
 				rows='repeat(auto-fill, var(--mo-calendar-day-size))'
@@ -79,7 +76,7 @@ let Calendar = class Calendar extends Component {
 					</div>
 				`)}
 
-				${weekDaysInMonth.map(([weekNumber, days]) => html `
+				${this.days.map(([weekNumber, days]) => html `
 					${this.includeWeekNumbers === false ? nothing : html `<div class='week'>${weekNumber}</div>`}
 					${days.map(day => this.getDayTemplate(day))}
 				`)}
@@ -102,11 +99,11 @@ let Calendar = class Calendar extends Component {
     handleDayClick(day) {
         day;
     }
+    get now() { return new DateTime; }
     getDayElementClasses(day) {
-        const now = new DateTime();
         return {
             day: true,
-            today: now.dayStart.equals(day.dayStart),
+            today: this.now.year === day.year && this.now.month === day.month && this.now.day === day.day,
             isInMonth: day.month === this.navigatingValue.month
         };
     }
@@ -115,8 +112,23 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], Calendar.prototype, "includeWeekNumbers", void 0);
 __decorate([
-    property({ type: Object })
+    property({
+        type: Object,
+        updated() {
+            const start = this.navigatingValue.monthStart.weekStart;
+            const end = this.navigatingValue.monthEnd.weekEnd;
+            const range = [...this.rangeOf(start, end)];
+            this.days = [...range.groupToMap(d => String(d.weekOfYear))]
+                .sort(([, dates1], [, dates2]) => { var _a; return ((_a = dates1[0]) === null || _a === void 0 ? void 0 : _a.isBefore(dates2[0])) ? -1 : +1; });
+        }
+    })
 ], Calendar.prototype, "navigatingValue", void 0);
+__decorate([
+    state()
+], Calendar.prototype, "days", void 0);
+__decorate([
+    memoizeExpiring(60000)
+], Calendar.prototype, "now", null);
 Calendar = __decorate([
     component('mo-calendar')
 ], Calendar);

package/dist/selection/calendar/SelectableCalendar.js

@@ -18,8 +18,7 @@ let SelectableCalendar = class SelectableCalendar extends Calendar {
         this.change.dispatch(day);
     }
     getDayElementClasses(day) {
-        var _a;
-        return Object.assign(Object.assign({}, super.getDayElementClasses(day)), { selected: !!this.value && day.dayStart.equals((_a = this.value) === null || _a === void 0 ? void 0 : _a.dayStart) });
+        return Object.assign(Object.assign({}, super.getDayElementClasses(day)), { selected: !!this.value && day.year === this.value.year && day.month === this.value.month && day.day === this.value.day });
     }
 };
 __decorate([