@cdevhub/ngx-tw 0.2.0

package/types/cdevhub-ngx-tw-date-picker.d.ts

@@ -0,0 +1,317 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, TemplateRef, Signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwSize, TwColor, TimePickerFormat, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+export { TimePickerFormat } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
+import { DateFilterFn, CalendarViewState, DateClassFn, CalendarCell } from '@cdevhub/ngx-tw/calendar';
+export { CalendarViewState, DateClassFn, DateFilterFn } from '@cdevhub/ngx-tw/calendar';
+
+/** Visual style of the date-picker trigger. */
+type DatePickerVariant = 'default' | 'naked';
+/** Origin of a value change, used to distinguish user input from programmatic writes. */
+type DatePickerChangeSource = 'input' | 'calendar' | 'apply' | 'clear' | 'today' | 'programmatic';
+/** Reason the overlay closed. */
+type DatePickerCloseReason = 'select' | 'apply' | 'cancel' | 'escape' | 'backdrop' | 'programmatic';
+/** Emitted by `dateInput`. */
+interface DatePickerInputEvent<D> {
+    /** The raw string currently in the input (pre-parse). */
+    readonly rawText: string;
+    /** The parsed value if parsing succeeded and it's in range; otherwise `null`. */
+    readonly parsed: D | null;
+    /** The input element itself. */
+    readonly target: HTMLInputElement;
+}
+/** Emitted by `dateChange`. */
+interface DatePickerChangeEvent<D> {
+    /** The committed value (`null` when cleared). */
+    readonly value: D | null;
+    /** The value before this change. */
+    readonly previousValue: D | null;
+    /** What triggered the change. */
+    readonly source: DatePickerChangeSource;
+}
+/** Emitted by `opened` and `closed`. */
+interface DatePickerOpenedEvent {
+    /** The trigger (input) element. */
+    readonly trigger: HTMLElement;
+}
+/** A quick-select preset rendered above the calendar in the overlay. Mirrors `DateRangePreset`. */
+interface DatePickerPreset<D = Date> {
+    /** Label shown on the preset button. */
+    readonly label: string;
+    /** Factory returning the date to apply when this preset is chosen. Called fresh each click so "today"-relative presets stay current. */
+    readonly date: () => D;
+    /** Optional identifier — surfaced in `presetSelected` and used to detect the active preset for visual state. */
+    readonly id?: string;
+}
+/** Bundle of time-of-day configuration forwarded to the embedded `<tw-time-picker>`. Passing a non-null object turns the time-picker on and forwards each field; pass `{}` to enable with all defaults. */
+interface DatePickerTimeConfig<D = Date> {
+    /** Clock format. Defaults to `'24h'`. */
+    readonly format?: TimePickerFormat;
+    /** Whether to expose a seconds field. Defaults to `false`. */
+    readonly showSeconds?: boolean;
+    /** Hour step. Defaults to `1`. */
+    readonly hourStep?: number;
+    /** Minute step. Defaults to `1`. */
+    readonly minuteStep?: number;
+    /** Second step. Defaults to `1`. */
+    readonly secondStep?: number;
+    /** Earliest accepted time-of-day. Values earlier than this set `errorState`. */
+    readonly minTime?: D | null;
+    /** Latest accepted time-of-day. Values later than this set `errorState`. */
+    readonly maxTime?: D | null;
+}
+
+/**
+ * ARIA date-picker dialog. Combines a typable text input with a popover
+ * calendar. 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.
+ */
+declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implements ControlValueAccessor, OnInit {
+    /** Id on the date-picker's input element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
+    readonly idInput: _angular_core.InputSignal<string | undefined>;
+    /** Minimum selectable date. Typed input earlier than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    readonly minDate: _angular_core.InputSignal<D | null>;
+    /** Maximum selectable date. Typed input later than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    readonly maxDate: _angular_core.InputSignal<D | null>;
+    /** Per-date predicate — return `false` to disable. Applied in both the calendar and the text-parse path. */
+    readonly dateFilter: _angular_core.InputSignal<DateFilterFn<D> | null>;
+    /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
+    readonly startView: _angular_core.InputSignal<CalendarViewState>;
+    /** Date to focus when the calendar opens with no selection. Falls back to today. */
+    readonly startAt: _angular_core.InputSignal<D | null>;
+    /** Display format passed to `DateAdapter.format()`. With the default adapter, accepts `{ dateTimeFormat: Intl.DateTimeFormatOptions }`. When `withTime` is true and this is left at the default, hour/minute (and optional seconds) are folded in automatically. */
+    readonly format: _angular_core.InputSignal<unknown>;
+    /** Optional format hint passed to `DateAdapter.parse()`. Ignored by the native adapter. */
+    readonly parseFormat: _angular_core.InputSignal<unknown>;
+    /** Placeholder text shown in the input when no value is entered. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** When true, the input is disabled, the trigger cannot open the calendar, and `aria-disabled="true"` is set. Defaults to `false`. */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true, exposes `aria-required="true"`. Validators.required on a bound NgControl is also honoured. Defaults to `false`. */
+    readonly requiredInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true, blocks typing but still allows picking via the calendar trigger. Defaults to `false`. */
+    readonly readonlyInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Trigger padding, font size, and calendar cell density. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Semantic color for focused border, calendar selection ring, and today marker. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Visual style of the trigger. `'default'` draws its own border; `'naked'` strips chrome. Auto-resolves to `'naked'` when inside `<tw-form-field>`. */
+    readonly variant: _angular_core.InputSignal<DatePickerVariant | undefined>;
+    /** Whether to show a clear-button affordance inside the trigger when a value is set. Defaults to `true`. */
+    readonly showClear: _angular_core.InputSignal<boolean>;
+    /** When true, renders a `Today / Clear / Cancel / Apply` action bar at the bottom of the overlay. Defaults to `false`. */
+    readonly showActions: _angular_core.InputSignal<boolean>;
+    /** Label for the `Today` action in the overlay's action bar. */
+    readonly todayLabel: _angular_core.InputSignal<string>;
+    /** Label for the `Clear` action in the overlay's action bar. */
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    /** Label for the `Cancel` action in the overlay's action bar. */
+    readonly cancelLabel: _angular_core.InputSignal<string>;
+    /** Label for the `Apply` action in the overlay's action bar. */
+    readonly applyLabel: _angular_core.InputSignal<string>;
+    /** When true, focusing the text input opens the overlay. Defaults to `false`. */
+    readonly openOnFocus: _angular_core.InputSignal<boolean>;
+    /** Extra class(es) applied to the overlay panel element. */
+    readonly panelClass: _angular_core.InputSignal<string | readonly string[]>;
+    /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
+    readonly scrollStrategy: _angular_core.InputSignal<"reposition" | "close" | "block">;
+    /** Pixel distance between trigger and overlay. Defaults to `4`. */
+    readonly offset: _angular_core.InputSignal<number>;
+    /** Accessible name for the calendar trigger button. Defaults to `'Open calendar'`. */
+    readonly triggerAriaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Bundles the time-of-day configuration. Passing a non-null object turns on the embedded `<tw-time-picker>` and forwards each field.
+     *
+     * Defaults to `null` (no time field). Pass an empty object `{}` to enable the time picker with all defaults.
+     */
+    readonly timeConfig: _angular_core.InputSignal<DatePickerTimeConfig<D> | null>;
+    /** Per-instance locale override. Forwarded to the embedded calendar and the underlying `DateAdapter` for parse/format. Falls back to Angular `LOCALE_ID` when `null`. */
+    readonly locale: _angular_core.InputSignal<string | null>;
+    /** Function producing per-cell CSS classes, forwarded to the embedded calendar. Useful for visually marking special dates (holidays, billing cycles). */
+    readonly dateClass: _angular_core.InputSignal<DateClassFn<D> | null>;
+    /** Optional cell-content template, forwarded to the embedded calendar. Use to customize cell visuals beyond `dateClass`. */
+    readonly cellTemplate: _angular_core.InputSignal<TemplateRef<{
+        $implicit: CalendarCell<D>;
+    }> | null>;
+    /** Optional quick-select presets rendered as a vertical list before the calendar. Each preset provides a `label` and a `date` factory. An empty array hides the preset panel. */
+    readonly presets: _angular_core.InputSignal<readonly DatePickerPreset<D>[]>;
+    /** Per-instance override of the `ErrorStateMatcher`. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Accessible name for the input. Required when no visible label is supplied. Alias: `aria-label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that labels the input. Alias: `aria-labelledby`. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** Consumer-supplied `aria-describedby` ids. The form-field preserves these when merging hint/error ids. Alias: `aria-describedby`. */
+    readonly userAriaDescribedByInput: _angular_core.InputSignal<string | undefined>;
+    /** Two-way bound selected date. `null` when no selection. Setting programmatically updates the display; does NOT trigger `onChange`. */
+    readonly value: _angular_core.ModelSignal<D | null>;
+    /** Two-way bound open state of the calendar overlay. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Fires after the overlay's enter animation completes. Payload is the trigger element. */
+    readonly opened: _angular_core.OutputEmitterRef<DatePickerOpenedEvent>;
+    /** Fires after the overlay's leave animation completes. Payload is the reason it closed. */
+    readonly closed: _angular_core.OutputEmitterRef<DatePickerCloseReason>;
+    /** Fires on every keystroke in the text input (before parsing). Does NOT mean the value has committed. */
+    readonly dateInput: _angular_core.OutputEmitterRef<DatePickerInputEvent<D>>;
+    /** Fires after a commit — from parsing typed input or picking in the calendar. */
+    readonly dateChange: _angular_core.OutputEmitterRef<DatePickerChangeEvent<D>>;
+    /** Fires when the user picks one of the entries from `presets`. Payload is the preset that fired. */
+    readonly presetSelected: _angular_core.OutputEmitterRef<DatePickerPreset<D>>;
+    private readonly adapter;
+    private readonly overlayService;
+    private readonly focusMonitor;
+    private readonly liveAnnouncer;
+    private readonly coordinator;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly formField;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private readonly inputRef;
+    private readonly triggerRef;
+    /** @internal Whether a `[slot=trigger]` is projected. Detected post-mount via DOM query so we can drop the default chrome. */
+    readonly hasCustomTrigger: _angular_core.WritableSignal<boolean>;
+    private readonly uid;
+    /** @internal */
+    readonly hostId: string;
+    /** @internal */
+    readonly dialogId: string;
+    /** @internal Decouples programmatic writes from user commits so `writeValue` doesn't re-trigger parent effects. */
+    readonly internalValue: _angular_core.WritableSignal<D | null>;
+    /** @internal */
+    readonly rawInputText: _angular_core.WritableSignal<string>;
+    /** @internal */
+    readonly parseError: _angular_core.WritableSignal<boolean>;
+    /** @internal */
+    readonly rangeError: _angular_core.WritableSignal<boolean>;
+    /** @internal */
+    readonly focusedSignal: _angular_core.WritableSignal<boolean>;
+    private readonly cvaDisabled;
+    private readonly describedByIdsSignal;
+    private readonly closingSignal;
+    private readonly lastValueBeforeOpen;
+    private readonly pendingCalendarValue;
+    private readonly activePresetIdSignal;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    private onChange;
+    private onTouched;
+    private readonly overlayInstanceSignal;
+    private returnFocusTo;
+    private get overlayInstance();
+    /** @internal */
+    readonly isDisabled: Signal<boolean>;
+    /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
+    readonly resolvedVariant: Signal<DatePickerVariant>;
+    /** @internal */
+    readonly isEmpty: Signal<boolean>;
+    /** Whether the time picker is rendered inside the overlay. True iff `timeConfig` is non-null. */
+    readonly withTime: Signal<boolean>;
+    /** @internal Effective time-of-day configuration — merges `timeConfig` over the documented per-field defaults. */
+    readonly effectiveTimeConfig: Signal<Required<Omit<DatePickerTimeConfig<D>, "minTime" | "maxTime">> & {
+        minTime: D | null;
+        maxTime: D | null;
+    }>;
+    /** @internal Effective display format — folds hour/minute (and optional seconds) into the default when `withTime` is on and the user hasn't overridden `format`. */
+    readonly effectiveFormat: Signal<unknown>;
+    /** @internal */
+    readonly describedBy: Signal<string>;
+    private readonly variantResult;
+    /** @internal */
+    readonly rootClasses: Signal<string>;
+    /** @internal */
+    readonly inputClasses: Signal<string>;
+    /** @internal */
+    readonly triggerButtonClasses: Signal<string>;
+    /** @internal */
+    readonly triggerIconClasses: Signal<string>;
+    /** @internal */
+    readonly clearButtonClasses: Signal<string>;
+    /** @internal */
+    readonly id: Signal<string>;
+    /** @internal */
+    readonly focused: Signal<boolean>;
+    /** @internal */
+    readonly empty: Signal<boolean>;
+    /** @internal */
+    readonly disabled: Signal<boolean>;
+    /** @internal */
+    readonly required: Signal<boolean>;
+    /** @internal */
+    readonly errorState: Signal<boolean>;
+    /** @internal */
+    readonly controlType = "date-picker";
+    /** @internal */
+    readonly userAriaDescribedBy: Signal<string | undefined>;
+    constructor();
+    ngOnInit(): void;
+    /** Opens the overlay. No-op when disabled or already open. */
+    openPicker(): void;
+    /** Closes the overlay. No-op when already closed. */
+    closePicker(): void;
+    /** Toggles the overlay's open state. */
+    toggle(): void;
+    /** Clears the current value and emits `dateChange` with `source: 'clear'`. */
+    clear(): void;
+    /** @internal */
+    onInputEvent(event: Event): void;
+    /** @internal */
+    onInputBlur(): void;
+    /** @internal */
+    onInputFocus(): void;
+    /** @internal */
+    onInputKeydown(event: KeyboardEvent): void;
+    /** @internal */
+    onClearClick(event: MouseEvent): void;
+    /** @internal */
+    onTriggerClick(): void;
+    /** @internal */
+    onTriggerKeydown(event: KeyboardEvent): void;
+    /** @internal */
+    onCustomTriggerClick(event: MouseEvent): void;
+    /** @internal */
+    onCustomTriggerKeydown(event: KeyboardEvent): void;
+    private commitFromInput;
+    private commit;
+    private isInRange;
+    private isTimeInRange;
+    private openOverlay;
+    private closeOverlay;
+    private onCalendarSelection;
+    /** @internal Called by the overlay when the embedded time-picker reports a new value. */
+    private onTimeInput;
+    private onTodayClicked;
+    /** Copies the time-of-day from the current pending/selected value onto `picked`. */
+    private carryTimeOfDay;
+    private onClearAction;
+    private onCancelAction;
+    private onApplyAction;
+    private onPresetClick;
+    private resolveDialogAriaLabel;
+    private resolvePanelClass;
+    /** Picks the best element to receive focus on overlay close. Prefers the explicit `returnFocusTo` source, then the trigger button, the projected custom trigger, and finally the input. */
+    private resolveFocusTarget;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: D | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** @internal */
+    setDescribedByIds(ids: string[]): void;
+    /** @internal */
+    onContainerClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent<any>, "tw-date-picker", never, { "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "parseFormat": { "alias": "parseFormat"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "requiredInput": { "alias": "required"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "scrollStrategy"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": false; "isSignal": true; }; "timeConfig": { "alias": "timeConfig"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "userAriaDescribedByInput": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "open": "openChange"; "opened": "opened"; "closed": "closed"; "dateInput": "dateInput"; "dateChange": "dateChange"; "presetSelected": "presetSelected"; }, never, ["[slot=trigger]", "[slot=trigger-icon]"], true, never>;
+}
+
+export { DatePickerComponent };
+export type { DatePickerChangeEvent, DatePickerChangeSource, DatePickerCloseReason, DatePickerInputEvent, DatePickerOpenedEvent, DatePickerPreset, DatePickerTimeConfig, DatePickerVariant };

