forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-date-field.mjs

@@ -0,0 +1,744 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, model, input, computed, linkedSignal, effect, Directive } from '@angular/core';
+import { createDefaults, FormUiControlBase, injectDateAdapter, injectTextDirection, RovingTabindex, resolveHourCycle, dayPeriodNames, SegmentEditor, injectHiddenInput, serializeISODate, assertTimeCapable, clampToBounds, ForDateTimeSegmentBase, ForDateTimeLiteralBase } from 'forty-cdk/core';
+
+const DIGITS = {
+    day: 2,
+    month: 2,
+    year: 4,
+    hour: 2,
+    minute: 2,
+    second: 2,
+    dayPeriod: 0,
+};
+/**
+ * Derives the ordered segment list for a day-granularity date field from the
+ * runtime locale, using `Intl.DateTimeFormat(...).formatToParts`. The visible
+ * order of day / month / year (and the separator characters between them)
+ * follows the locale — `MM/DD/YYYY` for `en-US`, `DD.MM.YYYY` for `de-DE`,
+ * `YYYY/MM/DD` for `ja-JP` — so the field never has to parse ambiguous
+ * free text.
+ *
+ * Pure: the same `locale` always yields the same list, and it touches no
+ * signals or DOM. A fixed reference date with distinct day / month values is
+ * formatted purely to read back the part order; its actual value never
+ * surfaces.
+ *
+ * @param locale BCP 47 locale, or `undefined` for the runtime default.
+ */
+function buildSegments(locale) {
+    const parts = new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    }).formatToParts(REFERENCE_DATE);
+    const segments = [];
+    for (const part of parts) {
+        switch (part.type) {
+            case 'day':
+            case 'month':
+            case 'year':
+                segments.push({ kind: 'editable', type: part.type, digits: DIGITS[part.type] });
+                break;
+            case 'literal':
+                segments.push({ kind: 'literal', literal: part.value });
+                break;
+            default:
+                break;
+        }
+    }
+    return segments;
+}
+// 1 Feb is deliberately distinct in day vs month so a locale that reuses a
+// digit can't mask the part ordering. The year (2000) is irrelevant — only the
+// `type` of each formatted part is read.
+const REFERENCE_DATE = new Date(2000, 1, 1);
+// 1 Feb 2000, 1:23:45 PM — distinct day / month and hour / minute / second, in
+// the afternoon so the `dayPeriod` part is present to read back.
+const REFERENCE_DATE_TIME = new Date(2000, 1, 1, 13, 23, 45);
+/**
+ * Derives the ordered segment list for a date(-time) field. At
+ * `granularity === 'day'` this is exactly {@link buildSegments} (date-only,
+ * byte-for-byte). At a finer granularity it appends the locale-ordered time
+ * segments (and the date↔time separator) by formatting a reference date-time
+ * with both date and time options in a single `Intl.DateTimeFormat` pass, so
+ * the order of every part — and whether an AM/PM `dayPeriod` is present —
+ * follows the locale and the resolved hour cycle.
+ *
+ * Pure: the same arguments always yield the same list.
+ *
+ * @param locale BCP 47 locale, or `undefined` for the runtime default.
+ * @param granularity Smallest editable unit; `'day'` stays date-only.
+ * @param hourCycle Resolved hour cycle (`12` shows AM/PM, `24` does not).
+ */
+function buildDateTimeSegments(locale, granularity, hourCycle) {
+    if (granularity === 'day') {
+        return buildSegments(locale);
+    }
+    const options = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        hour12: hourCycle === 12,
+    };
+    if (granularity !== 'hour') {
+        options.minute = '2-digit';
+    }
+    if (granularity === 'second') {
+        options.second = '2-digit';
+    }
+    const parts = new Intl.DateTimeFormat(locale, options).formatToParts(REFERENCE_DATE_TIME);
+    const segments = [];
+    for (const part of parts) {
+        switch (part.type) {
+            case 'day':
+            case 'month':
+            case 'year':
+            case 'hour':
+            case 'minute':
+            case 'second':
+            case 'dayPeriod':
+                segments.push({ kind: 'editable', type: part.type, digits: DIGITS[part.type] });
+                break;
+            case 'literal':
+                segments.push({ kind: 'literal', literal: part.value });
+                break;
+            default:
+                break;
+        }
+    }
+    return segments;
+}
+
+/**
+ * Injection token for the {@link ForDateFieldContext} provided by
+ * `[forDateField]`. Segment and literal children inject it to coordinate with
+ * the root.
+ */
+const FOR_DATE_FIELD_CONTEXT = new InjectionToken('FOR_DATE_FIELD_CONTEXT');
+/**
+ * Resolves the surrounding {@link ForDateFieldContext}, throwing a descriptive,
+ * primitive-prefixed error when used outside a `[forDateField]`.
+ *
+ * @param piece Name of the calling directive, used in the error message.
+ */
+function injectDateFieldContext(piece) {
+    const ctx = inject(FOR_DATE_FIELD_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/date-field] ${piece} must be used inside a [forDateField].`);
+    }
+    return ctx;
+}
+
+/**
+ * Library default accessible name for each editable segment. Used when neither
+ * the segment's explicit `ariaLabel` nor a `provideForDateFieldDefaults`
+ * override supplies one for that part.
+ */
+const DEFAULT_DATE_FIELD_SEGMENT_LABELS = {
+    day: 'day',
+    month: 'month',
+    year: 'year',
+    hour: 'hour',
+    minute: 'minute',
+    second: 'second',
+    dayPeriod: 'AM/PM',
+};
+const FALLBACK = {
+    emptySegmentText: 'Empty',
+    segmentLabels: DEFAULT_DATE_FIELD_SEGMENT_LABELS,
+};
+const { token, provideDefaults } = createDefaults('FOR_DATE_FIELD_DEFAULTS', FALLBACK);
+/** Token holding the resolved date-field defaults for the current scope. */
+const FOR_DATE_FIELD_DEFAULTS = token;
+/**
+ * Configures forty-cdk date-field defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForDateFieldDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Year used to resolve day ranges (Feb length) while the year segment is empty.
+ * Deliberately a common (non-leap) year so an empty-year February reports
+ * `aria-valuemax="28"` rather than briefly jumping to 29.
+ */
+const RESOLVER_YEAR = 2001;
+/**
+ * Headless, segmented, spin-editable date input — the keyboard-first
+ * counterpart to `ForCalendar`. There is no single WAI-ARIA APG pattern for a
+ * date field; it is a composition of
+ * [Spinbuttons](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) inside a
+ * labelled `role="group"`.
+ * Each day / month / year part is an independent `role="spinbutton"` segment
+ * (`[forDateFieldSegment]`) so entry is unambiguous and locale-correct — no
+ * free-text parsing, no `03/04`-is-it-March-4th guesswork.
+ *
+ * `ForDateField` is the root: it owns the entered parts, composes them into the
+ * adapter's date type, resolves the locale-ordered segment list, and exposes
+ * everything to the segment / literal children through
+ * {@link FOR_DATE_FIELD_CONTEXT}. The spin-button engine (digit typing, stepping,
+ * Home/End, RTL focus moves, the segment registry) lives in the shared
+ * `_internal/datetime` {@link SegmentEditor}; the root supplies only the
+ * date-specific bits (segment bounds, the today-seed, the month-name
+ * `aria-valuetext`, and the create/clamp compose). All date math goes through
+ * the pluggable {@link DateAdapter} shared with `ForCalendar`
+ * (`provideInternationalizedDateAdapter()` / `provideNativeDateAdapter()`), so
+ * the field hard-depends on no date library.
+ *
+ * Set `granularity` coarser-than-a-day off (`'hour'` / `'minute'` / `'second'`)
+ * to make it a **date-time field**: time segments (hour / minute / second and,
+ * in 12-hour mode, an AM·PM `dayPeriod`) are appended after the date segments in
+ * the same `role="group"`, sharing the one roving tab stop. This needs a
+ * time-capable adapter (`provideNativeDateAdapter()` /
+ * `provideInternationalizedDateTimeAdapter()`); `granularity = 'day'` (default)
+ * is unchanged and works with any adapter.
+ *
+ * It implements `FormValueControl<D | null>` from `@angular/forms/signals`, so
+ * it auto-wires with `[formField]` and auto-associates inside a `[forField]`.
+ * The value stays `null` until every visible segment is filled.
+ *
+ * @typeParam D The adapter's immutable date (or, with `granularity > 'day'`,
+ *   date-time) type.
+ *
+ * Note: the date bounds are named `minDate` / `maxDate`, not `min` / `max` —
+ * the latter are reserved `FormUiControl` members typed `number | undefined`
+ * for numeric validators, so a date-typed `min` / `max` would break the
+ * `FormValueControl` contract.
+ *
+ * @example
+ * ```html
+ * <div forDateField [(value)]="date" [minDate]="min" [maxDate]="max" name="dob"
+ *      [ariaLabel]="'Date of birth'" #field="forDateField">
+ *   @for (seg of field.segments(); track seg.id) {
+ *     @if (seg.isLiteral) {
+ *       <span forDateFieldLiteral>{{ seg.text }}</span>
+ *     } @else {
+ *       <span forDateFieldSegment [segment]="seg.type!">{{ seg.text }}</span>
+ *     }
+ *   }
+ * </div>
+ * ```
+ */
+class ForDateField extends FormUiControlBase {
+    #host = inject(ElementRef);
+    #defaults = inject(FOR_DATE_FIELD_DEFAULTS);
+    /** The active date adapter, resolved from `FOR_DATE_ADAPTER` (shared with `ForCalendar`). */
+    adapter = injectDateAdapter('ForDateField');
+    /**
+     * Two-way bindable entered date, or `null` while any segment is empty.
+     * Required by `FormValueControl<D | null>`. The `model()` change emitter
+     * (`(valueChange)`) fires only when the field itself composes a new value,
+     * never on consumer writes via `[(value)]`.
+     */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum selectable date (inclusive). A composed value below it is clamped
+     * up. The comparison is by the **full instant** (`DateAdapter.compare`), so at
+     * `granularity > 'day'` a non-midnight `minDate` clamps the time too, and the
+     * result is identical across time-capable adapters. Named `minDate` (not
+     * `min`) because `FormUiControl.min` is reserved for a numeric validator bound
+     * by `[formField]`.
+     */
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum selectable date (inclusive). A composed value above it is clamped
+     * down. Compared by the **full instant** like {@link minDate}. Named `maxDate`
+     * (not `max`) for the same reason as {@link minDate}.
+     */
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Date-time precision. `'day'` (default, **non-breaking**) is a pure date
+     * field. `'hour'` / `'minute'` / `'second'` append the matching time segments
+     * and the value carries a time component — which requires a time-capable
+     * adapter (`provideNativeDateAdapter()` /
+     * `provideInternationalizedDateTimeAdapter()`).
+     */
+    granularity = input('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    /**
+     * 12- or 24-hour cycle for the time segments. When `null` (default) it is
+     * derived from the locale. A 12-hour cycle adds the AM/PM `dayPeriod` segment.
+     * Only meaningful when `granularity > 'day'`.
+     */
+    hourCycle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    /** BCP 47 locale driving segment order and separators. Defaults to the runtime locale. */
+    locale = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-segment placeholder shown while empty. Unspecified parts fall back to a
+     * letter-repeat default (`dd` / `mm` / `yyyy` / `hh` / `mm` / `ss` / `--`).
+     */
+    placeholder = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the field group. Emits no `aria-label` while `null`. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute and mirrors the
+     * ArrowLeft / ArrowRight segment navigation in RTL.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /** Shared roving-tabindex tracker: exactly one segment owns `tabindex=0`. */
+    roving = new RovingTabindex();
+    /** Resolved hour cycle (`12` shows AM/PM, `24` does not). */
+    #cycle = computed(() => resolveHourCycle(this.locale() ?? undefined, this.hourCycle()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#cycle" }] : /* istanbul ignore next */ []));
+    #specs = computed(() => buildDateTimeSegments(this.locale() ?? undefined, this.granularity(), this.#cycle()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#specs" }] : /* istanbul ignore next */ []));
+    #editableOrder = computed(() => this.#specs()
+        .filter((spec) => spec.kind === 'editable')
+        .map((spec) => spec.type), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#editableOrder" }] : /* istanbul ignore next */ []));
+    #periodNames = computed(() => dayPeriodNames(this.locale() ?? undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#periodNames" }] : /* istanbul ignore next */ []));
+    /**
+     * The entered parts. A `linkedSignal` keyed on `value`: a non-null write
+     * (consumer, `[formField]`, or our own compose) rehydrates the segments from
+     * the date. A `null` transition is disambiguated by the prior parts: an
+     * *internal* edit clearing one segment always leaves the others, so
+     * `previous` still carries a filled part and is preserved (clearing the day
+     * never wipes the month / year); an *external* reset of a complete value
+     * leaves `previous` fully filled, so the field clears.
+     */
+    #parts = linkedSignal({ ...(ngDevMode ? { debugName: "#parts" } : /* istanbul ignore next */ {}), source: this.value,
+        computation: (current, previous) => {
+            if (current !== null) {
+                const parts = {
+                    day: this.adapter.getDate(current),
+                    month: this.adapter.getMonth(current),
+                    year: this.adapter.getYear(current),
+                    hour: null,
+                    minute: null,
+                    second: null,
+                };
+                if (this.granularity() !== 'day') {
+                    const time = this.#time();
+                    parts.hour = time.getHours(current);
+                    parts.minute = time.getMinutes(current);
+                    parts.second = time.getSeconds(current);
+                }
+                return parts;
+            }
+            const prior = previous?.value;
+            if (prior && this.#someEditableEmpty(prior)) {
+                return prior;
+            }
+            return { day: null, month: null, year: null, hour: null, minute: null, second: null };
+        } });
+    #editor = new SegmentEditor({
+        disabled: this.effectiveDisabled,
+        readonly: this.readonly,
+        roving: this.roving,
+        cycle: this.#cycle,
+        specs: this.#specs,
+        editableOrder: this.#editableOrder,
+        periodNames: this.#periodNames,
+        parts: () => this.#parts(),
+        segmentMin: (type) => this.segmentMin(type),
+        segmentMax: (type) => this.segmentMax(type),
+        seed: (type) => this.#seed(type),
+        placeholderFor: (type) => this.#placeholderFor(type),
+        valueText: (type) => this.#valueText(type),
+        commit: (next) => this.#commitParts(next),
+    });
+    /**
+     * The ordered, locale-derived segments (editable + literals) to render. Each
+     * entry carries the text to display: the formatted value when filled, the
+     * placeholder while empty, or the literal separator.
+     */
+    segments = this.#editor.segments;
+    constructor() {
+        super();
+        injectHiddenInput({
+            name: this.name,
+            values: computed(() => {
+                const current = this.value();
+                if (current === null) {
+                    return [];
+                }
+                return [serializeISODate(this.adapter, current, this.granularity(), 'ForDateField')];
+            }),
+            disabled: this.effectiveDisabled,
+        });
+        // Eager validation: a date-time field needs a time-capable adapter. Fail
+        // loudly as soon as the granularity input settles. The throw is raised
+        // during change detection (inside this `effect`) and propagates through
+        // Angular's error handling, so a day-only adapter misconfiguration is
+        // surfaced — never silently swallowed.
+        effect(() => {
+            if (this.granularity() !== 'day') {
+                this.#time();
+            }
+        });
+    }
+    segmentValue(type) {
+        return this.#editor.segmentValue(type);
+    }
+    segmentMin(type) {
+        if (type === 'hour') {
+            return this.#cycle() === 12 ? 1 : 0;
+        }
+        if (type === 'minute' || type === 'second' || type === 'dayPeriod') {
+            return 0;
+        }
+        return 1;
+    }
+    segmentMax(type) {
+        switch (type) {
+            case 'month':
+                return 12;
+            case 'year':
+                return 9999;
+            case 'hour':
+                return this.#cycle() === 12 ? 12 : 23;
+            case 'minute':
+            case 'second':
+                return 59;
+            case 'dayPeriod':
+                return 1;
+            default: {
+                const parts = this.#parts();
+                const probe = this.adapter.createDate(parts.year ?? RESOLVER_YEAR, parts.month ?? 1, 1);
+                return this.adapter.getDaysInMonth(probe);
+            }
+        }
+    }
+    segmentValueText(type) {
+        return this.#editor.segmentValueText(type);
+    }
+    segmentDisplayText(type) {
+        return this.#editor.segmentDisplayText(type);
+    }
+    isSegmentEmpty(type) {
+        return this.#editor.isSegmentEmpty(type);
+    }
+    isFirstSegmentType(type) {
+        return this.#editor.isFirstSegmentType(type);
+    }
+    registerSegment(handle) {
+        this.#editor.registerSegment(handle);
+    }
+    unregisterSegment(handle) {
+        this.#editor.unregisterSegment(handle);
+    }
+    focusSegment(type) {
+        this.#editor.focusSegment(type);
+    }
+    typeDigit(type, digit) {
+        this.#editor.typeDigit(type, digit);
+    }
+    step(type, delta) {
+        this.#editor.step(type, delta);
+    }
+    goToBound(type, bound) {
+        this.#editor.goToBound(type, bound);
+    }
+    setDayPeriod(period) {
+        this.#editor.setDayPeriod(period);
+    }
+    clear(type) {
+        this.#editor.clear(type);
+    }
+    focusSibling(type, step) {
+        this.#editor.focusSibling(type, step);
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.#host.nativeElement.contains(next)) {
+            this.markTouched();
+        }
+    }
+    /** The active adapter, narrowed to a time-capable one; throws when it is day-only. */
+    #time() {
+        return assertTimeCapable(this.adapter, 'ForDateField');
+    }
+    /** Field-specific `aria-valuetext`: the empty marker or the localized month name. */
+    #valueText(type) {
+        if (this.isSegmentEmpty(type)) {
+            return this.#defaults.emptySegmentText;
+        }
+        if (type !== 'month') {
+            return null;
+        }
+        const month = this.#parts().month;
+        if (month === null) {
+            return null;
+        }
+        // Route the month name through the adapter's `format` so it tracks the
+        // adapter's calendar system rather than assuming Gregorian month numbering.
+        // A probe date built with `createDate` maps the 1-12 number to a localized
+        // long name without involving the entered value.
+        return this.adapter.format(this.adapter.createDate(RESOLVER_YEAR, month, 1), {
+            month: 'long',
+        });
+    }
+    /** Base value for stepping an empty segment: date parts from today, time parts from their minimum. */
+    #seed(type) {
+        if (type === 'hour') {
+            return this.#toInternalHour(this.segmentMin('hour'));
+        }
+        if (type === 'minute' || type === 'second' || type === 'dayPeriod') {
+            return 0;
+        }
+        const today = this.adapter.today();
+        const base = type === 'day'
+            ? this.adapter.getDate(today)
+            : type === 'month'
+                ? this.adapter.getMonth(today)
+                : this.adapter.getYear(today);
+        return Math.min(this.segmentMax(type), Math.max(this.segmentMin(type), base));
+    }
+    /** Converts a 12-hour display hour to a 0-23 hour, preserving the entered AM/PM. */
+    #toInternalHour(display) {
+        if (this.#cycle() === 24) {
+            return display;
+        }
+        const hour = this.#parts().hour;
+        const pm = hour !== null && hour >= 12;
+        const base = display % 12;
+        return pm ? base + 12 : base;
+    }
+    #placeholderFor(type) {
+        const override = this.placeholder()[type];
+        if (override) {
+            return override;
+        }
+        switch (type) {
+            case 'day':
+                return 'dd';
+            case 'month':
+                return 'mm';
+            case 'year':
+                return 'yyyy';
+            case 'hour':
+                return 'hh';
+            case 'minute':
+                return 'mm';
+            case 'second':
+                return 'ss';
+            default:
+                return '--';
+        }
+    }
+    #someEditableEmpty(parts) {
+        return this.#editableOrder().some((type) => {
+            if (type === 'dayPeriod') {
+                return parts.hour === null;
+            }
+            return parts[type] === null;
+        });
+    }
+    /**
+     * Re-clamps `day` to the resolved month/year length so the day segment's
+     * `aria-valuenow` never exceeds its `aria-valuemax` after stepping the month
+     * or year (e.g. day 31 + step to February → 28/29). Only ever shrinks the
+     * day; an empty day is left untouched.
+     */
+    #clampDay(parts) {
+        if (parts.day === null) {
+            return parts;
+        }
+        const probe = this.adapter.createDate(parts.year ?? RESOLVER_YEAR, parts.month ?? 1, 1);
+        const maxDay = this.adapter.getDaysInMonth(probe);
+        if (parts.day <= maxDay) {
+            return parts;
+        }
+        return { ...parts, day: maxDay };
+    }
+    #commitParts(rawNext) {
+        const next = this.#clampDay(rawNext);
+        this.#parts.set(next);
+        const granularity = this.granularity();
+        const needHour = granularity !== 'day';
+        const needMinute = granularity === 'minute' || granularity === 'second';
+        const needSecond = granularity === 'second';
+        const complete = next.day !== null &&
+            next.month !== null &&
+            next.year !== null &&
+            (!needHour || next.hour !== null) &&
+            (!needMinute || next.minute !== null) &&
+            (!needSecond || next.second !== null);
+        if (!complete) {
+            this.value.set(null);
+            return;
+        }
+        let created = this.adapter.createDate(next.year, next.month, next.day);
+        if (needHour) {
+            created = this.#time().setTime(created, next.hour, needMinute ? next.minute : 0, needSecond ? next.second : 0);
+        }
+        this.value.set(clampToBounds(this.adapter, created, this.minDate(), this.maxDate()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDateField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDateField, isStandalone: true, selector: "[forDateField]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.dir": "dir()", "attr.aria-label": "ariaLabel() || null", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.aria-readonly": "readonly() ? \"true\" : null", "attr.aria-required": "required() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-readonly": "readonly() ? \"\" : null", "attr.data-empty": "value() === null ? \"\" : null" } }, providers: [{ provide: FOR_DATE_FIELD_CONTEXT, useExisting: ForDateField }], exportAs: ["forDateField"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDateField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDateField]',
+                    exportAs: 'forDateField',
+                    host: {
+                        role: 'group',
+                        '[attr.dir]': 'dir()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'readonly() ? "true" : null',
+                        '[attr.aria-required]': 'required() ? "true" : null',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-readonly]': 'readonly() ? "" : null',
+                        '[attr.data-empty]': 'value() === null ? "" : null',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                    providers: [{ provide: FOR_DATE_FIELD_CONTEXT, useExisting: ForDateField }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }] } });
+
+/**
+ * One editable spinbutton segment of a `[forDateField]` — the day, month, or
+ * year part (and, at `granularity > 'day'`, hour / minute / second / the AM·PM
+ * `dayPeriod`). Apply on a focusable element (typically a `<span>`); the shared
+ * {@link ForDateTimeSegmentBase} adds `role="spinbutton"`, the `aria-valuemin` /
+ * `aria-valuemax` / `aria-valuenow` / `aria-valuetext` reflection, the roving
+ * tabindex, and the full keyboard map:
+ *
+ * - **digits** fill a numeric segment and auto-advance to the next when full;
+ * - **a / p** set the period on the AM/PM (`dayPeriod`) segment;
+ * - **ArrowUp / ArrowDown** step the value (day / month / hour / minute / second
+ *   wrap, year clamps, dayPeriod toggles);
+ * - **ArrowLeft / ArrowRight** move between segments (mirrored under RTL, no wrap);
+ * - **Home / End** jump to the segment minimum / maximum (dayPeriod → AM / PM);
+ * - **Backspace / Delete** clear a numeric segment.
+ *
+ * All state lives on the root `ForDateField`; the segment only reads it and
+ * forwards intents. The rendered text comes from the root's `segments()` list
+ * (`{{ seg.text }}`), so this element carries behavior and ARIA, not content.
+ */
+class ForDateFieldSegment extends ForDateTimeSegmentBase {
+    ctx = injectDateFieldContext('ForDateFieldSegment');
+    #defaults = inject(FOR_DATE_FIELD_DEFAULTS);
+    /** Which date or time part this segment edits. */
+    segment = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segment" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for this segment. Falls back to the scope's localized
+     * default label for the part (via `provideForDateFieldDefaults`), which in
+     * turn defaults to the part name — and `'AM/PM'` for the `dayPeriod` segment.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => {
+        const type = this.segment();
+        return (this.ariaLabel() ??
+            this.#defaults.segmentLabels[type] ??
+            DEFAULT_DATE_FIELD_SEGMENT_LABELS[type]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.registerSegment();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDateFieldSegment, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDateFieldSegment, isStandalone: true, selector: "[forDateFieldSegment]", inputs: { segment: { classPropertyName: "segment", publicName: "segment", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["forDateFieldSegment"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDateFieldSegment, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDateFieldSegment]',
+                    exportAs: 'forDateFieldSegment',
+                }]
+        }], ctorParameters: () => [], propDecorators: { segment: [{ type: i0.Input, args: [{ isSignal: true, alias: "segment", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * A decorative separator (`/`, `.`, `-`) between the editable segments of a
+ * `[forDateField]`. Apply on the element rendering the literal text; it is
+ * marked `aria-hidden` and stays out of the tab order, so assistive tech reads
+ * only the spinbutton segments. The separator characters come from the root's
+ * locale-ordered `segments()` list (`{{ seg.text }}`).
+ */
+class ForDateFieldLiteral extends ForDateTimeLiteralBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDateFieldLiteral, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDateFieldLiteral, isStandalone: true, selector: "[forDateFieldLiteral]", exportAs: ["forDateFieldLiteral"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDateFieldLiteral, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDateFieldLiteral]',
+                    exportAs: 'forDateFieldLiteral',
+                }]
+        }] });
+
+/**
+ * Exact public names of every `ForDateField` input, its models included. Spread it into the
+ * `inputs` array of a `hostDirectives` entry so a wrapper component re-exposes the
+ * primitive's full surface — the Signal Forms members `[formField]` binds among them —
+ * without hand-maintaining the list. Always spread into an inline object literal as shown
+ * below: the literal is what keeps the entry statically analyzable for consumers compiling
+ * against the published package. An anti-drift spec fails when this list no longer matches
+ * the directive's actual API. See `docs/wrapping-form-primitives.md` for both supported
+ * wrapping patterns.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'div[myDateField]',
+ *   template: '',
+ *   hostDirectives: [
+ *     {
+ *       directive: ForDateField,
+ *       inputs: [...FOR_DATE_FIELD_HOST_DIRECTIVE_INPUTS],
+ *       outputs: [...FOR_DATE_FIELD_HOST_DIRECTIVE_OUTPUTS],
+ *     },
+ *   ],
+ * })
+ * export class MyDateField {}
+ * ```
+ */
+const FOR_DATE_FIELD_HOST_DIRECTIVE_INPUTS = [
+    'value',
+    'ariaLabel',
+    'dir',
+    'dirty',
+    'disabled',
+    'errors',
+    'granularity',
+    'hourCycle',
+    'invalid',
+    'locale',
+    'maxDate',
+    'minDate',
+    'name',
+    'pending',
+    'placeholder',
+    'readonly',
+    'required',
+    'touched',
+];
+/**
+ * Exact public names of every `ForDateField` output, the Signal Forms `touch` output
+ * included. Spread it into the `outputs` array of the same `hostDirectives` entry as
+ * {@link FOR_DATE_FIELD_HOST_DIRECTIVE_INPUTS}.
+ */
+const FOR_DATE_FIELD_HOST_DIRECTIVE_OUTPUTS = [
+    'valueChange',
+    'touchedChange',
+    'touch',
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_DATE_FIELD_SEGMENT_LABELS, FOR_DATE_FIELD_CONTEXT, FOR_DATE_FIELD_DEFAULTS, FOR_DATE_FIELD_HOST_DIRECTIVE_INPUTS, FOR_DATE_FIELD_HOST_DIRECTIVE_OUTPUTS, ForDateField, ForDateFieldLiteral, ForDateFieldSegment, provideForDateFieldDefaults };
+//# sourceMappingURL=forty-cdk-date-field.mjs.map