@nanahoshi/mona-ui 0.24.4 → 0.24.6

package/fesm2022/nanahoshi-mona-ui-date-input.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { Directive, Pipe, Injectable } from '@angular/core';
-import { toImmutableSet, where, select, sequence } from '@mirei/ts-collections';
+import { Directive, Pipe, Injectable, untracked, linkedSignal } from '@angular/core';
+import { toImmutableSet, where, select, sequence, any } from '@mirei/ts-collections';
 import { cva } from 'class-variance-authority';
 import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 import { Subject } from 'rxjs';
+import { minDateError, maxDateError, transformedValue } from '@angular/forms/signals';
+import { parseGregorianDate, gregorianDateTime } from '@nanahoshi/mona-ui/i18n';
 
 class DateInputPrefixTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateInputPrefixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -121,9 +123,168 @@ const generateSecondSet = (step = 1) => {
     return select(sequence(0, 59, step), s => ({ value: s, viewValue: s })).toImmutableSet();
 };
 
+/**
+ * The clock a locale uses by default: "12" for en-US, ja-JP and ko-KR, "24" for de-DE, fr-FR and tr-TR. Locales that
+ * mark the hour cycle explicitly (`en-US-u-hc-h23`) are honoured.
+ */
+function getLocaleHourFormat(localeId) {
+    try {
+        const hourCycle = new Intl.DateTimeFormat(localeId, { hour: "numeric" }).resolvedOptions().hourCycle;
+        return hourCycle === "h11" || hourCycle === "h12" ? "12" : "24";
+    }
+    catch {
+        return "24";
+    }
+}
+
+const singleDigitTokens = new Set(["MM", "dd", "HH", "hh", "mm", "ss"]);
+/**
+ * Relaxes a Luxon format for typing: two-digit tokens (`MM`, `dd`, `HH`, `hh`, `mm`, `ss`) also accept one digit, and
+ * with `twoDigitYear` the year is typed as two digits. Quoted literals are left alone.
+ */
+function relaxFormat(format, twoDigitYear) {
+    return format
+        .split(/('(?:[^']|'')*')/)
+        .map((part, index) => {
+        if (index % 2 === 1) {
+            return part;
+        }
+        return part.replace(/([A-Za-z])\1*/g, run => {
+            if (singleDigitTokens.has(run)) {
+                return run[0];
+            }
+            return twoDigitYear && run === "yyyy" ? "yy" : run;
+        });
+    })
+        .join("");
+}
+/**
+ * Parses text typed into a picker. The input format is tried first, then the same format with one-digit months, days,
+ * hours, minutes and seconds ("1/5/2025", "9:05"), then with a two-digit year ("1/5/25"). Two-digit years up to 60
+ * read as 20xx, later ones as 19xx.
+ * @returns The parsed date, or null when the text isn't a date in any of these forms.
+ */
+function parseTypedDate(text, format, localeId) {
+    const trimmed = text.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const relaxed = relaxFormat(format, false);
+    const twoDigitYear = relaxFormat(format, true);
+    const candidates = [format, ...(relaxed === format ? [] : [relaxed])];
+    for (const candidate of candidates) {
+        const dateTime = parseGregorianDate(trimmed, candidate, localeId);
+        if (dateTime.isValid) {
+            return dateTime;
+        }
+    }
+    if (twoDigitYear !== relaxed) {
+        // Luxon's "yy" also takes three digits and keeps them as they are ("3/4/202" is the year 202); two digits
+        // always land in 1961-2060, and four were read by the formats above.
+        const dateTime = parseGregorianDate(trimmed, twoDigitYear, localeId);
+        if (dateTime.isValid && dateTime.year >= 1900) {
+            return dateTime;
+        }
+    }
+    return null;
+}
+/** Whether a date is one of `disabledDates`, compared by day. */
+function isDateDisabled(date, disabledDates) {
+    if (!disabledDates) {
+        return false;
+    }
+    if (typeof disabledDates === "function") {
+        return disabledDates(date);
+    }
+    return any(disabledDates, disabled => disabled.getFullYear() === date.getFullYear() &&
+        disabled.getMonth() === date.getMonth() &&
+        disabled.getDate() === date.getDate());
+}
+/** The part of a date that min and max are compared on: the day, the full date and time, or the time of day. */
+function comparable(date, unit) {
+    switch (unit) {
+        case "date":
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+        case "time":
+            return ((date.getHours() * 60 + date.getMinutes()) * 60 + date.getSeconds()) * 1000 + date.getMilliseconds();
+        default:
+            return date.getTime();
+    }
+}
+/**
+ * Checks a typed date against a picker's min, max and `disabledDates`, the same limits its popup applies.
+ * @returns The error to report, or null when the date is allowed. Range errors are Angular's `minDate` and `maxDate`
+ * errors, so they read like the signal-forms validators.
+ */
+function checkTypedDate(date, constraints) {
+    const { disabledDates, max, min, unit } = constraints;
+    const value = comparable(date, unit);
+    if (min && value < comparable(min, unit)) {
+        return minDateError(min);
+    }
+    if (max && value > comparable(max, unit)) {
+        return maxDateError(max);
+    }
+    if (unit !== "time" && isDateDisabled(date, disabledDates)) {
+        const error = { kind: "disabledDate", date };
+        return error;
+    }
+    return null;
+}
+/** The error reported for text that doesn't parse. */
+function typedDateParseError() {
+    return { kind: "parse" };
+}
+/**
+ * The typed-input pipeline of the date, time and date-time pickers. Call it in an injection context: the errors are
+ * reported to the form field (signal forms, `ngModel` or a reactive form control) bound to the picker.
+ */
+function createTypedDateInput(options) {
+    const { constraints, format, localeId, resolve, value } = options;
+    const formatValue = (date) => date ? gregorianDateTime(date, localeId()).toFormat(format()) : "";
+    const committed = transformedValue(value, {
+        format: formatValue,
+        parse: (raw) => {
+            const current = untracked(value);
+            if (!raw.trim()) {
+                return { value: null };
+            }
+            const parsed = untracked(() => parseTypedDate(raw, format(), localeId()));
+            if (!parsed) {
+                return { error: typedDateParseError() };
+            }
+            const date = resolve ? resolve(parsed, current) : parsed.toJSDate();
+            const error = untracked(() => checkTypedDate(date, constraints()));
+            if (error) {
+                return { error };
+            }
+            return current?.getTime() === date.getTime() ? {} : { value: date };
+        }
+    });
+    const text = linkedSignal(() => committed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    return {
+        commit: () => {
+            committed.set(untracked(text));
+            if (untracked(committed.parseErrors).length === 0) {
+                // Shows "1/5/2025" as "01/05/2025" even when it names the date already set.
+                text.set(untracked(() => formatValue(value())));
+            }
+        },
+        edit: (typed) => {
+            text.set(typed);
+            if (typed === "") {
+                committed.set("");
+            }
+        },
+        errors: committed.parseErrors,
+        text
+    };
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarService, DateInputPrefixTemplateDirective, TimeLimiterPipe, TimeSelectorService, datePopupThemeVariants, generateHourSet, generateMinuteSet, generateSecondSet };
+export { CalendarService, DateInputPrefixTemplateDirective, TimeLimiterPipe, TimeSelectorService, checkTypedDate, createTypedDateInput, datePopupThemeVariants, generateHourSet, generateMinuteSet, generateSecondSet, getLocaleHourFormat, isDateDisabled, parseTypedDate, typedDateParseError };
 //# sourceMappingURL=nanahoshi-mona-ui-date-input.mjs.map