forty-cdk 0.2.0 → 0.3.0

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

@@ -0,0 +1,1013 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, model, input, numberAttribute, booleanAttribute, output, Directive, ElementRef, effect, signal } from '@angular/core';
+import { secondsOfDay, createDefaults, FormUiControlBase, IdGenerator, assertTimeCapable, injectDateAdapter, injectTextDirection, ListboxOverlayController, timeSentinel, injectHiddenInput, serializeISOTime, FOR_TIME_VALUE_SOURCE, registerHandle, reflectDisabled, injectModalShell, injectOverlayShell, hostId, resolveListNavigation } from 'forty-cdk/core';
+
+function timeOfDaySeconds(adapter, d, granularity) {
+    const h = adapter.getHours(d);
+    if (granularity === 'hour') {
+        return h * 3600;
+    }
+    if (granularity === 'minute') {
+        return h * 3600 + adapter.getMinutes(d) * 60;
+    }
+    return secondsOfDay(adapter, d);
+}
+/**
+ * Generates the full-day slot list for a {@link ForTimePicker}.
+ *
+ * Slots span the full 24-hour day (00:00:00 up to but not past 24:00). Each slot's
+ * `disabled` flag is `true` when its time-of-day falls outside `[minTime, maxTime]`
+ * — slots are never omitted, following the WAI-ARIA option convention for disabled
+ * items.
+ *
+ * Pure function: no signals, no DOM, no side effects.
+ */
+function buildTimeSlots(config) {
+    const { adapter, anchor, selected, minTime, maxTime, step, granularity, formatOptions } = config;
+    const stepSeconds = Math.max(1, Math.round(step)) * 60;
+    const minSec = minTime !== null ? timeOfDaySeconds(adapter, minTime, 'second') : null;
+    const maxSec = maxTime !== null ? timeOfDaySeconds(adapter, maxTime, 'second') : null;
+    const slots = [];
+    for (let t = 0; t < 86400; t += stepSeconds) {
+        const h = Math.floor(t / 3600);
+        const m = Math.floor((t % 3600) / 60);
+        const s = t % 60;
+        const value = adapter.setTime(anchor, h, m, s);
+        const label = adapter.format(value, formatOptions);
+        const slotGranularSec = timeOfDaySeconds(adapter, value, granularity);
+        const slotFullSec = h * 3600 + m * 60 + s;
+        const isSelected = selected !== null && slotGranularSec === timeOfDaySeconds(adapter, selected, granularity);
+        const disabled = (minSec !== null && slotFullSec < minSec) || (maxSec !== null && slotFullSec > maxSec);
+        slots.push({ id: `slot-${t}`, value, label, selected: isSelected, disabled });
+    }
+    return slots;
+}
+
+const FOR_TIME_PICKER_CONTEXT = new InjectionToken('FOR_TIME_PICKER_CONTEXT');
+function injectTimePickerContext(piece) {
+    const ctx = inject(FOR_TIME_PICKER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/time-picker] ${piece} must be used inside a [forTimePicker] element. ` +
+            "If it is declared inside an ng-template, DI resolves at the template's declaration site — " +
+            'not where it is stamped (e.g. via ngTemplateOutlet) — so declare the template inside the ' +
+            '[forTimePicker] root.');
+    }
+    return ctx;
+}
+function injectTimePickerTriggerContext(explicitRoot) {
+    const injected = inject(FOR_TIME_PICKER_CONTEXT, { optional: true });
+    return computed(() => {
+        const explicit = explicitRoot();
+        if (explicit !== '') {
+            return explicit;
+        }
+        if (injected) {
+            return injected;
+        }
+        throw new Error('[forty-cdk/time-picker] ForTimePickerTrigger could not resolve its [forTimePicker] root: ' +
+            'no FOR_TIME_PICKER_CONTEXT provider is visible and no explicit root reference was passed. ' +
+            "If this trigger is declared inside an ng-template, DI resolves at the template's declaration " +
+            'site — not where it is stamped — so either declare the template inside the root or pass the ' +
+            'root explicitly: [forTimePickerTrigger]="root" with #root="forTimePicker".');
+    });
+}
+
+/**
+ * Library fallback for time picker defaults, read at the root injector when no
+ * consumer has called `provideForTimePickerDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_TIME_PICKER_FALLBACK_DEFAULTS = {
+    sideOffset: 4,
+    collisionPadding: 8,
+};
+const { token, provideDefaults } = createDefaults('FOR_TIME_PICKER_DEFAULTS', FOR_TIME_PICKER_FALLBACK_DEFAULTS);
+/** Token holding the resolved time picker defaults for the current scope. */
+const FOR_TIME_PICKER_DEFAULTS = token;
+/**
+ * Configures forty-cdk time picker defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library defaults
+ * at the root).
+ */
+function provideForTimePickerDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Root of the headless time picker, implementing the
+ * [WAI-ARIA Listbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)
+ * for a slot-based time selection. Generates a full-day list of time slots at
+ * a configurable `step` (in minutes), displayed in a floating listbox.
+ *
+ * Implements `FormValueControl<D | null>` from `@angular/forms/signals` for
+ * `[formField]` auto-wiring. Requires a time-capable adapter
+ * (`provideNativeDateAdapter()` or `provideInternationalizedDateTimeAdapter()`).
+ *
+ * @typeParam D The adapter's immutable date-time type.
+ */
+class ForTimePicker extends FormUiControlBase {
+    #idGen = inject(IdGenerator);
+    #defaults = inject(FOR_TIME_PICKER_DEFAULTS);
+    /**
+     * The active, time-capable date adapter. Throws when the provided adapter is
+     * day-only.
+     */
+    adapter = assertTimeCapable(injectDateAdapter('ForTimePicker'), 'ForTimePicker');
+    /**
+     * Two-way bindable selected time, or `null`. Required by
+     * `FormValueControl<D | null>`. The `model()` change emitter
+     * (`(valueChange)`) fires only on internal selection changes, never on
+     * consumer writes via `[(value)]`.
+     */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable. Whether the listbox is currently shown. The `model()`
+     * change emitter (`(openChange)`) fires only on internal transitions, never
+     * on consumer writes via `[(open)]`.
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * Earliest selectable time-of-day (inclusive). Slots earlier in the day are
+     * disabled. Named `minTime` (not `min`) because `FormUiControl.min` is
+     * reserved for a numeric validator.
+     */
+    minTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Latest selectable time-of-day (inclusive). Slots later in the day are
+     * disabled. Named `maxTime` for the same reason as {@link minTime}.
+     */
+    maxTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Slot interval in whole minutes. Default `30`. Clamped to ≥ 1 internally.
+     * Use `60` for hourly slots, `15` for quarter-hour slots.
+     */
+    step = input(30, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Finest time unit compared when determining if a slot is selected.
+     * Default `'minute'`. Use `'second'` when the value carries seconds.
+     */
+    granularity = input('minute', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    /**
+     * 12- or 24-hour cycle for slot label formatting. When `null` (default) it
+     * is derived from the runtime locale.
+     */
+    hourCycle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    /**
+     * BCP 47 locale driving slot label formatting. Defaults to the runtime locale.
+     */
+    locale = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Close the listbox after a slot is selected. Default `true`.
+     */
+    closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When `true`, the listbox mounts as a trapped / inert / scroll-locked modal
+     * surface instead of the default anchored popover. Read once when the content
+     * mounts.
+     */
+    modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When `true` (default), Escape, pointer-down outside, and focus outside close the listbox. */
+    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When `true` (default), focus returns to the trigger on close. */
+    returnFocus = input(true, { ...(ngDevMode ? { debugName: "returnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Placeholder shown by `[forTimePickerValue]` when no time is selected. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.DateTimeFormat` options driving slot label formatting. When none of
+     * `hour` / `minute` / `second` are specified, sensible defaults are filled in
+     * automatically based on `granularity` and `hourCycle`.
+     */
+    formatOptions = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
+    /** Manual `aria-label` on `[forTimePickerContent]` when the trigger isn't a meaningful name. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** When `true` (default), keyboard navigation wraps at the ends of the option list. */
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Orientation of the listbox for keyboard navigation. Default `'vertical'`. */
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Side the listbox is anchored to. Defaults to `'bottom'`. Ignored in
+     * `modal` mode.
+     */
+    side = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** Alignment along the chosen `side`. Defaults to `'start'`. */
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Gap (px) between trigger and listbox along the main axis. Default `4`.
+     * The default is read from `provideForTimePickerDefaults` for the surrounding
+     * scope.
+     */
+    sideOffset = input(this.#defaults.sideOffset, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Gap (px) along the cross axis. Default `0`. */
+    alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** When `true` (default), `flip` and `shift` keep the listbox inside the viewport. */
+    avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Padding (px) applied uniformly to flip / shift / size. Default `8`.
+     * The default is read from `provideForTimePickerDefaults` for the surrounding
+     * scope.
+     */
+    collisionPadding = input(this.#defaults.collisionPadding, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Padding (px) for the `arrow` middleware. Default `0`. */
+    arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Stickiness behaviour for `shift`. Default `'partial'`. */
+    sticky = input('partial', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** When `true`, sets `data-detached=""` while the trigger is scrolled off-screen. */
+    hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When `true` (default), the content is clipped until floating-ui resolves
+     * its first position, preventing a flash at the viewport corner.
+     */
+    clipUntilPositioned = input(true, { ...(ngDevMode ? { debugName: "clipUntilPositioned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /**
+     * Fires when the user presses Escape while this listbox is the topmost
+     * dismissable layer. Call `preventDefault()` on the veto to suppress the
+     * automatic close.
+     */
+    escapeKeyDown = output();
+    /** Fires when a pointer goes down outside the listbox. Vetoable. */
+    pointerDownOutside = output();
+    /** Fires when focus moves outside the listbox. Vetoable. */
+    focusOutside = output();
+    /** Composite event: shares veto state with `pointerDownOutside` / `focusOutside`. */
+    interactOutside = output();
+    /**
+     * Fires just before the listbox sends focus to the selected slot (or first
+     * enabled) on open. Call `preventDefault()` on the veto to skip the focus
+     * move.
+     */
+    autoFocusOnOpen = output();
+    /**
+     * Fires just before focus returns to the trigger on close. Call
+     * `preventDefault()` on the veto to suppress the return-focus.
+     */
+    autoFocusOnClose = output();
+    /**
+     * Shared overlay-listbox state machine: option collection, trigger / anchor /
+     * content registries + ids, DOM-focus navigation, the open / close machine,
+     * the initial-focus / close-reason state, and the dismiss / auto-focus emit
+     * forwarders. The value-specific behaviour (`isSelected`, `activate`,
+     * `focusSelectedOption`, `commitOnTab`) stays in this root.
+     */
+    #controller = new ListboxOverlayController(this.#idGen, {
+        idPrefix: 'for-time-picker',
+        multipleAnchorsError: '[forty-cdk/time-picker] Multiple [forTimePickerAnchor] inside the same [forTimePicker]; only one is allowed.',
+        defaultInitialFocus: 'selected',
+        effectiveDisabled: this.effectiveDisabled,
+        setOpen: (open) => this.open.set(open),
+        isOpen: () => this.open(),
+        emit: {
+            escapeKeyDown: this.escapeKeyDown,
+            pointerDownOutside: this.pointerDownOutside,
+            focusOutside: this.focusOutside,
+            interactOutside: this.interactOutside,
+            autoFocusOnOpen: this.autoFocusOnOpen,
+            autoFocusOnClose: this.autoFocusOnClose,
+        },
+        markTouched: () => this.markTouched(),
+    });
+    triggerId = this.#controller.triggerId;
+    contentId = this.#controller.contentId;
+    initialFocus = this.#controller.initialFocus;
+    lastCloseReason = this.#controller.lastCloseReason;
+    trigger = this.#controller.trigger;
+    /**
+     * Element floating-ui anchors the listbox against. Prefers an optional
+     * `[forTimePickerAnchor]` when registered, otherwise falls back to the
+     * trigger so existing pickers without an anchor keep their behavior.
+     * Decoupled from `trigger` so the trigger keeps driving `aria-controls`, the
+     * click toggle, focus return, and its dismissal exemption regardless of where
+     * the listbox paints.
+     */
+    anchor = this.#controller.anchor;
+    content = this.#controller.content;
+    options = this.#controller.options;
+    #sentinel = computed(() => timeSentinel(this.adapter), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#sentinel" }] : /* istanbul ignore next */ []));
+    #effectiveFormatOptions = computed(() => {
+        const options = this.formatOptions();
+        if (options.hour !== undefined ||
+            options.minute !== undefined ||
+            options.second !== undefined) {
+            return options;
+        }
+        const cycle = this.hourCycle();
+        const granularity = this.granularity();
+        return {
+            ...options,
+            hour: 'numeric',
+            minute: '2-digit',
+            ...(granularity === 'second' ? { second: '2-digit' } : {}),
+            ...(cycle !== null ? { hour12: cycle === 12 } : {}),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#effectiveFormatOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * The generated list of time slots for the full day. Each slot's `value` is
+     * anchored to the current `value()` date (or a sentinel), so selecting a
+     * slot preserves the calendar date when used inside a date-time picker.
+     *
+     * Pure derivation — never written from inside an `effect()`.
+     */
+    slots = computed(() => {
+        const anchor = this.value() ?? this.#sentinel();
+        return buildTimeSlots({
+            adapter: this.adapter,
+            anchor,
+            selected: this.value(),
+            minTime: this.minTime(),
+            maxTime: this.maxTime(),
+            step: this.step(),
+            granularity: this.granularity(),
+            formatOptions: this.#effectiveFormatOptions(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    /** Formatted display of the current value, or `null` when empty. */
+    formattedValue = computed(() => {
+        const v = this.value();
+        return v === null ? null : this.adapter.format(v, this.#effectiveFormatOptions());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+    fieldLabelledElement() {
+        return this.trigger();
+    }
+    fieldLabelledElementId() {
+        return this.triggerId();
+    }
+    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,
+        });
+    }
+    setInitialFocus(target) {
+        this.#controller.setInitialFocus(target);
+    }
+    registerTrigger(el) {
+        this.#controller.registerTrigger(el);
+    }
+    unregisterTrigger(el) {
+        this.#controller.unregisterTrigger(el);
+    }
+    registerAnchor(el) {
+        this.#controller.registerAnchor(el);
+    }
+    unregisterAnchor(el) {
+        this.#controller.unregisterAnchor(el);
+    }
+    registerContent(el) {
+        this.#controller.registerContent(el);
+    }
+    unregisterContent(el) {
+        this.#controller.unregisterContent(el);
+    }
+    registerOption(handle) {
+        this.#controller.registerOption(handle);
+    }
+    unregisterOption(handle) {
+        this.#controller.unregisterOption(handle);
+    }
+    #sameTimeOfDay(a, b) {
+        const g = this.granularity();
+        const secA = this.adapter.getHours(a) * 3600 +
+            (g !== 'hour' ? this.adapter.getMinutes(a) * 60 : 0) +
+            (g === 'second' ? this.adapter.getSeconds(a) : 0);
+        const secB = this.adapter.getHours(b) * 3600 +
+            (g !== 'hour' ? this.adapter.getMinutes(b) * 60 : 0) +
+            (g === 'second' ? this.adapter.getSeconds(b) : 0);
+        return secA === secB;
+    }
+    isSelected(v) {
+        const current = this.value();
+        if (current === null) {
+            return false;
+        }
+        return this.#sameTimeOfDay(v, current);
+    }
+    activate(v) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        this.value.set(v);
+        if (this.closeOnSelect()) {
+            this.closeMenu('select');
+        }
+    }
+    navigate(currentOption, action) {
+        this.#controller.navigate(currentOption, action, this.loop());
+    }
+    focusFirstEnabledOption() {
+        return this.#controller.focusFirstEnabledOption();
+    }
+    focusLastEnabledOption() {
+        return this.#controller.focusLastEnabledOption();
+    }
+    focusSelectedOption() {
+        const current = this.value();
+        if (current === null) {
+            return false;
+        }
+        const items = this.options();
+        const opt = items.find((o) => {
+            if (o.disabled()) {
+                return false;
+            }
+            const v = o.value();
+            return this.#sameTimeOfDay(v, current);
+        });
+        if (opt) {
+            opt.host.focus();
+            return true;
+        }
+        return false;
+    }
+    toggle(initialFocus = 'selected') {
+        this.#controller.toggle(initialFocus);
+    }
+    openMenu(initialFocus = 'selected') {
+        this.#controller.openMenu(initialFocus);
+    }
+    closeMenu(reason) {
+        this.#controller.closeMenu(reason);
+    }
+    commitOnTab(value) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (!this.readonly()) {
+            this.value.set(value);
+        }
+        this.#controller.focusTrigger();
+        this.closeMenu('tab');
+    }
+    emitEscapeKeyDown(event) {
+        this.#controller.emitEscapeKeyDown(event, this.dismissible(), 'escape');
+    }
+    emitPointerDownOutside(veto) {
+        this.#controller.emitPointerDownOutside(veto);
+    }
+    emitFocusOutside(veto) {
+        this.#controller.emitFocusOutside(veto);
+    }
+    emitInteractOutside(veto) {
+        this.#controller.emitInteractOutside(veto);
+    }
+    forwardEscapeKeyDown(veto) {
+        this.#controller.forwardEscapeKeyDown(veto);
+    }
+    requestClose(reason) {
+        this.#controller.requestClose(reason);
+    }
+    emitAutoFocusOnOpen() {
+        return this.#controller.emitAutoFocusOnOpen();
+    }
+    emitAutoFocusOnClose() {
+        return this.#controller.emitAutoFocusOnClose();
+    }
+    markTouched() {
+        super.markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTimePicker, isStandalone: true, selector: "[forTimePicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", 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 }, step: { classPropertyName: "step", publicName: "step", 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 }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, returnFocus: { classPropertyName: "returnFocus", publicName: "returnFocus", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, clipUntilPositioned: { classPropertyName: "clipUntilPositioned", publicName: "clipUntilPositioned", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", autoFocusOnOpen: "autoFocusOnOpen", autoFocusOnClose: "autoFocusOnClose" }, host: { properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.dir": "dir()" } }, providers: [
+            { provide: FOR_TIME_PICKER_CONTEXT, useExisting: ForTimePicker },
+            { provide: FOR_TIME_VALUE_SOURCE, useExisting: ForTimePicker },
+        ], exportAs: ["forTimePicker"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimePicker]',
+                    exportAs: 'forTimePicker',
+                    host: {
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.dir]': 'dir()',
+                    },
+                    providers: [
+                        { provide: FOR_TIME_PICKER_CONTEXT, useExisting: ForTimePicker },
+                        { provide: FOR_TIME_VALUE_SOURCE, useExisting: ForTimePicker },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", 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 }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], returnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnFocus", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], clipUntilPositioned: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipUntilPositioned", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], autoFocusOnOpen: [{ type: i0.Output, args: ["autoFocusOnOpen"] }], autoFocusOnClose: [{ type: i0.Output, args: ["autoFocusOnClose"] }] } });
+
+/**
+ * Optional positioning anchor. When present, `[forTimePickerContent]` is
+ * positioned against this element instead of `[forTimePickerTrigger]` — useful
+ * when the trigger lives inside a decorated field box (padding, prefix icon,
+ * clear / chevron buttons) and the listbox should align to the visible field
+ * rather than the inner button.
+ *
+ * Only positioning changes: the trigger still owns `aria-controls`,
+ * `aria-expanded`, the click toggle, focus return on close, and its exemption
+ * from outside-pointer dismissal. If no anchor is registered the listbox falls
+ * back to anchoring against the trigger, so existing usages are unaffected.
+ *
+ * At most one `[forTimePickerAnchor]` may be registered per `[forTimePicker]`;
+ * a second one throws.
+ *
+ * ```html
+ * <div forTimePicker [(value)]="time">
+ *   <div forTimePickerAnchor class="field-box">
+ *     <icon />
+ *     <button forTimePickerTrigger><span forTimePickerValue>…</span></button>
+ *     <button class="clear">×</button>
+ *   </div>
+ *   @if (open()) {
+ *     <div forTimePickerContent>…</div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForTimePickerAnchor {
+    #ctx = injectTimePickerContext('ForTimePickerAnchor');
+    #host = inject(ElementRef);
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.#ctx.registerAnchor(el), (el) => this.#ctx.unregisterAnchor(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTimePickerAnchor, isStandalone: true, selector: "[forTimePickerAnchor]", exportAs: ["forTimePickerAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimePickerAnchor]',
+                    exportAs: 'forTimePickerAnchor',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Combobox button that opens the time picker listbox. Apply on a `<button>` so
+ * Space / Enter dispatch native click events that toggle via `(click)`.
+ *
+ * Wires APG select-only combobox attributes: `role="combobox"`,
+ * `aria-haspopup="listbox"`, `aria-expanded`, and `aria-controls` pointing to
+ * the listbox. The button is exempt from the listbox's dismissable layer so
+ * clicks on it toggle without dismissal racing.
+ *
+ * Keyboard:
+ * - **Click / Enter / Space** — toggle (open focuses the selected slot, or first).
+ * - **ArrowDown** — open + focus selected slot (or first).
+ * - **ArrowUp** — open + focus selected slot (or last when none selected).
+ */
+class ForTimePickerTrigger {
+    #host = inject(ElementRef);
+    /**
+     * Optional explicit reference to the `[forTimePicker]` root, named after the
+     * selector `routerLink`-style. The bare valueless attribute keeps resolving
+     * the enclosing root via DI; pass the root explicitly
+     * (`[forTimePickerTrigger]="root"`, with `#root="forTimePicker"`) when the
+     * trigger is declared in an `ng-template` stamped inside the root.
+     */
+    forTimePickerTrigger = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forTimePickerTrigger" }] : /* istanbul ignore next */ []));
+    ctx = injectTimePickerTriggerContext(this.forTimePickerTrigger);
+    constructor() {
+        const el = this.#host.nativeElement;
+        effect((onCleanup) => {
+            const ctx = this.ctx();
+            ctx.registerTrigger(el);
+            onCleanup(() => ctx.unregisterTrigger(el));
+        });
+        reflectDisabled(computed(() => this.ctx().effectiveDisabled()));
+    }
+    onClick() {
+        this.ctx().toggle('selected');
+    }
+    onKeyDown(event) {
+        if (this.ctx().effectiveDisabled()) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.ctx().openMenu('selected');
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.ctx().openMenu(this.ctx().value() !== null ? 'selected' : 'last');
+        }
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next) {
+            const content = this.ctx().content();
+            if (content && content.contains(next)) {
+                return;
+            }
+            if (this.#host.nativeElement.contains(next)) {
+                return;
+            }
+        }
+        this.ctx().markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTimePickerTrigger, isStandalone: true, selector: "[forTimePickerTrigger]", inputs: { forTimePickerTrigger: { classPropertyName: "forTimePickerTrigger", publicName: "forTimePickerTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "combobox" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "focusout": "onFocusOut($event)" }, properties: { "id": "ctx().triggerId()", "attr.aria-haspopup": "\"listbox\"", "attr.aria-expanded": "ctx().open() ? \"true\" : \"false\"", "attr.aria-controls": "ctx().open() ? ctx().contentId() : null", "attr.aria-disabled": "ctx().effectiveDisabled() ? \"true\" : null", "attr.aria-readonly": "ctx().readonly() ? \"true\" : null", "attr.aria-required": "ctx().required() ? \"true\" : null", "attr.aria-invalid": "ctx().invalid() ? \"true\" : null", "attr.aria-busy": "ctx().pending() ? \"true\" : null", "attr.data-state": "ctx().open() ? \"open\" : \"closed\"", "attr.data-disabled": "ctx().effectiveDisabled() ? \"\" : null" } }, exportAs: ["forTimePickerTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimePickerTrigger]',
+                    exportAs: 'forTimePickerTrigger',
+                    host: {
+                        type: 'button',
+                        role: 'combobox',
+                        '[id]': 'ctx().triggerId()',
+                        '[attr.aria-haspopup]': '"listbox"',
+                        '[attr.aria-expanded]': 'ctx().open() ? "true" : "false"',
+                        '[attr.aria-controls]': 'ctx().open() ? ctx().contentId() : null',
+                        '[attr.aria-disabled]': 'ctx().effectiveDisabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'ctx().readonly() ? "true" : null',
+                        '[attr.aria-required]': 'ctx().required() ? "true" : null',
+                        '[attr.aria-invalid]': 'ctx().invalid() ? "true" : null',
+                        '[attr.aria-busy]': 'ctx().pending() ? "true" : null',
+                        '[attr.data-state]': 'ctx().open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'ctx().effectiveDisabled() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { forTimePickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "forTimePickerTrigger", required: false }] }] } });
+
+/**
+ * Renders the currently selected time slot's label — or the configured
+ * placeholder when nothing is selected — into its host element via
+ * `textContent`. Apply on a `<span>` (or any inline element) inside
+ * `[forTimePickerTrigger]`:
+ *
+ * ```html
+ * <button forTimePickerTrigger>
+ *   <span forTimePickerValue placeholder="Select a time…"></span>
+ * </button>
+ * ```
+ */
+class ForTimePickerValue {
+    #ctx = injectTimePickerContext('ForTimePickerValue');
+    /** Text shown when nothing is selected. Falls back to `[forTimePicker][placeholder]`. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    isPlaceholder = computed(() => this.#ctx.value() === null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPlaceholder" }] : /* istanbul ignore next */ []));
+    displayText = computed(() => this.#ctx.formattedValue() ?? (this.placeholder() || this.#ctx.placeholder()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTimePickerValue, isStandalone: true, selector: "[forTimePickerValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "textContent": "displayText()", "attr.data-placeholder": "isPlaceholder() ? \"\" : null" } }, exportAs: ["forTimePickerValue"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimePickerValue]',
+                    exportAs: 'forTimePickerValue',
+                    host: {
+                        '[textContent]': 'displayText()',
+                        '[attr.data-placeholder]': 'isPlaceholder() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/**
+ * The listbox surface of the time picker. Carries `role="listbox"`, is
+ * portaled to `document.body`, and is positioned by `@floating-ui/dom`
+ * against the trigger.
+ *
+ * Mount/unmount of the visible content is the consumer's responsibility —
+ * wrap with `@if (open())` so `animate.enter` / `animate.leave` fire on the
+ * natural mount cycle. While mounted, a `DismissableLayer` activates (Escape,
+ * pointer-down outside, focus outside); the trigger element is exempt from
+ * outside-pointer checks so trigger clicks toggle without dismissal racing.
+ *
+ * Initial focus is sent to the selected slot (`'selected'`), the first
+ * enabled slot (`'first'`), or the last enabled slot (`'last'`) according to
+ * the trigger's hint. On destroy, focus returns to the trigger when
+ * `returnFocus` is true.
+ */
+class ForTimePickerContent {
+    ctx = injectTimePickerContext('ForTimePickerContent');
+    #host = inject(ElementRef);
+    constructor() {
+        const ctx = this.ctx;
+        registerHandle(this.#host.nativeElement, (el) => ctx.registerContent(el), (el) => ctx.unregisterContent(el));
+        const focusInitial = () => {
+            const target = ctx.initialFocus();
+            if (target === 'selected') {
+                return ctx.focusSelectedOption() || ctx.focusFirstEnabledOption();
+            }
+            if (target === 'last') {
+                return ctx.focusLastEnabledOption();
+            }
+            return ctx.focusFirstEnabledOption();
+        };
+        if (ctx.modal()) {
+            injectModalShell({
+                modal: ctx.modal,
+                returnFocus: ctx.returnFocus,
+                initialFocus: {
+                    move: focusInitial,
+                    veto: () => ctx.emitAutoFocusOnOpen(),
+                },
+                autoFocusOnClose: () => (event) => {
+                    if (ctx.emitAutoFocusOnClose()) {
+                        event.preventDefault();
+                    }
+                },
+                dismiss: {
+                    dismissible: ctx.dismissible,
+                    requestClose: (reason) => {
+                        ctx.markTouched();
+                        ctx.closeMenu(reason);
+                    },
+                    emitEscapeKeyDown: (veto) => ctx.forwardEscapeKeyDown(veto),
+                    emitPointerDownOutside: (veto) => ctx.emitPointerDownOutside(veto),
+                    emitFocusOutside: (veto) => ctx.emitFocusOutside(veto),
+                    emitInteractOutside: (veto) => ctx.emitInteractOutside(veto),
+                },
+            });
+            return;
+        }
+        injectOverlayShell({
+            positioner: {
+                kind: 'floating',
+                reference: ctx.anchor,
+                open: ctx.open,
+                side: ctx.side,
+                align: ctx.align,
+                sideOffset: ctx.sideOffset,
+                alignOffset: ctx.alignOffset,
+                avoidCollisions: ctx.avoidCollisions,
+                collisionPadding: ctx.collisionPadding,
+                arrowPadding: ctx.arrowPadding,
+                sticky: ctx.sticky,
+                hideWhenDetached: ctx.hideWhenDetached,
+                clipUntilPositioned: ctx.clipUntilPositioned,
+            },
+            dismiss: {
+                dismissible: ctx.dismissible,
+                requestClose: (reason) => {
+                    ctx.markTouched();
+                    ctx.closeMenu(reason);
+                },
+                emitEscapeKeyDown: (event) => ctx.emitEscapeKeyDown(event),
+                emitPointerDownOutside: (veto) => ctx.emitPointerDownOutside(veto),
+                emitFocusOutside: (veto) => ctx.emitFocusOutside(veto),
+                emitInteractOutside: (veto) => ctx.emitInteractOutside(veto),
+                exemptElements: () => {
+                    const t = ctx.trigger();
+                    return t ? [t] : [];
+                },
+            },
+            initialFocus: {
+                move: focusInitial,
+                veto: () => ctx.emitAutoFocusOnOpen(),
+            },
+            returnFocus: {
+                enabled: ctx.returnFocus,
+                target: () => ctx.trigger(),
+                veto: () => ctx.emitAutoFocusOnClose(),
+                skip: () => ctx.lastCloseReason() === 'tab',
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTimePickerContent, isStandalone: true, selector: "[forTimePickerContent]", host: { attributes: { "role": "listbox", "tabindex": "-1" }, properties: { "id": "ctx.contentId()", "attr.aria-labelledby": "ctx.ariaLabel() ? null : ctx.triggerId()", "attr.aria-label": "ctx.ariaLabel()", "attr.aria-modal": "ctx.modal() ? \"true\" : null", "attr.aria-orientation": "ctx.orientation()", "attr.data-state": "ctx.open() ? \"open\" : \"closed\"", "attr.data-orientation": "ctx.orientation()" } }, exportAs: ["forTimePickerContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimePickerContent]',
+                    exportAs: 'forTimePickerContent',
+                    host: {
+                        role: 'listbox',
+                        tabindex: '-1',
+                        '[id]': 'ctx.contentId()',
+                        '[attr.aria-labelledby]': 'ctx.ariaLabel() ? null : ctx.triggerId()',
+                        '[attr.aria-label]': 'ctx.ariaLabel()',
+                        '[attr.aria-modal]': 'ctx.modal() ? "true" : null',
+                        '[attr.aria-orientation]': 'ctx.orientation()',
+                        '[attr.data-state]': 'ctx.open() ? "open" : "closed"',
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * One option inside a `[forTimePickerContent]`. Apply on a `<div>` (or any
+ * non-button element) — the option handles Enter/Space activation itself in its
+ * keydown handler because a `<div>` has no native keyboard click.
+ *
+ * @typeParam D The adapter's date-time type (inferred from `[value]`).
+ *
+ * Keyboard while focused:
+ * - **Enter / Space** — activate (select the slot).
+ * - **ArrowDown / ArrowUp / Home / End** — move focus inside the listbox.
+ * - **Tab / Shift+Tab** — commit the focused slot and let the browser advance
+ *   focus to the next / previous focusable.
+ * - **Escape** — routed through the content's keydown to close the listbox.
+ */
+class ForTimePickerOption {
+    #ctx = injectTimePickerContext('ForTimePickerOption');
+    #host = inject(ElementRef);
+    /**
+     * The date-time value this option represents. Provided by the parent
+     * `[forTimePicker]`'s `slots()` computed.
+     */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** When `true`, this option cannot be selected. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    id = hostId('for-time-picker-option');
+    selected = computed(() => this.#ctx.value() !== null && this.#ctx.isSelected(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.#ctx.effectiveDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    #highlighted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#highlighted" }] : /* istanbul ignore next */ []));
+    /** True while this option has DOM focus. Reflected as `data-highlighted`. */
+    highlighted = this.#highlighted.asReadonly();
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            value: this.value,
+            disabled: this.effectiveDisabled,
+        };
+        registerHandle(handle, (h) => this.#ctx.registerOption(h), (h) => this.#ctx.unregisterOption(h));
+    }
+    onClick() {
+        if (this.effectiveDisabled() || this.#ctx.readonly()) {
+            return;
+        }
+        this.#ctx.activate(this.value());
+    }
+    onFocus() {
+        this.#highlighted.set(true);
+        this.#host.nativeElement.scrollIntoView?.({ block: 'nearest' });
+    }
+    onBlur() {
+        this.#highlighted.set(false);
+    }
+    onKeyDown(event) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.#ctx.activate(this.value());
+            return;
+        }
+        if (event.key === 'Tab') {
+            if (this.#ctx.modal()) {
+                return;
+            }
+            this.#ctx.commitOnTab(this.value());
+            return;
+        }
+        const action = resolveListNavigation(event, {
+            orientation: this.#ctx.orientation(),
+            dir: this.#ctx.dir(),
+        });
+        if (action) {
+            event.preventDefault();
+            this.#ctx.navigate(this.#host.nativeElement, action);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTimePickerOption, isStandalone: true, selector: "[forTimePickerOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "id": "id()", "attr.aria-selected": "selected() ? \"true\" : \"false\"", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.data-state": "selected() ? \"checked\" : \"unchecked\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null" } }, exportAs: ["forTimePickerOption"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTimePickerOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTimePickerOption]',
+                    exportAs: 'forTimePickerOption',
+                    host: {
+                        role: 'option',
+                        tabindex: '-1',
+                        '[id]': 'id()',
+                        '[attr.aria-selected]': 'selected() ? "true" : "false"',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.data-state]': 'selected() ? "checked" : "unchecked"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Exact public names of every `ForTimePicker` 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 so the entry is statically analyzable.
+ * An anti-drift spec fails when this list no longer matches the directive's
+ * actual API.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'div[myTimePicker]',
+ *   template: '',
+ *   hostDirectives: [
+ *     {
+ *       directive: ForTimePicker,
+ *       inputs: [...FOR_TIME_PICKER_HOST_DIRECTIVE_INPUTS],
+ *       outputs: [...FOR_TIME_PICKER_HOST_DIRECTIVE_OUTPUTS],
+ *     },
+ *   ],
+ * })
+ * export class MyTimePicker {}
+ * ```
+ */
+const FOR_TIME_PICKER_HOST_DIRECTIVE_INPUTS = [
+    'value',
+    'open',
+    'align',
+    'alignOffset',
+    'ariaLabel',
+    'arrowPadding',
+    'avoidCollisions',
+    'clipUntilPositioned',
+    'closeOnSelect',
+    'collisionPadding',
+    'dir',
+    'dirty',
+    'disabled',
+    'dismissible',
+    'errors',
+    'formatOptions',
+    'granularity',
+    'hideWhenDetached',
+    'hourCycle',
+    'invalid',
+    'locale',
+    'loop',
+    'maxTime',
+    'minTime',
+    'modal',
+    'name',
+    'orientation',
+    'pending',
+    'placeholder',
+    'readonly',
+    'required',
+    'returnFocus',
+    'side',
+    'sideOffset',
+    'step',
+    'sticky',
+    'touched',
+];
+/**
+ * Exact public names of every `ForTimePicker` output, the Signal Forms `touch`
+ * output included. Spread it into the `outputs` array of the same
+ * `hostDirectives` entry as {@link FOR_TIME_PICKER_HOST_DIRECTIVE_INPUTS}.
+ */
+const FOR_TIME_PICKER_HOST_DIRECTIVE_OUTPUTS = [
+    'valueChange',
+    'openChange',
+    'escapeKeyDown',
+    'pointerDownOutside',
+    'focusOutside',
+    'interactOutside',
+    'autoFocusOnOpen',
+    'autoFocusOnClose',
+    'touchedChange',
+    'touch',
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_TIME_PICKER_CONTEXT, FOR_TIME_PICKER_DEFAULTS, FOR_TIME_PICKER_HOST_DIRECTIVE_INPUTS, FOR_TIME_PICKER_HOST_DIRECTIVE_OUTPUTS, ForTimePicker, ForTimePickerAnchor, ForTimePickerContent, ForTimePickerOption, ForTimePickerTrigger, ForTimePickerValue, buildTimeSlots, provideForTimePickerDefaults };
+//# sourceMappingURL=forty-cdk-time-picker.mjs.map