ngx-com 0.0.21 → 0.1.0

package/types/ngx-com-components-datepicker.d.ts

@@ -0,0 +1,623 @@
+import { VariantProps } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { OnDestroy, ModelSignal, InputSignal, OutputEmitterRef, WritableSignal, Signal } from '@angular/core';
+import { ControlValueAccessor, Validator, NgControl, ValidationErrors } from '@angular/forms';
+import { IconSize } from 'ngx-com/components/icon';
+import { DateFilterFn, CalendarView, DateRange } from 'ngx-com/components/calendar';
+import { FormFieldControl, ErrorStateMatcher, FormFieldAppearance } from 'ngx-com/components/form-field';
+import { ComTimeValue } from 'ngx-com/components/timepicker';
+
+/**
+ * Types and interfaces for DatePicker and DateRangePicker components.
+ */
+/** Date format preset names */
+type DateFormatPreset = 'short' | 'medium' | 'long' | 'full' | 'time' | 'timeWithSeconds' | 'dateTimeShort' | 'dateTimeMedium' | 'dateTimeLong';
+/** Panel width configuration */
+type DatepickerPanelWidth = 'auto' | 'trigger' | `${number}px` | `${number}rem`;
+/** Size variants for datepicker components */
+type DatepickerSize = 'sm' | 'default' | 'lg';
+/** Visual variant for datepicker trigger */
+type DatepickerVariant = 'default' | 'outline' | 'ghost' | 'filled' | 'naked';
+/** Validation state for datepicker */
+type DatepickerState = 'default' | 'error' | 'success';
+/** Configuration for datepicker footer actions */
+interface DatepickerFooterConfig {
+    /** Show today button */
+    showToday?: boolean;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Custom today button label */
+    todayLabel?: string;
+    /** Custom clear button label */
+    clearLabel?: string;
+}
+/** Value type for DateRangePicker */
+interface DateRangeValue<D> {
+    /** Start date of the range */
+    start: D | null;
+    /** End date of the range */
+    end: D | null;
+}
+/** Creates a DateRangeValue */
+declare function createDateRangeValue<D>(start?: D | null, end?: D | null): DateRangeValue<D>;
+declare function generateDatepickerId(): string;
+
+/**
+ * CVA variants for the datepicker trigger input.
+ * Uses semantic theme tokens for consistent cross-theme styling.
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-input-placeholder`, `--color-ring`, `--color-muted`, `--color-muted-hover`,
+ *         `--color-warn`, `--color-success`, `--color-primary`, `--color-border`,
+ *         `--color-disabled`, `--color-disabled-foreground`, `--radius-input`
+ */
+declare const datepickerTriggerVariants: (props?: {
+    variant?: DatepickerVariant;
+    size?: DatepickerSize;
+    state?: DatepickerState;
+    open?: boolean;
+}) => string;
+type DatepickerTriggerVariants = VariantProps<typeof datepickerTriggerVariants>;
+/**
+ * CVA variants for the disabled state of datepicker trigger.
+ *
+ * @tokens `--color-disabled`, `--color-disabled-foreground`
+ */
+declare const datepickerDisabledVariants: () => string;
+type DatepickerDisabledVariants = VariantProps<typeof datepickerDisabledVariants>;
+/**
+ * CVA variants for the datepicker input field.
+ *
+ * @tokens `--color-input-foreground`, `--color-input-placeholder`
+ */
+declare const datepickerInputVariants: (props?: {
+    size?: DatepickerSize;
+}) => string;
+type DatepickerInputVariants = VariantProps<typeof datepickerInputVariants>;
+/**
+ * CVA variants for the calendar icon button.
+ *
+ * @tokens `--color-ring`, `--color-muted-foreground`, `--radius-interactive-sm`
+ */
+declare const datepickerIconVariants: (props?: {
+    size?: DatepickerSize;
+}) => string;
+type DatepickerIconVariants = VariantProps<typeof datepickerIconVariants>;
+/**
+ * CVA variants for the clear button.
+ *
+ * @tokens `--color-ring`, `--color-muted-foreground`, `--color-foreground`, `--radius-interactive-sm`
+ */
+declare const datepickerClearVariants: (props?: {
+    size?: DatepickerSize;
+}) => string;
+type DatepickerClearVariants = VariantProps<typeof datepickerClearVariants>;
+/**
+ * CVA variants for the datepicker panel (overlay).
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`, `--radius-overlay`
+ */
+declare const datepickerPanelVariants: (props?: {
+    size?: DatepickerSize;
+}) => string;
+type DatepickerPanelVariants = VariantProps<typeof datepickerPanelVariants>;
+/**
+ * CVA variants for the footer section of the datepicker panel.
+ *
+ * @tokens `--color-border-subtle`
+ */
+declare const datepickerFooterVariants: (props?: {
+    size?: DatepickerSize;
+}) => string;
+type DatepickerFooterVariants = VariantProps<typeof datepickerFooterVariants>;
+/**
+ * CVA variants for the footer buttons.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`, `--radius-control-sm`
+ */
+declare const datepickerFooterButtonVariants: (props?: {
+    size?: DatepickerSize;
+    variant?: 'primary' | 'secondary';
+}) => string;
+type DatepickerFooterButtonVariants = VariantProps<typeof datepickerFooterButtonVariants>;
+/**
+ * CVA variants for the range separator.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const datepickerRangeSeparatorVariants: (props?: {
+    size?: DatepickerSize;
+}) => string;
+type DatepickerRangeSeparatorVariants = VariantProps<typeof datepickerRangeSeparatorVariants>;
+
+/**
+ * Single date picker component with calendar popup.
+ * Implements ControlValueAccessor for Reactive Forms and Template-driven Forms.
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-input-placeholder`, `--color-ring`, `--color-muted`, `--color-muted-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`,
+ *         `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-warn`, `--color-success`, `--color-disabled`, `--color-disabled-foreground`
+ *
+ * @example
+ * ```html
+ * <com-datepicker
+ *   formControlName="birthDate"
+ *   placeholder="Select date..."
+ *   [min]="minDate"
+ *   [max]="maxDate"
+ *   [showTodayButton]="true"
+ *   [showClearButton]="true"
+ * />
+ * ```
+ */
+declare class ComDatepicker<D> implements ControlValueAccessor, FormFieldControl<D | null>, Validator, OnDestroy {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly document;
+    private readonly dateAdapter;
+    /** NgControl bound to this datepicker (if using reactive forms). */
+    readonly ngControl: NgControl | null;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    /** Reference to the trigger element. */
+    private readonly triggerRef;
+    /** Reference to the input element. */
+    private readonly inputRef;
+    /** Reference to the panel template. */
+    private readonly panelTemplateRef;
+    /** Overlay reference. */
+    private overlayRef;
+    /** Unique ID for the datepicker. */
+    private readonly datepickerId;
+    /** Current value. */
+    readonly value: ModelSignal<D | null>;
+    /** Minimum selectable date. */
+    readonly min: InputSignal<D | null>;
+    /** Maximum selectable date. */
+    readonly max: InputSignal<D | null>;
+    /** Custom filter function to disable specific dates. */
+    readonly dateFilter: InputSignal<DateFilterFn<D> | null>;
+    /** Date the calendar opens to (defaults to selected or today). */
+    readonly startAt: InputSignal<D | null>;
+    /** Initial calendar view. */
+    readonly startView: InputSignal<CalendarView>;
+    /** First day of week override (0=Sun, 1=Mon, ..., 6=Sat). */
+    readonly firstDayOfWeek: InputSignal<number | null>;
+    /** Placeholder text. */
+    readonly placeholder: InputSignal<string>;
+    /** Whether the datepicker is disabled. */
+    readonly disabled: InputSignal<boolean>;
+    /** Whether the datepicker is required. */
+    readonly required: InputSignal<boolean>;
+    /** Display format for the date. */
+    readonly dateFormat: InputSignal<DateFormatPreset>;
+    /** Show a clear button in the trigger. */
+    readonly showClearButton: InputSignal<boolean>;
+    /** Show a today button in the footer. */
+    readonly showTodayButton: InputSignal<boolean>;
+    /** Show a clear button in the footer. */
+    readonly showFooterClearButton: InputSignal<boolean>;
+    /** Don't auto-close on selection. */
+    readonly keepOpen: InputSignal<boolean>;
+    /** Allow manual text input. */
+    readonly allowManualInput: InputSignal<boolean>;
+    /** Additional CSS classes for the panel. */
+    readonly panelClass: InputSignal<string>;
+    /** Panel width strategy. */
+    readonly panelWidth: InputSignal<DatepickerPanelWidth>;
+    /** CVA variant for trigger styling. */
+    readonly variant: InputSignal<DatepickerVariant>;
+    /** Size variant. */
+    readonly size: InputSignal<DatepickerSize>;
+    /** Validation state. */
+    readonly state: InputSignal<DatepickerState>;
+    /** Additional CSS classes for the trigger. */
+    readonly userClass: InputSignal<string>;
+    /** Accessible label for the input. */
+    readonly ariaLabel: InputSignal<string | null>;
+    /** ID of element describing the input. */
+    readonly ariaDescribedBy: InputSignal<string | null>;
+    /** Custom error state matcher for determining when to show errors. */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
+    /** Whether to show the time picker below the calendar. */
+    readonly showTimePicker: InputSignal<boolean>;
+    /** 12h vs 24h format for the time picker. `null` = auto-detect. */
+    readonly use12HourFormat: InputSignal<boolean | null>;
+    /** Whether the time picker shows seconds. */
+    readonly showSeconds: InputSignal<boolean>;
+    /** Step interval for minutes in the time picker. */
+    readonly minuteStep: InputSignal<number>;
+    /** Emitted when a date is selected. */
+    readonly dateChange: OutputEmitterRef<D | null>;
+    /** Emitted when the panel opens. */
+    readonly opened: OutputEmitterRef<void>;
+    /** Emitted when the panel closes. */
+    readonly closed: OutputEmitterRef<void>;
+    /** Whether the panel is open. */
+    readonly isOpen: WritableSignal<boolean>;
+    /** Internal value state (managed by CVA or input). */
+    readonly internalValue: WritableSignal<D | null>;
+    /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
+    readonly calendarActiveDate: WritableSignal<D>;
+    /** Live announcements for screen readers. */
+    readonly liveAnnouncement: WritableSignal<string>;
+    /** Whether the input is focused (not panel). */
+    private readonly _inputFocused;
+    /** IDs for aria-describedby (set by form-field). */
+    private readonly _describedByIds;
+    /** Form field appearance (set by form-field). */
+    private readonly _appearance;
+    /** Whether the datepicker is focused (input focused or panel open). Implements FormFieldControl. */
+    readonly focused: Signal<boolean>;
+    /** Whether the label should float. Label floats when focused or has a value. */
+    readonly shouldLabelFloat: Signal<boolean>;
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    readonly errorState: Signal<boolean>;
+    /** Structured validation errors from Signal Forms, exposed for the parent form field. */
+    readonly errors: Signal<readonly unknown[] | null>;
+    /** Unique ID for the control. Implements FormFieldControl. */
+    readonly id: Signal<string>;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     * Manual state takes precedence over auto-detected error state.
+     */
+    readonly effectiveState: Signal<DatepickerState>;
+    /** Combined aria-describedby from form-field and manual input. */
+    readonly effectiveAriaDescribedBy: Signal<string | null>;
+    /** Input element ID (alias for FormFieldControl id). */
+    readonly inputId: Signal<string>;
+    /** Panel element ID. */
+    readonly panelId: Signal<string>;
+    /** Whether the datepicker has a value. */
+    readonly hasValue: Signal<boolean>;
+    /** Icon size based on datepicker size. */
+    readonly iconSize: Signal<IconSize>;
+    /** Formatted display value. */
+    readonly displayValue: Signal<string>;
+    /** Computed trigger classes. */
+    readonly triggerClasses: Signal<string>;
+    /** Computed input classes. */
+    readonly inputClasses: Signal<string>;
+    /** Computed icon classes. */
+    readonly iconClasses: Signal<string>;
+    /** Computed clear button classes. */
+    readonly clearClasses: Signal<string>;
+    /** Computed panel classes. */
+    readonly panelClasses: Signal<string>;
+    /** Computed footer classes. */
+    readonly footerClasses: Signal<string>;
+    /** Computed today button classes. */
+    readonly todayButtonClasses: Signal<string>;
+    /** Computed clear button classes (footer). */
+    readonly clearButtonClasses: Signal<string>;
+    /** Time section divider classes. */
+    readonly timeSectionClasses: Signal<string>;
+    /** Time value derived from the current date value. */
+    readonly timeValue: Signal<ComTimeValue | null>;
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    readonly effectiveDateFormat: Signal<DateFormatPreset>;
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    readonly effectiveKeepOpen: Signal<boolean>;
+    private onChange;
+    private onTouched;
+    private onValidatorChange;
+    constructor();
+    ngOnDestroy(): void;
+    writeValue(value: D | null): void;
+    registerOnChange(fn: (value: D | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_isDisabled: boolean): void;
+    validate(): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    /** Opens the datepicker panel. */
+    open(): void;
+    /** Closes the datepicker panel. */
+    close(): void;
+    /** Toggles the datepicker panel. */
+    toggle(): void;
+    /** Clears the selected date. */
+    clear(event?: Event): void;
+    /** Selects today's date. */
+    selectToday(): void;
+    protected onInputFocus(): void;
+    protected onTriggerClick(): void;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    protected onInputKeydown(event: KeyboardEvent): void;
+    protected onInputChange(event: Event): void;
+    protected onInputBlur(): void;
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    protected onDateSelected(date: D): void;
+    protected onTimeChange(time: ComTimeValue | null): void;
+    protected onActiveDateChange(date: D): void;
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids: string): void;
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance: FormFieldAppearance): void;
+    private createOverlay;
+    private destroyOverlay;
+    private updateValue;
+    private parseAndSetValue;
+    private isDateValid;
+    private announce;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDatepicker<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDatepicker<any>, "com-datepicker", ["comDatepicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * Date range picker component with calendar popup.
+ * Allows selecting a start and end date via a two-click interaction.
+ * Implements ControlValueAccessor for Reactive Forms and Template-driven Forms.
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-input-placeholder`, `--color-ring`, `--color-muted`, `--color-muted-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`,
+ *         `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-warn`, `--color-success`, `--color-disabled`, `--color-disabled-foreground`
+ *
+ * @example
+ * ```html
+ * <com-date-range-picker
+ *   formControlName="dateRange"
+ *   startPlaceholder="Start date"
+ *   endPlaceholder="End date"
+ *   [min]="minDate"
+ *   [max]="maxDate"
+ *   [showTodayButton]="true"
+ * />
+ * ```
+ */
+declare class ComDateRangePicker<D> implements ControlValueAccessor, FormFieldControl<DateRangeValue<D> | null>, Validator, OnDestroy {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly document;
+    private readonly dateAdapter;
+    /** NgControl bound to this date range picker (if using reactive forms). */
+    readonly ngControl: NgControl | null;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    /** Reference to the trigger element. */
+    private readonly triggerRef;
+    /** Reference to the start input element. */
+    private readonly startInputRef;
+    /** Reference to the end input element. */
+    private readonly endInputRef;
+    /** Reference to the panel template. */
+    private readonly panelTemplateRef;
+    /** Overlay reference. */
+    private overlayRef;
+    /** Unique ID for the datepicker. */
+    private readonly datepickerId;
+    /** Current value. */
+    readonly value: ModelSignal<DateRangeValue<D> | null>;
+    /** Minimum selectable date. */
+    readonly min: InputSignal<D | null>;
+    /** Maximum selectable date. */
+    readonly max: InputSignal<D | null>;
+    /** Custom filter function to disable specific dates. */
+    readonly dateFilter: InputSignal<DateFilterFn<D> | null>;
+    /** Date the calendar opens to (defaults to start date or today). */
+    readonly startAt: InputSignal<D | null>;
+    /** Initial calendar view. */
+    readonly startView: InputSignal<CalendarView>;
+    /** First day of week override (0=Sun, 1=Mon, ..., 6=Sat). */
+    readonly firstDayOfWeek: InputSignal<number | null>;
+    /** Placeholder text for start date. */
+    readonly startPlaceholder: InputSignal<string>;
+    /** Placeholder text for end date. */
+    readonly endPlaceholder: InputSignal<string>;
+    /** Whether the datepicker is disabled. */
+    readonly disabled: InputSignal<boolean>;
+    /** Whether the datepicker is required. */
+    readonly required: InputSignal<boolean>;
+    /** Display format for the date. */
+    readonly dateFormat: InputSignal<DateFormatPreset>;
+    /** Show a clear button in the trigger. */
+    readonly showClearButton: InputSignal<boolean>;
+    /** Show a today button in the footer. */
+    readonly showTodayButton: InputSignal<boolean>;
+    /** Show a clear button in the footer. */
+    readonly showFooterClearButton: InputSignal<boolean>;
+    /** Don't auto-close on complete range selection. */
+    readonly keepOpen: InputSignal<boolean>;
+    /** Allow manual text input. */
+    readonly allowManualInput: InputSignal<boolean>;
+    /** Additional CSS classes for the panel. */
+    readonly panelClass: InputSignal<string>;
+    /** Panel width strategy. */
+    readonly panelWidth: InputSignal<DatepickerPanelWidth>;
+    /** CVA variant for trigger styling. */
+    readonly variant: InputSignal<DatepickerVariant>;
+    /** Size variant. */
+    readonly size: InputSignal<DatepickerSize>;
+    /** Validation state. */
+    readonly state: InputSignal<DatepickerState>;
+    /** Additional CSS classes for the trigger. */
+    readonly userClass: InputSignal<string>;
+    /** Accessible label for the start input. */
+    readonly startAriaLabel: InputSignal<string | null>;
+    /** Accessible label for the end input. */
+    readonly endAriaLabel: InputSignal<string | null>;
+    /** Custom error state matcher for determining when to show errors. */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
+    /** Whether to show time pickers below the calendar. */
+    readonly showTimePicker: InputSignal<boolean>;
+    /** 12h vs 24h format for the time pickers. `null` = auto-detect. */
+    readonly use12HourFormat: InputSignal<boolean | null>;
+    /** Whether the time pickers show seconds. */
+    readonly showSeconds: InputSignal<boolean>;
+    /** Step interval for minutes in the time pickers. */
+    readonly minuteStep: InputSignal<number>;
+    /** Emitted when a complete range is selected. */
+    readonly rangeChange: OutputEmitterRef<DateRangeValue<D> | null>;
+    /** Emitted when the panel opens. */
+    readonly opened: OutputEmitterRef<void>;
+    /** Emitted when the panel closes. */
+    readonly closed: OutputEmitterRef<void>;
+    /** Whether the panel is open. */
+    readonly isOpen: WritableSignal<boolean>;
+    /** Which input is currently focused. */
+    readonly activeInput: WritableSignal<'start' | 'end' | null>;
+    /** Internal value state (managed by CVA or input). */
+    readonly internalValue: WritableSignal<DateRangeValue<D> | null>;
+    /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
+    readonly calendarActiveDate: WritableSignal<D>;
+    /** Live announcements for screen readers. */
+    readonly liveAnnouncement: WritableSignal<string>;
+    /** Whether any input is focused. */
+    private readonly _inputFocused;
+    /** IDs for aria-describedby (set by form-field). */
+    private readonly _describedByIds;
+    /** Form field appearance (set by form-field). */
+    private readonly _appearance;
+    /** Whether the date range picker is focused. Implements FormFieldControl. */
+    readonly focused: Signal<boolean>;
+    /** Whether the label should float. */
+    readonly shouldLabelFloat: Signal<boolean>;
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    readonly errorState: Signal<boolean>;
+    /** Structured validation errors from Signal Forms. */
+    readonly errors: Signal<readonly unknown[] | null>;
+    /** Unique ID for the control (maps to start input). Implements FormFieldControl. */
+    readonly id: Signal<string>;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    readonly effectiveState: Signal<DatepickerState>;
+    /** Combined aria-describedby from form-field. */
+    readonly effectiveAriaDescribedBy: Signal<string | null>;
+    /** Start input element ID (alias for FormFieldControl id). */
+    readonly startInputId: Signal<string>;
+    /** End input element ID. */
+    readonly endInputId: Signal<string>;
+    /** Panel element ID. */
+    readonly panelId: Signal<string>;
+    /** Whether the datepicker has a value. */
+    readonly hasValue: Signal<boolean>;
+    /** Icon size based on datepicker size. */
+    readonly iconSize: Signal<IconSize>;
+    /** Calendar selection (converts DateRangeValue to DateRange for calendar). */
+    readonly calendarSelection: Signal<DateRange<D> | null>;
+    /** Formatted start display value. */
+    readonly startDisplayValue: Signal<string>;
+    /** Formatted end display value. */
+    readonly endDisplayValue: Signal<string>;
+    /** Computed trigger classes. */
+    readonly triggerClasses: Signal<string>;
+    /** Computed input classes. */
+    readonly inputClasses: Signal<string>;
+    /** Computed separator classes. */
+    readonly separatorClasses: Signal<string>;
+    /** Computed icon classes. */
+    readonly iconClasses: Signal<string>;
+    /** Computed clear button classes. */
+    readonly clearClasses: Signal<string>;
+    /** Computed panel classes. */
+    readonly panelClasses: Signal<string>;
+    /** Computed footer classes. */
+    readonly footerClasses: Signal<string>;
+    /** Computed today button classes. */
+    readonly todayButtonClasses: Signal<string>;
+    /** Computed clear button classes (footer). */
+    readonly clearButtonClasses: Signal<string>;
+    /** Time section divider classes. */
+    readonly timeSectionClasses: Signal<string>;
+    /** Time label classes. */
+    readonly timeLabelClasses: Signal<string>;
+    /** Start time value derived from the start date. */
+    readonly startTimeValue: Signal<ComTimeValue | null>;
+    /** End time value derived from the end date. */
+    readonly endTimeValue: Signal<ComTimeValue | null>;
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    readonly effectiveDateFormat: Signal<DateFormatPreset>;
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    readonly effectiveKeepOpen: Signal<boolean>;
+    private onChange;
+    private onTouched;
+    private onValidatorChange;
+    constructor();
+    ngOnDestroy(): void;
+    writeValue(value: DateRangeValue<D> | null): void;
+    registerOnChange(fn: (value: DateRangeValue<D> | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_isDisabled: boolean): void;
+    validate(): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    /** Opens the datepicker panel. */
+    open(): void;
+    /** Closes the datepicker panel. */
+    close(): void;
+    /** Toggles the datepicker panel. */
+    toggle(): void;
+    /** Clears the selected date range. */
+    clear(event?: Event): void;
+    /** Selects today's date as the start date. */
+    selectToday(): void;
+    protected onTriggerClick(): void;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    protected onStartInputFocus(): void;
+    protected onEndInputFocus(): void;
+    protected onInputKeydown(event: KeyboardEvent, inputType: 'start' | 'end'): void;
+    protected onStartInputChange(_event: Event): void;
+    protected onEndInputChange(_event: Event): void;
+    protected onStartInputBlur(): void;
+    protected onEndInputBlur(): void;
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    protected onCalendarSelectionChange(selection: unknown): void;
+    protected onActiveDateChange(date: D): void;
+    protected onStartTimeChange(time: ComTimeValue | null): void;
+    protected onEndTimeChange(time: ComTimeValue | null): void;
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids: string): void;
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance: FormFieldAppearance): void;
+    private createOverlay;
+    private destroyOverlay;
+    private updateValue;
+    private parseAndSetStart;
+    private parseAndSetEnd;
+    private isDateValid;
+    private formatDate;
+    private announce;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDateRangePicker<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDateRangePicker<any>, "com-date-range-picker", ["comDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "startAriaLabel": { "alias": "startAriaLabel"; "required": false; "isSignal": true; }; "endAriaLabel": { "alias": "endAriaLabel"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+export { ComDateRangePicker, ComDatepicker, createDateRangeValue, datepickerClearVariants, datepickerDisabledVariants, datepickerFooterButtonVariants, datepickerFooterVariants, datepickerIconVariants, datepickerInputVariants, datepickerPanelVariants, datepickerRangeSeparatorVariants, datepickerTriggerVariants, generateDatepickerId };
+export type { DateFormatPreset, DateRangeValue, DatepickerClearVariants, DatepickerDisabledVariants, DatepickerFooterButtonVariants, DatepickerFooterConfig, DatepickerFooterVariants, DatepickerIconVariants, DatepickerInputVariants, DatepickerPanelVariants, DatepickerPanelWidth, DatepickerRangeSeparatorVariants, DatepickerSize, DatepickerState, DatepickerTriggerVariants, DatepickerVariant };

package/types/ngx-com-components-dialog.d.ts

@@ -90,7 +90,6 @@ interface ComDialogTemplateContext<R = unknown, D = unknown> {
 declare class ComDialog {
     private readonly overlay;
     private readonly injector;
-    private readonly destroyRef;
     private readonly platformId;
     private readonly document;
     private readonly globalConfig;
@@ -161,6 +160,8 @@ declare class ComDialogContent implements OnInit {
 /**
  * Marks an element as the dialog actions area (footer with buttons).
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <div comDialogActions>
@@ -180,6 +181,8 @@ declare class ComDialogActions {
  * Closes the nearest dialog when the host element is clicked.
  * Optionally passes a result value.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <button comButton [comDialogClose]="false">Cancel</button>
@@ -235,7 +238,7 @@ declare const dialogBackdropVariants: (props?: {
  * CVA variants for the dialog panel container.
  *
  * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
- *         `--shadow-xl`, `--radius-overlay`
+ *         `--shadow-dialog`, `--radius-overlay`
  */
 declare const dialogPanelVariants: (props?: {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';