@3mo/date-time-fields 0.13.0 → 0.14.1

package/dist/FieldDate.d.ts

@@ -2,12 +2,9 @@ import { FieldDateTime } from './FieldDateTime.js';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 /**
  * @element mo-field-date
- *
- * @i18n "Date"
  */
 export declare class FieldDate extends FieldDateTime {
     precision: FieldDateTimePrecision;
-    label: string;
 }
 declare global {
     interface HTMLElementTagNameMap {

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,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"}
+{"version":3,"file":"FieldDate.d.ts","sourceRoot":"","sources":["../FieldDate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE;;GAEG;AACH,qBACa,SAAU,SAAQ,aAAa;IAClC,SAAS,yBAA6B;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,aAAa,CAAA;KAC9B;CACD"}

package/dist/FieldDate.js

@@ -1,21 +1,14 @@
 import { __decorate } from "tslib";
 import { component } from '@a11d/lit';
-import { Localizer } from '@3mo/localization';
 import { FieldDateTime } from './FieldDateTime.js';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
-Localizer.dictionaries.add('de', {
-    'Date': 'Datum',
-});
 /**
  * @element mo-field-date
- *
- * @i18n "Date"
  */
 let FieldDate = class FieldDate extends FieldDateTime {
     constructor() {
         super(...arguments);
         this.precision = FieldDateTimePrecision.Day;
-        this.label = t('Date');
     }
 };
 FieldDate = __decorate([

package/dist/FieldDateTime.d.ts

@@ -5,6 +5,10 @@ import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
  * @element mo-field-date-time
  *
  * @i18n "Date & Time"
+ * @i18n "Date"
+ * @i18n "Year"
+ * @i18n "Month"
+ * @i18n "Week"
  * @i18n "Today"
  * @i18n "Yesterday"
  * @i18n "Tomorrow"
@@ -17,7 +21,8 @@ import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
  */
 export declare class FieldDateTime extends FieldDateTimeBase<Date | undefined> {
     protected get selectedDate(): import("@3mo/date-time/DateTime.js").DateTime | undefined;
-    label: string;
+    protected get _label(): string;
+    private get defaultLabel();
     value?: Date;
     protected get placeholder(): string;
     protected resetNavigationDate(): void;

package/dist/FieldDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTime.d.ts","sourceRoot":"","sources":["../FieldDateTime.ts"],"names":[],"mappings":"AACA,OAAO,EAAmC,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAEpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAgBpE;;;;;;;;;;;;;GAaG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,YAAY,8DAQzB;IAEoB,KAAK,SAAmB;IACjB,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,SAAS,CAAC,mBAAmB;IAI7B,SAAS,KAAK,aAAa,4DAE1B;IAED,cAAuB,eAAe,IAcoB,kBAAkB,CAC3E;cAEkB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAO7F,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS;IAInD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGzC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,aAAa,CAAA;KACnC;CACD"}
+{"version":3,"file":"FieldDateTime.d.ts","sourceRoot":"","sources":["../FieldDateTime.ts"],"names":[],"mappings":"AACA,OAAO,EAAmC,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAEpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAoBpE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,iBAAiB,CAAC,IAAI,GAAG,SAAS,CAAC;IACrE,SAAS,KAAK,YAAY,8DAQzB;IAED,cAAuB,MAAM,WAE5B;IAED,OAAO,KAAK,YAAY,GAQvB;IAE2B,KAAK,CAAC,EAAE,IAAI,CAAA;IAExC,cACuB,WAAW,WAEjC;IAED,SAAS,CAAC,mBAAmB;IAI7B,SAAS,KAAK,aAAa,4DAE1B;IAED,cAAuB,eAAe,IAcoB,kBAAkB,CAC3E;cAEkB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAO7F,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS;IAInD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGzC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,aAAa,CAAA;KACnC;CACD"}

package/dist/FieldDateTime.js

@@ -6,6 +6,10 @@ import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 import { Memoize as memoize } from 'typescript-memoize';
 Localizer.dictionaries.add('de', {
     'Date & Time': 'Datum & Uhrzeit',
+    'Date': 'Datum',
+    'Year': 'Jahr',
+    'Month': 'Monat',
+    'Week': 'Woche',
     'Today': 'Heute',
     'Yesterday': 'Gestern',
     'Tomorrow': 'Morgen',
@@ -20,6 +24,10 @@ Localizer.dictionaries.add('de', {
  * @element mo-field-date-time
  *
  * @i18n "Date & Time"
+ * @i18n "Date"
+ * @i18n "Year"
+ * @i18n "Month"
+ * @i18n "Week"
  * @i18n "Today"
  * @i18n "Yesterday"
  * @i18n "Tomorrow"
@@ -31,10 +39,6 @@ Localizer.dictionaries.add('de', {
  * @i18n "Year end"
  */
 let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
-    constructor() {
-        super(...arguments);
-        this.label = t('Date & Time');
-    }
     get selectedDate() {
         if (!this.value) {
             return undefined;
@@ -44,6 +48,18 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         }
         return this.value;
     }
+    get _label() {
+        return super._label || this.defaultLabel;
+    }
+    get defaultLabel() {
+        switch (this.precision) {
+            case FieldDateTimePrecision.Year: return t('Year');
+            case FieldDateTimePrecision.Month: return t('Month');
+            case FieldDateTimePrecision.Week: return t('Week');
+            case FieldDateTimePrecision.Day: return t('Date');
+            default: return t('Date & Time');
+        }
+    }
     get placeholder() {
         return new DateTime().format(this.formatOptions);
     }
@@ -82,9 +98,6 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
         return value ? DateTime.parseAsDateTime(value, this.shortcutReferenceDate) : undefined;
     }
 };
-__decorate([
-    property()
-], FieldDateTime.prototype, "label", void 0);
 __decorate([
     property({ type: Object })
 ], FieldDateTime.prototype, "value", void 0);

package/dist/FieldDateTimeBase.d.ts

@@ -8,12 +8,18 @@ import type { Calendar } from './selection/index.js';
  * @attr pickerHidden - Hide the date picker
  * @attr shortcutReferenceDate - The date to use as a reference for shortcuts
  * @attr precision - The precision of the date picker. Defaults to 'minute'
+ * @attr min - The minimum selectable date (inclusive). Dates before this are disabled.
+ * @attr max - The maximum selectable date (inclusive). Dates after this are disabled.
+ * @attr dateDisabled - A function that determines whether a date should be disabled. Receives a DateTime object and should return a boolean.
  */
 export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T> {
     open: boolean;
     pickerHidden: boolean;
     shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
     precision: FieldDateTimePrecision;
+    min?: DateTime;
+    max?: DateTime;
+    dateDisabled?: (date: DateTime) => boolean;
     navigationDate: import("@3mo/date-time/DateTime.js").DateTime;
     protected readonly calendar?: Calendar;
     protected connected(): void;
@@ -39,6 +45,7 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected get popoverSelectionTemplate(): HTMLTemplateResult;
     protected abstract get presetsTemplate(): HTMLTemplateResult;
     protected getPresetTemplate(label: string, value: () => T): HTMLTemplateResult;
+    private isPresetDisabled;
     protected get dateTemplate(): HTMLTemplateResult;
     protected get calendarTemplate(): HTMLTemplateResult;
     protected abstract get calendarValue(): DateTimeRange | undefined;

package/dist/FieldDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAA0E,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAC3H,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEpD;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACkC,SAAS,yBAAgC;IAElI,cAAc,gDAAiB;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;cAEzC,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,oBAAoB,CAE3B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAuDzB;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,uBAkB5B;IAED,SAAS,KAAK,wBAAwB,uBAOrC;IAED,SAAS,CAAC,QAAQ,KAAK,eAAe,IAAI,kBAAkB,CAAA;IAE5D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;IAUzD,SAAS,KAAK,YAAY,uBAEzB;IAED,SAAS,KAAK,gBAAgB,uBAQ7B;IAED,SAAS,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,GAAG,SAAS,CAAA;IAEjE,OAAO,KAAK,YAAY,GAavB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAMpF"}
+{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAA0E,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE3H,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAepD;;;;;;;;GAQG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACS,qBAAqB,gDAAiB;IACE,SAAS,yBAAgC;IACjF,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAEzE,cAAc,gDAAiB;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;cAEzC,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,oBAAoB,CAE3B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAuDzB;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,uBAkB5B;IAED,SAAS,KAAK,wBAAwB,uBAOrC;IAED,SAAS,CAAC,QAAQ,KAAK,eAAe,IAAI,kBAAkB,CAAA;IAE5D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;IAYzD,OAAO,CAAC,gBAAgB;IAaxB,SAAS,KAAK,YAAY,uBAEzB;IAED,SAAS,KAAK,gBAAgB,uBAW7B;IAED,SAAS,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,GAAG,SAAS,CAAA;IAEjE,OAAO,KAAK,YAAY,GAavB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAMpF"}

package/dist/FieldDateTimeBase.js

@@ -1,19 +1,33 @@
 import { __decorate } from "tslib";
 import { cache, css, html, live, property, style, bind, state, query, ifDefined } from '@a11d/lit';
+import { hasChanged } from '@a11d/equals';
 import { InputFieldComponent } from '@3mo/field';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
+const dateTimeConverter = (value) => {
+    if (value instanceof DateTime) {
+        return value;
+    }
+    if (value instanceof Date || typeof value === 'string' || typeof value === 'number') {
+        const date = new DateTime(value);
+        return isNaN(date.getTime()) ? undefined : date;
+    }
+    return undefined;
+};
 /**
  * @attr open - Whether the date picker is open
  * @attr pickerHidden - Hide the date picker
  * @attr shortcutReferenceDate - The date to use as a reference for shortcuts
  * @attr precision - The precision of the date picker. Defaults to 'minute'
+ * @attr min - The minimum selectable date (inclusive). Dates before this are disabled.
+ * @attr max - The maximum selectable date (inclusive). Dates after this are disabled.
+ * @attr dateDisabled - A function that determines whether a date should be disabled. Receives a DateTime object and should return a boolean.
  */
 export class FieldDateTimeBase extends InputFieldComponent {
     constructor() {
         super(...arguments);
         this.open = false;
         this.pickerHidden = false;
-        this.shortcutReferenceDate = new DateTime;
+        this.shortcutReferenceDate = new DateTime();
         this.precision = FieldDateTimePrecision.Minute;
         this.navigationDate = new DateTime();
         this.handleLanguageChange = () => {
@@ -49,86 +63,86 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return '';
     }
     static get styles() {
-        return css `
-			${super.styles}
-
-			:host {
-				position: relative;
-			}
-
-			:host([disabled]) {
-				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);
-				color: var(--mo-color-foreground);
-				font-size: 0.875em;
-			}
-
-			#selector {
-				min-height: 175px;
-			}
-
-			.timezone {
-				padding: 0.4rem;
-				font-size: small;
-				text-align: center;
-				font-weight: 500;
-				color: var(--mo-color-gray);
-			}
-
-			input::placeholder {
-				color: transparent;
-			}
-
-			mo-field[active]:not([dense]) input::placeholder {
-				color: var(--mo-color-gray);
-			}
-
-			#presets {
-				background-color: var(--mo-color-transparent-gray-1);
-				mo-list-item {
-					padding-block: 0.5rem;
-					min-height: auto;
-					opacity: 0.9;
-				}
-			}
+        return css `
+			${super.styles}
+
+			:host {
+				position: relative;
+			}
+
+			:host([disabled]) {
+				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);
+				color: var(--mo-color-foreground);
+				font-size: 0.875em;
+			}
+
+			#selector {
+				min-height: 175px;
+			}
+
+			.timezone {
+				padding: 0.4rem;
+				font-size: small;
+				text-align: center;
+				font-weight: 500;
+				color: var(--mo-color-gray);
+			}
+
+			input::placeholder {
+				color: transparent;
+			}
+
+			mo-field[active]:not([dense]) input::placeholder {
+				color: var(--mo-color-gray);
+			}
+
+			#presets {
+				background-color: var(--mo-color-transparent-gray-1);
+				mo-list-item {
+					padding-block: 0.5rem;
+					min-height: auto;
+					opacity: 0.9;
+				}
+			}
 		`;
     }
     get template() {
-        return html `
-			${super.template}
-			${this.popoverTemplate}
+        return html `
+			${super.template}
+			${this.popoverTemplate}
 		`;
     }
     get endSlotTemplate() {
-        return html `
-			${super.endSlotTemplate}
-			${this.clearIconButtonTemplate}
-			${this.calendarIconButtonTemplate}
+        return html `
+			${super.endSlotTemplate}
+			${this.clearIconButtonTemplate}
+			${this.calendarIconButtonTemplate}
 		`;
     }
     get inputTemplate() {
-        return html `
-			<input
-				part='input'
-				?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)}
-			>
+        return html `
+			<input
+				part='input'
+				?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)}
+			>
 		`;
     }
     get clearIconButtonTemplate() {
@@ -137,107 +151,122 @@ export class FieldDateTimeBase extends InputFieldComponent {
             this.handleInput(undefined);
             this.handleChange(undefined);
         };
-        return !this.value || !this.focusController.focused ? html.nothing : html `
-			<mo-icon-button tabindex='-1' dense slot='end' icon='cancel'
-				@click=${clear}
-				${style({ color: 'var(--mo-color-gray)', fontSize: '20px', cursor: 'pointer', userSelect: 'none', marginBlockStart: '2.75px', marginInlineEnd: '5px' })}
-			></mo-icon-button>
+        return !this.value || !this.focusController.focused ? html.nothing : html `
+			<mo-icon-button tabindex='-1' dense slot='end' icon='cancel'
+				@click=${clear}
+				${style({ color: 'var(--mo-color-gray)', fontSize: '20px', cursor: 'pointer', userSelect: 'none', marginBlockStart: '2.75px', marginInlineEnd: '5px' })}
+			></mo-icon-button>
 		`;
     }
     get calendarIconButtonTemplate() {
-        return this.pickerHidden ? html.nothing : html `
-			<mo-icon tabindex='-1' slot='end'
-				icon=${this.calendarIconButtonIcon}
-				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginBlockStart: '2px', cursor: 'pointer', userSelect: 'none' })}
-			></mo-icon>
+        return this.pickerHidden ? html.nothing : html `
+			<mo-icon tabindex='-1' slot='end'
+				icon=${this.calendarIconButtonIcon}
+				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginBlockStart: '2px', cursor: 'pointer', userSelect: 'none' })}
+			></mo-icon>
 		`;
     }
     get popoverTemplate() {
-        return this.pickerHidden ? html.nothing : html `
-			<mo-popover tabindex='-1'
-				.anchor=${this} target='field'
-				?open=${bind(this, 'open', { sourceUpdated: () => setTimeout(() => this.calendar?.setNavigatingValue(this.navigationDate)) })}
-			>
-				${cache(!this.open ? html.nothing : html `
-					<mo-flex direction='horizontal'>
-						${this.presetsTemplate === html.nothing ? html.nothing : html `
-							<mo-flex id='presets'>
-								${this.presetsTemplate}
-							</mo-flex>
-						`}
-						${this.popoverSelectionTemplate}
-					</mo-flex>
-				`)}
-			</mo-popover>
+        return this.pickerHidden ? html.nothing : html `
+			<mo-popover tabindex='-1'
+				.anchor=${this} target='field'
+				?open=${bind(this, 'open', { sourceUpdated: () => setTimeout(() => this.calendar?.setNavigatingValue(this.navigationDate)) })}
+			>
+				${cache(!this.open ? html.nothing : html `
+					<mo-flex direction='horizontal'>
+						${this.presetsTemplate === html.nothing ? html.nothing : html `
+							<mo-flex id='presets'>
+								${this.presetsTemplate}
+							</mo-flex>
+						`}
+						${this.popoverSelectionTemplate}
+					</mo-flex>
+				`)}
+			</mo-popover>
 		`;
     }
     get popoverSelectionTemplate() {
-        return html `
-			<mo-flex id='selector' direction='horizontal' style='height: 100%; flex: 1'>
-				${this.dateTemplate}
-				${this.timeTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex id='selector' direction='horizontal' style='height: 100%; flex: 1'>
+				${this.dateTemplate}
+				${this.timeTemplate}
+			</mo-flex>
 		`;
     }
     getPresetTemplate(label, value) {
+        const v = value();
+        if (this.isPresetDisabled(v)) {
+            return html.nothing;
+        }
         const handlePresetClick = () => {
-            const v = value();
             this.handleChange(v);
             this.calendar?.setNavigatingValue(v instanceof DateTimeRange ? v.start : v instanceof DateTime ? v : undefined, 'smooth');
         };
         return html `<mo-list-item @click=${handlePresetClick}>${label}</mo-list-item>`;
     }
+    isPresetDisabled(value) {
+        const dates = value instanceof DateTimeRange
+            ? [value.start, value.end].filter((d) => !!d)
+            : value instanceof DateTime ? [value] : [];
+        const precision = this.precision > FieldDateTimePrecision.Day ? FieldDateTimePrecision.Day : this.precision;
+        return dates.some(date => (!!this.min && precision.isSmallerThan(date, this.min) && !precision.equals(date, this.min))
+            || (!!this.max && precision.isSmallerThan(this.max, date) && !precision.equals(this.max, date))
+            || (this.dateDisabled?.(date) ?? false));
+    }
     get dateTemplate() {
         return this.calendarTemplate;
     }
     get calendarTemplate() {
-        return html `
-			<mo-calendar
-				.precision=${this.precision > FieldDateTimePrecision.Day ? FieldDateTimePrecision.Day : this.precision}
-				.value=${this.calendarValue}
-				@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
-			></mo-calendar>
+        return html `
+			<mo-calendar
+				.precision=${this.precision > FieldDateTimePrecision.Day ? FieldDateTimePrecision.Day : this.precision}
+				.value=${this.calendarValue}
+				.min=${this.min}
+				.max=${this.max}
+				.dateDisabled=${this.dateDisabled}
+				@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
+			></mo-calendar>
 		`;
     }
     get timeTemplate() {
-        return this.precision <= FieldDateTimePrecision.Day ? html.nothing : html `
-			<mo-flex gap='0.5rem' style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3)'>
-				<mo-flex direction='horizontal' style='flex: 1'>
-					${this.hourListTemplate}
-					${this.minuteListTemplate}
-					${this.secondListTemplate}
-				</mo-flex>
-				<div class='timezone' title=${ifDefined(this.navigationDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
-					${this.navigationDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
-				</div>
-			</mo-flex>
+        return this.precision <= FieldDateTimePrecision.Day ? html.nothing : html `
+			<mo-flex gap='0.5rem' style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3)'>
+				<mo-flex direction='horizontal' style='flex: 1'>
+					${this.hourListTemplate}
+					${this.minuteListTemplate}
+					${this.secondListTemplate}
+				</mo-flex>
+				<div class='timezone' title=${ifDefined(this.navigationDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
+					${this.navigationDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
+				</div>
+			</mo-flex>
 		`;
     }
     get hourListTemplate() {
-        return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
-			<mo-hour-list style='flex: 1'
-				.navigationDate=${bind(this, 'navigationDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
-			></mo-hour-list>
+        return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
+			<mo-hour-list style='flex: 1'
+				.navigationDate=${bind(this, 'navigationDate')}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
+			></mo-hour-list>
 		`;
     }
     get minuteListTemplate() {
-        return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
-			<mo-minute-list style='flex: 1'
-				.navigationDate=${bind(this, 'navigationDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
-			></mo-minute-list>
+        return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
+			<mo-minute-list style='flex: 1'
+				.navigationDate=${bind(this, 'navigationDate')}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
+			></mo-minute-list>
 		`;
     }
     get secondListTemplate() {
-        return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
-			<mo-second-list style='flex: 1'
-				.navigationDate=${bind(this, 'navigationDate')}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
-			></mo-second-list>
+        return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
+			<mo-second-list style='flex: 1'
+				.navigationDate=${bind(this, 'navigationDate')}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
+			></mo-second-list>
 		`;
     }
     handleSelectedDateChange(date, precision) {
@@ -254,11 +283,20 @@ __decorate([
     property({ type: Boolean })
 ], FieldDateTimeBase.prototype, "pickerHidden", void 0);
 __decorate([
-    property({ type: Object })
+    property({ type: Object, converter: dateTimeConverter })
 ], FieldDateTimeBase.prototype, "shortcutReferenceDate", void 0);
 __decorate([
     property({ type: String, converter: value => FieldDateTimePrecision.parse(value || undefined) })
 ], FieldDateTimeBase.prototype, "precision", void 0);
+__decorate([
+    property({ type: Object, converter: dateTimeConverter })
+], FieldDateTimeBase.prototype, "min", void 0);
+__decorate([
+    property({ type: Object, converter: dateTimeConverter })
+], FieldDateTimeBase.prototype, "max", void 0);
+__decorate([
+    property({ type: Object, hasChanged })
+], FieldDateTimeBase.prototype, "dateDisabled", void 0);
 __decorate([
     state()
 ], FieldDateTimeBase.prototype, "navigationDate", void 0);

package/dist/FieldDateTimeRange.d.ts

@@ -28,10 +28,10 @@ declare enum FieldDateRangeSelection {
  */
 export declare class FieldDateTimeRange extends FieldDateTimeBase<DateTimeRange | undefined> {
     protected get selectedDate(): import("@3mo/date-time/DateTime.js").DateTime | undefined;
-    label: string;
     selection: FieldDateRangeSelection;
     value?: DateTimeRange;
     protected resetNavigationDate(): void;
+    protected get _label(): string;
     protected get presetsTemplate(): HTMLTemplateResult;
     static get styles(): import("@a11d/lit").CSSResult;
     protected calendarIconButtonIcon: MaterialIcon;

package/dist/FieldDateTimeRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAC/F,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;AAmBpE,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;;;;;;;;;;;;GAmBG;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,cAAuB,eAAe,IAoBuB,kBAAkB,CAC9E;IAED,WAAoB,MAAM,kCAezB;IAED,UAAmB,sBAAsB,EAAE,YAAY,CAAe;IAEtE,cACuB,WAAW,WAEjC;IAED,SAAS,KAAK,aAAa,wEAE1B;IAED,cAAuB,wBAAwB,uBAO9C;IAED,SAAS,KAAK,sBAAsB,uBAInC;IAED,OAAO,KAAK,sBAAsB,GASjC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAiBnF,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS;cAIzC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,kBAAkB,CAAA;KAC9C;CACD"}
+{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAC/F,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;AAmBpE,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,YAAY,8DAAoG;IAElH,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,SAAS,CAAC,mBAAmB;IAM7B,cAAuB,MAAM,WAE5B;IAED,cAAuB,eAAe,IAoBuB,kBAAkB,CAC9E;IAED,WAAoB,MAAM,kCAezB;IAED,UAAmB,sBAAsB,EAAE,YAAY,CAAe;IAEtE,cACuB,WAAW,WAEjC;IAED,SAAS,KAAK,aAAa,wEAE1B;IAED,cAAuB,wBAAwB,uBAO9C;IAED,SAAS,KAAK,sBAAsB,uBAInC;IAED,OAAO,KAAK,sBAAsB,GASjC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAiBnF,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS;cAIzC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,kBAAkB,CAAA;KAC9C;CACD"}

package/dist/FieldDateTimeRange.js

@@ -48,7 +48,6 @@ var FieldDateRangeSelection;
 let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     constructor() {
         super(...arguments);
-        this.label = t('Period');
         this.selection = FieldDateRangeSelection.Start;
         this.calendarIconButtonIcon = 'date_range';
     }
@@ -58,6 +57,9 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
             ? this.value?.start ?? this.navigationDate
             : this.value?.end ?? this.navigationDate;
     }
+    get _label() {
+        return super._label || t('Period');
+    }
     get presetsTemplate() {
         return join([
             this.precision < FieldDateTimePrecision.Day ? undefined : html `
@@ -146,9 +148,6 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
         return value ? DateRangeParser.parse(value, this.shortcutReferenceDate) : undefined;
     }
 };
-__decorate([
-    property()
-], FieldDateTimeRange.prototype, "label", void 0);
 __decorate([
     property()
 ], FieldDateTimeRange.prototype, "selection", void 0);