ngwr 14.3.1 → 14.5.0

package/fesm2022/ngwr-date-picker.mjs

@@ -1,14 +1,15 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 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, Directive } from '@angular/core';
+import { input, inject, ElementRef, model, output, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component, 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 { WrInput, WrInputGroup, WrInputSuffix } from 'ngwr/input';
-import { WR_OVERLAY, WrOutsideClick } from 'ngwr/overlay';
+import { WR_OVERLAY, WrOutsideClick, wrFollowDirection } from 'ngwr/overlay';
 import { clamp } from 'ngwr/utils';
 import { WR_FORM_FIELD } from 'ngwr/form';
 
@@ -329,10 +330,10 @@ class WrTimePanel {
         this.lastEmitted = next;
         this.value.set(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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\">{{ separator }}</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\">{{ separator }}</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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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\">{{ separator }}</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\">{{ separator }}</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.5", ngImport: i0, type: WrTimePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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    [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\">{{ separator }}</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\">{{ separator }}</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"] }] } });
@@ -394,10 +395,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.5", ngImport: i0, type: WrDateTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", 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.6", ngImport: i0, type: WrDateTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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.5", ngImport: i0, type: WrDateTimePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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"] }] } });
@@ -500,6 +501,14 @@ class WrDatePicker {
     scrollStrategies = inject(ScrollStrategyOptions);
     host = inject(ElementRef);
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    /**
+     * Ambient reading direction, for the open panel alone — nothing in this
+     * component reads it directly. Optional so a bare `TestBed` needs no
+     * provider; `Directionality` is root-provided anyway, and a missing one
+     * simply reads as `ltr`.
+     */
+    dir = inject(Directionality, { optional: true });
     inputEl = viewChild.required('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     triggerEl = viewChild('trigger', /* @ts-ignore */
@@ -656,6 +665,20 @@ class WrDatePicker {
                 this.text.set(v && this.adapter.isValid(v) ? this.adapter.format(v, fmt) : '');
             });
         });
+        // A panel that is up when `disabled` arrives has to go. `readonly` is
+        // deliberately NOT here — this component's contract is that the calendar
+        // stays browsable while read-only, and only the write is refused (see
+        // `commitValue`). `disabled` is the other flag and means the opposite:
+        // `toggleOverlay` and `openOnInput` both refuse to open under it, so a
+        // popup left standing is a way in that the component says it does not have.
+        effect(() => {
+            if (!this.disabled())
+                return;
+            untracked(() => {
+                if (this.overlayRef)
+                    this.closeOverlay();
+            });
+        });
         // 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`).
@@ -822,6 +845,12 @@ class WrDatePicker {
             scrollStrategy: this.scrollStrategies.reposition(),
             panelClass: 'wr-date-picker-overlay',
         });
+        // Two of the four fallbacks anchor on `end`, and the CDK resolves start /
+        // end against the direction it captured when this ref was created. The
+        // `wr-calendar` inside the pane reads `Directionality` live, so a flip
+        // while the panel was open split the grid's key handling from the box it
+        // was drawn in — the same split the docs site's own switch shows off.
+        wrFollowDirection(this.overlayRef, this.dir, this.injector);
         // The trigger promises `aria-haspopup="dialog"`; the pane is the element it
         // points at, so the role, the name and the id all belong here. Non-modal on
         // purpose — focus is not trapped, and the panel closes on outside click or
@@ -931,7 +960,13 @@ class WrDatePicker {
         // `readonly()` schema rule left a day click writing exactly as if the rule
         // were absent. Guarding at the single write point rather than at the three
         // ways in keeps the calendar readable and still refuses the edit.
-        if (this.readonly())
+        //
+        // `disabled` belongs here for the same reason and was missing: the ways IN
+        // all check it, and a panel already up checks nothing again. A picker
+        // disabled mid-session — `[disabled]="saving()"`, a schema rule — took a
+        // day click and moved its value, which is the one thing a disabled control
+        // must never do.
+        if (this.readonly() || this.disabled())
             return;
         this.lastValue = next;
         this.value.set(next);
@@ -986,10 +1021,10 @@ class WrDatePicker {
             return false;
         return a.getTime() === b.getTime();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDatePicker, decorators: [{
+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" }]
         }], 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 }] }] } });
@@ -1126,10 +1161,10 @@ 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.5", ngImport: i0, type: WrDateRangePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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.6", ngImport: i0, type: WrDateRangePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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.5", ngImport: i0, type: WrDateRangePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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" }]
         }], 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"] }] } });
