forty-cdk 0.2.0 → 0.3.0

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

@@ -0,0 +1,1011 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, model, input, booleanAttribute, numberAttribute, output, signal, contentChild, effect, isDevMode, Directive, ElementRef } from '@angular/core';
+import { createDefaults, FormUiControlBase, IdGenerator, injectDateAdapter, injectTextDirection, FOR_TIME_VALUE_SOURCE, injectHiddenInput, serializeISODate, clampToBounds, composeWithTime, assertTimeCapable, adoptHostId, createVetoableNativeEvent, emitVetoableEvent, registerHandle, reflectDisabled, injectModalShell, injectOverlayShell } from 'forty-cdk/core';
+import { ForCalendar } from 'forty-cdk/calendar';
+
+/** Injection token for {@link ForDatePickerContext}, provided by `ForDatePicker`. */
+const FOR_DATE_PICKER_CONTEXT = new InjectionToken('FOR_DATE_PICKER_CONTEXT');
+/**
+ * Injects the nearest {@link ForDatePickerContext}, throwing a descriptive
+ * error when used outside a `[forDatePicker]` element.
+ *
+ * @param piece Name of the calling directive, used in the error message.
+ */
+function injectDatePickerContext(piece) {
+    const ctx = inject(FOR_DATE_PICKER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/date-picker] ${piece} must be used inside a [forDatePicker] 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 ' +
+            '[forDatePicker] root.');
+    }
+    return ctx;
+}
+/**
+ * Resolves the trigger's root context: the explicit reference when the
+ * `[forDatePickerTrigger]` input carries one, the injected
+ * `FOR_DATE_PICKER_CONTEXT` otherwise. The orphan error only fires when neither
+ * resolves, on first read of the returned signal. Must be called in an
+ * injection context.
+ */
+function injectDatePickerTriggerContext(explicitRoot) {
+    const injected = inject(FOR_DATE_PICKER_CONTEXT, { optional: true });
+    return computed(() => {
+        const explicit = explicitRoot();
+        if (explicit !== '') {
+            return explicit;
+        }
+        if (injected) {
+            return injected;
+        }
+        throw new Error('[forty-cdk/date-picker] ForDatePickerTrigger could not resolve its [forDatePicker] root: ' +
+            'no FOR_DATE_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: [forDatePickerTrigger]="root" with #root="forDatePicker".');
+    });
+}
+
+/**
+ * Library fallback for date-picker defaults, read at the root injector when no
+ * consumer has called `provideForDatePickerDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_DATE_PICKER_FALLBACK_DEFAULTS = {
+    sideOffset: 8,
+    collisionPadding: 8,
+};
+const { token, provideDefaults } = createDefaults('FOR_DATE_PICKER_DEFAULTS', FOR_DATE_PICKER_FALLBACK_DEFAULTS);
+/** Token holding the resolved date-picker defaults for the current scope. */
+const FOR_DATE_PICKER_DEFAULTS = token;
+/**
+ * Configures forty-cdk date-picker defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForDatePickerDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Headless date picker — the [WAI-ARIA Date Picker Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)
+ * reinterpreted idiomatically for modern Angular: a focusable trigger that opens
+ * a floating surface wrapping a projected `ForCalendar`.
+ *
+ * `ForDatePicker` is the root and the form value: it implements
+ * `FormValueControl<D | null>` from `@angular/forms/signals`, so it auto-wires
+ * with `[formField]` and auto-associates inside a `[forField]`. The trigger is
+ * the focusable control that carries `name` / `disabled` / `invalid`; selection
+ * state flows root → projected calendar via `[(value)]`.
+ *
+ * The surface defaults to a **non-modal popover** (anchored to the trigger,
+ * dismiss on Escape / outside-pointer, return focus on close); set `modal`
+ * for the trapped / inert / scroll-locked dialog variant. Mount/unmount of the surface is the consumer's job — wrap
+ * `[forDatePickerContent]` with `@if (open())`.
+ *
+ * The projected `ForCalendar` is two-way bound by the consumer (`[(value)]`)
+ * and forwarded `[min]` / `[max]` / `[isDateUnavailable]` from the picker's
+ * accessors. A selection inside the grid is observed through a `contentChild`
+ * query on the calendar's `valueChange`, so the calendar primitive stays
+ * untouched; on selection the picker mirrors the value, flips `touched`, and —
+ * when `closeOnSelect` is on (default) — closes the surface.
+ *
+ * Set `granularity` coarser-than-a-day off (`'hour'` / `'minute'` / `'second'`)
+ * to make it a **date-time picker**: the consumer projects a `[forTimeField]`
+ * beside the calendar (binding both children **one-way** to `picker.value()` so
+ * their internal writes don't clobber each other), and the picker grafts the
+ * entered time onto each calendar selection. This needs a time-capable adapter
+ * (`provideNativeDateAdapter()` / `provideInternationalizedDateTimeAdapter()`).
+ *
+ * @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 forDatePicker [(value)]="date" [(open)]="open" [minDate]="min" [maxDate]="max"
+ *      name="dob" [ariaLabel]="'Choose date'" #picker="forDatePicker">
+ *   <button forDatePickerTrigger>
+ *     <span forDatePickerValue>Pick a date</span>
+ *   </button>
+ *
+ *   @if (open()) {
+ *     <div forDatePickerContent>
+ *       <div forCalendar [(value)]="date" [min]="picker.minDate()" [max]="picker.maxDate()">
+ *         <!-- …calendar header + grid… -->
+ *       </div>
+ *     </div>
+ *   }
+ * </div>
+ * ```
+ *
+ * @example Date-time picker (`granularity="minute"`), children bound one-way:
+ * ```html
+ * <div forDatePicker [(value)]="when" [(open)]="open" granularity="minute"
+ *      [hourCycle]="24" #picker="forDatePicker">
+ *   <button forDatePickerTrigger><span forDatePickerValue>Pick date & time</span></button>
+ *   @if (open()) {
+ *     <div forDatePickerContent>
+ *       <div forCalendar [value]="picker.value()" [min]="picker.minDate()">…</div>
+ *       <div forTimeField [value]="picker.value()" [hourCycle]="picker.hourCycle()">…</div>
+ *     </div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForDatePicker extends FormUiControlBase {
+    #idGen = inject(IdGenerator);
+    #defaults = inject(FOR_DATE_PICKER_DEFAULTS);
+    /** The active date adapter, resolved from `FOR_DATE_ADAPTER` (shared with `ForCalendar`). */
+    adapter = injectDateAdapter('ForDatePicker');
+    /**
+     * Two-way bindable selected date, or `null`. Required by
+     * `FormValueControl<D | null>`. The `model()` change emitter (`(valueChange)`)
+     * fires only when the picker itself commits a selection, never on consumer
+     * writes via `[(value)]`.
+     */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable. Whether the surface is open. The `model()` change emitter
+     * (`(openChange)`) fires only on internal transitions (trigger toggle,
+     * Escape, outside dismissal, selection), never on consumer writes via
+     * `[(open)]`.
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum selectable date (inclusive). Forward to the projected calendar's
+     * `[min]`. 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). Forward to the projected calendar's
+     * `[max]`. Named `maxDate` (not `max`) for the same reason as {@link minDate}.
+     */
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Per-date predicate. Forward to the projected calendar's `[isDateUnavailable]`. */
+    isDateUnavailable = input(() => false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* istanbul ignore next */ []));
+    /**
+     * Close the surface after a date is selected in the projected calendar.
+     * Default `true`. Honoured only at `granularity="day"` — a date-time picker
+     * (`granularity > 'day'`) never closes on a calendar selection, so the user
+     * can go on to edit the time.
+     */
+    closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Date-time precision. `'day'` (default, **non-breaking**) keeps a pure
+     * calendar picker. Anything coarser-than-a-day off — `'hour'` / `'minute'` /
+     * `'second'` — turns it into a date-time picker: the consumer projects a
+     * `[forTimeField]` beside the calendar, a calendar selection preserves the
+     * entered time, and the value carries a time component. Requires a
+     * time-capable adapter (`provideNativeDateAdapter()` or
+     * `provideInternationalizedDateTimeAdapter()`).
+     */
+    granularity = input('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    /**
+     * 12- or 24-hour cycle forwarded to `[forDatePickerValue]`'s formatting (and
+     * typically to the projected `[forTimeField][hourCycle]`). When `null`
+     * (default) it is derived from the runtime locale. Only meaningful when
+     * `granularity > 'day'`.
+     */
+    hourCycle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, the surface is a trapped / inert / scroll-locked modal dialog
+     * (routed through `_internal/modal-shell`) instead of the default non-modal
+     * 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 surface. */
+    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 });
+    /**
+     * `Intl.DateTimeFormat` options driving the text rendered by
+     * `[forDatePickerValue]`. Default `{ year: 'numeric', month: 'long', day: 'numeric' }`.
+     */
+    formatOptions = input({
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
+    /** Text rendered by `[forDatePickerValue]` when no date is selected. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Selection mode. `'single'` (default) keeps the existing single-date
+     * `[(value)]` and `FormValueControl<D | null>` behaviour unchanged.
+     * `'range'` switches to the two-click anchor → commit flow and exposes the
+     * result through `[(range)]`. Range mode is day-granular and ignores
+     * `granularity` / time. Range is not a Signal Forms value in v1.
+     */
+    selectionMode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable committed date range, or `null`. Only used when
+     * `selectionMode="range"`. The `model()` change emitter (`(rangeChange)`)
+     * fires only when the picker internally commits or clears a range, never on
+     * consumer writes via `[(range)]`.
+     */
+    range = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /**
+     * Separator rendered between start and end in `[forDatePickerValue]` while
+     * in `selectionMode="range"`. Default `' – '` (en-dash with spaces).
+     */
+    rangeSeparator = input(' – ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
+    /** Side the surface 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'`. Ignored in `modal` mode. */
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Gap (px) between trigger and surface along the main axis. Default from `provideForDatePickerDefaults`. */
+    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 surface inside the viewport. */
+    avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Padding (px) applied uniformly to flip / shift / size. Default from `provideForDatePickerDefaults`. */
+    collisionPadding = input(this.#defaults.collisionPadding, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* 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. Set to
+     * `false` so a dramatic `animate.enter` plays from its first frame (the
+     * surface may flash briefly at the unresolved position while positioning
+     * computes).
+     */
+    clipUntilPositioned = input(true, { ...(ngDevMode ? { debugName: "clipUntilPositioned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name for the dialog surface. 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.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /**
+     * Fires when the user presses Escape while this surface 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 surface (and trigger). Vetoable. */
+    pointerDownOutside = output();
+    /** Fires when focus moves outside the surface (and trigger). Vetoable. */
+    focusOutside = output();
+    /** Composite event: shares veto state with `pointerDownOutside` / `focusOutside`. */
+    interactOutside = output();
+    /** Fires just before the surface sends focus into itself on open. Vetoable. */
+    autoFocusOnOpen = output();
+    /** Fires just before focus returns to the trigger on close. Vetoable. */
+    autoFocusOnClose = output();
+    triggerId = signal(this.#idGen.next('for-date-picker-trigger'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    contentId = signal(this.#idGen.next('for-date-picker-content'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    #triggerEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#triggerEl" }] : /* istanbul ignore next */ []));
+    trigger = this.#triggerEl.asReadonly();
+    #anchorEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#anchorEl" }] : /* istanbul ignore next */ []));
+    /**
+     * Element floating-ui anchors the surface against. Prefers an optional
+     * `[forDatePickerAnchor]` 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 surface paints.
+     */
+    reference = computed(() => this.#anchorEl() ?? this.#triggerEl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
+    #contentEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#contentEl" }] : /* istanbul ignore next */ []));
+    content = this.#contentEl.asReadonly();
+    /**
+     * `formatOptions` augmented with time fields when `granularity > 'day'` and
+     * the consumer hasn't already specified any — so a date-time picker's value
+     * display shows the time without extra wiring, while an explicit
+     * `formatOptions` is always honoured verbatim.
+     */
+    #effectiveFormatOptions = computed(() => {
+        const options = this.formatOptions();
+        const granularity = this.granularity();
+        if (granularity === 'day' ||
+            options.hour !== undefined ||
+            options.minute !== undefined ||
+            options.second !== undefined) {
+            return options;
+        }
+        const cycle = this.hourCycle();
+        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 */ []));
+    /** Formatted current value via the adapter, or `null` when empty. */
+    formattedValue = computed(() => {
+        if (this.selectionMode() === 'range') {
+            const r = this.range();
+            if (r === null) {
+                return null;
+            }
+            const fmtOpts = this.#effectiveFormatOptions();
+            return (this.adapter.format(r.start, fmtOpts) +
+                this.rangeSeparator() +
+                this.adapter.format(r.end, fmtOpts));
+        }
+        const value = this.value();
+        return value === null ? null : this.adapter.format(value, this.#effectiveFormatOptions());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+    /**
+     * The projected `ForCalendar`. Mounts only while the surface is open, so the
+     * query resolves to the live instance on open and to `undefined` on close.
+     * Its `valueChange` is the single signal that a date was selected inside the
+     * grid — wired in the constructor.
+     *
+     * Invariant: the projected calendar MUST resolve the same `DateAdapter` as
+     * this picker (the same `FOR_DATE_ADAPTER` scope). Angular's `contentChild`
+     * erases the generic, so the bridge reads `calendar.value` as `D | null` via
+     * a cast; a mismatched adapter would leak a wrong-shaped date through that
+     * seam. A dev-mode assertion in the bridge effect catches it early.
+     */
+    calendar = contentChild(ForCalendar, { ...(ngDevMode ? { debugName: "calendar" } : /* istanbul ignore next */ {}), descendants: true });
+    /**
+     * The projected `ForTimeField`, present only in a date-time picker
+     * (`granularity > 'day'`). Like the calendar, it mounts with the surface; its
+     * `valueChange` (a composed date-time, anchored on the picker's current
+     * value) is mirrored straight into the picker's value.
+     *
+     * Invariant: the projected time field MUST resolve the same `DateAdapter` as
+     * this picker (see {@link calendar}). The bridge casts its `value` to
+     * `D | null` because `contentChild` erases the generic; a dev-mode assertion
+     * guards the same-adapter contract.
+     */
+    timeSource = contentChild(FOR_TIME_VALUE_SOURCE, { ...(ngDevMode ? { debugName: "timeSource" } : /* istanbul ignore next */ {}), descendants: true });
+    constructor() {
+        super();
+        injectHiddenInput({
+            name: this.name,
+            values: computed(() => {
+                const value = this.value();
+                if (value === null) {
+                    return [];
+                }
+                return [serializeISODate(this.adapter, value, this.granularity(), 'ForDatePicker')];
+            }),
+            disabled: this.effectiveDisabled,
+        });
+        // Eager validation: a date-time picker needs a time-capable adapter. Fail
+        // loudly as soon as the granularity input settles, rather than on first
+        // selection deep in a subscription. 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();
+            }
+        });
+        // Calendar selection bridge. This `effect` does no state derivation — it
+        // only (re)subscribes to the projected calendar's `valueChange` or
+        // `rangeChange` as the surface mounts / unmounts. The writes happen
+        // asynchronously in the subscription callback (a discrete selection event),
+        // exactly like a click handler, never during the effect's reactive
+        // computation.
+        effect((onCleanup) => {
+            const calendar = this.calendar();
+            if (!calendar) {
+                return;
+            }
+            if (isDevMode() && calendar.adapter !== this.adapter) {
+                throw new Error('[forty-cdk/date-picker] The projected ForCalendar must use the same DateAdapter as the ForDatePicker.');
+            }
+            if (this.selectionMode() === 'range') {
+                const sub = calendar.range.subscribe((next) => {
+                    if (this.readonly() || this.effectiveDisabled()) {
+                        return;
+                    }
+                    this.range.set(next);
+                    this.markTouched();
+                    if (next !== null && this.closeOnSelect()) {
+                        this.close();
+                    }
+                });
+                onCleanup(() => sub.unsubscribe());
+                return;
+            }
+            const sub = calendar.value.subscribe((date) => {
+                if (this.readonly() || this.effectiveDisabled()) {
+                    return;
+                }
+                const selected = date;
+                // The projected calendar already preserves the time-of-day when it is
+                // one-way bound (`[value]`) to a timed value — `selectDate` re-grafts
+                // the current time via `#withPreservedTime`. This graft is a defensive
+                // fallback for a date-time picker whose calendar value was null or
+                // midnight (e.g. the very first selection): re-apply the previously
+                // entered time-of-day. Reading `value()` here is safe because the
+                // one-way binding means the calendar's own write didn't clobber it.
+                if (selected !== null && this.granularity() !== 'day') {
+                    const base = this.value() ?? selected;
+                    this.value.set(clampToBounds(this.adapter, composeWithTime(this.#time(), selected, base), this.minDate(), this.maxDate()));
+                }
+                else {
+                    this.value.set(selected === null
+                        ? null
+                        : clampToBounds(this.adapter, selected, this.minDate(), this.maxDate()));
+                }
+                this.markTouched();
+                // A date-time picker stays open after a day is picked so the time can
+                // still be edited; only a pure day picker honours `closeOnSelect`.
+                if (this.closeOnSelect() && this.granularity() === 'day') {
+                    this.close();
+                }
+            });
+            onCleanup(() => sub.unsubscribe());
+        });
+        // Time-source bridge (date-time pickers only). The projected time source
+        // (ForTimeField or ForTimePicker) is bound one-way to the picker's value,
+        // so its composed `valueChange` already carries the correct day plus the
+        // new time — mirror it straight in.
+        effect((onCleanup) => {
+            const timeSource = this.timeSource();
+            if (!timeSource) {
+                return;
+            }
+            if (isDevMode() && timeSource.adapter !== this.adapter) {
+                throw new Error('[forty-cdk/date-picker] The projected time source (ForTimeField / ForTimePicker) must use the same DateAdapter as the ForDatePicker.');
+            }
+            const sub = timeSource.value.subscribe((value) => {
+                if (this.readonly() || this.effectiveDisabled()) {
+                    return;
+                }
+                const next = value;
+                this.value.set(next === null ? null : clampToBounds(this.adapter, next, this.minDate(), this.maxDate()));
+                this.markTouched();
+            });
+            onCleanup(() => sub.unsubscribe());
+        });
+    }
+    /** The active adapter, narrowed to a time-capable one; throws when it is day-only. */
+    #time() {
+        return assertTimeCapable(this.adapter, 'ForDatePicker');
+    }
+    registerTrigger(el) {
+        adoptHostId(el, this.triggerId);
+        this.#triggerEl.set(el);
+    }
+    unregisterTrigger(el) {
+        if (this.#triggerEl() === el) {
+            this.#triggerEl.set(null);
+        }
+    }
+    registerAnchor(el) {
+        const current = this.#anchorEl();
+        if (current !== null && current !== el) {
+            throw new Error('[forty-cdk/date-picker] Multiple [forDatePickerAnchor] inside the same [forDatePicker]; only one is allowed.');
+        }
+        this.#anchorEl.set(el);
+    }
+    unregisterAnchor(el) {
+        if (this.#anchorEl() === el) {
+            this.#anchorEl.set(null);
+        }
+    }
+    registerContent(el) {
+        adoptHostId(el, this.contentId);
+        this.#contentEl.set(el);
+    }
+    unregisterContent(el) {
+        if (this.#contentEl() === el) {
+            this.#contentEl.set(null);
+        }
+    }
+    toggle() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.open.update((v) => !v);
+    }
+    close() {
+        this.markTouched();
+        this.open.set(false);
+    }
+    markTouched() {
+        super.markTouched();
+    }
+    focusCalendarCell() {
+        return this.calendar()?.focusActiveCell() ?? false;
+    }
+    // Both the anchored (`injectOverlayShell`) and modal (`injectModalShell`)
+    // surfaces now own the shared `#pendingOutsideVeto` reuse between the
+    // specific outside channels and the composite `interactOutside`, so this
+    // directive only forwards the shell-built veto to the matching `output()`
+    // and owns the close decision via `requestClose`. Escape is the one channel
+    // this directive still owns end-to-end on the anchored path (the modal path
+    // routes it through `emitEscapeKeyDown` on the shell, which builds the veto
+    // and calls `requestClose` itself).
+    /**
+     * Anchored-path Escape. Builds the veto, emits `(escapeKeyDown)`, and —
+     * unless vetoed and `dismissible` is off — stops propagation and closes.
+     */
+    emitEscapeKeyDown(event) {
+        const veto = createVetoableNativeEvent(event);
+        this.escapeKeyDown.emit(veto);
+        if (!veto.defaultPrevented && this.dismissible()) {
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    /**
+     * Outside-interaction emit forwarders shared by both shells. The shell
+     * builds and reuses the veto; these only fire the matching output.
+     */
+    emitPointerDownOutside(veto) {
+        this.pointerDownOutside.emit(veto);
+    }
+    emitFocusOutside(veto) {
+        this.focusOutside.emit(veto);
+    }
+    emitInteractOutside(veto) {
+        this.interactOutside.emit(veto);
+    }
+    /** Modal-path Escape forwarder: emit only; the modal shell owns the close. */
+    forwardEscapeKeyDown(veto) {
+        this.escapeKeyDown.emit(veto);
+    }
+    /**
+     * Implicit close requested by either shell after an un-vetoed outside
+     * interaction (or, on the modal path, an un-vetoed Escape). Marks the
+     * control touched and closes.
+     */
+    requestClose() {
+        this.close();
+    }
+    emitAutoFocusOnOpen() {
+        return emitVetoableEvent(this.autoFocusOnOpen);
+    }
+    emitAutoFocusOnClose() {
+        return emitVetoableEvent(this.autoFocusOnClose);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: ForDatePicker, isStandalone: true, selector: "[forDatePicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", 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 }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", 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 }, 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 }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", 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 }, 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 }, 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", open: "openChange", range: "rangeChange", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", autoFocusOnOpen: "autoFocusOnOpen", autoFocusOnClose: "autoFocusOnClose" }, host: { properties: { "attr.dir": "dir()", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null" } }, providers: [{ provide: FOR_DATE_PICKER_CONTEXT, useExisting: ForDatePicker }], queries: [{ propertyName: "calendar", first: true, predicate: ForCalendar, descendants: true, isSignal: true }, { propertyName: "timeSource", first: true, predicate: FOR_TIME_VALUE_SOURCE, descendants: true, isSignal: true }], exportAs: ["forDatePicker"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDatePicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDatePicker]',
+                    exportAs: 'forDatePicker',
+                    host: {
+                        '[attr.dir]': 'dir()',
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                    },
+                    providers: [{ provide: FOR_DATE_PICKER_CONTEXT, useExisting: ForDatePicker }],
+                }]
+        }], 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"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", 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 }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", 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 }] }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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"] }], calendar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForCalendar), { ...{ descendants: true }, isSignal: true }] }], timeSource: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FOR_TIME_VALUE_SOURCE), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Optional positioning anchor. When present, `[forDatePickerContent]` is
+ * positioned against this element instead of `[forDatePickerTrigger]` — useful
+ * when the trigger lives inside a decorated field box (padding, prefix icon,
+ * clear / chevron buttons) and the surface 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 surface falls
+ * back to anchoring against the trigger, so existing usages are unaffected.
+ *
+ * A date picker's calendar has its own intrinsic width and ignores
+ * `--for-anchor-width`, so the practical effect is mostly start / side
+ * alignment to the box edge.
+ *
+ * At most one `[forDatePickerAnchor]` may be registered per `[forDatePicker]`;
+ * a second one throws.
+ *
+ * ```html
+ * <div forDatePicker [(value)]="date">
+ *   <div forDatePickerAnchor class="field-box">
+ *     <icon />
+ *     <button forDatePickerTrigger><span forDatePickerValue>…</span></button>
+ *     <button class="clear">×</button>
+ *   </div>
+ *   @if (open()) {
+ *     <div forDatePickerContent>…</div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForDatePickerAnchor {
+    #ctx = injectDatePickerContext('ForDatePickerAnchor');
+    #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: ForDatePickerAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDatePickerAnchor, isStandalone: true, selector: "[forDatePickerAnchor]", exportAs: ["forDatePickerAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDatePickerAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDatePickerAnchor]',
+                    exportAs: 'forDatePickerAnchor',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The button that opens the date-picker surface — and the focusable form
+ * control the picker exposes for `[formField]`. Apply on a `<button>` so
+ * Space / Enter dispatch native clicks that toggle via `(click)`.
+ *
+ * Wires APG Date Picker Dialog attributes: `aria-haspopup="dialog"`,
+ * `aria-expanded` reflecting `open()`, and `aria-controls` pointing to the
+ * content while open. It also reflects the root's form-control state
+ * (`aria-disabled` / `aria-readonly` / `aria-required` / `aria-invalid` /
+ * `aria-busy`) so the focusable element advertises validity to assistive tech.
+ *
+ * The trigger is exempt from the surface's dismissable layer — its own click
+ * toggles open/close, so an outside-pointer dismissal never races with it.
+ *
+ * The root is normally resolved via DI from the enclosing `[forDatePicker]`.
+ * When the trigger is declared inside an `ng-template` stamped into the root
+ * (e.g. via `ngTemplateOutlet`), DI resolves at the template's declaration
+ * site and misses the root — pass it explicitly through the selector input,
+ * `routerLink`-style: `[forDatePickerTrigger]="root"` with
+ * `#root="forDatePicker"`.
+ */
+class ForDatePickerTrigger {
+    #host = inject(ElementRef);
+    /**
+     * Optional explicit reference to the `[forDatePicker]` root, named after the
+     * selector `routerLink`-style. The bare valueless attribute keeps resolving
+     * the enclosing root via DI; pass the root explicitly
+     * (`[forDatePickerTrigger]="root"`, with `#root="forDatePicker"`) when the
+     * trigger is declared in an `ng-template` stamped inside the root — DI
+     * resolves at the template's declaration site, so the enclosing root is
+     * invisible there. The empty string (what the valueless attribute yields) is
+     * treated as unset.
+     */
+    forDatePickerTrigger = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forDatePickerTrigger" }] : /* istanbul ignore next */ []));
+    ctx = injectDatePickerTriggerContext(this.forDatePickerTrigger);
+    constructor() {
+        const el = this.#host.nativeElement;
+        // Registration is an imperative call into the resolved root's registry,
+        // not state derivation — the effect only re-registers the element when the
+        // resolved root changes (explicit reference swapped at runtime).
+        effect((onCleanup) => {
+            const ctx = this.ctx();
+            ctx.registerTrigger(el);
+            onCleanup(() => ctx.unregisterTrigger(el));
+        });
+        reflectDisabled(computed(() => this.ctx().effectiveDisabled()));
+    }
+    onClick() {
+        this.ctx().toggle();
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next) {
+            // Focus moving into the surface we just opened — not a leave.
+            const content = this.ctx().content();
+            if (content && content.contains(next)) {
+                return;
+            }
+            // Focus staying within the trigger's own subtree — not a leave.
+            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: ForDatePickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDatePickerTrigger, isStandalone: true, selector: "[forDatePickerTrigger]", inputs: { forDatePickerTrigger: { classPropertyName: "forDatePickerTrigger", publicName: "forDatePickerTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "focusout": "onFocusOut($event)" }, properties: { "id": "ctx().triggerId()", "attr.aria-haspopup": "\"dialog\"", "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: ["forDatePickerTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDatePickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDatePickerTrigger]',
+                    exportAs: 'forDatePickerTrigger',
+                    host: {
+                        type: 'button',
+                        '[id]': 'ctx().triggerId()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[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()',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { forDatePickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDatePickerTrigger", required: false }] }] } });
+
+/**
+ * The date-picker surface. Carries `role="dialog"`, is portaled to
+ * `document.body`, and wraps the projected `ForCalendar`. It defers all of its
+ * lifecycle to one of the two shared shells, picked once on construction from
+ * `[forDatePicker].modal`:
+ *
+ * - **non-modal (default)** — `injectOverlayShell` anchors the surface to the
+ *   trigger via `@floating-ui/dom`, activates a `DismissableLayer` (Escape,
+ *   pointer-down outside, focus outside), moves focus to the calendar's roving
+ *   cell on open, and returns focus to the trigger on close.
+ * - **modal** — `injectModalShell` traps focus, inerts the background, and
+ *   locks body scroll (a centered dialog the consumer positions with CSS, not
+ *   trigger-anchored). Same Escape / outside-pointer dismiss and return-focus.
+ *
+ * The mode is read in the constructor rather than reactively because the two
+ * shells are structurally different and switching at runtime would require a
+ * remount. This is reliable: the surface mounts lazily (the consumer wraps it
+ * with `@if (open())`), well after the root's `modal` input has settled.
+ *
+ * Mount/unmount of the surface is the consumer's responsibility — wrap with
+ * `@if (open())` so `animate.enter` / `animate.leave` fire on the natural
+ * mount cycle.
+ */
+class ForDatePickerContent {
+    ctx = injectDatePickerContext('ForDatePickerContent');
+    #host = inject(ElementRef);
+    constructor() {
+        const ctx = this.ctx;
+        registerHandle(this.#host.nativeElement, (el) => ctx.registerContent(el), (el) => ctx.unregisterContent(el));
+        if (ctx.modal()) {
+            injectModalShell({
+                modal: ctx.modal,
+                returnFocus: ctx.returnFocus,
+                // Land on the calendar's active cell with a first-focusable fallback,
+                // matching the non-modal path below — both modes focus the same cell.
+                initialFocus: {
+                    move: () => ctx.focusCalendarCell(),
+                    veto: () => ctx.emitAutoFocusOnOpen(),
+                },
+                autoFocusOnOpen: () => (event) => {
+                    if (ctx.emitAutoFocusOnOpen()) {
+                        event.preventDefault();
+                    }
+                },
+                autoFocusOnClose: () => (event) => {
+                    if (ctx.emitAutoFocusOnClose()) {
+                        event.preventDefault();
+                    }
+                },
+                dismiss: {
+                    dismissible: ctx.dismissible,
+                    requestClose: () => ctx.requestClose(),
+                    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.reference,
+                open: ctx.open,
+                side: ctx.side,
+                align: ctx.align,
+                sideOffset: ctx.sideOffset,
+                alignOffset: ctx.alignOffset,
+                avoidCollisions: ctx.avoidCollisions,
+                collisionPadding: ctx.collisionPadding,
+                sticky: ctx.sticky,
+                hideWhenDetached: ctx.hideWhenDetached,
+                clipUntilPositioned: ctx.clipUntilPositioned,
+            },
+            dismiss: {
+                dismissible: ctx.dismissible,
+                requestClose: () => ctx.requestClose(),
+                emitEscapeKeyDown: (event) => ctx.emitEscapeKeyDown(event),
+                emitPointerDownOutside: (veto) => ctx.emitPointerDownOutside(veto),
+                emitFocusOutside: (veto) => ctx.emitFocusOutside(veto),
+                emitInteractOutside: (veto) => ctx.emitInteractOutside(veto),
+                // Trigger is exempt — its own click toggles open/close; without
+                // exemption pointer-down-outside would race and double-close.
+                exemptElements: () => {
+                    const trigger = ctx.trigger();
+                    return trigger ? [trigger] : [];
+                },
+            },
+            // Move focus to the calendar's roving cell on open; the shell falls back
+            // to the first focusable descendant when no cell is found.
+            initialFocus: {
+                move: () => ctx.focusCalendarCell(),
+                veto: () => ctx.emitAutoFocusOnOpen(),
+            },
+            returnFocus: {
+                enabled: ctx.returnFocus,
+                target: () => ctx.trigger(),
+                veto: () => ctx.emitAutoFocusOnClose(),
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDatePickerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDatePickerContent, isStandalone: true, selector: "[forDatePickerContent]", host: { attributes: { "role": "dialog", "tabindex": "-1" }, properties: { "id": "ctx.contentId()", "attr.aria-label": "ctx.ariaLabel()", "attr.aria-labelledby": "ctx.ariaLabel() ? null : ctx.triggerId()", "attr.aria-modal": "ctx.modal() ? \"true\" : null", "attr.data-state": "ctx.open() ? \"open\" : \"closed\"" } }, exportAs: ["forDatePickerContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDatePickerContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDatePickerContent]',
+                    exportAs: 'forDatePickerContent',
+                    host: {
+                        role: 'dialog',
+                        tabindex: '-1',
+                        '[id]': 'ctx.contentId()',
+                        '[attr.aria-label]': 'ctx.ariaLabel()',
+                        '[attr.aria-labelledby]': 'ctx.ariaLabel() ? null : ctx.triggerId()',
+                        '[attr.aria-modal]': 'ctx.modal() ? "true" : null',
+                        '[attr.data-state]': 'ctx.open() ? "open" : "closed"',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Renders the selected date — formatted through the adapter with the root's
+ * `formatOptions` — or the configured placeholder when nothing is selected,
+ * into its host element via `textContent`. Apply on a `<span>` (or any inline
+ * element) inside `[forDatePickerTrigger]`:
+ *
+ * ```html
+ * <button forDatePickerTrigger>
+ *   <span forDatePickerValue placeholder="Pick a date…"></span>
+ * </button>
+ * ```
+ *
+ * For fully custom rendering, drop this directive and read
+ * `forDatePicker.formattedValue()` / `forDatePicker.value()` from your template.
+ */
+class ForDatePickerValue {
+    #ctx = injectDatePickerContext('ForDatePickerValue');
+    /** Text shown when no date is selected. Falls back to `[forDatePicker][placeholder]`. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    isPlaceholder = computed(() => this.#ctx.formattedValue() === null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPlaceholder" }] : /* istanbul ignore next */ []));
+    displayText = computed(() => {
+        const formatted = this.#ctx.formattedValue();
+        if (formatted !== null) {
+            return formatted;
+        }
+        return 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: ForDatePickerValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDatePickerValue, isStandalone: true, selector: "[forDatePickerValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "textContent": "displayText()", "attr.data-placeholder": "isPlaceholder() ? \"\" : null" } }, exportAs: ["forDatePickerValue"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDatePickerValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDatePickerValue]',
+                    exportAs: 'forDatePickerValue',
+                    host: {
+                        '[textContent]': 'displayText()',
+                        '[attr.data-placeholder]': 'isPlaceholder() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/**
+ * Exact public names of every `ForDatePicker` 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[myDatePicker]',
+ *   template: '',
+ *   hostDirectives: [
+ *     {
+ *       directive: ForDatePicker,
+ *       inputs: [...FOR_DATE_PICKER_HOST_DIRECTIVE_INPUTS],
+ *       outputs: [...FOR_DATE_PICKER_HOST_DIRECTIVE_OUTPUTS],
+ *     },
+ *   ],
+ * })
+ * export class MyDatePicker {}
+ * ```
+ */
+const FOR_DATE_PICKER_HOST_DIRECTIVE_INPUTS = [
+    'value',
+    'open',
+    'range',
+    'align',
+    'alignOffset',
+    'ariaLabel',
+    'avoidCollisions',
+    'clipUntilPositioned',
+    'closeOnSelect',
+    'collisionPadding',
+    'dir',
+    'dirty',
+    'disabled',
+    'dismissible',
+    'errors',
+    'formatOptions',
+    'granularity',
+    'hideWhenDetached',
+    'hourCycle',
+    'invalid',
+    'isDateUnavailable',
+    'maxDate',
+    'minDate',
+    'modal',
+    'name',
+    'pending',
+    'placeholder',
+    'rangeSeparator',
+    'readonly',
+    'required',
+    'returnFocus',
+    'selectionMode',
+    'side',
+    'sideOffset',
+    'sticky',
+    'touched',
+];
+/**
+ * Exact public names of every `ForDatePicker` output, the Signal Forms `touch` output
+ * included. Spread it into the `outputs` array of the same `hostDirectives` entry as
+ * {@link FOR_DATE_PICKER_HOST_DIRECTIVE_INPUTS}.
+ */
+const FOR_DATE_PICKER_HOST_DIRECTIVE_OUTPUTS = [
+    'valueChange',
+    'openChange',
+    'rangeChange',
+    'escapeKeyDown',
+    'pointerDownOutside',
+    'focusOutside',
+    'interactOutside',
+    'autoFocusOnOpen',
+    'autoFocusOnClose',
+    'touchedChange',
+    'touch',
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_DATE_PICKER_CONTEXT, FOR_DATE_PICKER_DEFAULTS, FOR_DATE_PICKER_HOST_DIRECTIVE_INPUTS, FOR_DATE_PICKER_HOST_DIRECTIVE_OUTPUTS, ForDatePicker, ForDatePickerAnchor, ForDatePickerContent, ForDatePickerTrigger, ForDatePickerValue, provideForDatePickerDefaults };
+//# sourceMappingURL=forty-cdk-date-picker.mjs.map