ngwr 14.6.0 → 14.8.0

package/fesm2022/ngwr-date-picker.mjs

@@ -3,14 +3,15 @@ import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coerci
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, model, output, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component, DestroyRef, Injector, viewChild, Directive } from '@angular/core';
+import { input, inject, ElementRef, model, output, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component, Injectable, DestroyRef, Injector, viewChild, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { WrCalendar } from 'ngwr/calendar';
 import { WrDateAdapter, WR_DATE_LOCALE } from 'ngwr/date';
-import { readI18nText, useI18nText } from 'ngwr/i18n';
+import { readI18nText, useI18nFormatter, useI18nText } from 'ngwr/i18n';
 import { WrInput, WrInputGroup, WrInputSuffix } from 'ngwr/input';
 import { WR_OVERLAY, WrOutsideClick, wrFollowDirection } from 'ngwr/overlay';
 import { clamp } from 'ngwr/utils';
+import { transformedValue } from '@angular/forms/signals';
 import { WR_FORM_FIELD } from 'ngwr/form';
 
 /**
@@ -403,6 +404,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{ selector: 'wr-date-time-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-time-panel' }, imports: [WrCalendar, WrTimePanel], template: "<wr-calendar\n  [date]=\"calendarValue()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (dateChange)=\"onCalendarSelect($event)\"\n/>\n\n<div class=\"wr-date-time-panel__time\">\n  <wr-time-picker\n    [value]=\"timeValue()\"\n    [format]=\"timeFormat()\"\n    [showSeconds]=\"showSeconds()\"\n    [step]=\"step()\"\n    (valueChange)=\"onTimeChange($event)\"\n  />\n</div>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Per-picker live-region ids — see {@link WrDateInputField.statusId}. */
+let statusUid = 0;
+/**
+ * The refusals both pickers raise, from one place — the calendar, the single
+ * picker and the range picker have to agree on what "refused" means, and the
+ * message has to be the one `<wr-form-field>` would show for the same key.
+ *
+ * Must be called from an injection context.
+ *
+ * @internal
+ */
+function useDateInputRefusals() {
+    const adapter = inject(WrDateAdapter);
+    // The same keys and the same English as `WR_FORM_ERROR_FALLBACKS`: the message a
+    // picker announces on its own and the one a surrounding field renders are one
+    // sentence, whichever of the two ends up saying it.
+    const formatText = useI18nFormatter('validation.dateFormat', 'Expected format: {{example}}');
+    const minText = useI18nFormatter('validation.minDate', 'Choose a later date.');
+    const maxText = useI18nFormatter('validation.maxDate', 'Choose an earlier date.');
+    const filterText = useI18nFormatter('validation.dateFilter', 'This date is not available.');
+    return {
+        unreadable(format) {
+            // The 31st of December, at 18:45: a day past 12 cannot be mistaken for a month,
+            // so the example shows the ORDER of the fields as well as their separators —
+            // which is the whole question for someone typing `07.09.1994` into a field
+            // that reads `9/7/1994`. The year is the current one so it never looks stale.
+            const reference = adapter.setTime(adapter.createDate(adapter.getYear(adapter.today()), 11, 31), 18, 45, 0);
+            const example = adapter.format(reference, format);
+            return { kind: 'dateFormat', example, message: formatText({ example }) };
+        },
+        outOfBounds(date, { min, max, filter }) {
+            if (min && adapter.compareDate(date, min) < 0)
+                return { kind: 'minDate', date, min, message: minText() };
+            if (max && adapter.compareDate(date, max) > 0)
+                return { kind: 'maxDate', date, max, message: maxText() };
+            if (filter && !filter(date))
+                return { kind: 'dateFilter', date, message: filterText() };
+            return null;
+        },
+    };
+}
+/**
+ * Hands the picker's refusals to the form it is bound to, so a refused entry makes
+ * the FORM invalid rather than only the field's border.
+ *
+ * Angular's `transformedValue` is the public way a custom control reports parse
+ * errors: bound with `[formField]` they join the field's errors, and bound with
+ * `[formControl]`, `formControlName` or `[(ngModel)]` they become a validator on
+ * the control. It is used here for that channel ONLY. The picker keeps its own text
+ * model — the echo guard, and the range picker's per-end ordering, are older and
+ * pinned — so `parse` never returns a `value`, which Angular documents as leaving the
+ * model untouched.
+ *
+ * The returned function reports the picker's WHOLE current list, every time. The form
+ * hears it from the keystroke — the picker's own wait for Enter or blur is about what
+ * it shows, and a form whose validity lagged the text in its field could submit the old
+ * value under text nobody meant.
+ *
+ * Angular's copy does not simply hold what was reported. It is a `linkedSignal` over the
+ * model, so ANY model write clears it, and a form reset clears it without a model write
+ * at all:
+ *
+ * - a write of the picker's own is followed by a report of its own, synchronously — the
+ *   range picker committing one end while the other still holds refused text is the
+ *   case that needs it;
+ * - a write from outside replaces the text a refusal was about, and the picker reports
+ *   its emptied list;
+ * - what is left is a reset (`FormControl.reset()`, a Signal Forms field's `reset()`):
+ *   the raw signal moved while the model did not. Angular has thrown the error away, and
+ *   `onReset` is where the picker throws away the text it was about.
+ *
+ * Unbound, nothing resets it and it costs a signal and an effect.
+ *
+ * Must be called from an injection context.
+ *
+ * @internal
+ */
+function useFormParseErrors(value, onReset) {
+    const channel = transformedValue(value, {
+        parse: errors => ({ error: errors.length ? errors : undefined }),
+        format: () => [],
+    });
+    /** What the raw signal held after the last report, and the model it was reported against. */
+    let held = untracked(channel);
+    let against = untracked(value);
+    const report = (errors) => {
+        channel.set(errors);
+        held = untracked(channel);
+        against = untracked(value);
+    };
+    effect(() => {
+        const now = channel();
+        untracked(() => {
+            if (now === held)
+                return;
+            held = now;
+            if (Object.is(value(), against))
+                onReset();
+            against = value();
+        });
+    });
+    return report;
+}
+/**
+ * What a picker's own text input sees as its `<wr-form-field>`: the real field, with
+ * the refusal on show added to it. Provided per picker, and handed to the input
+ * through `viewProviders`.
+ *
+ * `wrInput` writes `aria-invalid` and `aria-describedby` from the field it injects, and
+ * a second binding on either attribute leaves it holding whichever wrote last — so
+ * the picker cannot bind them beside `wrInput` while a field is there. It stands
+ * between the two instead. The input then reads ONE state: invalid when the field
+ * has an error OR the picker is showing a refusal, and described by the field's
+ * message together with the picker's own reason while the field is not yet saying it.
+ *
+ * "Not yet" is ordinary rather than rare. A refusal reaches a bound form as a parse
+ * error, and `<wr-form-field>` shows an error only once its control is touched or
+ * dirty; a reactive `FormControl` learns of it through `updateValueAndValidity` with
+ * `emitEvent: false`, which the field does not hear until the control's next event.
+ * Until the field says it, the picker does — so the refusal is never silent,
+ * whichever of the two ends up announcing it.
+ *
+ * With no field around the picker, there is nothing to stand between and `context` is
+ * `null`: the input's `wrInput` then writes neither attribute, and the picker binds
+ * them itself.
+ *
+ * @internal
+ */
+class WrDateInputField {
+    /** The surrounding `<wr-form-field>` — skipping the picker's own node, whose view it is providing for. */
+    outer = inject(WR_FORM_FIELD, { optional: true, skipSelf: true });
+    /** Id of the picker's live region, which doubles as the reason `aria-describedby` points at. */
+    statusId = `wr-date-picker-status-${++statusUid}`;
+    source = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** The refusal on show for the input the field describes — the only input, or a range's start. */
+    described = computed(() => this.source()?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "described" }] : /* istanbul ignore next */ []));
+    /**
+     * Hand over the signal holding that refusal. Called from the picker's constructor:
+     * this service is built before the component it serves, so it cannot read the
+     * component's state at its own construction.
+     */
+    describe(source) {
+        this.source.set(source);
+    }
+    /** Whether the field is already rendering a message for this kind of error. */
+    saysAlready(error) {
+        return this.outer?.errorKeys().includes(error.kind) ?? false;
+    }
+    context = this.outer ? this.wrap(this.outer) : null;
+    wrap(outer) {
+        return {
+            controlId: outer.controlId,
+            adoptControlId: id => outer.adoptControlId(id),
+            labelId: outer.labelId,
+            hintId: outer.hintId,
+            errorKeys: computed(() => {
+                const keys = outer.errorKeys();
+                const own = this.described();
+                return own && !keys.includes(own.kind) ? [...keys, own.kind] : keys;
+            }),
+            describedBy: computed(() => {
+                const own = this.described();
+                const ids = [outer.describedBy(), own && !this.saysAlready(own) ? this.statusId : null].filter(Boolean);
+                return ids.length ? ids.join(' ') : null;
+            }),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDateInputField, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDateInputField });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDateInputField, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * The view half of {@link WrDateInputField}: what the picker's own template sees as
+ * its field. A VIEW provider, so it reaches the text inputs the picker renders and
+ * never content projected into it; the host half is `WrDateInputField` itself, in
+ * the component's `providers`.
+ *
+ * @internal
+ */
+const WR_DATE_INPUT_FIELD_VIEW_PROVIDER = {
+    provide: WR_FORM_FIELD,
+    useFactory: () => inject(WrDateInputField).context,
+};
+
 /**
  * @license
  *
@@ -410,6 +605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 let panelUid = 0;
+/** How long a live region stays blank before a repeated refusal is written back. */
+const SILENCE_MS$1 = 100;
 /**
  * Unified date / time / date-time picker. Same `<input>` + popover skeleton
  * for every mode — the overlay content swaps based on `[mode]`:
@@ -427,8 +624,12 @@ let panelUid = 0;
  * `[(ngModel)]` / reactive forms keep working through Angular's bridge. Value
  * type is `Date | null` for every mode.
  *
- * Parses the input on every keystroke (silently — only emits when valid) and
- * re-formats canonical on blur. Format is driven by {@link WrDateAdapter}: it
+ * Parses the input on every keystroke and emits only a date it can read and the
+ * calendar would accept. Anything else is REFUSED, never guessed: the bound value
+ * stays where it was, and the text stays in the field so it can be corrected.
+ * Enter and leaving the field turn a refusal visible — see {@link inputError}.
+ * A committed date is re-formatted canonical on blur and on Enter. Format is
+ * driven by {@link WrDateAdapter}: it
  * accepts both named keys (`'shortDate'`, `'mediumDateTime'`, …) and raw
  * token strings (`'dd.MM.yyyy'`, `'HH:mm'`). When `format` is left at the
  * default (`null`), the picker derives the right named key from `mode`:
@@ -611,10 +812,99 @@ class WrDatePicker {
         return this.panelLabelDate();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedPanelLabel" }] : /* istanbul ignore next */ []));
