@3mo/date-time-fields 0.13.0-preview.0 → 0.14.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 = () => {
@@ -180,13 +194,25 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     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;
     }
@@ -195,6 +221,9 @@ export class FieldDateTimeBase extends InputFieldComponent {
 			<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>
 		`;
@@ -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);