ngwr 11.2.0 → 12.0.0

package/fesm2022/ngwr-date-picker.mjs

@@ -2,14 +2,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, viewChild } from '@angular/core';
+import { input, inject, ElementRef, model, output, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component, DestroyRef, 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-adapter';
+import { WrDateAdapter, WR_DATE_LOCALE } from 'ngwr/date';
 import { readI18nText, useI18nText } from 'ngwr/i18n';
 import { WrInput, WrInputGroup, WrInputSuffix } from 'ngwr/input';
 import { WR_OVERLAY, WrOutsideClick } from 'ngwr/overlay';
 import { clamp } from 'ngwr/utils';
+import { WR_FORM_FIELD } from 'ngwr/form';
 
 /**
  * @license
@@ -135,7 +136,25 @@ class WrTimePanel {
     ...(ngDevMode ? [{ debugName: "displayHours" }] : /* istanbul ignore next */ []));
     isPm = computed(() => this.hours() >= 12, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isPm" }] : /* istanbul ignore next */ []));
-    amPmLabel = computed(() => (this.isPm() ? 'PM' : 'AM'), /* @ts-ignore */
+    /**
+     * Every name this panel speaks, out of the catalog. There is no override input
+     * because there is no public host to put one on — the panel is `@internal`, and
+     * the picker around it already localizes its trigger and popup names, so the
+     * hard-coded English here put two languages inside one popup.
+     */
+    hoursLabel = readI18nText('datePicker.hours', 'Hours');
+    minutesLabel = readI18nText('datePicker.minutes', 'Minutes');
+    secondsLabel = readI18nText('datePicker.seconds', 'Seconds');
+    incrementHoursLabel = readI18nText('datePicker.incrementHours', 'Increment hours');
+    decrementHoursLabel = readI18nText('datePicker.decrementHours', 'Decrement hours');
+    incrementMinutesLabel = readI18nText('datePicker.incrementMinutes', 'Increment minutes');
+    decrementMinutesLabel = readI18nText('datePicker.decrementMinutes', 'Decrement minutes');
+    incrementSecondsLabel = readI18nText('datePicker.incrementSeconds', 'Increment seconds');
+    decrementSecondsLabel = readI18nText('datePicker.decrementSeconds', 'Decrement seconds');
+    toggleAmPmLabel = readI18nText('datePicker.toggleAmPm', 'Toggle AM / PM');
+    amLabel = readI18nText('datePicker.am', 'AM');
+    pmLabel = readI18nText('datePicker.pm', 'PM');
+    amPmLabel = computed(() => (this.isPm() ? this.pmLabel() : this.amLabel()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "amPmLabel" }] : /* istanbul ignore next */ []));
     hoursDisplay = computed(() => pad(this.displayHours()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hoursDisplay" }] : /* istanbul ignore next */ []));
@@ -234,12 +253,12 @@ class WrTimePanel {
         this.lastEmitted = next;
         this.value.set(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrTimePanel, isStandalone: true, selector: "wr-time-picker", inputs: { format: { classPropertyName: "format", publicName: "format", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Hours\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Minutes\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Increment seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      aria-label=\"Seconds\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Decrement seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrTimePanel, isStandalone: true, selector: "wr-time-picker", inputs: { format: { classPropertyName: "format", publicName: "format", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    [attr.aria-label]=\"incrementHoursLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    [attr.aria-label]=\"hoursLabel()\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    [attr.aria-label]=\"decrementHoursLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    [attr.aria-label]=\"incrementMinutesLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    [attr.aria-label]=\"minutesLabel()\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    [attr.aria-label]=\"decrementMinutesLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      [attr.aria-label]=\"incrementSecondsLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      [attr.aria-label]=\"secondsLabel()\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      [attr.aria-label]=\"decrementSecondsLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      [attr.aria-label]=\"toggleAmPmLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      [attr.aria-label]=\"toggleAmPmLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTimePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrTimePanel, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-time-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Hours\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Minutes\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Increment seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      aria-label=\"Seconds\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Decrement seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n" }]
+            args: [{ selector: 'wr-time-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    [attr.aria-label]=\"incrementHoursLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    [attr.aria-label]=\"hoursLabel()\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    [attr.aria-label]=\"decrementHoursLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    [attr.aria-label]=\"incrementMinutesLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    [attr.aria-label]=\"minutesLabel()\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    [attr.aria-label]=\"decrementMinutesLabel()\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      [attr.aria-label]=\"incrementSecondsLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      [attr.aria-label]=\"secondsLabel()\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      [attr.aria-label]=\"decrementSecondsLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      [attr.aria-label]=\"toggleAmPmLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      [attr.aria-label]=\"toggleAmPmLabel()\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", 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 }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**
@@ -299,10 +318,10 @@ class WrDateTimePanel {
         const combined = this.adapter.setTime(this.adapter.createDate(this.adapter.getYear(base), this.adapter.getMonth(base), this.adapter.getDate(base)), this.adapter.getHours(time), this.adapter.getMinutes(time), this.adapter.getSeconds(time));
         this.changed.emit(combined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrDateTimePanel, isStandalone: true, selector: "wr-date-time-panel", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wr-date-time-panel" }, ngImport: i0, 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", dependencies: [{ kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "autoFocus", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "autoFocus", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: WrDateTimePanel, isStandalone: true, selector: "wr-date-time-panel", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wr-date-time-panel" }, ngImport: i0, 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", dependencies: [{ kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "autoFocus", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "autoFocus", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateTimePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateTimePanel, decorators: [{
             type: Component,
             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"] }] } });
@@ -448,8 +467,11 @@ class WrDatePicker {
     ...(ngDevMode ? [{ debugName: "isTime" }] : /* istanbul ignore next */ []));
     isDateTime = computed(() => this.mode() === 'datetime', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDateTime" }] : /* istanbul ignore next */ []));
-    // Resolved at injection time — i18n catalog reads pick up live locale
-    // changes via re-render of the host attribute binding.
+    // Signals, not plain strings: these used to be read once at injection time,
+    // which is before any loader-backed catalog exists — so the trigger announced
+    // "Open calendar" while `fieldLabel` below, off the SAME key, announced the
+    // Russian one. A runtime `i18n.use()` moved the field's name and not the
+    // trigger's, which made the split permanent rather than a startup race.
     labelDate = readI18nText('datePicker.open', 'Open calendar');
     labelTime = readI18nText('datePicker.openTime', 'Open time picker');
     labelDateTime = readI18nText('datePicker.openDateTime', 'Open date and time picker');
@@ -476,10 +498,10 @@ class WrDatePicker {
     triggerLabel = computed(() => {
         const m = this.mode();
         if (m === 'time')
-            return this.labelTime;
+            return this.labelTime();
         if (m === 'datetime')
-            return this.labelDateTime;
-        return this.labelDate;
+            return this.labelDateTime();
+        return this.labelDate();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
     /**
@@ -498,10 +520,10 @@ class WrDatePicker {
             return explicit;
         const m = this.mode();
         if (m === 'time')
-            return this.panelLabelTime;
+            return this.panelLabelTime();
         if (m === 'datetime')
-            return this.panelLabelDateTime;
-        return this.panelLabelDate;
+            return this.panelLabelDateTime();
+        return this.panelLabelDate();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedPanelLabel" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
@@ -526,20 +548,36 @@ class WrDatePicker {
      * skip the echo of our own edits (so a live keystroke's raw text is never
      * reformatted mid-type). */
     lastValue = null;
+    /** The format the sync effect last rendered with. Paired with `lastValue`
+     * because the echo guard has to answer "is the display still current", and a
+     * `[format]` / `[mode]` change makes it stale with the value untouched. */
+    lastFormat = null;
     constructor() {
         this.destroyRef.onDestroy(() => this.dispose());
         // Mirror external writes to `value` (from `[formField]`, `[(value)]`, or a
         // classic-forms bridge) into the display text — this is the old
-        // `writeValue` body. Wrapped so it reacts only to `value()`; the echo of
-        // our own edits is skipped, and a null/undefined write is tolerated (it
-        // clears the text, exactly as the old `writeValue(Date | null)` did).
+        // `writeValue` body. The echo of our own edits is skipped, and a
+        // null/undefined write is tolerated (it clears the text, exactly as the old
+        // `writeValue(Date | null)` did).
+        //
+        // The FORMAT is read outside `untracked()` on purpose. It used to be read
+        // inside, so the effect depended on `value()` alone and a `[format]` or
+        // `[mode]` change left the old rendering on screen — while `onInput` /
+        // `onBlur` had already switched to parsing against the NEW format, so an
+        // edit to the stale text failed to parse and was silently discarded on
+        // blur. Folding the format into the echo guard keeps the mid-type
+        // protection (a keystroke changes the value, never the format) and still
+        // re-renders when the format itself moves.
         effect(() => {
             const v = this.value();
+            const fmt = this.resolvedFormat();
             untracked(() => {
-                if (this.sameDate(v, this.lastValue))
-                    return;
+                const echo = this.sameDate(v, this.lastValue) && fmt === this.lastFormat;
                 this.lastValue = v;
-                this.text.set(v && this.adapter.isValid(v) ? this.adapter.format(v, this.resolvedFormat()) : '');
+                this.lastFormat = fmt;
+                if (echo)
+                    return;
+                this.text.set(v && this.adapter.isValid(v) ? this.adapter.format(v, fmt) : '');
             });
         });
         // While the calendar popover is open, push every valid typed value into it
@@ -726,8 +764,14 @@ class WrDatePicker {
             .subscribe(event => {
             if (event.key === 'Escape') {
                 event.preventDefault();
+                // Focus is `closeOverlay()`'s business and nobody else's. Escape
+                // reaches this overlay from anywhere in the document (the CDK
+                // dispatches it to the topmost one), and `openOnInput` deliberately
+                // leaves the caret in the field — so the user can Tab on with the
+                // panel still open. Forcing the field back into focus here overrode
+                // the guarded restore and dragged the caret backwards out of whatever
+                // they had moved on to. Same rule as `wr-date-range-picker`.
                 this.closeOverlay();
-                this.inputEl().nativeElement.focus();
             }
         });
     }
@@ -844,10 +888,10 @@ class WrDatePicker {
             return false;
         return a.getTime() === b.getTime();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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" }]
         }], 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 }] }] } });
@@ -984,14 +1028,52 @@ class WrDateRangePanel {
             return date;
         return this.adapter.setTime(this.adapter.createDate(this.adapter.getYear(date), this.adapter.getMonth(date), this.adapter.getDate(date)), this.adapter.getHours(time), this.adapter.getMinutes(time), this.adapter.getSeconds(time));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrDateRangePanel, isStandalone: true, selector: "wr-date-range-panel", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, withTime: { classPropertyName: "withTime", publicName: "withTime", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", timeChanged: "timeChanged" }, host: { classAttribute: "wr-date-range-panel" }, ngImport: i0, template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "autoFocus", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "autoFocus", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateRangePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrDateRangePanel, isStandalone: true, selector: "wr-date-range-panel", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, withTime: { classPropertyName: "withTime", publicName: "withTime", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", timeChanged: "timeChanged" }, host: { classAttribute: "wr-date-range-panel" }, ngImport: i0, template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel()\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel() }}</span>\n      <wr-time-picker\n        [value]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel()\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel() }}</span>\n      <wr-time-picker\n        [value]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "autoFocus", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "autoFocus", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateRangePanel, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-range-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-range-panel' }, imports: [WrCalendar, WrTimePanel], template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'wr-date-range-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-range-panel' }, imports: [WrCalendar, WrTimePanel], template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel()\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel() }}</span>\n      <wr-time-picker\n        [value]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel()\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel() }}</span>\n      <wr-time-picker\n        [value]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\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 }] }], withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", 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"] }], timeChanged: [{ type: i0.Output, args: ["timeChanged"] }] } });
 
+/**
+ * @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
+ */
+/**
+ * Hides the surrounding `<wr-form-field>` from the range's END input. Not part
+ * of the public API.
+ *
+ * `wrInput` adopts the field's `controlId` whenever the element carries no `id`
+ * of its own, and `<wr-date-range-picker>` renders two of them: both took the
+ * same id, so the document held it twice and the field's `<label for>` resolved
+ * to whichever input came first. One label names one value — the same call
+ * `wr-slider` makes for its two thumbs — so the START input keeps the id and
+ * the end input takes none.
+ *
+ * All or nothing, deliberately: `WrFormFieldContext.controlId` is a
+ * `Signal<string>` with no way to say "no id" (an empty one is no more valid
+ * than a duplicate), so shadowing the token is the only lever, and it drops the
+ * field's `aria-describedby` / `aria-invalid` from this input too. The message
+ * stays announced from the start input, exactly as the slider's upper thumb
+ * leaves it on the lower one.
+ *
+ * @internal
+ */
+class WrDateRangeEndInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateRangeEndInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: WrDateRangeEndInput, isStandalone: true, selector: "input[wrDateRangeEnd]", providers: [{ provide: WR_FORM_FIELD, useValue: null }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateRangeEndInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[wrDateRangeEnd]',
+                    providers: [{ provide: WR_FORM_FIELD, useValue: null }],
+                }]
+        }] });
+
 /**
  * @license
  *
@@ -1153,7 +1235,7 @@ class WrDateRangePicker {
         const explicit = this.panelAriaLabel();
         if (explicit)
             return explicit;
-        return this.isDateTime() ? this.panelLabelRangeDateTime : this.panelLabelRange;
+        return this.isDateTime() ? this.panelLabelRangeDateTime() : this.panelLabelRange();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedPanelLabel" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
@@ -1509,12 +1591,12 @@ class WrDateRangePicker {
         const [bStart, bEnd] = b ?? [null, null];
         return this.sameDate(aStart, bStart) && this.sameDate(aEnd, bEnd);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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  <input\n    #endInput\n    wrInput\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: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-range-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [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  <input\n    #endInput\n    wrInput\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], 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" }]
         }], 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 }] }] } });
 
 /**