@cdevhub/ngx-tw 0.2.1 → 0.3.0

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

@@ -1,13 +1,13 @@
 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 { NgForm, FormGroupDirective, Validators, NgControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } 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 { FormFieldControl, TW_FORM_FIELD, 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';
@@ -23,15 +23,16 @@ import { TimePickerComponent } from '@cdevhub/ngx-tw/time-picker';
 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 */ []));
+    tabindex = signal('-1', /* @ts-ignore */
+    ...(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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePresetOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePresetOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[twDateRangePresetOption]',
@@ -50,123 +51,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 class DateRangePickerOverlayComponent {
     elementRef = inject((ElementRef));
-    calendarRef = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendarRef" }] : /* istanbul ignore next */ []));
-    presetOptions = viewChildren(DateRangePresetOptionDirective, ...(ngDevMode ? [{ debugName: "presetOptions" }] : /* istanbul ignore next */ []));
+    calendarRef = viewChild('calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarRef" }] : /* istanbul ignore next */ []));
+    presetOptions = viewChildren(DateRangePresetOptionDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetOptions" }] : /* istanbul ignore next */ []));
     // ── Config signals set by the parent ──
     /** @internal */
-    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = signal('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** @internal */
-    color = signal('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = signal('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minDate = signal(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    minDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    maxDate = signal(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    maxDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dateFilter = signal(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    dateFilter = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
     /** @internal */
-    startView = signal('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    startView = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
     /** @internal */
-    numberOfMonths = signal(2, ...(ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []));
+    numberOfMonths = signal(2, /* @ts-ignore */
+    ...(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 */ []));
+    pendingRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingRange" }] : /* istanbul ignore next */ []));
     /** @internal */
-    currentView = signal('day', ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    currentView = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
     /** @internal */
-    presets = signal([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    presets = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     /** @internal */
-    activePresetId = signal(undefined, ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
+    activePresetId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showActions = signal(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    showActions = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showTime = signal(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+    showTime = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
     /** @internal */
-    timeFormat = signal('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    timeFormat = signal('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showSeconds = signal(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    showSeconds = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hourStep = signal(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+    hourStep = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minuteStep = signal(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    minuteStep = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
     /** @internal */
-    secondStep = signal(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    secondStep = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
     /** @internal */
-    todayLabel = signal('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    todayLabel = signal('Today', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    clearLabel = signal('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    clearLabel = signal('Clear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    cancelLabel = signal('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = signal('Cancel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    applyLabel = signal('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    applyLabel = signal('Apply', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rangeSeparator = signal(' – ', ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
+    rangeSeparator = signal(' – ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dialogId = signal('', ...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
+    dialogId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dialogAriaLabel = signal('Choose a date range', ...(ngDevMode ? [{ debugName: "dialogAriaLabel" }] : /* istanbul ignore next */ []));
+    dialogAriaLabel = signal('Choose a date range', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogAriaLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    panelClassValue = signal('', ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
+    panelClassValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
     /** @internal */
-    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    leaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
     // ── Forwarded calendar config ──
     /** @internal */
-    minRangeLength = signal(null, ...(ngDevMode ? [{ debugName: "minRangeLength" }] : /* istanbul ignore next */ []));
+    minRangeLength = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minRangeLength" }] : /* istanbul ignore next */ []));
     /** @internal */
-    maxRangeLength = signal(null, ...(ngDevMode ? [{ debugName: "maxRangeLength" }] : /* istanbul ignore next */ []));
+    maxRangeLength = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRangeLength" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rangeBehavior = signal({}, ...(ngDevMode ? [{ debugName: "rangeBehavior" }] : /* istanbul ignore next */ []));
+    rangeBehavior = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeBehavior" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rangeClickBehavior = signal('restart', ...(ngDevMode ? [{ debugName: "rangeClickBehavior" }] : /* istanbul ignore next */ []));
+    rangeClickBehavior = signal('restart', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeClickBehavior" }] : /* istanbul ignore next */ []));
     /** @internal */
-    firstDayOfWeek = signal(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     /** @internal */
-    locale = signal(null, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    locale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dateClass = signal(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    dateClass = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
     /** @internal */
-    cellTemplate = signal(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    cellTemplate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
     // ── Callbacks set by the parent ──
     /** @internal */
-    onCalendarSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCalendarSelect" }] : /* istanbul ignore next */ []));
+    onCalendarSelect = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onCalendarSelect" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onPresetSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onPresetSelect" }] : /* istanbul ignore next */ []));
+    onPresetSelect = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onPresetSelect" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onStartTimeChange = signal(() => { }, ...(ngDevMode ? [{ debugName: "onStartTimeChange" }] : /* istanbul ignore next */ []));
+    onStartTimeChange = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onStartTimeChange" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onEndTimeChange = signal(() => { }, ...(ngDevMode ? [{ debugName: "onEndTimeChange" }] : /* istanbul ignore next */ []));
+    onEndTimeChange = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onEndTimeChange" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onViewChange = signal(() => { }, ...(ngDevMode ? [{ debugName: "onViewChange" }] : /* istanbul ignore next */ []));
+    onViewChange = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onViewChange" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onToday = signal(() => { }, ...(ngDevMode ? [{ debugName: "onToday" }] : /* istanbul ignore next */ []));
+    onToday = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onToday" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onClear = signal(() => { }, ...(ngDevMode ? [{ debugName: "onClear" }] : /* istanbul ignore next */ []));
+    onClear = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onClear" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onCancel = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCancel" }] : /* istanbul ignore next */ []));
+    onCancel = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onCancel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onApply = signal(() => { }, ...(ngDevMode ? [{ debugName: "onApply" }] : /* istanbul ignore next */ []));
+    onApply = signal(() => { }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    calendarAriaLabel = computed(() => this.numberOfMonths() === 2 ? 'Date range calendar (two months)' : 'Date range calendar', /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialStartAt" }] : /* istanbul ignore next */ []));
     // ── Template handlers ──
     /** @internal */
     presetKey(index, preset) {
@@ -204,7 +256,8 @@ class DateRangePickerOverlayComponent {
     }
     // ── Preset listbox keyboard ──
     /** @internal Roving tabindex pointer — index of the focusable preset option. */
-    activeOptionIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
+    activeOptionIndex = signal(0, /* @ts-ignore */
+    ...(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
@@ -289,8 +342,8 @@ class DateRangePickerOverlayComponent {
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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"
@@ -408,9 +461,9 @@ class DateRangePickerOverlayComponent {
         </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 });
+  `, 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: ["valueChange", "selectionStart", "rangePreview", "selectionComplete", "selectionRestart", "selectionCleared", "selectionLimitReached", "presetChange", "viewChange", "activeDateChange", "monthChange", "yearChange", "cellClick", "cellHover", "modeChange"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-date-range-picker-overlay',
@@ -674,25 +727,35 @@ class DateRangePickerComponent extends FormFieldControl {
     /** 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 */ []));
+    minDate = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    dateFilter = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    startView = input('day', /* @ts-ignore */
+    ...(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 */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    format = input(DEFAULT_DISPLAY_FORMAT, /* @ts-ignore */
+    ...(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 */ []));
+    rangeSeparator = input(' – ', /* @ts-ignore */
+    ...(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 */ []));
+    emptyStartLabel = input('Start date', /* @ts-ignore */
+    ...(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 */ []));
+    emptyEndLabel = input('End date', /* @ts-ignore */
+    ...(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 */ []));
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(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 });
@@ -700,70 +763,100 @@ class DateRangePickerComponent extends FormFieldControl {
     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 */ []));
+    size = input('md', /* @ts-ignore */
+    ...(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 */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(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 */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(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 */ []));
+    numberOfMonths = input(2, /* @ts-ignore */
+    ...(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 */ []));
+    presets = input([], /* @ts-ignore */
+    ...(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 */ []));
+    showClear = input(true, /* @ts-ignore */
+    ...(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 */ []));
+    minRangeLength = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    maxRangeLength = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    rangeBehavior = input({}, /* @ts-ignore */
+    ...(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 */ []));
+    rangeClickBehavior = input('restart', /* @ts-ignore */
+    ...(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 */ []));
+    firstDayOfWeek = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    locale = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    dateClass = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    cellTemplate = input(null, /* @ts-ignore */
+    ...(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 */ []));
+    showActions = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    showTime = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    timeFormat = input('24h', /* @ts-ignore */
+    ...(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 */ []));
+    showSeconds = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    hourStep = input(1, /* @ts-ignore */
+    ...(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 */ []));
+    minuteStep = input(1, /* @ts-ignore */
+    ...(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 */ []));
+    secondStep = input(1, /* @ts-ignore */
+    ...(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 */ []));
+    todayLabel = input('Today', /* @ts-ignore */
+    ...(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 */ []));
+    clearLabel = input('Clear', /* @ts-ignore */
+    ...(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 */ []));
+    cancelLabel = input('Cancel', /* @ts-ignore */
+    ...(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 */ []));
+    applyLabel = input('Apply', /* @ts-ignore */
+    ...(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 */ []));
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
-    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    scrollStrategy = input('reposition', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
     /** Pixel distance between trigger and overlay. Defaults to `4`. */
-    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    offset = input(4, /* @ts-ignore */
+    ...(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 */ []));
+    clearAriaLabel = input('Clear date range', /* @ts-ignore */
+    ...(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 */ []));
+    errorStateMatcher = input(undefined, /* @ts-ignore */
+    ...(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`. */
@@ -772,9 +865,11 @@ class DateRangePickerComponent extends FormFieldControl {
     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 */ []));
+    value = model(null, /* @ts-ignore */
+    ...(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 */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
     /** Fires after the overlay's enter animation completes. Payload is the trigger element. */
     opened = output();
@@ -794,7 +889,7 @@ class DateRangePickerComponent extends FormFieldControl {
     viewContainerRef = inject(ViewContainerRef);
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
-    formField = inject(FormFieldComponent, { optional: true });
+    formField = inject(TW_FORM_FIELD, { 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})`
@@ -804,7 +899,8 @@ class DateRangePickerComponent extends FormFieldControl {
     parentFormGroup = inject(FormGroupDirective, { optional: true });
     defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     // ── View refs ──
-    triggerRef = viewChild.required('trigger');
+    triggerRef = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
     // ── Identity ──
     uid = nextDateRangePickerId++;
     /** @internal */
@@ -813,24 +909,37 @@ class DateRangePickerComponent extends FormFieldControl {
     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 */ []));
+    internalValue = linkedSignal(() => this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    parseError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rangeError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    closingSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
+    lastValueBeforeOpen = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastValueBeforeOpen" }] : /* istanbul ignore next */ []));
+    pendingRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingRange" }] : /* istanbul ignore next */ []));
+    currentView = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
-    overlayInstanceSignal = signal(null, ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    overlayInstanceSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
     get overlayInstance() {
         return this.overlayInstanceSignal();
     }
@@ -839,14 +948,17 @@ class DateRangePickerComponent extends FormFieldControl {
     isDisabled = computed(() => {
         this._ngControlRev();
         return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
-    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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();
@@ -864,7 +976,8 @@ class DateRangePickerComponent extends FormFieldControl {
         if (this.showSeconds())
             base.second = '2-digit';
         return { dateTimeFormat: base };
-    }, ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
     /** @internal */
     startDisplay = computed(() => {
         const v = this.internalValue();
@@ -873,7 +986,8 @@ class DateRangePickerComponent extends FormFieldControl {
         return v.start !== null
             ? this.adapter.format(v.start, this.effectiveFormat())
             : this.emptyStartLabel();
-    }, ...(ngDevMode ? [{ debugName: "startDisplay" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startDisplay" }] : /* istanbul ignore next */ []));
     /** @internal */
     endDisplay = computed(() => {
         const v = this.internalValue();
@@ -882,14 +996,16 @@ class DateRangePickerComponent extends FormFieldControl {
         return v.end !== null
             ? this.adapter.format(v.end, this.effectiveFormat())
             : this.emptyEndLabel();
-    }, ...(ngDevMode ? [{ debugName: "endDisplay" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderDisplay" }] : /* istanbul ignore next */ []));
     /** @internal Accessible name composed from explicit aria-label plus the current range. */
     triggerAccessibleName = computed(() => {
         const label = this.ariaLabel();
@@ -904,7 +1020,8 @@ class DateRangePickerComponent extends FormFieldControl {
         if (label)
             return label;
         return undefined;
-    }, ...(ngDevMode ? [{ debugName: "triggerAccessibleName" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerAccessibleName" }] : /* istanbul ignore next */ []));
     /** @internal */
     activePresetId = computed(() => {
         const v = this.internalValue();
@@ -924,7 +1041,8 @@ class DateRangePickerComponent extends FormFieldControl {
                 return preset.id;
         }
         return undefined;
-    }, ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
     /** @internal */
     describedBy = computed(() => {
         const extra = this.describedByIdsSignal();
@@ -937,7 +1055,8 @@ class DateRangePickerComponent extends FormFieldControl {
             }
         }
         return merged.length ? merged.join(' ') : '';
-    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     // ── tv() output ──
     variantResult = computed(() => dateRangePickerVariants({
         size: this.size(),
@@ -947,28 +1066,39 @@ class DateRangePickerComponent extends FormFieldControl {
         errorState: this.errorState(),
         focused: this.focusedSignal(),
         color: this.color(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    triggerClasses = computed(() => this.variantResult().trigger(), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => this.variantResult().trigger(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    startTextClasses = computed(() => this.variantResult().startText(), ...(ngDevMode ? [{ debugName: "startTextClasses" }] : /* istanbul ignore next */ []));
+    startTextClasses = computed(() => this.variantResult().startText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startTextClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    separatorClasses = computed(() => this.variantResult().separator(), ...(ngDevMode ? [{ debugName: "separatorClasses" }] : /* istanbul ignore next */ []));
+    separatorClasses = computed(() => this.variantResult().separator(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    endTextClasses = computed(() => this.variantResult().endText(), ...(ngDevMode ? [{ debugName: "endTextClasses" }] : /* istanbul ignore next */ []));
+    endTextClasses = computed(() => this.variantResult().endText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endTextClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    placeholderClasses = computed(() => this.variantResult().placeholderText(), ...(ngDevMode ? [{ debugName: "placeholderClasses" }] : /* istanbul ignore next */ []));
+    placeholderClasses = computed(() => this.variantResult().placeholderText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    triggerIconClasses = computed(() => this.variantResult().triggerIcon(), ...(ngDevMode ? [{ debugName: "triggerIconClasses" }] : /* istanbul ignore next */ []));
+    triggerIconClasses = computed(() => this.variantResult().triggerIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerIconClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    triggerIconWrapperClasses = computed(() => this.variantResult().triggerIconWrapper(), ...(ngDevMode ? [{ debugName: "triggerIconWrapperClasses" }] : /* istanbul ignore next */ []));
+    triggerIconWrapperClasses = computed(() => this.variantResult().triggerIconWrapper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerIconWrapperClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
     // ── FormFieldControl impl ──
     /** @internal */
-    id = computed(() => this.idInput() ?? this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    id = computed(() => this.idInput() ?? this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** @internal */
     focused = this.focusedSignal.asReadonly();
     /** @internal */
@@ -981,7 +1111,8 @@ class DateRangePickerComponent extends FormFieldControl {
         if (this.requiredInput())
             return true;
         return !!this.ngControl?.control?.hasValidator(Validators.required);
-    }, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /** @internal */
     errorState = computed(() => {
         this._ngControlRev();
@@ -993,11 +1124,13 @@ class DateRangePickerComponent extends FormFieldControl {
         const form = this.parentFormGroup ??
             this.parentForm;
         return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
     /** @internal */
     controlType = 'date-range-picker';
     /** @internal */
-    userAriaDescribedBy = computed(() => this.userAriaDescribedByInput(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    userAriaDescribedBy = computed(() => this.userAriaDescribedByInput(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
     // ── Constructor ──
     constructor() {
         super();
@@ -1117,7 +1250,7 @@ class DateRangePickerComponent extends FormFieldControl {
                 return;
             const hasLabel = !!this.ariaLabel() ||
                 !!this.ariaLabelledby() ||
-                !!this.formField?.labelChild();
+                !!this.formField?.hasLabel();
             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>.');
             }
@@ -1649,8 +1782,8 @@ class DateRangePickerComponent extends FormFieldControl {
             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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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),
@@ -1660,6 +1793,17 @@ class DateRangePickerComponent extends FormFieldControl {
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true,
             },
+            // Angular v22 routes a CVA component's own NG_VALIDATORS through the
+            // value-accessor channel. The runtime `ngControl.valueAccessor = this`
+            // assignment below happens too late for that wiring, so `validate()` is
+            // never invoked and every calendar error code silently disappears. The
+            // static provider is what registers this component on the channel in time.
+            // Mirrors `calendar.ts`, which has always provided both tokens.
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateRangePickerComponent),
+                multi: true,
+            },
             PickerOverlayCoordinator,
         ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <button
@@ -1732,7 +1876,7 @@ class DateRangePickerComponent extends FormFieldControl {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-date-range-picker',
@@ -1747,6 +1891,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true,
                         },
+                        // Angular v22 routes a CVA component's own NG_VALIDATORS through the
+                        // value-accessor channel. The runtime `ngControl.valueAccessor = this`
+                        // assignment below happens too late for that wiring, so `validate()` is
+                        // never invoked and every calendar error code silently disappears. The
+                        // static provider is what registers this component on the channel in time.
+                        // Mirrors `calendar.ts`, which has always provided both tokens.
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateRangePickerComponent),
+                            multi: true,
+                        },
                         PickerOverlayCoordinator,
                     ],
                     template: `