ngwr 9.0.1 → 9.1.0

package/date-picker/styles/_index.scss

@@ -27,6 +27,30 @@
   }
 }
 
+.wr-date-range-picker {
+  display: inline-block;
+
+  // Each end shares the group's width so the pair reads as one control.
+  &__input {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  &__separator {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.25rem;
+    color: var(--wr-color-on-surface-muted);
+    user-select: none;
+  }
+
+  &--disabled {
+    .wr-date-range-picker__separator {
+      opacity: 0.5;
+    }
+  }
+}
+
 // Overlay pane — z-index isolation only. <wr-calendar> + the time panel
 // bring their own chrome.
 .wr-date-picker-overlay {
@@ -201,3 +225,41 @@
     border-radius: 0 0 var(--wr-border-radius-base) var(--wr-border-radius-base);
   }
 }
+
+// Range calendar + one time stepper per end, joined to the calendar the same
+// way the single datetime panel is.
+.wr-date-range-panel {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+
+  > .wr-calendar {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &__times {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem 1.25rem;
+    padding: 0.75rem;
+    background: var(--wr-color-surface);
+    border: 1px solid var(--wr-color-outline);
+    border-top: 0;
+    border-radius: 0 0 var(--wr-border-radius-base) var(--wr-border-radius-base);
+  }
+
+  &__time {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__time-label {
+    color: var(--wr-color-on-surface-muted);
+    font-size: var(--wr-text-xs);
+    font-weight: 600;
+  }
+}

package/drawer/styles/_index.scss

@@ -18,6 +18,29 @@
   height: 100dvh;
 }
 
+// `WrDrawerManager.open()` attaches the content component straight into the
+// overlay pane, so both class sets land on the same element and the panel's
+// `height: 100%` would otherwise win over the rule above.
+.wr-drawer-overlay--left.wr-drawer__panel,
+.wr-drawer-overlay--right.wr-drawer__panel {
+  height: 100vh;
+  height: 100dvh;
+}
+
+// …and that same flattening puts the content component's own host element
+// between the panel and the title / content / footer slots, so the panel's
+// column layout stops one level short: the footer wouldn't pin to the bottom
+// and the body wouldn't scroll. Pass the layout through the interposed host.
+.wr-drawer-overlay.wr-drawer__panel > * {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+  // Let `wr-drawer__content`'s `overflow: auto` actually clip: a flex item
+  // defaults to `min-height: auto`, which refuses to shrink below its content.
+  min-height: 0;
+}
+
 .wr-drawer__panel {
   --wr-drawer-bg: var(--wr-color-surface);
   --wr-drawer-shadow: var(--wr-shadow-modal);

package/fesm2022/ngwr-date-picker.mjs

@@ -635,9 +635,517 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
+/**
+ * @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
+ */
+/**
+ * Internal panel behind `<wr-date-range-picker>`: a range-mode
+ * `<wr-calendar>`, plus one `<wr-time-picker>` per end when `withTime` is on.
+ * Not part of the public API.
+ *
+ * The calendar owns range picking (including the start/end swap and the hover
+ * preview); this panel only re-attaches the times so a datetime range keeps the
+ * hours the user set while the dates move around.
+ *
+ * @internal
+ */
+class WrDateRangePanel {
+    value = input([null, null], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    withTime = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
+    timeFormat = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    showSeconds = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    changed = output();
+    adapter = inject(WrDateAdapter);
+    startTimeLabel = readI18nText('datePicker.startTime', 'Start time');
+    endTimeLabel = readI18nText('datePicker.endTime', 'End time');
+    /**
+     * A time set before its end has a date. The stepper is always live, so the
+     * hours are parked here until a date arrives to carry them — otherwise the
+     * edit would be silently dropped and the pick would land on midnight.
+     */
+    pendingStartTime = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingStartTime" }] : /* istanbul ignore next */ []));
+    pendingEndTime = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingEndTime" }] : /* istanbul ignore next */ []));
+    /** The calendar's own range model shape — same tuple, narrower name. */
+    calendarRange = computed(() => this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarRange" }] : /* istanbul ignore next */ []));
+    /**
+     * Midnight today. The steppers need a concrete date to render, but the
+     * fallback must NOT be the current wall clock: picking a date carries no time
+     * across until a stepper is touched, so a `14:37` default would display a time
+     * the commit never actually stores.
+     */
+    dayStart = computed(() => {
+        const t = this.adapter.today();
+        return this.adapter.createDate(this.adapter.getYear(t), this.adapter.getMonth(t), this.adapter.getDate(t));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayStart" }] : /* istanbul ignore next */ []));
+    /** Time steppers need a concrete date; fall back to a parked time, then midnight. */
+    startTime = computed(() => this.value()[0] ?? this.pendingStartTime() ?? this.dayStart(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startTime" }] : /* istanbul ignore next */ []));
+    endTime = computed(() => this.value()[1] ?? this.pendingEndTime() ?? this.dayStart(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endTime" }] : /* istanbul ignore next */ []));
+    onRangeChange(range) {
+        const [start, end] = range;
+        const [prevStart, prevEnd] = this.value();
+        // `WrCalendar.pickRange` restarts the range whenever it has no start, so a
+        // range that was end-only (typed into the end input alone) would lose that
+        // end on the next click. Read the click as filling in the missing start
+        // instead; the picker orders the pair afterwards.
+        const keptEnd = !prevStart && prevEnd && start && !end ? prevEnd : end;
+        // The calendar only moves dates, so carry each end's existing time across —
+        // or the time parked by a stepper that ran before this date existed.
+        this.changed.emit([
+            this.withTimeOf(start, prevStart ?? this.pendingStartTime()),
+            this.withTimeOf(keptEnd, prevEnd ?? this.pendingEndTime()),
+        ]);
+    }
+    onStartTimeChange(time) {
+        if (!time)
+            return;
+        const [start, end] = this.value();
+        if (!start) {
+            this.pendingStartTime.set(time);
+            return;
+        }
+        this.changed.emit([this.withTimeOf(start, time), end]);
+    }
+    onEndTimeChange(time) {
+        if (!time)
+            return;
+        const [start, end] = this.value();
+        if (!end) {
+            this.pendingEndTime.set(time);
+            return;
+        }
+        this.changed.emit([start, this.withTimeOf(end, time)]);
+    }
+    /** `date`'s calendar day carrying `time`'s clock. Null date stays null. */
+    withTimeOf(date, time) {
+        if (!date)
+            return null;
+        if (!this.withTime() || !time)
+            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.0", ngImport: i0, type: WrDateRangePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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 } }, outputs: { changed: "changed" }, 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  (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        [ngModel]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"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        [ngModel]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-date-range-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-range-panel' }, imports: [FormsModule, WrCalendar, WrTimePanel], template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\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        [ngModel]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"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        [ngModel]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"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 }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Date-range picker — two text inputs sharing one range calendar.
+ *
+ * Separate from `<wr-date-picker>` because the value is a different type: a
+ * range is `[start, end]`, and folding that into the single picker's
+ * `Date | null` would break `[formField]` inference for every existing usage.
+ * Everything else matches — same input skeleton, same overlay, same
+ * {@link WrDateAdapter} formats.
+ *
+ * - `'date'` (default) — popover renders a range calendar. Picking the second
+ *   date closes the overlay.
+ * - `'datetime'` — popover adds a time stepper per end. Picking dates does NOT
+ *   close, since the user typically sets the times next.
+ *
+ * A signal-forms native control: it implements
+ * `FormValueControl<WrDateRange | null>`, so `[formField]` binds straight to
+ * its `value` model. `[(value)]` works standalone, and classic `[(ngModel)]` /
+ * reactive forms keep working through Angular's bridge.
+ *
+ * Either end may be `null` while the range is half-picked. Out-of-order ends
+ * are swapped on commit, matching the calendar's own behaviour.
+ *
+ * @example
+ * ```html
+ * <!-- signal forms -->
+ * <wr-date-range-picker [formField]="form.period" format="dd.MM.yyyy" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-date-range-picker [(value)]="period" [minDate]="minDate" />
+ *
+ * <!-- date + time on both ends -->
+ * <wr-date-range-picker mode="datetime" [(value)]="window" timeFormat="24h" />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/date-picker
+ */
+class WrDateRangePicker {
+    /** Picker behavior — see class doc. @default 'date' */
+    mode = input('date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Format used for both display and parsing, on both ends. When `null`
+     * (default), it is derived from `mode` (`shortDate` / `shortDateTime`). Pass
+     * a named key or raw token string to override.
+     */
+    format = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Placeholder for the start input. */
+    startPlaceholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Placeholder for the end input. */
+    endPlaceholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Glyph rendered between the two inputs. @default '–' */
+    separator = input('–', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    // Named `minDate` / `maxDate`, not `min` / `max`: `FormUiControl` reserves
+    // those slots for the control's own value type, which here is a range — a
+    // `min` typed as a range makes no sense. Matches `WrValidators.minDate`.
+    /** Min selectable date, applied to both ends. */
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Max selectable date, applied to both ends. */
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Predicate to disable specific dates (forwarded to the calendar). */
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** Time-panel 12 / 24-hour format. Applies in `datetime` mode. @default 'auto' */
+    timeFormat = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** Render the seconds column. Applies in `datetime` mode. @default false */
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Minute / second step for the time panels. @default 1 */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, coerceNumberProperty(v, 1)) });
+    /**
+     * Disable interaction. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Read-only — inputs not typeable, but the trigger icon still opens the overlay. @default false */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    adapter = inject(WrDateAdapter);
+    overlay = inject(WR_OVERLAY);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    startEl = viewChild.required('startInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startEl" }] : /* istanbul ignore next */ []));
+    /** The picked range. Bound by `[formField]`, or two-way via `[(value)]`. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted on blur so a bound field can mark itself touched. */
+    touch = output();
+    /** Text currently in each input (may be partial / invalid mid-type). */
+    startText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []));
+    endText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endText" }] : /* istanbul ignore next */ []));
+    /** Whether the popover is currently open. */
+    overlayOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
+    /** Resolved format — falls back to a mode-appropriate default. */
+    resolvedFormat = computed(() => this.format() ? String(this.format()) : this.mode() === 'datetime' ? 'shortDateTime' : 'shortDate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFormat" }] : /* istanbul ignore next */ []));
+    isDateTime = computed(() => this.mode() === 'datetime', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateTime" }] : /* istanbul ignore next */ []));
+    triggerLabel = readI18nText('datePicker.openRange', 'Open range calendar');
+    startLabel = readI18nText('datePicker.rangeStart', 'Range start');
+    endLabel = readI18nText('datePicker.rangeEnd', 'Range end');
+    classes = computed(() => {
+        const parts = ['wr-date-range-picker', `wr-date-range-picker--${this.mode()}`];
+        if (this.disabled())
+            parts.push('wr-date-range-picker--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    /** Live panel ref while the popover is open — lets typed edits move the
+     * displayed month in real time (not just on reopen). */
+    panelRef = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** Last range we pushed into the model ourselves, so the sync effect can skip
+     * the echo of our own edits and never reformat text mid-type. */
+    lastValue = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.dispose());
+        // Mirror external writes to `value` into the two display texts.
+        effect(() => {
+            const v = this.value();
+            untracked(() => {
+                if (this.sameRange(v, this.lastValue))
+                    return;
+                this.lastValue = v;
+                this.startText.set(this.display(v?.[0] ?? null));
+                this.endText.set(this.display(v?.[1] ?? null));
+            });
+        });
+        // Keep the open panel in step with the model.
+        effect(() => {
+            const ref = this.panelRef();
+            if (ref)
+                ref.setInput('value', this.value() ?? [null, null]);
+        });
+        // …and with every other input. Pushing these only at attach time meant a
+        // `[minDate]` (or filter, or time format) that changed while the popover was
+        // open silently kept the stale constraint until the next reopen.
+        effect(() => {
+            const ref = this.panelRef();
+            if (!ref)
+                return;
+            ref.setInput('min', this.minDate());
+            ref.setInput('max', this.maxDate());
+            ref.setInput('dateFilter', this.dateFilter());
+            ref.setInput('withTime', this.isDateTime());
+            ref.setInput('timeFormat', this.timeFormat());
+            ref.setInput('showSeconds', this.showSeconds());
+            ref.setInput('step', this.step());
+        });
+    }
+    // Template handlers
+    onStartInput(event) {
+        this.onRangeInput(event, 0);
+    }
+    onEndInput(event) {
+        this.onRangeInput(event, 1);
+    }
+    onBlur(event) {
+        // Moving between the two ends is still one interaction — only report the
+        // control as touched once focus actually leaves it, or tabbing from start to
+        // end would mark a bound field touched mid-entry.
+        const next = event.relatedTarget;
+        if (!next || !this.host.nativeElement.contains(next))
+            this.touch.emit();
+        // Typing leaves the ends in whatever order they were entered; settle it
+        // here, once the user has stopped.
+        const [start, end] = this.commitRange(this.current(), { normalise: true });
+        // Reformat to canonical on blur (cleans up `1/5/25` → `1/5/2025`).
+        this.startText.set(this.display(start));
+        this.endText.set(this.display(end));
+    }
+    /** Called by an input's click — opens the overlay if it isn't open already. */
+    openOnInput() {
+        if (this.disabled() || this.readonly() || this.overlayRef)
+            return;
+        this.openOverlay();
+    }
+    toggleOverlay() {
+        // `readonly` blocks the calendar too — otherwise the inputs refuse typing
+        // while the popover happily edits the same value.
+        if (this.disabled() || this.readonly())
+            return;
+        if (this.overlayRef)
+            this.closeOverlay();
+        else
+            this.openOverlay();
+    }
+    // Input parsing
+    onRangeInput(event, end) {
+        const raw = event.target.value;
+        (end === 0 ? this.startText : this.endText).set(raw);
+        const [start, finish] = this.current();
+        if (!raw) {
+            this.commitRange(end === 0 ? [null, finish] : [start, null], { normalise: false });
+            return;
+        }
+        const parsed = this.adapter.parse(raw, this.resolvedFormat());
+        if (!parsed || !this.adapter.isValid(parsed) || this.isOutOfBounds(parsed))
+            return;
+        // Never reorder mid-keystroke: a half-typed date can parse to an
+        // out-of-order value, and swapping there would yank the text the user is
+        // still typing over to the other input. Ordering is settled on blur.
+        this.commitRange(end === 0 ? [parsed, finish] : [start, parsed], { normalise: false });
+    }
+    // Overlay
+    openOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+        ])
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategies.reposition(),
+            panelClass: 'wr-date-picker-overlay',
+        });
+        this.overlayOpen.set(true);
+        const ref = this.overlayRef.attach(new ComponentPortal(WrDateRangePanel));
+        ref.setInput('value', this.value() ?? [null, null]);
+        this.panelRef.set(ref);
+        ref.instance.changed.subscribe(next => {
+            const committed = this.commitRange(next, { normalise: true });
+            // A complete date-only range is the end of the interaction; a datetime
+            // range still needs its hours, so the panel stays put.
+            if (!this.isDateTime() && committed[0] && committed[1])
+                this.closeOverlay();
+        });
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (this.host.nativeElement.contains(event.target))
+                return;
+            this.closeOverlay();
+        });
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeOverlay();
+                this.startEl().nativeElement.focus();
+            }
+        });
+    }
+    /**
+     * Close the popover. `restoreFocus` returns focus to the start input — needed
+     * when the overlay is dismissed while focus lives inside it (picking the
+     * second date), because disposing then leaves focus on a removed element and
+     * the browser falls back to `<body>`.
+     */
+    closeOverlay(restoreFocus = false) {
+        const inside = this.overlayRef?.overlayElement.contains(this.host.nativeElement.ownerDocument.activeElement);
+        this.dispose();
+        if (restoreFocus || inside)
+            this.startEl().nativeElement.focus();
+    }
+    dispose() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.panelRef.set(null);
+        this.overlayOpen.set(false);
+    }
+    // Commit
+    /**
+     * Push to the model and refresh the text of whichever ends changed. Returns
+     * what was actually committed.
+     *
+     * `normalise` swaps out-of-order ends. The calendar and blur ask for it; a
+     * keystroke does not, because reordering while the user is still typing would
+     * move their in-progress text into the other input.
+     */
+    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())) {
+            this.lastValue = normalised;
+            this.value.set(normalised);
+        }
+        // Only rewrite the text of an end whose date moved out from under it —
+        // otherwise a half-typed date would be reformatted on every keystroke.
+        if (!this.sameDate(normalised[0], this.parseText(this.startText()))) {
+            this.startText.set(this.display(normalised[0]));
+        }
+        if (!this.sameDate(normalised[1], this.parseText(this.endText()))) {
+            this.endText.set(this.display(normalised[1]));
+        }
+        return normalised;
+    }
+    // Helpers
+    current() {
+        return this.value() ?? [null, null];
+    }
+    display(date) {
+        return date && this.adapter.isValid(date) ? this.adapter.format(date, this.resolvedFormat()) : '';
+    }
+    parseText(raw) {
+        if (!raw)
+            return null;
+        const parsed = this.adapter.parse(raw, this.resolvedFormat());
+        return parsed && this.adapter.isValid(parsed) ? parsed : null;
+    }
+    /** Keep `[start, end]` in chronological order once both ends exist. */
+    normalise(range) {
+        const [start, end] = range;
+        if (start && end && this.compareEnds(start, end) > 0)
+            return [end, start];
+        return [start, end];
+    }
+    /**
+     * Chronological comparison at the precision the mode needs. The adapter's
+     * `compareDate` is day-precision by contract, which would leave an inverted
+     * same-day `datetime` range (18:00 → 09:00) unswapped.
+     */
+    compareEnds(a, b) {
+        const byDay = this.adapter.compareDate(a, b);
+        if (byDay !== 0 || !this.isDateTime())
+            return byDay;
+        const clock = (d) => this.adapter.getHours(d) * 3600 + this.adapter.getMinutes(d) * 60 + this.adapter.getSeconds(d);
+        return clock(a) - clock(b);
+    }
+    /**
+     * Whether a typed date must be rejected. Covers `dateFilter` as well as the
+     * bounds — the calendar disables filtered days, so accepting them from the
+     * keyboard would make the two entry paths disagree.
+     */
+    isOutOfBounds(date) {
+        const min = this.minDate();
+        if (min && this.adapter.compareDate(date, min) < 0)
+            return true;
+        const max = this.maxDate();
+        if (max && this.adapter.compareDate(date, max) > 0)
+            return true;
+        const filter = this.dateFilter();
+        if (filter && !filter(date))
+            return true;
+        return false;
+    }
+    sameDate(a, b) {
+        if (a === b)
+            return true;
+        if (!a || !b)
+            return false;
+        return a.getTime() === b.getTime();
+    }
+    sameRange(a, b) {
+        if (a === b)
+            return true;
+        if (!a || !b)
+            return false;
+        return this.sameDate(a[0], b[0]) && this.sameDate(a[1], b[1]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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 } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\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    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [disabled]=\"disabled()\"\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", 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    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\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    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [disabled]=\"disabled()\"\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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrDatePicker };
+export { WrDatePicker, WrDateRangePicker };
 //# sourceMappingURL=ngwr-date-picker.mjs.map