forty-cdk 0.2.0 → 0.3.0

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

@@ -0,0 +1,593 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, model, input, computed, linkedSignal, Directive } from '@angular/core';
+import { createDefaults, FormUiControlBase, assertTimeCapable, injectDateAdapter, injectTextDirection, RovingTabindex, resolveHourCycle, dayPeriodNames, SegmentEditor, injectHiddenInput, serializeISOTime, timeSentinel, secondsOfDay, composeWithTime, FOR_TIME_VALUE_SOURCE, ForDateTimeSegmentBase, ForDateTimeLiteralBase } from 'forty-cdk/core';
+
+const DIGITS = {
+    hour: 2,
+    minute: 2,
+    second: 2,
+    dayPeriod: 0,
+};
+// 1:23:45 PM — distinct hour / minute / second values and a PM reference so the
+// `dayPeriod` part is present to read back. Only each part's `type` (and the
+// separators) are used; the concrete value never surfaces.
+const REFERENCE_TIME = new Date(2000, 0, 1, 13, 23, 45);
+/**
+ * Derives the ordered segment list for a time field from the runtime locale,
+ * the resolved hour cycle, and the granularity, using
+ * `Intl.DateTimeFormat(...).formatToParts`. The visible order of the segments
+ * (and the separators between them), and whether an AM/PM `dayPeriod` segment
+ * is present, follow the locale and the 12-/24-hour cycle.
+ *
+ * Pure: the same arguments always yield the same list, touching no signals or
+ * DOM.
+ *
+ * @param locale BCP 47 locale, or `undefined` for the runtime default.
+ * @param hourCycle Resolved hour cycle (`12` shows AM/PM, `24` does not).
+ * @param granularity Smallest editable unit; trims minute / second segments.
+ */
+function buildTimeSegments(locale, hourCycle, granularity) {
+    const options = { 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_TIME);
+    const segments = [];
+    for (const part of parts) {
+        switch (part.type) {
+            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 ForTimeFieldContext} provided by
+ * `[forTimeField]`. Segment and literal children inject it to coordinate with
+ * the root.
+ */
+const FOR_TIME_FIELD_CONTEXT = new InjectionToken('FOR_TIME_FIELD_CONTEXT');
+/**
+ * Resolves the surrounding {@link ForTimeFieldContext}, throwing a descriptive,
+ * primitive-prefixed error when used outside a `[forTimeField]`.
+ *
+ * @param piece Name of the calling directive, used in the error message.
+ */
+function injectTimeFieldContext(piece) {
+    const ctx = inject(FOR_TIME_FIELD_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/time-field] ${piece} must be used inside a [forTimeField].`);
+    }
+    return ctx;
+}
+
+/**
+ * Library default accessible name for each editable segment. Used when neither
+ * the segment's explicit `ariaLabel` nor a `provideForTimeFieldDefaults`
+ * override supplies one for that part.
+ */
+const DEFAULT_TIME_FIELD_SEGMENT_LABELS = {
+    hour: 'hour',
+    minute: 'minute',
+    second: 'second',
+    dayPeriod: 'AM/PM',
+};
+const FALLBACK = {
+    emptySegmentText: 'Empty',
+    segmentLabels: DEFAULT_TIME_FIELD_SEGMENT_LABELS,
+};
+const { token, provideDefaults } = createDefaults('FOR_TIME_FIELD_DEFAULTS', FALLBACK);
+/** Token holding the resolved time-field defaults for the current scope. */
+const FOR_TIME_FIELD_DEFAULTS = token;
+/**
+ * Configures forty-cdk time-field defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForTimeFieldDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Headless, segmented, spin-editable time-of-day input — the time counterpart
+ * to `ForDateField`. There is no single WAI-ARIA APG pattern for a time field;
+ * it is a composition of
+ * [Spinbuttons](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) inside a
+ * labelled `role="group"`.
+ * Each hour / minute / second / AM·PM part is an independent
+ * `role="spinbutton"` segment (`[forTimeFieldSegment]`) so entry is unambiguous
+ * and locale-correct.
+ *
+ * `ForTimeField` is the root: it owns the entered parts, composes them into the
+ * adapter's date-time type, resolves the locale-ordered segment list, and
+ * exposes everything to the segment / literal children through
+ * {@link FOR_TIME_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
+ * time-specific bits (segment bounds, the midnight seed, and the
+ * sentinel-anchored setTime/clamp compose). All time math goes through the
+ * pluggable {@link import('../_internal/date-adapter/date-adapter').DateAdapter} shared with
+ * `ForCalendar`, which **must be time-capable** — `provideNativeDateAdapter()`
+ * or `provideInternationalizedDateTimeAdapter()` (the day-only
+ * `provideInternationalizedDateAdapter()` throws).
+ *
+ * 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. When no value
+ * is bound yet, the composed value is anchored on a fixed, DST-stable sentinel
+ * date (`2000-01-01`) rather than today, so a wall-clock time always round-trips
+ * to the same instant; bind an existing date-time as `value` to edit its time in
+ * place.
+ *
+ * @typeParam D The adapter's immutable, time-capable date-time type.
+ *
+ * Note: the bounds are named `minTime` / `maxTime`, not `min` / `max` — the
+ * latter are reserved `FormUiControl` members typed `number | undefined` for
+ * numeric validators, so a date-time-typed `min` / `max` would break the
+ * `FormValueControl` contract. Only the time-of-day component of the bounds is
+ * considered.
+ *
+ * @example
+ * ```html
+ * <div forTimeField [(value)]="time" [hourCycle]="24"
+ *      [ariaLabel]="'Appointment time'" #field="forTimeField">
+ *   @for (seg of field.segments(); track seg.id) {
+ *     @if (seg.isLiteral) {
+ *       <span forTimeFieldLiteral>{{ seg.text }}</span>
+ *     } @else {
+ *       <span forTimeFieldSegment [segment]="seg.type!">{{ seg.text }}</span>
+ *     }
+ *   }
+ * </div>
+ * ```
+ */
+class ForTimeField extends FormUiControlBase {
+    #host = inject(ElementRef);
+    #defaults = inject(FOR_TIME_FIELD_DEFAULTS);
+    /**
+     * The active, time-capable date adapter, resolved from `FOR_DATE_ADAPTER`
+     * (shared with `ForCalendar`). Throws when the provided adapter is day-only.
+     */
+    adapter = assertTimeCapable(injectDateAdapter('ForTimeField'), 'ForTimeField');
+    /**
+     * Two-way bindable entered time, or `null` while any visible 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)]`.
+     *
+     * When no value is bound, the composed date-time anchors its date part on a
+     * fixed, DST-stable sentinel date (`2000-01-01`) instead of today. This avoids
+     * two `today()` hazards on adapters whose `D` carries a time zone (e.g.
+     * `NativeDateAdapter`'s `Date`): a wall-clock time on a DST-transition day that
+     * does not exist or is ambiguous would silently shift the emitted instant, and
+     * a today-anchored value would leak the current date into a time-only control
+     * (so a persisted value re-derives a different time next week). Consumers
+     * reading the emitted value should treat only its time-of-day component as
+     * meaningful while no date is bound. `CalendarDateTime` (no time zone) is
+     * unaffected, but anchors on the same sentinel for consistency.
+     */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Earliest selectable time-of-day (inclusive). A composed value earlier in
+     * the day is clamped up to it. Named `minTime` (not `min`) because
+     * `FormUiControl.min` is reserved for a numeric validator. Only the
+     * hour / minute / second component is considered.
+     */
+    minTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Latest selectable time-of-day (inclusive). A composed value later in the
+     * day is clamped down to it. Named `maxTime` for the same reason as
+     * {@link minTime}.
+     */
+    maxTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /**
+     * 12- or 24-hour cycle. When `null` (default) it is derived from the runtime
+     * locale. A 12-hour cycle adds the AM/PM `dayPeriod` segment.
+     */
+    hourCycle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    /** Smallest editable unit: `'hour'`, `'minute'` (default), or `'second'`. */
+    granularity = input('minute', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    /** BCP 47 locale driving segment order, separators, and AM/PM names. 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
+     * `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(() => buildTimeSegments(this.locale() ?? undefined, this.#cycle(), this.granularity()), /* @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 parts from the
+     * date-time. A `null` transition is disambiguated by the prior parts — an
+     * internal edit clearing one segment leaves the others, so `previous` still
+     * carries a filled part and is preserved; an external reset of a complete
+     * value clears the field.
+     */
+    #parts = linkedSignal({ ...(ngDevMode ? { debugName: "#parts" } : /* istanbul ignore next */ {}), source: this.value,
+        computation: (current, previous) => {
+            if (current !== null) {
+                return {
+                    hour: this.adapter.getHours(current),
+                    minute: this.adapter.getMinutes(current),
+                    second: this.adapter.getSeconds(current),
+                };
+            }
+            const prior = previous?.value;
+            if (prior && (prior.hour === null || prior.minute === null || prior.second === null)) {
+                return prior;
+            }
+            return { 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 [serializeISOTime(this.adapter, current, this.granularity())];
+            }),
+            disabled: this.effectiveDisabled,
+        });
+    }
+    segmentValue(type) {
+        return this.#editor.segmentValue(type);
+    }
+    segmentMin(type) {
+        if (type === 'hour') {
+            return this.#cycle() === 12 ? 1 : 0;
+        }
+        return 0;
+    }
+    segmentMax(type) {
+        if (type === 'hour') {
+            return this.#cycle() === 12 ? 12 : 23;
+        }
+        if (type === 'dayPeriod') {
+            return 1;
+        }
+        return 59;
+    }
+    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();
+        }
+    }
+    /** Field-specific `aria-valuetext`: only the empty marker; numeric otherwise. */
+    #valueText(type) {
+        return this.isSegmentEmpty(type) ? this.#defaults.emptySegmentText : null;
+    }
+    /** Base value for stepping an empty segment: midnight (hour 0, minute 0, second 0). */
+    #seed(type) {
+        if (type !== 'hour') {
+            return 0;
+        }
+        const display = this.segmentMin('hour');
+        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) {
+        if (type === 'hour' || type === 'minute' || type === 'second' || type === 'dayPeriod') {
+            const override = this.placeholder()[type];
+            if (override) {
+                return override;
+            }
+        }
+        switch (type) {
+            case 'hour':
+                return 'hh';
+            case 'minute':
+                return 'mm';
+            case 'second':
+                return 'ss';
+            default:
+                return '--';
+        }
+    }
+    #commitParts(next) {
+        this.#parts.set(next);
+        const granularity = this.granularity();
+        const needMinute = granularity !== 'hour';
+        const needSecond = granularity === 'second';
+        const complete = next.hour !== null &&
+            (!needMinute || next.minute !== null) &&
+            (!needSecond || next.second !== null);
+        if (complete) {
+            const base = this.value() ?? timeSentinel(this.adapter);
+            const composed = this.adapter.setTime(base, next.hour, needMinute ? next.minute : 0, needSecond ? next.second : 0);
+            this.value.set(this.#clampToBounds(composed));
+        }
+        else {
+            this.value.set(null);
+        }
+    }
+    #clampToBounds(date) {
+        const min = this.minTime();
+        if (min !== null && secondsOfDay(this.adapter, date) < secondsOfDay(this.adapter, min)) {
+            return composeWithTime(this.adapter, date, min);
+        }
+        const max = this.maxTime();
+        if (max !== null && secondsOfDay(this.adapter, date) > secondsOfDay(this.adapter, max)) {
+            return composeWithTime(this.adapter, date, max);
+        }
+        return date;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimeField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTimeField, isStandalone: true, selector: "[forTimeField]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", 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_TIME_FIELD_CONTEXT, useExisting: ForTimeField },
+            { provide: FOR_TIME_VALUE_SOURCE, useExisting: ForTimeField },
+        ], exportAs: ["forTimeField"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimeField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimeField]',
+                    exportAs: 'forTimeField',
+                    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_TIME_FIELD_CONTEXT, useExisting: ForTimeField },
+                        { provide: FOR_TIME_VALUE_SOURCE, useExisting: ForTimeField },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", 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 `[forTimeField]` — the hour, minute,
+ * second, or AM/PM (`dayPeriod`) part. 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 `dayPeriod` segment;
+ * - **ArrowUp / ArrowDown** step the value (hour / minute / second wrap; 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 `ForTimeField`; 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 ForTimeFieldSegment extends ForDateTimeSegmentBase {
+    ctx = injectTimeFieldContext('ForTimeFieldSegment');
+    #defaults = inject(FOR_TIME_FIELD_DEFAULTS);
+    /** Which 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 `provideForTimeFieldDefaults`), 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_TIME_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: ForTimeFieldSegment, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTimeFieldSegment, isStandalone: true, selector: "[forTimeFieldSegment]", inputs: { segment: { classPropertyName: "segment", publicName: "segment", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["forTimeFieldSegment"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimeFieldSegment, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimeFieldSegment]',
+                    exportAs: 'forTimeFieldSegment',
+                }]
+        }], 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 (`:`, a space) between the editable segments of a
+ * `[forTimeField]`. 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 ForTimeFieldLiteral extends ForDateTimeLiteralBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimeFieldLiteral, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTimeFieldLiteral, isStandalone: true, selector: "[forTimeFieldLiteral]", exportAs: ["forTimeFieldLiteral"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimeFieldLiteral, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimeFieldLiteral]',
+                    exportAs: 'forTimeFieldLiteral',
+                }]
+        }] });
+
+/**
+ * Exact public names of every `ForTimeField` 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[myTimeField]',
+ *   template: '',
+ *   hostDirectives: [
+ *     {
+ *       directive: ForTimeField,
+ *       inputs: [...FOR_TIME_FIELD_HOST_DIRECTIVE_INPUTS],
+ *       outputs: [...FOR_TIME_FIELD_HOST_DIRECTIVE_OUTPUTS],
+ *     },
+ *   ],
+ * })
+ * export class MyTimeField {}
+ * ```
+ */
+const FOR_TIME_FIELD_HOST_DIRECTIVE_INPUTS = [
+    'value',
+    'ariaLabel',
+    'dir',
+    'dirty',
+    'disabled',
+    'errors',
+    'granularity',
+    'hourCycle',
+    'invalid',
+    'locale',
+    'maxTime',
+    'minTime',
+    'name',
+    'pending',
+    'placeholder',
+    'readonly',
+    'required',
+    'touched',
+];
+/**
+ * Exact public names of every `ForTimeField` output, the Signal Forms `touch` output
+ * included. Spread it into the `outputs` array of the same `hostDirectives` entry as
+ * {@link FOR_TIME_FIELD_HOST_DIRECTIVE_INPUTS}.
+ */
+const FOR_TIME_FIELD_HOST_DIRECTIVE_OUTPUTS = [
+    'valueChange',
+    'touchedChange',
+    'touch',
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_TIME_FIELD_SEGMENT_LABELS, FOR_TIME_FIELD_CONTEXT, FOR_TIME_FIELD_DEFAULTS, FOR_TIME_FIELD_HOST_DIRECTIVE_INPUTS, FOR_TIME_FIELD_HOST_DIRECTIVE_OUTPUTS, ForTimeField, ForTimeFieldLiteral, ForTimeFieldSegment, provideForTimeFieldDefaults };
+//# sourceMappingURL=forty-cdk-time-field.mjs.map