@@ -1161,10 +1196,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * @internal
  */
 class WrDateRangeEndInput {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDateRangeEndInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: WrDateRangeEndInput, isStandalone: true, selector: "input[wrDateRangeEnd]", providers: [{ provide: WR_FORM_FIELD, useValue: null }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDateRangeEndInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", 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.5", ngImport: i0, type: WrDateRangeEndInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrDateRangeEndInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[wrDateRangeEnd]',
@@ -1280,6 +1315,14 @@ class WrDateRangePicker {
     scrollStrategies = inject(ScrollStrategyOptions);
     host = inject(ElementRef);
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    /**
+     * Ambient reading direction, for the open panel alone — nothing in this
+     * component reads it directly. Optional so a bare `TestBed` needs no
+     * provider; `Directionality` is root-provided anyway, and a missing one
+     * simply reads as `ltr`.
+     */
+    dir = inject(Directionality, { optional: true });
     startEl = viewChild.required('startInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startEl" }] : /* istanbul ignore next */ []));
     endEl = viewChild.required('endInput', /* @ts-ignore */
@@ -1364,6 +1407,21 @@ class WrDateRangePicker {
                 this.endText.set(this.display(v?.[1] ?? null));
             });
         });
+        // A panel that is up when `readonly` turns on has to go, and `disabled` is
+        // the same case. The three entrance guards refuse to OPEN the calendar, and
+        // the component's whole position on `readonly` — stricter than the single
+        // picker's, which keeps its calendar browsable — is that the calendar is
+        // not a second way in. Leaving it standing and only refusing the write
+        // trades a wrong value for a dead panel: every click does nothing and
+        // nothing says why.
+        effect(() => {
+            if (!this.readonly() && !this.disabled())
+                return;
+            untracked(() => {
+                if (this.overlayRef)
+                    this.closeOverlay();
+            });
+        });
         // Keep the open panel in step with the model.
         effect(() => {
             const ref = this.panelRef();
@@ -1473,8 +1531,18 @@ class WrDateRangePicker {
     }
     /** Hand focus back to whatever opened the popup, if it is still on the page. */
     restoreFocus() {
-        const target = this.openedFrom?.isConnected ? this.openedFrom : this.startEl().nativeElement;
-        target.focus();
+        const opener = this.openedFrom?.isConnected ? this.openedFrom : null;
+        opener?.focus();
+        // Connected is not the question — whether the focus LANDED is. The calendar
+        // trigger goes `disabled` the moment `readonly` turns on, and a disabled
+        // button is still in the document and still refuses focus, so a panel
+        // closed by that flip used to land on `<body>` and the next Tab restarted
+        // at the top of the page. The start field keeps its tab stop while
+        // read-only, which is the whole point of read-only, so it is where the
+        // caret belongs.
+        if (this.host.nativeElement.ownerDocument.activeElement !== opener) {
+            this.startEl().nativeElement.focus();
+        }
     }
     // Input parsing
     onRangeInput(event, end) {
@@ -1514,6 +1582,11 @@ class WrDateRangePicker {
             scrollStrategy: this.scrollStrategies.reposition(),
             panelClass: 'wr-date-picker-overlay',
         });
+        // Same four fallbacks as `wr-date-picker`, two of them anchored on `end`,
+        // and the two calendars inside the panel read `Directionality` live — so an
+        // open range panel had to follow a flip or render its months against a
+        // direction the rest of the page had left behind.
+        wrFollowDirection(this.overlayRef, this.dir, this.injector);
         this.overlayOpen.set(true);
         // The trigger promises `aria-haspopup="dialog"`; the pane is the element it
         // points at, so the role, the name and the id all belong here. Non-modal on
@@ -1599,11 +1672,21 @@ class WrDateRangePicker {
      */
     commitRange(next, options) {
         const normalised = options.normalise ? this.normalise(next) : next;
-        // Only write when a date actually moved. `normalise()` allocates a fresh
-        // tuple on every call and `model()` compares by reference, so an
-        // unconditional write would emit on every blur — enough to mark a bound
-        // `[formField]` dirty just by tabbing through the two inputs.
-        if (!this.sameRange(normalised, this.value())) {
+        // Only write when a date actually moved, and never while `readonly`.
+        //
+        // `normalise()` allocates a fresh tuple on every call and `model()` compares
+        // by reference, so an unconditional write would emit on every blur — enough
+        // to mark a bound `[formField]` dirty just by tabbing through the two inputs.
+        //
+        // The `readonly` half is the one the three entrance guards cannot cover:
+        // `openOnInput`, `toggleOverlay` and `onFieldKey` all refuse to OPEN the
+        // calendar, and none of them is consulted again by a panel that is already
+        // up. A `readonly()` schema rule turning on mid-session — a save starting,
+        // another field flipping the row — left the popup standing and a day click
+        // wrote the range anyway. The single picker guards its write point for
+        // exactly this reason and says so at `commitValue`; this is the same guard
+        // at the same place.
+        if (!this.readonly() && !this.sameRange(normalised, this.value())) {
             this.lastValue = normalised;
             this.value.set(normalised);
         }
@@ -1689,10 +1772,10 @@ 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.5", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrDateRangePicker, decorators: [{
+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" }]
         }], 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 }] }] } });