@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-date-range-picker.mjs

@@ -0,0 +1,1833 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, signal, Directive, viewChild, viewChildren, computed, afterRenderEffect, ChangeDetectionStrategy, Component, input, booleanAttribute, model, output, ViewContainerRef, Injector, DestroyRef, linkedSignal, effect, untracked, afterNextRender, isDevMode, forwardRef } from '@angular/core';
+import { NgForm, FormGroupDirective, Validators, NgControl, NG_VALIDATORS } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { tv } from 'tailwind-variants';
+import { PickerOverlayCoordinator, TW_ERROR_STATE_MATCHER, resolveSelectScrollStrategy, buildSelectLikePositions } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl, FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { TwDateRange, CalendarComponent, provideRangeSelectionStrategy, DATE_ADAPTER, calendarValidator } from '@cdevhub/ngx-tw/calendar';
+import { ButtonDirective } from '@cdevhub/ngx-tw/button';
+import { TimePickerComponent } from '@cdevhub/ngx-tw/time-picker';
+
+/**
+ * Internal directive that adopts a preset `<button>` into the picker's
+ * roving-tabindex listbox model. The directive's own host binding wins over
+ * `twButton`'s default `tabindex=null`, ensuring the active option carries
+ * `tabindex="0"` on the very first paint.
+ *
+ * @internal
+ */
+class DateRangePresetOptionDirective {
+    elementRef = inject((ElementRef));
+    /** @internal Tab-index — `'0'` on the active option, `'-1'` on the rest. */
+    tabindex = signal('-1', ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DateRangePresetOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: DateRangePresetOptionDirective, isStandalone: true, selector: "button[twDateRangePresetOption]", host: { properties: { "attr.tabindex": "tabindex()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DateRangePresetOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[twDateRangePresetOption]',
+                    host: {
+                        '[attr.tabindex]': 'tabindex()',
+                    },
+                }]
+        }] });
+/**
+ * Internal overlay panel for `tw-date-range-picker`. Hosts the optional preset
+ * list, a single `tw-calendar` in `selectionMode="range"` configured with
+ * `numberOfMonths` (1 or 2 months under one header), an optional time row, and
+ * an optional action bar. Receives configuration and interaction callbacks via
+ * signal-backed fields set from the outer component. Not exported from the
+ * public API.
+ */
+class DateRangePickerOverlayComponent {
+    elementRef = inject((ElementRef));
+    calendarRef = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendarRef" }] : /* istanbul ignore next */ []));
+    presetOptions = viewChildren(DateRangePresetOptionDirective, ...(ngDevMode ? [{ debugName: "presetOptions" }] : /* istanbul ignore next */ []));
+    // ── Config signals set by the parent ──
+    /** @internal */
+    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    color = signal('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minDate = signal(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    maxDate = signal(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dateFilter = signal(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    startView = signal('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    numberOfMonths = signal(2, ...(ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []));
+    /** @internal Current pending range shown as selected in the calendar. */
+    pendingRange = signal(null, ...(ngDevMode ? [{ debugName: "pendingRange" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    currentView = signal('day', ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    presets = signal([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activePresetId = signal(undefined, ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showActions = signal(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showTime = signal(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    timeFormat = signal('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showSeconds = signal(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hourStep = signal(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minuteStep = signal(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    secondStep = signal(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    todayLabel = signal('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    clearLabel = signal('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    cancelLabel = signal('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    applyLabel = signal('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rangeSeparator = signal(' – ', ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dialogId = signal('', ...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dialogAriaLabel = signal('Choose a date range', ...(ngDevMode ? [{ debugName: "dialogAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelClassValue = signal('', ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    // ── Forwarded calendar config ──
+    /** @internal */
+    minRangeLength = signal(null, ...(ngDevMode ? [{ debugName: "minRangeLength" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    maxRangeLength = signal(null, ...(ngDevMode ? [{ debugName: "maxRangeLength" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rangeBehavior = signal({}, ...(ngDevMode ? [{ debugName: "rangeBehavior" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rangeClickBehavior = signal('restart', ...(ngDevMode ? [{ debugName: "rangeClickBehavior" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    firstDayOfWeek = signal(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    locale = signal(null, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dateClass = signal(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    cellTemplate = signal(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    // ── Callbacks set by the parent ──
+    /** @internal */
+    onCalendarSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCalendarSelect" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onPresetSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onPresetSelect" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onStartTimeChange = signal(() => { }, ...(ngDevMode ? [{ debugName: "onStartTimeChange" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onEndTimeChange = signal(() => { }, ...(ngDevMode ? [{ debugName: "onEndTimeChange" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onViewChange = signal(() => { }, ...(ngDevMode ? [{ debugName: "onViewChange" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onToday = signal(() => { }, ...(ngDevMode ? [{ debugName: "onToday" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onClear = signal(() => { }, ...(ngDevMode ? [{ debugName: "onClear" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onCancel = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCancel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onApply = signal(() => { }, ...(ngDevMode ? [{ debugName: "onApply" }] : /* istanbul ignore next */ []));
+    // ── Derived ──
+    /** @internal */
+    panelClasses = computed(() => {
+        const base = 'block bg-surface-overlay border border-border rounded-lg shadow-md overflow-hidden flex max-w-[calc(100vw-16px)]';
+        const custom = this.panelClassValue();
+        return custom ? `${base} ${custom}` : base;
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    calendarAriaLabel = computed(() => this.numberOfMonths() === 2 ? 'Date range calendar (two months)' : 'Date range calendar', ...(ngDevMode ? [{ debugName: "calendarAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal The time row requires both endpoints to be set — each time-picker needs a concrete date. */
+    hasTimeablePending = computed(() => {
+        const v = this.pendingRange();
+        return v !== null && v.start !== null && v.end !== null;
+    }, ...(ngDevMode ? [{ debugName: "hasTimeablePending" }] : /* istanbul ignore next */ []));
+    /** @internal Adapts `TwDateRange<D> | null` to the `CalendarRangeValue<D>` shape the calendar's `value` input expects. */
+    pendingRangeAsRange = computed(() => {
+        const v = this.pendingRange();
+        return v ? { start: v.start, end: v.end } : { start: null, end: null };
+    }, ...(ngDevMode ? [{ debugName: "pendingRangeAsRange" }] : /* istanbul ignore next */ []));
+    /** @internal Seeds the calendar's active month on first attach so it anchors to the current value rather than today. */
+    initialStartAt = computed(() => {
+        const v = this.pendingRange();
+        return v?.start ?? null;
+    }, ...(ngDevMode ? [{ debugName: "initialStartAt" }] : /* istanbul ignore next */ []));
+    // ── Template handlers ──
+    /** @internal */
+    presetKey(index, preset) {
+        return preset.id ?? preset.label ?? index;
+    }
+    /** @internal */
+    isActivePreset(preset) {
+        return !!preset.id && this.activePresetId() === preset.id;
+    }
+    /** @internal */
+    onCalendarRangeSelected(value) {
+        // `selectedChange` from the calendar emits the range strategy's completed selection
+        // (a `DateRange<D>`). Wrap it into a `TwDateRange` for downstream consumers.
+        if (value && typeof value === 'object' && 'start' in value && 'end' in value) {
+            const r = value;
+            this.onCalendarSelect()(new TwDateRange(r.start, r.end));
+        }
+    }
+    /** @internal */
+    onViewChanged(event) {
+        this.currentView.set(event.to);
+        this.onViewChange()(event.to);
+    }
+    /** @internal */
+    onStartTime(event) {
+        if (event.source === 'programmatic')
+            return;
+        this.onStartTimeChange()(event.value);
+    }
+    /** @internal */
+    onEndTime(event) {
+        if (event.source === 'programmatic')
+            return;
+        this.onEndTimeChange()(event.value);
+    }
+    // ── Preset listbox keyboard ──
+    /** @internal Roving tabindex pointer — index of the focusable preset option. */
+    activeOptionIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Drive the directive's `tabindex` signal from `activeOptionIndex`. We
+        // use `afterRenderEffect` so the directive instances are already created
+        // when we read them (regular `effect` may run before the view init).
+        afterRenderEffect(() => {
+            const options = this.presetOptions();
+            const active = this.activeOptionIndex();
+            for (let i = 0; i < options.length; i++) {
+                options[i].tabindex.set(i === active ? '0' : '-1');
+            }
+        });
+    }
+    /** @internal */
+    onPresetListKeydown(event) {
+        const options = this.presetOptions();
+        const count = options.length;
+        if (count === 0)
+            return;
+        const current = this.activeOptionIndex();
+        const move = (next) => {
+            const idx = ((next % count) + count) % count;
+            this.activeOptionIndex.set(idx);
+            options[idx]?.focus();
+        };
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                move(current + 1);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                move(current - 1);
+                return;
+            case 'Home':
+                event.preventDefault();
+                move(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                move(count - 1);
+                return;
+            case 'Enter':
+            case ' ': {
+                const preset = this.presets()[current];
+                if (preset) {
+                    event.preventDefault();
+                    this.handlePreset(preset, current);
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    }
+    /** @internal */
+    handlePreset(preset, index) {
+        if (typeof index === 'number')
+            this.activeOptionIndex.set(index);
+        this.onPresetSelect()(preset);
+    }
+    /** @internal */
+    handleToday() {
+        this.onToday()();
+    }
+    /** @internal */
+    handleClear() {
+        this.onClear()();
+    }
+    /** @internal */
+    handleCancel() {
+        this.onCancel()();
+    }
+    /** @internal */
+    handleApply() {
+        this.onApply()();
+    }
+    /** @internal Moves focus to the active cell of the calendar. Called by the parent after open. */
+    focusCalendar() {
+        this.calendarRef()?.focusActiveCell();
+    }
+    /** @internal Exposes the root overlay element for tests. */
+    getElement() {
+        return this.elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DateRangePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DateRangePickerOverlayComponent, isStandalone: true, selector: "tw-date-range-picker-overlay", host: { properties: { "class": "panelClasses()", "id": "dialogId()", "attr.role": "\"dialog\"", "attr.aria-modal": "\"true\"", "attr.aria-label": "dialogAriaLabel()", "animate.enter": "\"scale-in\"", "animate.leave": "leaving() ? \"scale-out\" : \"\"" } }, providers: [provideRangeSelectionStrategy()], viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "presetOptions", predicate: DateRangePresetOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (presets().length) {
+      <div
+        class="flex flex-col gap-1 p-2 border-r border-border bg-surface-muted min-w-40"
+        role="listbox"
+        tabindex="-1"
+        aria-label="Preset ranges"
+        (keydown)="onPresetListKeydown($event)"
+      >
+        @for (preset of presets(); track presetKey($index, preset); let i = $index) {
+          <button
+            twButton
+            twDateRangePresetOption
+            variant="ghost"
+            size="sm"
+            type="button"
+            role="option"
+            class="w-full justify-start"
+            [attr.aria-selected]="isActivePreset(preset) ? 'true' : 'false'"
+            (click)="handlePreset(preset, i)"
+          >
+            {{ preset.label }}
+          </button>
+        }
+      </div>
+    }
+
+    <div class="flex flex-col flex-1">
+      <tw-calendar
+        #calendar
+        mode="range"
+        class="!rounded-none !border-0 !bg-transparent !p-2"
+        [bordered]="false"
+        [value]="$any(pendingRangeAsRange())"
+        [startAt]="$any(initialStartAt())"
+        [startView]="startView()"
+        [monthColumns]="numberOfMonths()"
+        [minDate]="minDate()"
+        [maxDate]="maxDate()"
+        [dateFilter]="dateFilter()"
+        [dateClass]="dateClass()"
+        [cellTemplate]="cellTemplate()"
+        [locale]="locale()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [minRangeLength]="minRangeLength()"
+        [maxRangeLength]="maxRangeLength()"
+        [rangeBehavior]="rangeBehavior()"
+        [rangeClickBehavior]="rangeClickBehavior()"
+        [attr.aria-label]="calendarAriaLabel()"
+        (valueChange)="onCalendarRangeSelected($event)"
+        (viewChange)="onViewChanged($event)"
+      />
+
+      @if (showTime() && hasTimeablePending()) {
+        <div class="border-t border-border flex items-center justify-between gap-3 px-3 py-2">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-fg-muted">Start</span>
+            <tw-time-picker
+              variant="naked"
+              [value]="pendingRange()!.start"
+              [size]="size()"
+              [color]="color()"
+              [format]="timeFormat()"
+              [showSeconds]="showSeconds()"
+              [hourStep]="hourStep()"
+              [minuteStep]="minuteStep()"
+              [secondStep]="secondStep()"
+              [showClear]="false"
+              [referenceDate]="pendingRange()!.start"
+              aria-label="Start time"
+              (timeChange)="onStartTime($event)"
+            />
+          </div>
+          <span class="text-fg-subtle shrink-0">{{ rangeSeparator() }}</span>
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-fg-muted">End</span>
+            <tw-time-picker
+              variant="naked"
+              [value]="pendingRange()!.end"
+              [size]="size()"
+              [color]="color()"
+              [format]="timeFormat()"
+              [showSeconds]="showSeconds()"
+              [hourStep]="hourStep()"
+              [minuteStep]="minuteStep()"
+              [secondStep]="secondStep()"
+              [showClear]="false"
+              [referenceDate]="pendingRange()!.end"
+              aria-label="End time"
+              (timeChange)="onEndTime($event)"
+            />
+          </div>
+        </div>
+      }
+
+      @if (showActions()) {
+        <div class="border-t border-border flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2">
+            <button twButton variant="ghost" size="sm" type="button" (click)="handleToday()">
+              {{ todayLabel() }}
+            </button>
+            @if (pendingRange() !== null) {
+              <button twButton variant="ghost" size="sm" type="button" (click)="handleClear()">
+                {{ clearLabel() }}
+              </button>
+            }
+          </div>
+          <div class="flex items-center gap-2">
+            <button twButton variant="ghost" size="sm" type="button" (click)="handleCancel()">
+              {{ cancelLabel() }}
+            </button>
+            <button twButton variant="solid" size="sm" type="button" (click)="handleApply()">
+              {{ applyLabel() }}
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: CalendarComponent, selector: "tw-calendar", inputs: ["mode", "value", "startAt", "minDate", "maxDate", "dateFilter", "disabledDates", "disabledDaysOfWeek", "constraints", "minRangeLength", "maxRangeLength", "maxSelections", "maxSelectionBehavior", "errorAriaDescribedBy", "rangeClickBehavior", "rangeBehavior", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "disabled", "readonly", "resetBehavior", "cellTemplate", "locale", "intl"], outputs: ["modeChange", "valueChange", "selectionStart", "rangePreview", "selectionComplete", "selectionRestart", "selectionCleared", "selectionLimitReached", "presetChange", "viewChange", "activeDateChange", "monthChange", "yearChange", "cellClick", "cellHover"] }, { kind: "component", type: TimePickerComponent, selector: "tw-time-picker", inputs: ["id", "disabled", "required", "readonly", "size", "color", "variant", "format", "showSeconds", "hourStep", "minuteStep", "secondStep", "minTime", "maxTime", "referenceDate", "placeholder", "showSteppers", "showClear", "clearLabel", "errorStateMatcher", "aria-label", "aria-labelledby", "aria-describedby", "value"], outputs: ["valueChange", "timeInput", "timeChange"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }, { kind: "directive", type: DateRangePresetOptionDirective, selector: "button[twDateRangePresetOption]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DateRangePickerOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-date-range-picker-overlay',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CalendarComponent,
+                        TimePickerComponent,
+                        ButtonDirective,
+                        DateRangePresetOptionDirective,
+                    ],
+                    providers: [provideRangeSelectionStrategy()],
+                    host: {
+                        '[class]': 'panelClasses()',
+                        '[id]': 'dialogId()',
+                        '[attr.role]': '"dialog"',
+                        '[attr.aria-modal]': '"true"',
+                        '[attr.aria-label]': 'dialogAriaLabel()',
+                        '[animate.enter]': '"scale-in"',
+                        '[animate.leave]': 'leaving() ? "scale-out" : ""',
+                    },
+                    template: `
+    @if (presets().length) {
+      <div
+        class="flex flex-col gap-1 p-2 border-r border-border bg-surface-muted min-w-40"
+        role="listbox"
+        tabindex="-1"
+        aria-label="Preset ranges"
+        (keydown)="onPresetListKeydown($event)"
+      >
+        @for (preset of presets(); track presetKey($index, preset); let i = $index) {
+          <button
+            twButton
+            twDateRangePresetOption
+            variant="ghost"
+            size="sm"
+            type="button"
+            role="option"
+            class="w-full justify-start"
+            [attr.aria-selected]="isActivePreset(preset) ? 'true' : 'false'"
+            (click)="handlePreset(preset, i)"
+          >
+            {{ preset.label }}
+          </button>
+        }
+      </div>
+    }
+
+    <div class="flex flex-col flex-1">
+      <tw-calendar
+        #calendar
+        mode="range"
+        class="!rounded-none !border-0 !bg-transparent !p-2"
+        [bordered]="false"
+        [value]="$any(pendingRangeAsRange())"
+        [startAt]="$any(initialStartAt())"
+        [startView]="startView()"
+        [monthColumns]="numberOfMonths()"
+        [minDate]="minDate()"
+        [maxDate]="maxDate()"
+        [dateFilter]="dateFilter()"
+        [dateClass]="dateClass()"
+        [cellTemplate]="cellTemplate()"
+        [locale]="locale()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [minRangeLength]="minRangeLength()"
+        [maxRangeLength]="maxRangeLength()"
+        [rangeBehavior]="rangeBehavior()"
+        [rangeClickBehavior]="rangeClickBehavior()"
+        [attr.aria-label]="calendarAriaLabel()"
+        (valueChange)="onCalendarRangeSelected($event)"
+        (viewChange)="onViewChanged($event)"
+      />
+
+      @if (showTime() && hasTimeablePending()) {
+        <div class="border-t border-border flex items-center justify-between gap-3 px-3 py-2">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-fg-muted">Start</span>
+            <tw-time-picker
+              variant="naked"
+              [value]="pendingRange()!.start"
+              [size]="size()"
+              [color]="color()"
+              [format]="timeFormat()"
+              [showSeconds]="showSeconds()"
+              [hourStep]="hourStep()"
+              [minuteStep]="minuteStep()"
+              [secondStep]="secondStep()"
+              [showClear]="false"
+              [referenceDate]="pendingRange()!.start"
+              aria-label="Start time"
+              (timeChange)="onStartTime($event)"
+            />
+          </div>
+          <span class="text-fg-subtle shrink-0">{{ rangeSeparator() }}</span>
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-fg-muted">End</span>
+            <tw-time-picker
+              variant="naked"
+              [value]="pendingRange()!.end"
+              [size]="size()"
+              [color]="color()"
+              [format]="timeFormat()"
+              [showSeconds]="showSeconds()"
+              [hourStep]="hourStep()"
+              [minuteStep]="minuteStep()"
+              [secondStep]="secondStep()"
+              [showClear]="false"
+              [referenceDate]="pendingRange()!.end"
+              aria-label="End time"
+              (timeChange)="onEndTime($event)"
+            />
+          </div>
+        </div>
+      }
+
+      @if (showActions()) {
+        <div class="border-t border-border flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2">
+            <button twButton variant="ghost" size="sm" type="button" (click)="handleToday()">
+              {{ todayLabel() }}
+            </button>
+            @if (pendingRange() !== null) {
+              <button twButton variant="ghost" size="sm" type="button" (click)="handleClear()">
+                {{ clearLabel() }}
+              </button>
+            }
+          </div>
+          <div class="flex items-center gap-2">
+            <button twButton variant="ghost" size="sm" type="button" (click)="handleCancel()">
+              {{ cancelLabel() }}
+            </button>
+            <button twButton variant="solid" size="sm" type="button" (click)="handleApply()">
+              {{ applyLabel() }}
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { calendarRef: [{ type: i0.ViewChild, args: ['calendar', { isSignal: true }] }], presetOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DateRangePresetOptionDirective), { isSignal: true }] }] } });
+
+// ── Constants ─────────────────────────────────────────────────────
+const DEFAULT_DISPLAY_FORMAT = {
+    dateTimeFormat: { year: 'numeric', month: 'short', day: 'numeric' },
+};
+// ── Helpers ───────────────────────────────────────────────────────
+function rangesEqual(a, b, adapter) {
+    if (a === null && b === null)
+        return true;
+    if (a === null || b === null)
+        return false;
+    const startEq = (a.start === null && b.start === null) ||
+        (a.start !== null && b.start !== null && adapter.sameDate(a.start, b.start));
+    const endEq = (a.end === null && b.end === null) ||
+        (a.end !== null && b.end !== null && adapter.sameDate(a.end, b.end));
+    return startEq && endEq;
+}
+// ── tv() config ───────────────────────────────────────────────────
+const dateRangePickerVariants = tv({
+    slots: {
+        root: 'relative inline-flex items-center w-full text-fg transition-[color,border-color,box-shadow] duration-normal motion-reduce:transition-none',
+        trigger: 'flex-1 inline-flex items-center gap-2 min-w-0 bg-transparent text-left text-fg outline-none border-0 p-0 m-0 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:cursor-not-allowed',
+        startText: 'truncate',
+        separator: 'shrink-0 text-fg-subtle',
+        endText: 'truncate',
+        placeholderText: 'text-fg-subtle truncate flex-1',
+        triggerIconWrapper: 'inline-flex items-center justify-center shrink-0 text-fg-muted',
+        triggerIcon: 'shrink-0 text-fg-muted transition-colors duration-normal motion-reduce:transition-none',
+        // size-6 (24×24 CSS px) is the WCAG AA minimum interactive target — bumping past size-5 keeps the affordance hittable without growing the inline row.
+        clearButton: 'inline-flex items-center justify-center shrink-0 rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none size-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    },
+    variants: {
+        size: {
+            xs: {
+                root: 'gap-1 text-xs',
+                // size-3.5 (14px) is a permitted half-step decorative chevron for xs
+                // density where neither size-3 nor size-4 lines up with adjacent text.
+                triggerIcon: 'size-3.5',
+            },
+            sm: {
+                root: 'gap-1.5 text-sm',
+                triggerIcon: 'size-4',
+            },
+            md: {
+                root: 'gap-2 text-sm',
+                triggerIcon: 'size-4',
+            },
+            lg: {
+                root: 'gap-2 text-base',
+                triggerIcon: 'size-5',
+            },
+            xl: {
+                root: 'gap-2 text-base',
+                triggerIcon: 'size-5',
+            },
+        },
+        variant: {
+            default: {
+                root: 'rounded-md border border-border bg-surface px-3 py-2 hover:border-border-strong',
+            },
+            naked: {
+                root: 'bg-transparent border-0 rounded-none p-0 focus-within:outline-none',
+            },
+        },
+        open: { true: { triggerIcon: 'text-fg' }, false: {} },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none cursor-not-allowed' },
+            false: {},
+        },
+        focused: { true: {}, false: {} },
+        errorState: { true: {}, false: {} },
+        color: {
+            primary: {},
+            secondary: {},
+            accent: {},
+            neutral: {},
+            info: {},
+            success: {},
+            warning: {},
+            error: {},
+        },
+    },
+    compoundVariants: [
+        { variant: 'default', focused: true, color: 'primary', class: { root: 'border-primary-500' } },
+        { variant: 'default', focused: true, color: 'secondary', class: { root: 'border-secondary-500' } },
+        { variant: 'default', focused: true, color: 'accent', class: { root: 'border-accent-500' } },
+        { variant: 'default', focused: true, color: 'neutral', class: { root: 'border-border-strong' } },
+        { variant: 'default', focused: true, color: 'info', class: { root: 'border-info-500' } },
+        { variant: 'default', focused: true, color: 'success', class: { root: 'border-success-500' } },
+        { variant: 'default', focused: true, color: 'warning', class: { root: 'border-warning-500' } },
+        { variant: 'default', focused: true, color: 'error', class: { root: 'border-error-500' } },
+        { variant: 'default', errorState: true, class: { root: 'border-error-500' } },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'default',
+        open: false,
+        disabled: false,
+        errorState: false,
+        focused: false,
+        color: 'primary',
+    },
+}, { twMerge: true });
+// ── ID generator ──────────────────────────────────────────────────
+let nextDateRangePickerId = 0;
+/**
+ * ARIA date-picker dialog for two-endpoint date ranges. Composes `tw-calendar`
+ * in `selectionMode="range"` inside a CDK overlay. Supports optional time
+ * selection via embedded `tw-time-picker`s and optional quick-select presets.
+ *
+ * All three Angular forms strategies (reactive, template-driven, signal-forms)
+ * are supported via `ControlValueAccessor`, and the component integrates with
+ * `<tw-form-field>` by implementing `FormFieldControl`.
+ *
+ * All date operations go through the injected `DateAdapter<D>`; call
+ * `provideNativeDateAdapter()` in your app providers to bootstrap the default.
+ */
+class DateRangePickerComponent extends FormFieldControl {
+    // ── Inputs ──
+    /** Id on the trigger element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
+    idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+    /** Earliest selectable date for either endpoint. Presets and calendar cells earlier than this are rejected or disabled. Defaults to `null`. */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date for either endpoint. Presets and calendar cells later than this are rejected or disabled. Defaults to `null`. */
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Per-date predicate — return `false` to disable. Applied in both calendars. Presets that fall on a filtered date are skipped. */
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
+    startView = input('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    /** Date the left calendar focuses on when opened with no value. Falls back to today. Ignored when a value is already set. */
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    /** Display format for each endpoint, passed to `DateAdapter.format()`. When `showTime` is true and this is left at the default, hour/minute (and optional seconds) are folded in automatically. */
+    format = input(DEFAULT_DISPLAY_FORMAT, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Separator rendered between the two formatted endpoints in the trigger. Defaults to `" – "`. */
+    rangeSeparator = input(' – ', ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown in the trigger for an empty `start` endpoint. */
+    emptyStartLabel = input('Start date', ...(ngDevMode ? [{ debugName: "emptyStartLabel" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown in the trigger for an empty `end` endpoint. */
+    emptyEndLabel = input('End date', ...(ngDevMode ? [{ debugName: "emptyEndLabel" }] : /* istanbul ignore next */ []));
+    /** When set, overrides the composed `${emptyStartLabel}${rangeSeparator}${emptyEndLabel}` placeholder with a single string. */
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** When true, the trigger cannot open the overlay and `aria-disabled="true"` is set. Defaults to `false`. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
+    /** When true, exposes `aria-required="true"`. `Validators.required` on a bound `NgControl` is also honoured. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required',
+        transform: booleanAttribute });
+    /** Trigger padding, font size, and calendar cell density. Uses the shared `TwSize` scale. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color for focused border, calendar range fill, and preset active state. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Visual style of the trigger. `'default'` draws its own border; `'naked'` strips chrome so a parent (e.g. `tw-form-field`) owns it. Auto-resolves to `'naked'` when inside a form-field; otherwise `'default'`. */
+    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** How many months the overlay shows side-by-side. `2` is the standard range-picker layout; use `1` for compact contexts. Defaults to `2`. */
+    numberOfMonths = input(2, ...(ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []));
+    /** Optional quick-select presets rendered as a vertical list before the calendars. Each preset provides a label and a factory returning a `TwDateRange<D>`. An empty array hides the preset panel. */
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    /** Whether to show a clear-button affordance inside the trigger when a value is set. Defaults to `true`. */
+    // TRUE-default: a picker without a clear affordance forces consumers to wire one — most form pickers expect the inline clear, matching `<tw-input>`'s clear button.
+    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Minimum range length in days, inclusive. Commits shorter than this are rejected and surface `calendarRangeTooShort` on the bound `NgControl`. `null` = no minimum. Defaults to `null`. */
+    minRangeLength = input(null, ...(ngDevMode ? [{ debugName: "minRangeLength" }] : /* istanbul ignore next */ []));
+    /** Maximum range length in days, inclusive. Commits longer than this are rejected and surface `calendarRangeTooLong` on the bound `NgControl`. `null` = no maximum. Defaults to `null`. */
+    maxRangeLength = input(null, ...(ngDevMode ? [{ debugName: "maxRangeLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Range-mode behavior knobs forwarded to the embedded calendar. Accepts a
+     * partial config — unset fields use the documented defaults on
+     * `RangeBehaviorConfig`. Defaults: `{ allowSingleDayRange: true, persistPartialRange: true, allowBackwardRange: false, disableRangesCrossingDisabledDates: false }`.
+     */
+    rangeBehavior = input({}, ...(ngDevMode ? [{ debugName: "rangeBehavior" }] : /* istanbul ignore next */ []));
+    /** How the embedded calendar reacts to a click after a complete range. `'restart'` (default) starts a fresh draft; `'nearest-edge'` moves the nearer endpoint; `'require-clear'` blocks until cleared. */
+    rangeClickBehavior = input('restart', ...(ngDevMode ? [{ debugName: "rangeClickBehavior" }] : /* istanbul ignore next */ []));
+    /** Override first day of week (0=Sun, 1=Mon) on the embedded calendar. Falls back to the adapter's default. */
+    firstDayOfWeek = input(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /** Per-instance locale override. Forwarded to the embedded calendar and the underlying `DateAdapter` so the trigger display tracks the picker's locale. Falls back to Angular `LOCALE_ID` when `null`. */
+    locale = input(null, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Function producing per-cell CSS classes on the embedded calendar. */
+    dateClass = input(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    /** Optional cell-content template, forwarded to the embedded calendar. Use to customize cell visuals beyond `dateClass`. */
+    cellTemplate = input(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    /** When true, renders a `Today / Clear / Cancel / Apply` action bar at the bottom of the overlay. The calendar commits on the second click by default — turn this on for touch-heavy contexts. Defaults to `false`. */
+    showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    /** When true, the overlay renders two `<tw-time-picker>` instances so users can pick times for the start and end of the range. Defaults to `false`. */
+    showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+    /** Format of the embedded time-pickers. `'24h'` renders 00–23; `'12h'` adds an AM/PM toggle. Defaults to `'24h'`. */
+    timeFormat = input('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** Whether the embedded time-pickers expose a seconds field. Defaults to `false`. */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    /** Step for the embedded time-pickers' hour fields. Defaults to `1`. */
+    hourStep = input(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+    /** Step for the embedded time-pickers' minute fields. Defaults to `1`. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    /** Step for the embedded time-pickers' second fields. Defaults to `1`. */
+    secondStep = input(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    /** Label for the `Today` action in the overlay's action bar. */
+    todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the `Clear` action in the overlay's action bar. */
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the `Cancel` action in the overlay's action bar. */
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the `Apply` action in the overlay's action bar. */
+    applyLabel = input('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    /** Extra class(es) applied to the overlay panel element. `twMerge` resolves conflicts with internal classes. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
+    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    /** Pixel distance between trigger and overlay. Defaults to `4`. */
+    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the clear button. Defaults to `'Clear date range'`. */
+    clearAriaLabel = input('Clear date range', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Per-instance override of the `ErrorStateMatcher`. When omitted, uses the injected `TW_ERROR_STATE_MATCHER`. */
+    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the trigger. Required when no visible label is supplied via `tw-form-field` or an external `aria-labelledby`. Alias: `aria-label`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element that labels the trigger. Alias: `aria-labelledby`. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** Consumer-supplied `aria-describedby` ids. The form-field preserves these when merging hint/error ids. Alias: `aria-describedby`. */
+    userAriaDescribedByInput = input(undefined, { ...(ngDevMode ? { debugName: "userAriaDescribedByInput" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    // ── Models (two-way) ──
+    /** Two-way bound selected range. `null` when no selection. Setting programmatically updates the trigger display and the calendar selection; it does NOT trigger `onChange`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Two-way bound open state of the overlay. Setting to `true` opens; setting to `false` closes. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    /** Fires after the overlay's enter animation completes. Payload is the trigger element. */
+    opened = output();
+    /** Fires after the overlay's leave animation completes. Payload is the reason it closed. */
+    closed = output();
+    /** Fires after a commit — either from completing a range in the calendar, picking a preset, or applying via the action bar. */
+    rangeChange = output();
+    /** Fires when the user picks a preset from the list. Payload is the preset descriptor. Fires in addition to `rangeChange`. */
+    presetSelected = output();
+    // ── Injected deps ──
+    adapter = inject(DATE_ADAPTER);
+    overlayService = inject(Overlay);
+    focusMonitor = inject(FocusMonitor);
+    liveAnnouncer = inject(LiveAnnouncer);
+    coordinator = inject(PickerOverlayCoordinator);
+    elementRef = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    formField = inject(FormFieldComponent, { optional: true });
+    // Lazy NgControl lookup avoids the construction-time cycle with NG_VALIDATORS
+    // (the host registers itself as a validator via `useExisting`, and NgModel's
+    // constructor pulls the validator set — eager `inject(NgControl, {self})`
+    // would resolve to this component while it is still being created).
+    ngControl = null;
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    // ── View refs ──
+    triggerRef = viewChild.required('trigger');
+    // ── Identity ──
+    uid = nextDateRangePickerId++;
+    /** @internal */
+    hostId = `tw-date-range-picker-${this.uid}`;
+    /** @internal */
+    dialogId = `${this.hostId}-dialog`;
+    // ── Internal state ──
+    /** @internal Decouples programmatic writes from user commits. */
+    internalValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    parseError = signal(false, ...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rangeError = signal(false, ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    closingSignal = signal(false, ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
+    lastValueBeforeOpen = signal(null, ...(ngDevMode ? [{ debugName: "lastValueBeforeOpen" }] : /* istanbul ignore next */ []));
+    pendingRange = signal(null, ...(ngDevMode ? [{ debugName: "pendingRange" }] : /* istanbul ignore next */ []));
+    currentView = signal('day', ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    overlayInstanceSignal = signal(null, ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    get overlayInstance() {
+        return this.overlayInstanceSignal();
+    }
+    // ── Derived state ──
+    /** @internal */
+    isDisabled = computed(() => {
+        this._ngControlRev();
+        return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
+    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isEmpty = computed(() => {
+        const v = this.internalValue();
+        return v === null || (v.start === null && v.end === null);
+    }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    /** @internal Effective display format — folds hour/minute (and optional seconds) into the default when `showTime` is on and the user hasn't overridden `format`. */
+    effectiveFormat = computed(() => {
+        const fmt = this.format();
+        if (!this.showTime() || fmt !== DEFAULT_DISPLAY_FORMAT)
+            return fmt;
+        const hour12 = this.timeFormat() === '12h';
+        const base = {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12,
+        };
+        if (this.showSeconds())
+            base.second = '2-digit';
+        return { dateTimeFormat: base };
+    }, ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    startDisplay = computed(() => {
+        const v = this.internalValue();
+        if (v === null)
+            return '';
+        return v.start !== null
+            ? this.adapter.format(v.start, this.effectiveFormat())
+            : this.emptyStartLabel();
+    }, ...(ngDevMode ? [{ debugName: "startDisplay" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    endDisplay = computed(() => {
+        const v = this.internalValue();
+        if (v === null)
+            return '';
+        return v.end !== null
+            ? this.adapter.format(v.end, this.effectiveFormat())
+            : this.emptyEndLabel();
+    }, ...(ngDevMode ? [{ debugName: "endDisplay" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    placeholderDisplay = computed(() => {
+        const custom = this.placeholder();
+        if (custom)
+            return custom;
+        return `${this.emptyStartLabel()}${this.rangeSeparator()}${this.emptyEndLabel()}`;
+    }, ...(ngDevMode ? [{ debugName: "placeholderDisplay" }] : /* istanbul ignore next */ []));
+    /** @internal Accessible name composed from explicit aria-label plus the current range. */
+    triggerAccessibleName = computed(() => {
+        const label = this.ariaLabel();
+        if (this.ariaLabelledby())
+            return undefined;
+        const v = this.internalValue();
+        if (label && v !== null && v.start !== null && v.end !== null) {
+            const start = this.adapter.format(v.start, this.effectiveFormat());
+            const end = this.adapter.format(v.end, this.effectiveFormat());
+            return `${label}. Current range: ${start} to ${end}.`;
+        }
+        if (label)
+            return label;
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "triggerAccessibleName" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activePresetId = computed(() => {
+        const v = this.internalValue();
+        if (v === null)
+            return undefined;
+        for (const preset of this.presets()) {
+            if (!preset.id)
+                continue;
+            let candidate;
+            try {
+                candidate = preset.range();
+            }
+            catch {
+                continue;
+            }
+            if (rangesEqual(candidate, v, this.adapter))
+                return preset.id;
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    describedBy = computed(() => {
+        const extra = this.describedByIdsSignal();
+        const user = this.userAriaDescribedByInput();
+        const merged = [...extra];
+        if (user) {
+            for (const id of user.split(/\s+/)) {
+                if (id)
+                    merged.push(id);
+            }
+        }
+        return merged.length ? merged.join(' ') : '';
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // ── tv() output ──
+    variantResult = computed(() => dateRangePickerVariants({
+        size: this.size(),
+        variant: this.resolvedVariant(),
+        open: this.open(),
+        disabled: this.isDisabled(),
+        errorState: this.errorState(),
+        focused: this.focusedSignal(),
+        color: this.color(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    triggerClasses = computed(() => this.variantResult().trigger(), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    startTextClasses = computed(() => this.variantResult().startText(), ...(ngDevMode ? [{ debugName: "startTextClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    separatorClasses = computed(() => this.variantResult().separator(), ...(ngDevMode ? [{ debugName: "separatorClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    endTextClasses = computed(() => this.variantResult().endText(), ...(ngDevMode ? [{ debugName: "endTextClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    placeholderClasses = computed(() => this.variantResult().placeholderText(), ...(ngDevMode ? [{ debugName: "placeholderClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    triggerIconClasses = computed(() => this.variantResult().triggerIcon(), ...(ngDevMode ? [{ debugName: "triggerIconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    triggerIconWrapperClasses = computed(() => this.variantResult().triggerIconWrapper(), ...(ngDevMode ? [{ debugName: "triggerIconWrapperClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    // ── FormFieldControl impl ──
+    /** @internal */
+    id = computed(() => this.idInput() ?? this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focused = this.focusedSignal.asReadonly();
+    /** @internal */
+    empty = this.isEmpty;
+    /** @internal */
+    disabled = this.isDisabled;
+    /** @internal */
+    required = computed(() => {
+        this._ngControlRev();
+        if (this.requiredInput())
+            return true;
+        return !!this.ngControl?.control?.hasValidator(Validators.required);
+    }, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    errorState = computed(() => {
+        this._ngControlRev();
+        this._formSubmitRev();
+        this.focusedSignal();
+        if (this.parseError() || this.rangeError())
+            return true;
+        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
+        const form = this.parentFormGroup ??
+            this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlType = 'date-range-picker';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.userAriaDescribedByInput(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    // ── Constructor ──
+    constructor() {
+        super();
+        // Mirror the `open` model into the overlay lifecycle.
+        effect(() => {
+            const shouldOpen = this.open();
+            const disabled = this.isDisabled();
+            if (disabled && this.overlayInstance) {
+                this.closeOverlay('programmatic');
+                return;
+            }
+            if (shouldOpen && !this.overlayInstance && !disabled && !this.closingSignal()) {
+                this.openOverlay();
+            }
+            else if (!shouldOpen && this.overlayInstance && !this.closingSignal()) {
+                this.closeOverlay('programmatic');
+            }
+        });
+        // Push config into the overlay whenever anything relevant changes.
+        // Reads happen in the tracked phase; writes to the overlay instance are
+        // wrapped in `untracked()` so they never feed back into this effect.
+        effect(() => {
+            const instance = this.overlayInstance;
+            if (!instance)
+                return;
+            const size = this.size();
+            const color = this.color();
+            const minDate = this.minDate();
+            const maxDate = this.maxDate();
+            const dateFilter = this.dateFilter();
+            const startView = this.startView();
+            const numberOfMonths = this.numberOfMonths();
+            const pendingRange = this.pendingRange();
+            const currentView = this.currentView();
+            const presets = this.presets();
+            const activePresetId = this.activePresetId();
+            const showActions = this.showActions();
+            const showTime = this.showTime();
+            const timeFormat = this.timeFormat();
+            const showSeconds = this.showSeconds();
+            const hourStep = this.hourStep();
+            const minuteStep = this.minuteStep();
+            const secondStep = this.secondStep();
+            const todayLabel = this.todayLabel();
+            const clearLabel = this.clearLabel();
+            const cancelLabel = this.cancelLabel();
+            const applyLabel = this.applyLabel();
+            const rangeSeparator = this.rangeSeparator();
+            const dialogAriaLabel = this.resolveDialogAriaLabel();
+            const panelClassValue = this.resolvePanelClass();
+            const minRangeLength = this.minRangeLength();
+            const maxRangeLength = this.maxRangeLength();
+            const rangeBehavior = this.rangeBehavior();
+            const rangeClickBehavior = this.rangeClickBehavior();
+            const firstDayOfWeek = this.firstDayOfWeek();
+            const locale = this.locale();
+            const dateClass = this.dateClass();
+            const cellTemplate = this.cellTemplate();
+            untracked(() => {
+                instance.size.set(size);
+                instance.color.set(color);
+                instance.minDate.set(minDate);
+                instance.maxDate.set(maxDate);
+                instance.dateFilter.set(dateFilter);
+                instance.startView.set(startView);
+                instance.numberOfMonths.set(numberOfMonths);
+                instance.pendingRange.set(pendingRange);
+                instance.currentView.set(currentView);
+                instance.presets.set(presets);
+                instance.activePresetId.set(activePresetId);
+                instance.showActions.set(showActions);
+                instance.showTime.set(showTime);
+                instance.timeFormat.set(timeFormat);
+                instance.showSeconds.set(showSeconds);
+                instance.hourStep.set(hourStep);
+                instance.minuteStep.set(minuteStep);
+                instance.secondStep.set(secondStep);
+                instance.todayLabel.set(todayLabel);
+                instance.clearLabel.set(clearLabel);
+                instance.cancelLabel.set(cancelLabel);
+                instance.applyLabel.set(applyLabel);
+                instance.rangeSeparator.set(rangeSeparator);
+                instance.dialogId.set(this.dialogId);
+                instance.dialogAriaLabel.set(dialogAriaLabel);
+                instance.panelClassValue.set(panelClassValue);
+                instance.minRangeLength.set(minRangeLength);
+                instance.maxRangeLength.set(maxRangeLength);
+                instance.rangeBehavior.set(rangeBehavior);
+                instance.rangeClickBehavior.set(rangeClickBehavior);
+                instance.firstDayOfWeek.set(firstDayOfWeek);
+                instance.locale.set(locale);
+                instance.dateClass.set(dateClass);
+                instance.cellTemplate.set(cellTemplate);
+            });
+        });
+        // Push locale into the adapter so the trigger display tracks the picker's
+        // locale; the calendar runs its own setLocale internally for its grid.
+        effect(() => {
+            const locale = this.locale();
+            if (locale === null)
+                return;
+            untracked(() => this.adapter.setLocale(locale));
+        });
+        // Re-run validation whenever a constraint input changes so consumer
+        // statusChanges fires (mirrors the calendar's pattern).
+        effect(() => {
+            this.minDate();
+            this.maxDate();
+            this.dateFilter();
+            this.minRangeLength();
+            this.maxRangeLength();
+            untracked(() => this.validatorOnChange());
+        });
+        // Dev-mode accessible-name warning.
+        afterNextRender(() => {
+            if (!isDevMode())
+                return;
+            const hasLabel = !!this.ariaLabel() ||
+                !!this.ariaLabelledby() ||
+                !!this.formField?.labelChild();
+            if (!hasLabel) {
+                console.warn('[tw-date-range-picker] The date-range-picker has no accessible name. Set aria-label, aria-labelledby, or wrap the component in a <tw-form-field> with a <label twLabel>.');
+            }
+        });
+        // Monitor focus on the host (descendants-aware so the overlay counts while open).
+        const monitorSub = this.focusMonitor
+            .monitor(this.elementRef, true)
+            .subscribe((origin) => {
+            const wasFocused = this.focusedSignal();
+            this.focusedSignal.set(!!origin);
+            if (wasFocused && !origin) {
+                this.onTouched();
+                this._ngControlRev.update((n) => n + 1);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            monitorSub.unsubscribe();
+            this.focusMonitor.stopMonitoring(this.elementRef);
+            // The coordinator's own DestroyRef.onDestroy disposes the overlay and
+            // clears its timers; we only need to drop the local instance signal.
+            this.overlayInstanceSignal.set(null);
+        });
+    }
+    ngOnInit() {
+        // Resolve the bound NgControl lazily (see field declaration). By the time
+        // ngOnInit runs the host's FormControlName / NgModel is fully constructed.
+        this.ngControl = this.injector.get(NgControl, null, {
+            self: true,
+            optional: true,
+        });
+        // Wire this component as the NgControl's value accessor. NG_VALUE_ACCESSOR
+        // is not registered as a provider to keep `inject(NgControl, { self })`
+        // possible — we assign it here instead.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        const ctrl = this.ngControl?.control;
+        if (ctrl) {
+            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
+            if (streams.length) {
+                merge(...streams)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
+            }
+        }
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        if (submit) {
+            submit
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
+        }
+    }
+    // ── Public imperative API ──
+    /** Opens the overlay. No-op when disabled or already open. */
+    openPicker() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+    }
+    /** Closes the overlay. No-op when already closed. */
+    closePicker() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+    }
+    /** Toggles the overlay's open state. */
+    toggle() {
+        if (this.open())
+            this.closePicker();
+        else
+            this.openPicker();
+    }
+    /** Clears the current range and emits `rangeChange` with `source: 'clear'`. */
+    clear() {
+        this.commit(null, 'clear');
+    }
+    // ── Trigger interactions ──
+    /** @internal */
+    onTriggerClick() {
+        if (this.isDisabled())
+            return;
+        this.toggle();
+    }
+    /** @internal */
+    onTriggerKeydown(event) {
+        if (this.isDisabled())
+            return;
+        if (event.altKey && event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.openPicker();
+            return;
+        }
+        if (event.altKey && event.key === 'ArrowUp') {
+            if (this.open()) {
+                event.preventDefault();
+                this.closeOverlay('cancel', /* restore */ true);
+            }
+            return;
+        }
+        if (event.key === 'Escape' && this.open()) {
+            event.preventDefault();
+            this.closeOverlay('escape', /* restore */ true);
+        }
+    }
+    /** @internal */
+    onClearClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.clear();
+    }
+    // ── Commit ──
+    commit(next, source) {
+        const normalised = this.normalizeRange(next);
+        const previous = this.internalValue();
+        if (rangesEqual(normalised, previous, this.adapter) && source !== 'programmatic') {
+            // No change from a user action — still mark as touched for CVA parity,
+            // but skip onChange and the rangeChange emission.
+            this.onTouched();
+            return;
+        }
+        this.internalValue.set(normalised);
+        this.value.set(normalised);
+        this.parseError.set(false);
+        this.rangeError.set(false);
+        if (source !== 'programmatic') {
+            this.onChange(normalised);
+            this.onTouched();
+            this.announce(normalised);
+        }
+        this.rangeChange.emit({ value: normalised, previousValue: previous, source });
+    }
+    announce(value) {
+        if (value === null) {
+            this.liveAnnouncer.announce('Date range cleared', 'polite');
+            return;
+        }
+        const fmt = this.effectiveFormat();
+        if (value.start !== null && value.end !== null) {
+            const start = this.adapter.format(value.start, fmt);
+            const end = this.adapter.format(value.end, fmt);
+            this.liveAnnouncer.announce(`${start} to ${end} selected`, 'polite');
+        }
+        else if (value.start !== null) {
+            const start = this.adapter.format(value.start, fmt);
+            this.liveAnnouncer.announce(`${start} selected. Pick end date.`, 'polite');
+        }
+    }
+    normalizeRange(v) {
+        if (v === null)
+            return null;
+        if (v.start === null && v.end === null)
+            return null;
+        return v;
+    }
+    clampRange(range) {
+        const min = this.minDate();
+        const max = this.maxDate();
+        const start = range.start !== null ? this.adapter.clampDate(range.start, min, max) : null;
+        const end = range.end !== null ? this.adapter.clampDate(range.end, min, max) : null;
+        return new TwDateRange(start, end);
+    }
+    isRangeValid(range) {
+        const min = this.minDate();
+        const max = this.maxDate();
+        const filter = this.dateFilter();
+        const endpoints = [range.start, range.end].filter((d) => d !== null);
+        for (const d of endpoints) {
+            if (!this.adapter.isValid(d))
+                return false;
+            if (min && this.adapter.compare(d, min) < 0)
+                return false;
+            if (max && this.adapter.compare(d, max) > 0)
+                return false;
+            if (filter && !filter(d))
+                return false;
+        }
+        // Same-day ranges with time mode: end time must not be earlier than start time.
+        if (this.showTime() &&
+            range.start !== null &&
+            range.end !== null &&
+            this.adapter.sameDate(range.start, range.end) &&
+            this.adapter.compare(range.start, range.end) > 0) {
+            return false;
+        }
+        // Range-length constraints (Phase 4 codes).
+        if (range.start !== null && range.end !== null) {
+            const minLen = this.minRangeLength();
+            const maxLen = this.maxRangeLength();
+            if (minLen !== null || maxLen !== null) {
+                const length = this.rangeLengthInDays(range.start, range.end);
+                if (minLen !== null && length < minLen)
+                    return false;
+                if (maxLen !== null && length > maxLen)
+                    return false;
+            }
+        }
+        return true;
+    }
+    rangeLengthInDays(start, end) {
+        // Inclusive day count (start + 1 day = length 2). Mirrors
+        // `rangeLengthDays` in calendar.utils so picker-level validation matches
+        // the calendar's commit-time validation.
+        const [lo, hi] = this.adapter.compare(start, end) <= 0 ? [start, end] : [end, start];
+        const a = this.adapter.startOfDay(lo);
+        const b = this.adapter.startOfDay(hi);
+        let count = 1;
+        let cursor = a;
+        while (this.adapter.compare(cursor, b) < 0) {
+            cursor = this.adapter.addDays(cursor, 1);
+            count++;
+        }
+        return count;
+    }
+    // ── Overlay lifecycle ──
+    openOverlay() {
+        const current = this.internalValue();
+        this.lastValueBeforeOpen.set(current);
+        this.pendingRange.set(current);
+        this.currentView.set(this.startView());
+        const result = this.coordinator.open({
+            origin: this.elementRef,
+            portalComponent: DateRangePickerOverlayComponent,
+            viewContainerRef: this.viewContainerRef,
+            injector: this.injector,
+            positions: buildSelectLikePositions(this.offset()),
+            scrollStrategy: resolveSelectScrollStrategy(this.scrollStrategy(), this.overlayService),
+            panelClass: 'tw-date-range-picker-panel',
+        });
+        if (!result)
+            return;
+        const instance = result.instance;
+        instance.onCalendarSelect.set((range) => this.onCalendarSelection(range));
+        instance.onPresetSelect.set((preset) => this.onPresetClick(preset));
+        instance.onStartTimeChange.set((date) => this.onStartTimeChange(date));
+        instance.onEndTimeChange.set((date) => this.onEndTimeChange(date));
+        instance.onViewChange.set((view) => this.onViewChanged(view));
+        instance.onToday.set(() => this.onTodayClicked());
+        instance.onClear.set(() => this.onClearAction());
+        instance.onCancel.set(() => this.onCancelAction());
+        instance.onApply.set(() => this.onApplyAction());
+        // Push the initial config synchronously so the first render reflects the
+        // current inputs; the effect in the constructor keeps things in sync afterwards.
+        instance.size.set(this.size());
+        instance.color.set(this.color());
+        instance.minDate.set(this.minDate());
+        instance.maxDate.set(this.maxDate());
+        instance.dateFilter.set(this.dateFilter());
+        instance.startView.set(this.startView());
+        instance.numberOfMonths.set(this.numberOfMonths());
+        instance.pendingRange.set(this.pendingRange());
+        instance.currentView.set(this.currentView());
+        instance.presets.set(this.presets());
+        instance.activePresetId.set(this.activePresetId());
+        instance.showActions.set(this.showActions());
+        instance.showTime.set(this.showTime());
+        instance.timeFormat.set(this.timeFormat());
+        instance.showSeconds.set(this.showSeconds());
+        instance.hourStep.set(this.hourStep());
+        instance.minuteStep.set(this.minuteStep());
+        instance.secondStep.set(this.secondStep());
+        instance.todayLabel.set(this.todayLabel());
+        instance.clearLabel.set(this.clearLabel());
+        instance.cancelLabel.set(this.cancelLabel());
+        instance.applyLabel.set(this.applyLabel());
+        instance.rangeSeparator.set(this.rangeSeparator());
+        instance.minRangeLength.set(this.minRangeLength());
+        instance.maxRangeLength.set(this.maxRangeLength());
+        instance.rangeBehavior.set(this.rangeBehavior());
+        instance.rangeClickBehavior.set(this.rangeClickBehavior());
+        instance.firstDayOfWeek.set(this.firstDayOfWeek());
+        instance.locale.set(this.locale());
+        instance.dateClass.set(this.dateClass());
+        instance.cellTemplate.set(this.cellTemplate());
+        this.overlayInstanceSignal.set(instance);
+        // Flush the initial config into the overlay's first render so view children
+        // (calendar, time pickers, action bar) observe the picker's current inputs.
+        result.componentRef.changeDetectorRef.detectChanges();
+        // Per-open streams from the coordinator complete on close, so no
+        // takeUntilDestroyed is needed.
+        this.coordinator.backdropClick$().subscribe(() => {
+            // When an action bar is present, backdrop click acts as cancel.
+            if (this.showActions()) {
+                this.closeOverlay('backdrop', /* restore */ true);
+            }
+            else {
+                this.closeOverlay('backdrop');
+            }
+        });
+        this.coordinator.escape$().subscribe((event) => {
+            event.preventDefault();
+            this.closeOverlay('escape', /* restore */ true);
+        });
+        // Defer `opened` emission until after the enter animation completes — was
+        // previously fired synchronously on open() (mirrors the date-picker fix).
+        this.coordinator
+            .opened$()
+            .subscribe(() => this.opened.emit({ trigger: this.elementRef.nativeElement }));
+        queueMicrotask(() => {
+            this.overlayInstance?.focusCalendar();
+        });
+    }
+    closeOverlay(reason, restore = false) {
+        if (this.closingSignal() || !this.overlayInstance)
+            return;
+        this.closingSignal.set(true);
+        this.overlayInstance.leaving.set(true);
+        if (restore) {
+            const previous = this.lastValueBeforeOpen();
+            if (!rangesEqual(previous, this.internalValue(), this.adapter)) {
+                // Silent restore — no emit of rangeChange.
+                this.internalValue.set(previous);
+                this.value.set(previous);
+                this.parseError.set(false);
+                this.rangeError.set(false);
+            }
+        }
+        this.triggerRef().nativeElement.focus();
+        this.coordinator.close(() => {
+            this.overlayInstanceSignal.set(null);
+            this.pendingRange.set(null);
+            untracked(() => this.open.set(false));
+            this.closingSignal.set(false);
+            this.closed.emit(reason);
+        });
+    }
+    // ── Overlay callbacks ──
+    /** @internal */
+    onCalendarSelection(range) {
+        this.pendingRange.set(range);
+        if (!range.complete)
+            return;
+        if (this.showActions() || this.showTime())
+            return;
+        if (!this.isRangeValid(range)) {
+            this.rangeError.set(true);
+            return;
+        }
+        this.commit(range, 'calendar');
+        this.closeOverlay('select');
+    }
+    onPresetClick(preset) {
+        let raw;
+        try {
+            raw = preset.range();
+        }
+        catch {
+            this.liveAnnouncer.announce(`${preset.label} could not be applied.`, 'polite');
+            return;
+        }
+        const clamped = this.clampRange(raw);
+        if (!this.isRangeValid(clamped) || !clamped.complete) {
+            this.liveAnnouncer.announce(`${preset.label} is not available in the current filter.`, 'polite');
+            return;
+        }
+        this.pendingRange.set(clamped);
+        this.presetSelected.emit(preset);
+        if (this.showActions() || this.showTime())
+            return;
+        this.commit(clamped, 'preset');
+        this.closeOverlay('select');
+    }
+    onStartTimeChange(date) {
+        const pending = this.pendingRange();
+        if (pending === null || pending.start === null || date === null)
+            return;
+        const updatedStart = this.adapter.withTime(pending.start, this.adapter.getHours(date), this.adapter.getMinutes(date), this.adapter.getSeconds(date));
+        const next = new TwDateRange(updatedStart, pending.end);
+        this.pendingRange.set(next);
+        if (!this.showActions() && next.complete) {
+            if (!this.isRangeValid(next)) {
+                this.rangeError.set(true);
+                return;
+            }
+            this.commit(next, 'time');
+        }
+    }
+    onEndTimeChange(date) {
+        const pending = this.pendingRange();
+        if (pending === null || pending.end === null || date === null)
+            return;
+        const updatedEnd = this.adapter.withTime(pending.end, this.adapter.getHours(date), this.adapter.getMinutes(date), this.adapter.getSeconds(date));
+        const next = new TwDateRange(pending.start, updatedEnd);
+        this.pendingRange.set(next);
+        if (!this.showActions() && next.complete) {
+            if (!this.isRangeValid(next)) {
+                this.rangeError.set(true);
+                return;
+            }
+            this.commit(next, 'time');
+        }
+    }
+    onViewChanged(view) {
+        this.currentView.set(view);
+    }
+    onTodayClicked() {
+        const today = this.adapter.today();
+        const range = new TwDateRange(today, today);
+        if (!this.isRangeValid(range))
+            return;
+        this.pendingRange.set(range);
+        // When the action bar is off, Today behaves like a direct commit shortcut —
+        // mirrors the date-picker's parallel behaviour.
+        if (!this.showActions()) {
+            this.commit(range, 'preset');
+            this.closeOverlay('select');
+        }
+    }
+    onClearAction() {
+        // Stage-only: clearing in the action bar just drops the pending range.
+        // The user must press Apply to commit, consistent with Today.
+        this.pendingRange.set(null);
+    }
+    onCancelAction() {
+        this.closeOverlay('cancel', /* restore */ true);
+    }
+    onApplyAction() {
+        const pending = this.pendingRange();
+        const normalised = this.normalizeRange(pending);
+        if (normalised !== null && !this.isRangeValid(normalised)) {
+            this.rangeError.set(true);
+            this.closeOverlay('cancel', /* restore */ true);
+            return;
+        }
+        this.commit(normalised, 'apply');
+        this.closeOverlay('apply');
+    }
+    // ── Helpers ──
+    resolveDialogAriaLabel() {
+        return this.ariaLabel() || 'Choose a date range';
+    }
+    resolvePanelClass() {
+        const raw = this.panelClass();
+        return Array.isArray(raw) ? raw.join(' ') : raw;
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        const previous = this.internalValue();
+        if (value === null || value === undefined || value === '') {
+            this.internalValue.set(null);
+            this.value.set(null);
+            this.parseError.set(false);
+            this.rangeError.set(false);
+            this.rangeChange.emit({
+                value: null,
+                previousValue: previous,
+                source: 'programmatic',
+            });
+            return;
+        }
+        const coerced = this.coerceRange(value);
+        const normalised = this.normalizeRange(coerced);
+        this.internalValue.set(normalised);
+        this.value.set(normalised);
+        this.parseError.set(false);
+        this.rangeError.set(normalised !== null && !this.isRangeValid(normalised));
+        this.rangeChange.emit({
+            value: normalised,
+            previousValue: previous,
+            source: 'programmatic',
+        });
+    }
+    coerceRange(value) {
+        if (value === null || value === undefined)
+            return null;
+        if (value instanceof TwDateRange) {
+            const start = this.coerceEndpoint(value.start);
+            const end = this.coerceEndpoint(value.end);
+            return new TwDateRange(start, end);
+        }
+        const obj = value;
+        return new TwDateRange(this.coerceEndpoint(obj.start ?? null), this.coerceEndpoint(obj.end ?? null));
+    }
+    coerceEndpoint(raw) {
+        if (raw === null)
+            return null;
+        const d = this.adapter.deserialize(raw);
+        if (d === null)
+            return null;
+        return this.adapter.isValid(d) ? d : null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── Validator ──
+    validatorOnChange = () => { };
+    /** @internal */
+    validate(control) {
+        // Delegate to the calendar validator so consumers see the same
+        // CalendarErrorCode set on a date-range-picker as on a bound `tw-calendar`.
+        const validator = calendarValidator({
+            mode: 'range',
+            lastInvalidFormValue: null,
+            constraints: {
+                minDate: this.minDate(),
+                maxDate: this.maxDate(),
+                dateFilter: this.dateFilter(),
+            },
+            adapter: this.adapter,
+            minRangeLength: this.minRangeLength(),
+            maxRangeLength: this.maxRangeLength(),
+        });
+        const errors = validator(control);
+        return errors;
+    }
+    /** @internal */
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
+    // ── FormFieldControl methods ──
+    /** @internal */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    onContainerClick(event) {
+        if (this.isDisabled())
+            return;
+        const target = event.target;
+        const triggerEl = this.triggerRef()?.nativeElement;
+        if (triggerEl && target && triggerEl.contains(target))
+            return;
+        if (triggerEl && document.activeElement !== triggerEl) {
+            triggerEl.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DateRangePickerComponent, isStandalone: true, selector: "tw-date-range-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", 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 }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, emptyStartLabel: { classPropertyName: "emptyStartLabel", publicName: "emptyStartLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyEndLabel: { classPropertyName: "emptyEndLabel", publicName: "emptyEndLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, minRangeLength: { classPropertyName: "minRangeLength", publicName: "minRangeLength", isSignal: true, isRequired: false, transformFunction: null }, maxRangeLength: { classPropertyName: "maxRangeLength", publicName: "maxRangeLength", isSignal: true, isRequired: false, transformFunction: null }, rangeBehavior: { classPropertyName: "rangeBehavior", publicName: "rangeBehavior", isSignal: true, isRequired: false, transformFunction: null }, rangeClickBehavior: { classPropertyName: "rangeClickBehavior", publicName: "rangeClickBehavior", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", 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 }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, userAriaDescribedByInput: { classPropertyName: "userAriaDescribedByInput", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", opened: "opened", closed: "closed", rangeChange: "rangeChange", presetSelected: "presetSelected" }, host: { properties: { "class": "rootClasses()" } }, providers: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => DateRangePickerComponent),
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => DateRangePickerComponent),
+                multi: true,
+            },
+            PickerOverlayCoordinator,
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <button
+      #trigger
+      type="button"
+      [id]="hostId"
+      [class]="triggerClasses()"
+      [attr.role]="'combobox'"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-expanded]="open() ? 'true' : 'false'"
+      [attr.aria-controls]="dialogId"
+      [attr.aria-label]="triggerAccessibleName() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-invalid]="errorState() || null"
+      [attr.aria-disabled]="isDisabled() || null"
+      [attr.data-variant]="resolvedVariant()"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <span class="flex-1 inline-flex items-center gap-2 min-w-0">
+        @if (internalValue() !== null) {
+          <span [class]="startTextClasses()">{{ startDisplay() }}</span>
+          <span [class]="separatorClasses()">{{ rangeSeparator() }}</span>
+          <span [class]="endTextClasses()">{{ endDisplay() }}</span>
+        } @else {
+          <span [class]="placeholderClasses()">{{ placeholderDisplay() }}</span>
+        }
+      </span>
+
+      <span [class]="triggerIconWrapperClasses()">
+        <ng-content select="[slot=trigger-icon]">
+          <svg
+            [class]="triggerIconClasses()"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <line x1="16" y1="2" x2="16" y2="6" />
+            <line x1="8" y1="2" x2="8" y2="6" />
+            <line x1="3" y1="10" x2="21" y2="10" />
+          </svg>
+        </ng-content>
+      </span>
+    </button>
+
+    @if (showClear() && !isEmpty() && !isDisabled()) {
+      <button
+        type="button"
+        tabindex="-1"
+        [class]="clearButtonClasses()"
+        [attr.aria-label]="clearAriaLabel()"
+        (click)="onClearClick($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-date-range-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => DateRangePickerComponent),
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => DateRangePickerComponent),
+                            multi: true,
+                        },
+                        PickerOverlayCoordinator,
+                    ],
+                    template: `
+    <button
+      #trigger
+      type="button"
+      [id]="hostId"
+      [class]="triggerClasses()"
+      [attr.role]="'combobox'"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-expanded]="open() ? 'true' : 'false'"
+      [attr.aria-controls]="dialogId"
+      [attr.aria-label]="triggerAccessibleName() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-invalid]="errorState() || null"
+      [attr.aria-disabled]="isDisabled() || null"
+      [attr.data-variant]="resolvedVariant()"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <span class="flex-1 inline-flex items-center gap-2 min-w-0">
+        @if (internalValue() !== null) {
+          <span [class]="startTextClasses()">{{ startDisplay() }}</span>
+          <span [class]="separatorClasses()">{{ rangeSeparator() }}</span>
+          <span [class]="endTextClasses()">{{ endDisplay() }}</span>
+        } @else {
+          <span [class]="placeholderClasses()">{{ placeholderDisplay() }}</span>
+        }
+      </span>
+
+      <span [class]="triggerIconWrapperClasses()">
+        <ng-content select="[slot=trigger-icon]">
+          <svg
+            [class]="triggerIconClasses()"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <line x1="16" y1="2" x2="16" y2="6" />
+            <line x1="8" y1="2" x2="8" y2="6" />
+            <line x1="3" y1="10" x2="21" y2="10" />
+          </svg>
+        </ng-content>
+      </span>
+    </button>
+
+    @if (showClear() && !isEmpty() && !isDisabled()) {
+      <button
+        type="button"
+        tabindex="-1"
+        [class]="clearButtonClasses()"
+        [attr.aria-label]="clearAriaLabel()"
+        (click)="onClearClick($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+  `,
+                    host: {
+                        '[class]': 'rootClasses()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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 }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], emptyStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStartLabel", required: false }] }], emptyEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyEndLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], minRangeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRangeLength", required: false }] }], maxRangeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeLength", required: false }] }], rangeBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeBehavior", required: false }] }], rangeClickBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeClickBehavior", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], userAriaDescribedByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], presetSelected: [{ type: i0.Output, args: ["presetSelected"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateRangePickerComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-date-range-picker.mjs.map