package/types/cdevhub-ngx-tw-date-range-picker.d.ts

@@ -0,0 +1,313 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, TemplateRef, Signal } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { TwSize, TwColor, RangeBehaviorConfig, TimePickerFormat, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
+import { TwDateRange, DateFilterFn, CalendarViewState, RangeClickBehavior, DateClassFn, CalendarCell } from '@cdevhub/ngx-tw/calendar';
+
+/** Visual style of the date-range-picker trigger. */
+type DateRangePickerVariant = 'default' | 'naked';
+/** How many months the overlay displays side-by-side. */
+type DateRangePickerMonths = 1 | 2;
+/** Origin of a value change, used to distinguish user input from programmatic writes. */
+type DateRangePickerChangeSource = 'calendar' | 'preset' | 'time' | 'apply' | 'clear' | 'programmatic';
+/** Reason the overlay closed. */
+type DateRangePickerCloseReason = 'select' | 'apply' | 'cancel' | 'escape' | 'backdrop' | 'programmatic';
+/** Emitted by `rangeChange` after a committed value update. */
+interface DateRangePickerChangeEvent<D> {
+    /** The committed range (`null` when cleared). */
+    readonly value: TwDateRange<D> | null;
+    /** The range before this change. */
+    readonly previousValue: TwDateRange<D> | null;
+    /** What triggered the change. */
+    readonly source: DateRangePickerChangeSource;
+}
+/** Emitted by `opened`. */
+interface DateRangePickerOpenedEvent {
+    /** The trigger element. */
+    readonly trigger: HTMLElement;
+}
+/** A quick-select preset rendered in the overlay's preset list. */
+interface DateRangePreset<D = Date> {
+    /** Label shown on the preset button. */
+    readonly label: string;
+    /** Factory returning the range to apply when this preset is chosen. Called fresh each click so "today"-relative presets stay current. */
+    readonly range: () => TwDateRange<D>;
+    /** Optional identifier — surfaced in `presetSelected` and used to detect the active preset for visual state. */
+    readonly id?: string;
+}
+/**
+ * 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.
+ */
+declare class DateRangePickerComponent<D = Date> extends FormFieldControl<TwDateRange<D>> implements ControlValueAccessor, Validator, OnInit {
+    /** Id on the trigger element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
+    readonly idInput: _angular_core.InputSignal<string | undefined>;
+    /** Earliest selectable date for either endpoint. Presets and calendar cells earlier than this are rejected or disabled. Defaults to `null`. */
+    readonly minDate: _angular_core.InputSignal<D | null>;
+    /** Latest selectable date for either endpoint. Presets and calendar cells later than this are rejected or disabled. Defaults to `null`. */
+    readonly maxDate: _angular_core.InputSignal<D | null>;
+    /** Per-date predicate — return `false` to disable. Applied in both calendars. Presets that fall on a filtered date are skipped. */
+    readonly dateFilter: _angular_core.InputSignal<DateFilterFn<D> | null>;
+    /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
+    readonly startView: _angular_core.InputSignal<CalendarViewState>;
+    /** Date the left calendar focuses on when opened with no value. Falls back to today. Ignored when a value is already set. */
+    readonly startAt: _angular_core.InputSignal<D | null>;
+    /** 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. */
+    readonly format: _angular_core.InputSignal<unknown>;
+    /** Separator rendered between the two formatted endpoints in the trigger. Defaults to `" – "`. */
+    readonly rangeSeparator: _angular_core.InputSignal<string>;
+    /** Placeholder text shown in the trigger for an empty `start` endpoint. */
+    readonly emptyStartLabel: _angular_core.InputSignal<string>;
+    /** Placeholder text shown in the trigger for an empty `end` endpoint. */
+    readonly emptyEndLabel: _angular_core.InputSignal<string>;
+    /** When set, overrides the composed `${emptyStartLabel}${rangeSeparator}${emptyEndLabel}` placeholder with a single string. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** When true, the trigger cannot open the overlay and `aria-disabled="true"` is set. Defaults to `false`. */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true, exposes `aria-required="true"`. `Validators.required` on a bound `NgControl` is also honoured. Defaults to `false`. */
+    readonly requiredInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Trigger padding, font size, and calendar cell density. Uses the shared `TwSize` scale. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Semantic color for focused border, calendar range fill, and preset active state. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** 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'`. */
+    readonly variant: _angular_core.InputSignal<DateRangePickerVariant | undefined>;
+    /** How many months the overlay shows side-by-side. `2` is the standard range-picker layout; use `1` for compact contexts. Defaults to `2`. */
+    readonly numberOfMonths: _angular_core.InputSignal<DateRangePickerMonths>;
+    /** 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. */
+    readonly presets: _angular_core.InputSignal<readonly DateRangePreset<D>[]>;
+    /** Whether to show a clear-button affordance inside the trigger when a value is set. Defaults to `true`. */
+    readonly showClear: _angular_core.InputSignal<boolean>;
+    /** 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`. */
+    readonly minRangeLength: _angular_core.InputSignal<number | null>;
+    /** 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`. */
+    readonly maxRangeLength: _angular_core.InputSignal<number | null>;
+    /**
+     * 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 }`.
+     */
+    readonly rangeBehavior: _angular_core.InputSignal<Partial<RangeBehaviorConfig>>;
+    /** 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. */
+    readonly rangeClickBehavior: _angular_core.InputSignal<RangeClickBehavior>;
+    /** Override first day of week (0=Sun, 1=Mon) on the embedded calendar. Falls back to the adapter's default. */
+    readonly firstDayOfWeek: _angular_core.InputSignal<number | null>;
+    /** 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`. */
+    readonly locale: _angular_core.InputSignal<string | null>;
+    /** Function producing per-cell CSS classes on the embedded calendar. */
+    readonly dateClass: _angular_core.InputSignal<DateClassFn<D> | null>;
+    /** Optional cell-content template, forwarded to the embedded calendar. Use to customize cell visuals beyond `dateClass`. */
+    readonly cellTemplate: _angular_core.InputSignal<TemplateRef<{
+        $implicit: CalendarCell<D>;
+    }> | null>;
+    /** 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`. */
+    readonly showActions: _angular_core.InputSignal<boolean>;
+    /** 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`. */
+    readonly showTime: _angular_core.InputSignal<boolean>;
+    /** Format of the embedded time-pickers. `'24h'` renders 00–23; `'12h'` adds an AM/PM toggle. Defaults to `'24h'`. */
+    readonly timeFormat: _angular_core.InputSignal<TimePickerFormat>;
+    /** Whether the embedded time-pickers expose a seconds field. Defaults to `false`. */
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    /** Step for the embedded time-pickers' hour fields. Defaults to `1`. */
+    readonly hourStep: _angular_core.InputSignal<number>;
+    /** Step for the embedded time-pickers' minute fields. Defaults to `1`. */
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    /** Step for the embedded time-pickers' second fields. Defaults to `1`. */
+    readonly secondStep: _angular_core.InputSignal<number>;
+    /** Label for the `Today` action in the overlay's action bar. */
+    readonly todayLabel: _angular_core.InputSignal<string>;
+    /** Label for the `Clear` action in the overlay's action bar. */
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    /** Label for the `Cancel` action in the overlay's action bar. */
+    readonly cancelLabel: _angular_core.InputSignal<string>;
+    /** Label for the `Apply` action in the overlay's action bar. */
+    readonly applyLabel: _angular_core.InputSignal<string>;
+    /** Extra class(es) applied to the overlay panel element. `twMerge` resolves conflicts with internal classes. */
+    readonly panelClass: _angular_core.InputSignal<string | readonly string[]>;
+    /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
+    readonly scrollStrategy: _angular_core.InputSignal<"reposition" | "close" | "block">;
+    /** Pixel distance between trigger and overlay. Defaults to `4`. */
+    readonly offset: _angular_core.InputSignal<number>;
+    /** Accessible label for the clear button. Defaults to `'Clear date range'`. */
+    readonly clearAriaLabel: _angular_core.InputSignal<string>;
+    /** Per-instance override of the `ErrorStateMatcher`. When omitted, uses the injected `TW_ERROR_STATE_MATCHER`. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Accessible name for the trigger. Required when no visible label is supplied via `tw-form-field` or an external `aria-labelledby`. Alias: `aria-label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that labels the trigger. Alias: `aria-labelledby`. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** Consumer-supplied `aria-describedby` ids. The form-field preserves these when merging hint/error ids. Alias: `aria-describedby`. */
+    readonly userAriaDescribedByInput: _angular_core.InputSignal<string | undefined>;
+    /** Two-way bound selected range. `null` when no selection. Setting programmatically updates the trigger display and the calendar selection; it does NOT trigger `onChange`. */
+    readonly value: _angular_core.ModelSignal<TwDateRange<D> | null>;
+    /** Two-way bound open state of the overlay. Setting to `true` opens; setting to `false` closes. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Fires after the overlay's enter animation completes. Payload is the trigger element. */
+    readonly opened: _angular_core.OutputEmitterRef<DateRangePickerOpenedEvent>;
+    /** Fires after the overlay's leave animation completes. Payload is the reason it closed. */
+    readonly closed: _angular_core.OutputEmitterRef<DateRangePickerCloseReason>;
+    /** Fires after a commit — either from completing a range in the calendar, picking a preset, or applying via the action bar. */
+    readonly rangeChange: _angular_core.OutputEmitterRef<DateRangePickerChangeEvent<D>>;
+    /** Fires when the user picks a preset from the list. Payload is the preset descriptor. Fires in addition to `rangeChange`. */
+    readonly presetSelected: _angular_core.OutputEmitterRef<DateRangePreset<D>>;
+    private readonly adapter;
+    private readonly overlayService;
+    private readonly focusMonitor;
+    private readonly liveAnnouncer;
+    private readonly coordinator;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly formField;
+    private ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private readonly triggerRef;
+    private readonly uid;
+    /** @internal */
+    readonly hostId: string;
+    /** @internal */
+    readonly dialogId: string;
+    /** @internal Decouples programmatic writes from user commits. */
+    readonly internalValue: _angular_core.WritableSignal<TwDateRange<D> | null>;
+    /** @internal */
+    readonly parseError: _angular_core.WritableSignal<boolean>;
+    /** @internal */
+    readonly rangeError: _angular_core.WritableSignal<boolean>;
+    /** @internal */
+    readonly focusedSignal: _angular_core.WritableSignal<boolean>;
+    private readonly cvaDisabled;
+    private readonly describedByIdsSignal;
+    private readonly closingSignal;
+    private readonly lastValueBeforeOpen;
+    private readonly pendingRange;
+    private readonly currentView;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    private onChange;
+    private onTouched;
+    private readonly overlayInstanceSignal;
+    private get overlayInstance();
+    /** @internal */
+    readonly isDisabled: Signal<boolean>;
+    /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
+    readonly resolvedVariant: Signal<DateRangePickerVariant>;
+    /** @internal */
+    readonly isEmpty: Signal<boolean>;
+    /** @internal Effective display format — folds hour/minute (and optional seconds) into the default when `showTime` is on and the user hasn't overridden `format`. */
+    readonly effectiveFormat: Signal<unknown>;
+    /** @internal */
+    readonly startDisplay: Signal<string>;
+    /** @internal */
+    readonly endDisplay: Signal<string>;
+    /** @internal */
+    readonly placeholderDisplay: Signal<string>;
+    /** @internal Accessible name composed from explicit aria-label plus the current range. */
+    readonly triggerAccessibleName: Signal<string | undefined>;
+    /** @internal */
+    readonly activePresetId: Signal<string | undefined>;
+    /** @internal */
+    readonly describedBy: Signal<string>;
+    private readonly variantResult;
+    /** @internal */
+    readonly rootClasses: Signal<string>;
+    /** @internal */
+    readonly triggerClasses: Signal<string>;
+    /** @internal */
+    readonly startTextClasses: Signal<string>;
+    /** @internal */
+    readonly separatorClasses: Signal<string>;
+    /** @internal */
+    readonly endTextClasses: Signal<string>;
+    /** @internal */
+    readonly placeholderClasses: Signal<string>;
+    /** @internal */
+    readonly triggerIconClasses: Signal<string>;
+    /** @internal */
+    readonly triggerIconWrapperClasses: Signal<string>;
+    /** @internal */
+    readonly clearButtonClasses: Signal<string>;
+    /** @internal */
+    readonly id: Signal<string>;
+    /** @internal */
+    readonly focused: Signal<boolean>;
+    /** @internal */
+    readonly empty: Signal<boolean>;
+    /** @internal */
+    readonly disabled: Signal<boolean>;
+    /** @internal */
+    readonly required: Signal<boolean>;
+    /** @internal */
+    readonly errorState: Signal<boolean>;
+    /** @internal */
+    readonly controlType = "date-range-picker";
+    /** @internal */
+    readonly userAriaDescribedBy: Signal<string | undefined>;
+    constructor();
+    ngOnInit(): void;
+    /** Opens the overlay. No-op when disabled or already open. */
+    openPicker(): void;
+    /** Closes the overlay. No-op when already closed. */
+    closePicker(): void;
+    /** Toggles the overlay's open state. */
+    toggle(): void;
+    /** Clears the current range and emits `rangeChange` with `source: 'clear'`. */
+    clear(): void;
+    /** @internal */
+    onTriggerClick(): void;
+    /** @internal */
+    onTriggerKeydown(event: KeyboardEvent): void;
+    /** @internal */
+    onClearClick(event: MouseEvent): void;
+    private commit;
+    private announce;
+    private normalizeRange;
+    private clampRange;
+    private isRangeValid;
+    private rangeLengthInDays;
+    private openOverlay;
+    private closeOverlay;
+    /** @internal */
+    private onCalendarSelection;
+    private onPresetClick;
+    private onStartTimeChange;
+    private onEndTimeChange;
+    private onViewChanged;
+    private onTodayClicked;
+    private onClearAction;
+    private onCancelAction;
+    private onApplyAction;
+    private resolveDialogAriaLabel;
+    private resolvePanelClass;
+    writeValue(value: unknown): void;
+    private coerceRange;
+    private coerceEndpoint;
+    registerOnChange(fn: (value: TwDateRange<D> | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private validatorOnChange;
+    /** @internal */
+    validate(control: AbstractControl): ValidationErrors | null;
+    /** @internal */
+    registerOnValidatorChange(fn: () => void): void;
+    /** @internal */
+    setDescribedByIds(ids: string[]): void;
+    /** @internal */
+    onContainerClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateRangePickerComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateRangePickerComponent<any>, "tw-date-range-picker", never, { "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "emptyStartLabel": { "alias": "emptyStartLabel"; "required": false; "isSignal": true; }; "emptyEndLabel": { "alias": "emptyEndLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "requiredInput": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "minRangeLength": { "alias": "minRangeLength"; "required": false; "isSignal": true; }; "maxRangeLength": { "alias": "maxRangeLength"; "required": false; "isSignal": true; }; "rangeBehavior": { "alias": "rangeBehavior"; "required": false; "isSignal": true; }; "rangeClickBehavior": { "alias": "rangeClickBehavior"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "scrollStrategy"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "userAriaDescribedByInput": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "open": "openChange"; "opened": "opened"; "closed": "closed"; "rangeChange": "rangeChange"; "presetSelected": "presetSelected"; }, never, ["[slot=trigger-icon]"], true, never>;
+}
+
+export { DateRangePickerComponent };
+export type { DateRangePickerChangeEvent, DateRangePickerChangeSource, DateRangePickerCloseReason, DateRangePickerMonths, DateRangePickerOpenedEvent, DateRangePickerVariant, DateRangePreset };