+    refusals = useDateInputRefusals();
+    reportToForm = useFormParseErrors(this.value, () => this.onFormReset());
+    inputField = inject(WrDateInputField);
+    /**
+     * Why the text in the field was not committed — `null` while the text is the value.
+     * Raised on the keystroke that makes the text unusable, and reported to a bound form
+     * from that keystroke on.
+     */
+    refusal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refusal" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the refusal is on show. A refusal is raised on the keystroke but shown
+     * only once the user has finished — on Enter, or on leaving the field — because
+     * every date is unreadable for most of the time it takes to type one, and a field
+     * that turned red on the first digit would be telling the user off for typing.
+     * Once shown it follows the text live, so a correction clears it immediately.
+     *
+     * Leaving counts wherever focus goes, including by way of the open panel: moving
+     * into the panel waits, since a pick there replaces the text, but focus that leaves
+     * the panel for anything other than the field — or a panel that closes without a
+     * pick and without handing focus back to the field — has left too.
+     */
+    revealed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    /**
+     * Why the text in the field is not the bound value, once the picker is showing it —
+     * `null` while the text is the value, and `null` while the user is still typing.
+     *
+     * A refusal is raised on the keystroke that makes the text unreadable (`dateFormat`),
+     * out of `min` / `max` (`minDate` / `maxDate`) or rejected by `dateFilter`, and goes
+     * on show on Enter or when the user leaves the field — the same moment the border
+     * turns and the reason is announced, so a message rendered from this signal never
+     * disagrees with them. Once on show it follows the text, and it clears the moment the
+     * text becomes a date the picker commits, is emptied, or is replaced by a pick from
+     * the panel, a value written from outside, or a form reset. The value itself is never
+     * touched by a refusal.
+     *
+     * A bound form does NOT wait: `[formField]`, `[formControl]`, `formControlName` and
+     * `[(ngModel)]` see the refusal as a parse error from the keystroke, so the form is
+     * invalid the whole time the field holds text it could not use, and
+     * `<wr-form-field>` shows `message` by its own rule — once the control is touched or
+     * dirty. Read this through a template reference when the picker is bound with
+     * `[(value)]` alone and the reason should be on screen.
+     *
+     * @example
+     * ```html
+     * <wr-date-picker #due [(value)]="due" format="dd.MM.yyyy" />
+     * @if (due.inputError(); as error) {
+     *   <small>{{ error.message }}</small>
+     * }
+     * ```
+     */
+    inputError = computed(() => (this.revealed() ? this.refusal() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputError" }] : /* istanbul ignore next */ []));
+    /**
+     * Blanked briefly so Enter on an unchanged refusal is announced again. A live region
+     * does not repeat text it already holds, and blanking it for one render is not
+     * enough: both changes land in the same task, and the accessibility tree sees
+     * only the end state. The gap is a timer for that reason — the CDK's
+     * `LiveAnnouncer` clears its region the same way.
+     */
+    silenced = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "silenced" }] : /* istanbul ignore next */ []));
+    silenceTimer;
+    statusId = this.inputField.statusId;
+    /**
+     * What the picker's own live region says: the refusal on show, unless a surrounding
+     * `<wr-form-field>` is already rendering a message for it — that message is a
+     * `role="alert"`, and a second voice would repeat it.
+     */
+    announcement = computed(() => {
+        const shown = this.inputError();
+        if (!shown || this.silenced() || this.inputField.saysAlready(shown))
+            return '';
+        return shown.message;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /**
+     * `aria-invalid` and `aria-describedby` for the text input, bound only with NO
+     * field around the picker. Inside one, `wrInput` writes both from the field — see
+     * `WrDateInputField` for why the picker feeds them through it rather than binding
+     * a second writer beside it.
+     */
+    ownAriaInvalid = computed(() => !this.inputField.outer && this.inputError() ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownAriaInvalid" }] : /* istanbul ignore next */ []));
+    ownDescribedBy = computed(() => !this.inputField.outer && this.announcement() ? this.statusId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownDescribedBy" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-date-picker', `wr-date-picker--${this.mode()}`];
         if (this.disabled())
             parts.push('wr-date-picker--disabled');
+        if (this.inputError())
+            parts.push('wr-date-picker--invalid');
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
@@ -638,7 +928,10 @@ class WrDatePicker {
      * `[format]` / `[mode]` change makes it stale with the value untouched. */
     lastFormat = null;
     constructor() {
-        this.destroyRef.onDestroy(() => this.dispose());
+        this.destroyRef.onDestroy(() => {
+            this.dispose();
+            clearTimeout(this.silenceTimer);
+        });
         // Mirror external writes to `value` (from `[formField]`, `[(value)]`, or a
         // classic-forms bridge) into the display text — this is the old
         // `writeValue` body. The echo of our own edits is skipped, and a
@@ -657,12 +950,20 @@ class WrDatePicker {
             const v = this.value();
             const fmt = this.resolvedFormat();
             untracked(() => {
+                // Our own commits hand `value` the very object `commitValue` remembered, so a
+                // DIFFERENT object holding the same date came from outside — a reset to a fresh
+                // copy of the day, say. That is no reason to re-render text the user is
+                // typing, but it does replace text the picker refused.
+                const outside = v !== this.lastValue;
                 const echo = this.sameDate(v, this.lastValue) && fmt === this.lastFormat;
                 this.lastValue = v;
                 this.lastFormat = fmt;
-                if (echo)
+                if (echo && !(outside && this.refusal()))
                     return;
                 this.text.set(v && this.adapter.isValid(v) ? this.adapter.format(v, fmt) : '');
+                // The text the refusal was about is gone — replaced by a value written from
+                // outside, or re-rendered in a new format.
+                this.refuse(null);
             });
         });
         // A panel that is up when `disabled` arrives has to go. `readonly` is
@@ -679,6 +980,8 @@ class WrDatePicker {
                     this.closeOverlay();
             });
         });
+        // The input's field (see `WrDateInputField`) marks it invalid for the refusal on show.
+        this.inputField.describe(this.inputError);
         // While the calendar popover is open, push every valid typed value into it
         // so the displayed month follows the input live (the calendar snaps its
         // own viewDate to the bound `date`).
@@ -731,12 +1034,21 @@ class WrDatePicker {
         this.text.set(raw);
         if (!raw) {
             this.commitValue(null);
+            this.refuse(null);
             return;
         }
         const parsed = this.adapter.parse(raw, this.resolvedFormat());
-        if (parsed && this.adapter.isValid(parsed) && !this.isOutOfBounds(parsed)) {
-            this.commitValue(this.withKeptDate(parsed));
+        if (!parsed || !this.adapter.isValid(parsed)) {
+            this.refuse(this.refusals.unreadable(this.resolvedFormat()));
+            return;
+        }
+        const outOfBounds = this.outOfBounds(parsed);
+        if (outOfBounds) {
+            this.refuse(outOfBounds);
+            return;
         }
+        this.commitValue(this.withKeptDate(parsed));
+        this.refuse(null);
     }
     /**
      * In `time` mode the typed string carries no date, so the adapter fills one in — and
@@ -752,9 +1064,58 @@ class WrDatePicker {
             return parsed;
         return this.adapter.setTime(current, this.adapter.getHours(parsed), this.adapter.getMinutes(parsed), this.adapter.getSeconds(parsed));
     }
-    onBlur() {
+    onBlur(event) {
         this.touch.emit();
+        // A refused entry STAYS. Blur used to overwrite it with the last committed date,
+        // which is how a refusal became invisible: `07.09.1994` typed into a field bounded
+        // to 2026 simply turned back into the old date the moment the user moved on, with
+        // nothing to say it had been refused or why. The text is what they have to
+        // correct, and the value underneath was never changed. Focus moving INTO the open
+        // panel is not leaving — a day click there is about to replace the text anyway;
+        // `onPaneFocusOut` and `closeOverlay` decide when that visit ends.
+        if (this.refusal()) {
+            const next = event.relatedTarget;
+            if (!next || !this.overlayRef?.overlayElement.contains(next))
+                this.reveal();
+            return;
+        }
         // Reformat to canonical on blur (cleans up `1/5/25` → `1/5/2025`).
+        this.settleText();
+    }
+    /**
+     * Enter is "this is the date". A date the picker committed is re-formatted
+     * canonical and the panel closes; text it refused turns invalid on the spot —
+     * border, `aria-invalid`, the reason announced — and emits `touch`, which is what
+     * makes a surrounding `<wr-form-field>` show its message. The panel closes in both
+     * cases: it opens directly below the field, which is exactly where that message
+     * renders.
+     *
+     * Never `preventDefault`: Enter inside a `<form>` still submits it, and a form
+     * bound to this picker is invalid while the refusal stands.
+     */
+    onEnter() {
+        // Read before closing: a close can put the refusal on show itself.
+        const wasShown = this.revealed();
+        if (this.overlayRef)
+            this.closeOverlay();
+        const refusal = this.refusal();
+        if (!refusal) {
+            this.settleText();
+            return;
+        }
+        this.touch.emit();
+        if (wasShown) {
+            // Already on show, so the live region already holds this sentence — and a live
+            // region does not repeat text it already has. Blank it briefly so a second
+            // Enter is answered rather than met with silence.
+            this.silenced.set(true);
+            clearTimeout(this.silenceTimer);
+            this.silenceTimer = setTimeout(() => this.silenced.set(false), SILENCE_MS$1);
+        }
+        this.revealed.set(true);
+    }
+    /** Show the committed value canonically, or commit an emptied field as `null`. */
+    settleText() {
         const v = this.value();
         if (v && this.adapter.isValid(v)) {
             this.text.set(this.adapter.format(v, this.resolvedFormat()));
@@ -763,6 +1124,45 @@ class WrDatePicker {
             this.commitValue(null);
         }
     }
+    /**
+     * Record why the current text was not committed, or that it was. Clearing a
+     * refusal also takes it off show, so the next one waits for Enter or blur again.
+     */
+    refuse(next) {
+        this.refusal.set(next);
+        if (!next)
+            this.revealed.set(false);
+        this.reportToForm(next ? [next] : []);
+    }
+    /** Put a standing refusal on show — the user has left the field. */
+    reveal() {
+        if (this.refusal())
+            this.revealed.set(true);
+    }
+    /**
+     * The bound form was reset while the model stayed where it was — Angular has thrown
+     * the parse error away, so the text it was about goes too, and the field shows the
+     * value again. (A reset that MOVES the model reaches the text through the sync
+     * effect instead, like any other outside write.)
+     */
+    onFormReset() {
+        if (!this.refusal())
+            return;
+        const v = this.value();
+        this.text.set(v && this.adapter.isValid(v) ? this.adapter.format(v, this.resolvedFormat()) : '');
+        this.refuse(null);
+    }
+    /**
+     * Focus leaving the open panel. Moving within it, or back to the text field, is
+     * still the same visit; anywhere else — the page, the trigger, the next control — is
+     * leaving, so a refusal that waited while focus went into the panel shows now.
+     */
+    onPaneFocusOut = (event) => {
+        const next = event.relatedTarget;
+        if (next && (this.overlayRef?.overlayElement.contains(next) || next === this.inputEl().nativeElement))
+            return;
+        this.reveal();
+    };
     /** Called by the input's click — opens the overlay if it isn't open already. */
     openOnInput() {
         if (this.disabled() || this.overlayRef)
@@ -795,6 +1195,10 @@ class WrDatePicker {
     onFieldKey(event) {
         if (this.disabled())
             return;
+        if (event.key === 'Enter') {
+            this.onEnter();
+            return;
+        }
         const vertical = event.key === 'ArrowDown' || event.key === 'ArrowUp';
         if (!vertical)
             return;
@@ -860,6 +1264,7 @@ class WrDatePicker {
         pane.setAttribute('role', 'dialog');
         pane.setAttribute('aria-modal', 'false');
         pane.setAttribute('aria-label', this.resolvedPanelLabel());
+        pane.addEventListener('focusout', this.onPaneFocusOut);
         this.overlayOpen.set(true);
         // Dispatch by mode — pick the panel + wire its emissions.
         const m = this.mode();
@@ -950,6 +1355,7 @@ class WrDatePicker {
     commit(next) {
         this.text.set(this.adapter.format(next, this.resolvedFormat()));
         this.commitValue(next);
+        this.refuse(null);
     }
     /** Push a value to the model while remembering it, so the sync effect treats
      * the resulting change as an echo and leaves the display text alone. */
@@ -981,9 +1387,18 @@ class WrDatePicker {
     closeOverlay() {
         const pane = this.overlayRef?.overlayElement;
         const inside = !!pane && pane.contains(document.activeElement);
+        // Taking the pane out of the document moves focus without the user doing anything,
+        // so it must not read as focus leaving the panel.
+        pane?.removeEventListener('focusout', this.onPaneFocusOut);
         this.dispose();
         if (inside)
             this.restoreFocus();
+        // A panel that closes is the end of the visit to it. Unless focus is back in the
+        // field — Escape handing it there, or a close while the user never left it — the
+        // user is somewhere else now, and a refusal that waited for the panel shows. A pick
+        // has already cleared its refusal, so this only ever reaches text still refused.
+        if (document.activeElement !== this.inputEl().nativeElement)
+            this.reveal();
     }
     dispose() {
         if (this.overlayRef) {
@@ -997,22 +1412,13 @@ class WrDatePicker {
         this.autoFocusPanel = false;
     }
     // Helpers
-    isOutOfBounds(date) {
+    outOfBounds(date) {
         if (this.mode() === 'time')
-            return false;
-        const min = this.min();
-        if (min && this.adapter.compareDate(date, min) < 0)
-            return true;
-        const max = this.max();
-        if (max && this.adapter.compareDate(date, max) > 0)
-            return true;
+            return null;
         // Covers `dateFilter` as well as the bounds — the calendar disables filtered
         // days, so accepting them from the keyboard made the two entry paths
         // disagree. Same check, same reason, as `wr-date-range-picker`.
-        const filter = this.dateFilter();
-        if (filter && !filter(date))
-            return true;
-        return false;
+        return this.refusals.outOfBounds(date, { min: this.min(), max: this.max(), filter: this.dateFilter() });
     }
     sameDate(a, b) {
         if (a === b)
@@ -1022,11 +1428,11 @@ class WrDatePicker {
         return a.getTime() === b.getTime();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrDatePicker, isStandalone: true, selector: "wr-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelAriaLabel: { classPropertyName: "panelAriaLabel", publicName: "panelAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (keydown)=\"onFieldKey($event)\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrDatePicker, isStandalone: true, selector: "wr-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelAriaLabel: { classPropertyName: "panelAriaLabel", publicName: "panelAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, providers: [WrDateInputField], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-invalid]=\"ownAriaInvalid()\"\n    [attr.aria-describedby]=\"ownDescribedBy()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (keydown)=\"onFieldKey($event)\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n<!--\n  Why a typed entry was refused, for a screen reader: written when the refusal is\n  shown (Enter, or leaving the field) and emptied when the text is corrected. Silent\n  inside a <wr-form-field> bound to the same control, whose message says it instead.\n-->\n<span class=\"wr-date-picker__sr-only\" role=\"status\" [id]=\"statusId\">{{ announcement() }}</span>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], viewProviders: [WR_DATE_INPUT_FIELD_VIEW_PROVIDER], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (keydown)=\"onFieldKey($event)\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n" }]
+            args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], providers: [WrDateInputField], viewProviders: [WR_DATE_INPUT_FIELD_VIEW_PROVIDER], template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-invalid]=\"ownAriaInvalid()\"\n    [attr.aria-describedby]=\"ownDescribedBy()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (keydown)=\"onFieldKey($event)\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n<!--\n  Why a typed entry was refused, for a screen reader: written when the refusal is\n  shown (Enter, or leaving the field) and emptied when the text is corrected. Silent\n  inside a <wr-form-field> bound to the same control, whose message says it instead.\n-->\n<span class=\"wr-date-picker__sr-only\" role=\"status\" [id]=\"statusId\">{{ announcement() }}</span>\n" }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], panelAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelAriaLabel", required: false }] }] } });
 
 /**
@@ -1215,6 +1621,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  */
 /** Per-instance popup ids, so `aria-controls` can point at one panel. */
 let rangePanelUid = 0;
+/** How long a live region stays blank before a repeated refusal is written back. */
+const SILENCE_MS = 100;
 /**
  * Date-range picker — two text inputs sharing one range calendar.
  *
@@ -1237,6 +1645,10 @@ let rangePanelUid = 0;
  * Either end may be `null` while the range is half-picked. Out-of-order ends
  * are swapped on commit, matching the calendar's own behaviour.
  *
+ * Each end refuses text it cannot use exactly as `<wr-date-picker>` does — never
+ * guessing, keeping the text, and showing the refusal on Enter or when focus
+ * leaves that end. See {@link inputErrors}.
+ *
  * @example
  * ```html
  * <!-- signal forms -->
@@ -1379,10 +1791,111 @@ class WrDateRangePicker {
         return this.isDateTime() ? this.panelLabelRangeDateTime() : this.panelLabelRange();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedPanelLabel" }] : /* istanbul ignore next */ []));
+    refusalBuilder = useDateInputRefusals();
+    reportToForm = useFormParseErrors(this.value, () => this.onFormReset());
+    inputField = inject(WrDateInputField);
+    /** Why each end's text was not committed. */
+    refusals = signal([null, null], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refusals" }] : /* istanbul ignore next */ []));
+    /**
+     * Every refusal standing, on show or not, each marked with its end — what a bound form
+     * hears, from the keystroke.
+     */
+    raised = computed(() => {
+        const [start, end] = this.refusals();
+        const out = [];
+        if (start)
+            out.push({ ...start, end: 'start' });
+        if (end)
+            out.push({ ...end, end: 'end' });
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "raised" }] : /* istanbul ignore next */ []));
+    /**
+     * Which ends have their refusal on show — raised on the keystroke, shown on Enter
+     * or when focus leaves that end, for the reason `wr-date-picker` gives at the same
+     * name: a date is unreadable for most of the time it takes to type one. Leaving
+     * includes leaving by way of the open panel, as it does there.
+     */
+    revealed = signal([false, false], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    shownErrors = computed(() => {
+        const [start, end] = this.refusals();
+        const [showStart, showEnd] = this.revealed();
+        return [showStart ? start : null, showEnd ? end : null];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownErrors" }] : /* istanbul ignore next */ []));
+    /**
+     * Why the text in either field is not that end of the bound range, for the ends
+     * whose refusal the picker is SHOWING — one entry per end, marked with the `end` it
+     * came from, and empty while both fields hold their dates or the user is still
+     * typing.
+     *
+     * An end's refusal is raised on the keystroke and goes on show on Enter or when
+     * focus leaves that end — the moment its input turns invalid and the reason is
+     * announced, so a message rendered from this never disagrees with them. It clears
+     * the moment that end's text commits, is emptied, or is replaced by a pick from the
+     * panel, a value written from outside, or a form reset.
+     *
+     * A bound form does NOT wait: it sees every refusal as a parse error from the
+     * keystroke, so it is invalid the whole time either field holds text the picker
+     * could not use — including while the OTHER end commits — and `<wr-form-field>`
+     * shows `message` by its own rule. Read this through a template reference to put
+     * the reason on screen for a picker bound with `[(value)]` alone.
+     */
+    inputErrors = computed(() => {
+        const [showStart, showEnd] = this.revealed();
+        return this.raised().filter(error => (error.end === 'start' ? showStart : showEnd));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputErrors" }] : /* istanbul ignore next */ []));
+    /**
+     * Blanked briefly so Enter on an unchanged refusal is announced again. A live region
+     * does not repeat text it already holds, and blanking it for one render is not
+     * enough: both changes land in the same task, and the accessibility tree sees
+     * only the end state. The gap is a timer for that reason — the CDK's
+     * `LiveAnnouncer` clears its region the same way.
+     */
+    silenced = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "silenced" }] : /* istanbul ignore next */ []));
+    silenceTimer;
+    statusId = this.inputField.statusId;
+    /**
+     * The live region's text: every refusal on show that a surrounding `<wr-form-field>`
+     * is not already rendering a message for, each sentence once.
+     */
+    announcement = computed(() => {
+        if (this.silenced())
+            return '';
+        const messages = this.shownErrors()
+            .filter((error) => !!error && !this.inputField.saysAlready(error))
+            .map(error => error.message);
+        return [...new Set(messages)].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /**
+     * `aria-invalid` / `aria-describedby` for each input, where the picker binds them.
+     *
+     * The START input reads a surrounding field through `wrInput`, so inside one the
+     * picker feeds its refusal through `WrDateInputField` rather than binding a second
+     * writer beside `wrInput`, and binds these only with no field around it. The END
+     * input is hidden from the field on purpose (see `wrDateRangeEnd`), so its `wrInput`
+     * never writes either attribute and the picker always owns them: an unreadable end
+     * date marks the end field, not only the start.
+     */
+    startAriaInvalid = computed(() => !this.inputField.outer && this.shownErrors()[0] ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAriaInvalid" }] : /* istanbul ignore next */ []));
+    endAriaInvalid = computed(() => (this.shownErrors()[1] ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endAriaInvalid" }] : /* istanbul ignore next */ []));
+    startDescribedBy = computed(() => !this.inputField.outer && this.shownErrors()[0] && this.announcement() ? this.statusId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startDescribedBy" }] : /* istanbul ignore next */ []));
+    endDescribedBy = computed(() => this.shownErrors()[1] && this.announcement() ? this.statusId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endDescribedBy" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-date-range-picker', `wr-date-range-picker--${this.mode()}`];
         if (this.disabled())
             parts.push('wr-date-range-picker--disabled');
+        if (this.shownErrors().some(Boolean))
+            parts.push('wr-date-range-picker--invalid');
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
@@ -1395,16 +1908,30 @@ class WrDateRangePicker {
      * the echo of our own edits and never reformat text mid-type. */
     lastValue = null;
     constructor() {
-        this.destroyRef.onDestroy(() => this.dispose());
-        // Mirror external writes to `value` into the two display texts.
+        this.destroyRef.onDestroy(() => {
+            this.dispose();
+            clearTimeout(this.silenceTimer);
+        });
+        // The start input's field (see `WrDateInputField`) marks it invalid for the
+        // start end's refusal on show; the end input carries its own.
+        this.inputField.describe(computed(() => this.shownErrors()[0]));
+        // Mirror external writes to `value` into the two display texts — and drop the
+        // refusals, whose text that write has just replaced.
         effect(() => {
             const v = this.value();
             untracked(() => {
-                if (this.sameRange(v, this.lastValue))
+                // An equal range in a DIFFERENT tuple came from outside — `commitRange` hands the
+                // model the very tuple it remembered. It leaves text being typed alone, but it
+                // does replace text the picker refused.
+                const outside = v !== this.lastValue;
+                const [refusedStart, refusedEnd] = this.refusals();
+                if (this.sameRange(v, this.lastValue) && !(outside && (refusedStart || refusedEnd)))
                     return;
                 this.lastValue = v;
                 this.startText.set(this.display(v?.[0] ?? null));
                 this.endText.set(this.display(v?.[1] ?? null));
+                this.refuse(0, null);
+                this.refuse(1, null);
             });
         });
         // A panel that is up when `readonly` turns on has to go, and `disabled` is
@@ -1465,10 +1992,110 @@ class WrDateRangePicker {
         // typed and moved it into the field they were tabbing into, leaving the old
         // end date under their cursor. Same rule the time steppers follow.
         const [start, end] = this.commitRange(this.current(), { normalise: leaving });
-        // Reformat to canonical on blur (cleans up `1/5/25` → `1/5/2025`).
+        // Reformat to canonical on blur (cleans up `1/5/25` → `1/5/2025`) — except a
+        // refused end, whose text is what the user has to correct. Overwriting it with
+        // the old date is how a refusal used to vanish without a word.
+        const [refusedStart, refusedEnd] = this.refusals();
+        if (!refusedStart)
+            this.startText.set(this.display(start));
+        if (!refusedEnd)
+            this.endText.set(this.display(end));
+        // Show the refusal of the end focus just left — both, once it leaves the pair.
+        // Focus moving INTO the open panel is not leaving: a pick there replaces the text.
+        if (next && this.overlayRef?.overlayElement.contains(next))
+            return;
+        const left = event.target === this.endEl().nativeElement ? 1 : 0;
+        this.reveal(leaving ? [true, true] : left === 0 ? [true, false] : [false, true]);
+    }
+    /**
+     * Enter in either field is "this is the range". Committed ends are settled — sorted
+     * and re-formatted canonical — and the panel closes; a refused end turns invalid on
+     * the spot, and `touch` is emitted so a surrounding `<wr-form-field>` shows its
+     * message, which the panel would otherwise cover. Never `preventDefault`: Enter in a
+     * `<form>` still submits it, and a bound form is invalid while a refusal stands.
+     */
+    onEnter() {
+        // Read before closing: a close can put refusals on show itself.
+        const [shownStart, shownEnd] = this.revealed();
+        if (this.overlayRef)
+            this.closeOverlay();
+        const [start, end] = this.commitRange(this.current(), { normalise: true });
+        const [refusedStart, refusedEnd] = this.refusals();
+        if (!refusedStart)
+            this.startText.set(this.display(start));
+        if (!refusedEnd)
+            this.endText.set(this.display(end));
+        if (!refusedStart && !refusedEnd)
+            return;
+        this.touch.emit();
+        if ((!refusedStart || shownStart) && (!refusedEnd || shownEnd)) {
+            // Everything refused is already on show, so the live region already holds this
+            // text and would not repeat it. Blank it briefly so Enter is answered.
+            this.silenced.set(true);
+            clearTimeout(this.silenceTimer);
+            this.silenceTimer = setTimeout(() => this.silenced.set(false), SILENCE_MS);
+        }
+        this.reveal([true, true]);
+    }
+    /** Put the refusals of the given ends on show; an end with no refusal stays clear. */
+    reveal([start, end]) {
+        const [refusedStart, refusedEnd] = this.refusals();
+        const [shownStart, shownEnd] = this.revealed();
+        this.revealed.set([shownStart || (start && !!refusedStart), shownEnd || (end && !!refusedEnd)]);
+    }
+    /**
+     * Record why one end's text was not committed, or that it was. Clearing a refusal
+     * takes it off show too, so the next one waits for Enter or blur again.
+     */
+    refuse(end, next) {
+        const current = this.refusals();
+        if (current[end] === next)
+            return;
+        this.refusals.set(end === 0 ? [next, current[1]] : [current[0], next]);
+        if (!next) {
+            const [shownStart, shownEnd] = this.revealed();
+            this.revealed.set(end === 0 ? [false, shownEnd] : [shownStart, false]);
+        }
+        this.reportToForm(this.raised());
+    }
+    /**
+     * Put the refusals on show for wherever focus has gone: back into one field leaves
+     * the OTHER end, and anywhere outside the pair leaves both.
+     */
+    revealFor(focus) {
+        if (focus === this.startEl().nativeElement)
+            this.reveal([false, true]);
+        else if (focus === this.endEl().nativeElement)
+            this.reveal([true, false]);
+        else
+            this.reveal([true, true]);
+    }
+    /**
+     * The bound form was reset while the model stayed where it was — Angular has thrown
+     * the parse errors away, so the text they were about goes too, and both fields show
+     * the range again. (A reset that MOVES the model reaches the text through the sync
+     * effect, like any other outside write.)
+     */
+    onFormReset() {
+        const [refusedStart, refusedEnd] = this.refusals();
+        if (!refusedStart && !refusedEnd)
+            return;
+        const [start, end] = this.current();
         this.startText.set(this.display(start));
         this.endText.set(this.display(end));
+        this.refuse(0, null);
+        this.refuse(1, null);
     }
+    /**
+     * Focus leaving the open panel. Moving within it is the same visit; anywhere else has
+     * left whichever end focus is not going back to — see {@link revealFor}.
+     */
+    onPaneFocusOut = (event) => {
+        const next = event.relatedTarget;
+        if (next && this.overlayRef?.overlayElement.contains(next))
+            return;
+        this.revealFor(next);
+    };
     /** Called by an input's click — opens the overlay if it isn't open already. */
     openOnInput(end) {
         if (this.disabled() || this.readonly() || this.overlayRef)
@@ -1501,6 +2128,10 @@ class WrDateRangePicker {
     onFieldKey(event, end) {
         if (this.disabled() || this.readonly())
             return;
+        if (event.key === 'Enter') {
+            this.onEnter();
+            return;
+        }
         const vertical = event.key === 'ArrowDown' || event.key === 'ArrowUp';
         if (!vertical)
             return;
@@ -1551,15 +2182,24 @@ class WrDateRangePicker {
         const [start, finish] = this.current();
         if (!raw) {
             this.commitRange(end === 0 ? [null, finish] : [start, null], { normalise: false });
+            this.refuse(end, null);
             return;
         }
         const parsed = this.adapter.parse(raw, this.resolvedFormat());
-        if (!parsed || !this.adapter.isValid(parsed) || this.isOutOfBounds(parsed))
+        if (!parsed || !this.adapter.isValid(parsed)) {
+            this.refuse(end, this.refusalBuilder.unreadable(this.resolvedFormat()));
+            return;
+        }
+        const outOfBounds = this.outOfBounds(parsed);
+        if (outOfBounds) {
+            this.refuse(end, outOfBounds);
             return;
+        }
         // Never reorder mid-keystroke: a half-typed date can parse to an
         // out-of-order value, and swapping there would yank the text the user is
         // still typing over to the other input. Ordering is settled on blur.
         this.commitRange(end === 0 ? [parsed, finish] : [start, parsed], { normalise: false });
+        this.refuse(end, null);
     }
     // Overlay
     openOverlay(openedFrom = null, autoFocus = false) {
@@ -1597,6 +2237,7 @@ class WrDateRangePicker {
         pane.setAttribute('role', 'dialog');
         pane.setAttribute('aria-modal', 'false');
         pane.setAttribute('aria-label', this.resolvedPanelLabel());
+        pane.addEventListener('focusout', this.onPaneFocusOut);
         const ref = this.overlayRef.attach(new ComponentPortal(WrDateRangePanel));
         ref.setInput('value', this.value() ?? [null, null]);
         ref.setInput('autoFocus', this.autoFocusPanel);
@@ -1643,7 +2284,11 @@ class WrDateRangePicker {
      */
     closeOverlay() {
         const pane = this.overlayRef?.overlayElement;
-        const inside = !!pane && pane.contains(this.host.nativeElement.ownerDocument.activeElement);
+        const doc = this.host.nativeElement.ownerDocument;
+        const inside = !!pane && pane.contains(doc.activeElement);
+        // Taking the pane out of the document moves focus without the user doing anything,
+        // so it must not read as focus leaving the panel.
+        pane?.removeEventListener('focusout', this.onPaneFocusOut);
         this.dispose();
         // The interaction is over, so settle the ordering an in-progress time edit
         // was allowed to leave inverted. Blur does the same for the text inputs;
@@ -1651,6 +2296,9 @@ class WrDateRangePicker {
         this.commitRange(this.current(), { normalise: true });
         if (inside)
             this.restoreFocus();
+        // A panel that closes ends the visit to it: wherever focus is now, the ends it is
+        // not in have been left. A pick has already cleared the refusals it replaced.
+        this.revealFor(doc.activeElement);
     }
     dispose() {
         if (this.overlayRef) {
@@ -1671,6 +2319,7 @@ class WrDateRangePicker {
      * move their in-progress text into the other input.
      */
     commitRange(next, options) {
+        const previous = this.current();
         const normalised = options.normalise ? this.normalise(next) : next;
         // Only write when a date actually moved, and never while `readonly`.
         //
@@ -1690,12 +2339,27 @@ class WrDateRangePicker {
             this.lastValue = normalised;
             this.value.set(normalised);
         }
+        // An end whose DATE moved — a pick in the panel, a swap — has had its text
+        // replaced by that date, so a refusal about the old text no longer applies.
+        // An end that did not move keeps refused text as it is: committing the OTHER
+        // end is no reason to throw away what the user is still correcting here.
+        const [movedStart, movedEnd] = [0, 1].map(i => !this.sameDate(this.current()[i], previous[i]));
+        if (movedStart)
+            this.refuse(0, null);
+        if (movedEnd)
+            this.refuse(1, null);
+        const [refusedStart, refusedEnd] = this.refusals();
+        // Say the refusals again, whether or not either moved. Angular clears a control's
+        // parse errors whenever its model changes, so committing ONE end used to leave the
+        // form valid while the other end still held refused text — and able to submit the
+        // old end under it.
+        this.reportToForm(this.raised());
         // Only rewrite the text of an end whose date moved out from under it —
         // otherwise a half-typed date would be reformatted on every keystroke.
-        if (!this.sameDate(normalised[0], this.parseText(this.startText()))) {
+        if (!refusedStart && !this.sameDate(normalised[0], this.parseText(this.startText()))) {
             this.startText.set(this.display(normalised[0]));
         }
-        if (!this.sameDate(normalised[1], this.parseText(this.endText()))) {
+        if (!refusedEnd && !this.sameDate(normalised[1], this.parseText(this.endText()))) {
             this.endText.set(this.display(normalised[1]));
         }
         return normalised;
@@ -1733,21 +2397,16 @@ class WrDateRangePicker {
         return clock(a) - clock(b);
     }
     /**
-     * Whether a typed date must be rejected. Covers `dateFilter` as well as the
-     * bounds — the calendar disables filtered days, so accepting them from the
+     * Why a typed date must be rejected, or `null`. Covers `dateFilter` as well as
+     * the bounds — the calendar disables filtered days, so accepting them from the
      * keyboard would make the two entry paths disagree.
      */
-    isOutOfBounds(date) {
-        const min = this.minDate();
-        if (min && this.adapter.compareDate(date, min) < 0)
-            return true;
-        const max = this.maxDate();
-        if (max && this.adapter.compareDate(date, max) > 0)
-            return true;
-        const filter = this.dateFilter();
-        if (filter && !filter(date))
-            return true;
-        return false;
+    outOfBounds(date) {
+        return this.refusalBuilder.outOfBounds(date, {
+            min: this.minDate(),
+            max: this.maxDate(),
+            filter: this.dateFilter(),
+        });
     }
     sameDate(a, b) {
         if (a === b)
@@ -1773,11 +2432,11 @@ class WrDateRangePicker {
         return this.sameDate(aStart, bStart) && this.sameDate(aEnd, bEnd);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrDateRangePicker, isStandalone: true, selector: "wr-date-range-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, panelAriaLabel: { classPropertyName: "panelAriaLabel", publicName: "panelAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endEl", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(0)\"\n    (keydown)=\"onFieldKey($event, 0)\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <!--\n    `wrDateRangeEnd` hides the surrounding `<wr-form-field>` from this input, so\n    only the start one adopts its `controlId` \u2014 see the directive for why the\n    second half of a range carries no id at all.\n  -->\n  <input\n    #endInput\n    wrInput\n    wrDateRangeEnd\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(1)\"\n    (keydown)=\"onFieldKey($event, 1)\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <!--\n    `readonly` refuses to open the popup, so the trigger is disabled with it \u2014\n    otherwise it stays a focusable button advertising `aria-haspopup=\"dialog\"`\n    for a dialog it will never show.\n  -->\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrDateRangeEndInput, selector: "input[wrDateRangeEnd]" }, { kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrDateRangePicker, isStandalone: true, selector: "wr-date-range-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, panelAriaLabel: { classPropertyName: "panelAriaLabel", publicName: "panelAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, providers: [WrDateInputField], viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endEl", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel()\"\n    [attr.aria-invalid]=\"startAriaInvalid()\"\n    [attr.aria-describedby]=\"startDescribedBy()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(0)\"\n    (keydown)=\"onFieldKey($event, 0)\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <!--\n    `wrDateRangeEnd` hides the surrounding `<wr-form-field>` from this input, so\n    only the start one adopts its `controlId` \u2014 see the directive for why the\n    second half of a range carries no id at all.\n  -->\n  <input\n    #endInput\n    wrInput\n    wrDateRangeEnd\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel()\"\n    [attr.aria-invalid]=\"endAriaInvalid()\"\n    [attr.aria-describedby]=\"endDescribedBy()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(1)\"\n    (keydown)=\"onFieldKey($event, 1)\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <!--\n    `readonly` refuses to open the popup, so the trigger is disabled with it \u2014\n    otherwise it stays a focusable button advertising `aria-haspopup=\"dialog\"`\n    for a dialog it will never show.\n  -->\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n<!--\n  Why a typed end was refused, for a screen reader \u2014 the same live region\n  <wr-date-picker> carries, written when a refusal is shown and emptied when it is\n  corrected. Silent inside a <wr-form-field> bound to the same control.\n-->\n<span class=\"wr-date-range-picker__sr-only\" role=\"status\" [id]=\"statusId\">{{ announcement() }}</span>\n", dependencies: [{ kind: "directive", type: WrDateRangeEndInput, selector: "input[wrDateRangeEnd]" }, { kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], viewProviders: [WR_DATE_INPUT_FIELD_VIEW_PROVIDER], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-range-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrDateRangeEndInput, WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(0)\"\n    (keydown)=\"onFieldKey($event, 0)\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <!--\n    `wrDateRangeEnd` hides the surrounding `<wr-form-field>` from this input, so\n    only the start one adopts its `controlId` \u2014 see the directive for why the\n    second half of a range carries no id at all.\n  -->\n  <input\n    #endInput\n    wrInput\n    wrDateRangeEnd\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(1)\"\n    (keydown)=\"onFieldKey($event, 1)\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <!--\n    `readonly` refuses to open the popup, so the trigger is disabled with it \u2014\n    otherwise it stays a focusable button advertising `aria-haspopup=\"dialog\"`\n    for a dialog it will never show.\n  -->\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n" }]
+            args: [{ selector: 'wr-date-range-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrDateRangeEndInput, WrInput, WrInputGroup, WrInputSuffix], providers: [WrDateInputField], viewProviders: [WR_DATE_INPUT_FIELD_VIEW_PROVIDER], template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel()\"\n    [attr.aria-invalid]=\"startAriaInvalid()\"\n    [attr.aria-describedby]=\"startDescribedBy()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(0)\"\n    (keydown)=\"onFieldKey($event, 0)\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <!--\n    `wrDateRangeEnd` hides the surrounding `<wr-form-field>` from this input, so\n    only the start one adopts its `controlId` \u2014 see the directive for why the\n    second half of a range carries no id at all.\n  -->\n  <input\n    #endInput\n    wrInput\n    wrDateRangeEnd\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel()\"\n    [attr.aria-invalid]=\"endAriaInvalid()\"\n    [attr.aria-describedby]=\"endDescribedBy()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(1)\"\n    (keydown)=\"onFieldKey($event, 1)\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <!--\n    `readonly` refuses to open the popup, so the trigger is disabled with it \u2014\n    otherwise it stays a focusable button advertising `aria-haspopup=\"dialog\"`\n    for a dialog it will never show.\n  -->\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n<!--\n  Why a typed end was refused, for a screen reader \u2014 the same live region\n  <wr-date-picker> carries, written when a refusal is shown and emptied when it is\n  corrected. Silent inside a <wr-form-field> bound to the same control.\n-->\n<span class=\"wr-date-range-picker__sr-only\" role=\"status\" [id]=\"statusId\">{{ announcement() }}</span>\n" }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], startEl: [{ type: i0.ViewChild, args: ['startInput', { isSignal: true }] }], endEl: [{ type: i0.ViewChild, args: ['endInput', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], panelAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelAriaLabel", required: false }] }] } });
 
 /**