ngx-com 0.0.21 → 0.1.0

package/fesm2022/ngx-com-components-datepicker.mjs

@@ -0,0 +1,2334 @@
+import { cva } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, ViewContainerRef, DOCUMENT, viewChild, model, input, output, signal, linkedSignal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { DATE_ADAPTER, ComCalendar, SingleSelectionStrategy, CALENDAR_SELECTION_STRATEGY, RangeSelectionStrategy } from 'ngx-com/components/calendar';
+import { ComIcon } from 'ngx-com/components/icon';
+import { mergeClasses, joinClasses } from 'ngx-com/utils';
+import { ErrorStateMatcher, FormFieldControl } from 'ngx-com/components/form-field';
+import { timepickerSectionVariants, createTimeValue, ComTimePicker, timepickerLabelVariants } from 'ngx-com/components/timepicker';
+
+/**
+ * Types and interfaces for DatePicker and DateRangePicker components.
+ */
+/** Creates a DateRangeValue */
+function createDateRangeValue(start = null, end = null) {
+    return { start, end };
+}
+/** Generates a unique ID for datepicker instances */
+let datepickerIdCounter = 0;
+function generateDatepickerId() {
+    return `com-datepicker-${datepickerIdCounter++}`;
+}
+
+/**
+ * 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`
+ */
+const datepickerTriggerVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-between',
+    'w-full',
+    'rounded-input',
+    'border',
+    'bg-input-background',
+    'text-input-foreground',
+    'transition-colors',
+    'duration-normal',
+    'placeholder:text-input-placeholder',
+    'focus-within:outline-[1px]',
+    'focus-within:outline-offset-2',
+    'focus-within:outline-ring',
+    'cursor-pointer',
+], {
+    variants: {
+        variant: {
+            default: [
+                'border-input-border',
+                'hover:border-border',
+            ],
+            outline: [
+                'border-2',
+                'border-input-border',
+                'hover:border-foreground',
+            ],
+            ghost: [
+                'border-transparent',
+                'bg-transparent',
+                'hover:bg-muted',
+            ],
+            filled: [
+                'border-transparent',
+                'bg-muted',
+                'hover:bg-muted-hover',
+            ],
+            naked: [
+                'border-transparent',
+                'bg-transparent',
+                'shadow-none',
+                'focus-within:outline-none',
+                'rounded-none',
+            ],
+        },
+        size: {
+            sm: ['h-8', 'px-2', 'text-xs', 'gap-1'],
+            default: ['h-10', 'px-3', 'text-sm', 'gap-2'],
+            lg: ['h-12', 'px-4', 'text-base', 'gap-3'],
+        },
+        state: {
+            default: [],
+            error: [
+                'border-warn',
+                'focus-within:outline-warn',
+            ],
+            success: [
+                'border-success',
+                'focus-within:outline-success',
+            ],
+        },
+        open: {
+            true: ['outline-[1px]', 'outline-ring', 'border-primary'],
+            false: [],
+        },
+    },
+    compoundVariants: [
+        {
+            open: true,
+            variant: 'default',
+            class: ['border-primary'],
+        },
+        {
+            open: true,
+            variant: 'outline',
+            class: ['border-primary'],
+        },
+        // Naked variant should not show ring when open (form-field provides focus styling)
+        {
+            open: true,
+            variant: 'naked',
+            class: ['outline-none', 'border-transparent'],
+        },
+        // Naked variant should not show error border (form-field provides error styling)
+        {
+            state: 'error',
+            variant: 'naked',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
+        // Naked variant should not show success border (form-field provides styling)
+        {
+            state: 'success',
+            variant: 'naked',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        state: 'default',
+        open: false,
+    },
+});
+/**
+ * CVA variants for the disabled state of datepicker trigger.
+ *
+ * @tokens `--color-disabled`, `--color-disabled-foreground`
+ */
+const datepickerDisabledVariants = cva([
+    'cursor-not-allowed',
+    'bg-disabled',
+    'text-disabled-foreground',
+    'hover:border-input-border',
+    'pointer-events-none',
+]);
+/**
+ * CVA variants for the datepicker input field.
+ *
+ * @tokens `--color-input-foreground`, `--color-input-placeholder`
+ */
+const datepickerInputVariants = cva([
+    'flex-1',
+    'bg-transparent',
+    'outline-none',
+    'placeholder:text-input-placeholder',
+    'disabled:cursor-not-allowed',
+    'min-w-0',
+    'truncate',
+], {
+    variants: {
+        size: {
+            sm: ['text-xs'],
+            default: ['text-sm'],
+            lg: ['text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the calendar icon button.
+ *
+ * @tokens `--color-ring`, `--color-muted-foreground`, `--radius-interactive-sm`
+ */
+const datepickerIconVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'shrink-0',
+    'text-muted-foreground',
+    'transition-colors',
+    'hover:text-foreground',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
+    'rounded-interactive-sm',
+], {
+    variants: {
+        size: {
+            sm: ['h-4', 'w-4'],
+            default: ['h-5', 'w-5'],
+            lg: ['h-6', 'w-6'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the clear button.
+ *
+ * @tokens `--color-ring`, `--color-muted-foreground`, `--color-foreground`, `--radius-interactive-sm`
+ */
+const datepickerClearVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-interactive-sm',
+    'text-muted-foreground',
+    'transition-colors',
+    'hover:text-foreground',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
+    'shrink-0',
+], {
+    variants: {
+        size: {
+            sm: ['h-4', 'w-4'],
+            default: ['h-5', 'w-5'],
+            lg: ['h-6', 'w-6'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the datepicker panel (overlay).
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`, `--radius-overlay`
+ */
+const datepickerPanelVariants = cva([
+    'z-50',
+    'overflow-hidden',
+    'rounded-overlay',
+    'border',
+    'border-border-subtle',
+    'bg-popover',
+    'text-popover-foreground',
+    'shadow-overlay',
+    'outline-none',
+], {
+    variants: {
+        size: {
+            sm: ['p-2', 'text-xs'],
+            default: ['p-3', 'text-sm'],
+            lg: ['p-4', 'text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the footer section of the datepicker panel.
+ *
+ * @tokens `--color-border-subtle`
+ */
+const datepickerFooterVariants = cva([
+    'flex',
+    'items-center',
+    'justify-between',
+    'border-t',
+    'border-border-subtle',
+    'mt-3',
+    'pt-3',
+], {
+    variants: {
+        size: {
+            sm: ['mt-2', 'pt-2', 'gap-1'],
+            default: ['mt-3', 'pt-3', 'gap-2'],
+            lg: ['mt-4', 'pt-4', 'gap-3'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * 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`
+ */
+const datepickerFooterButtonVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-control-sm',
+    'font-medium',
+    'transition-colors',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
+], {
+    variants: {
+        size: {
+            sm: ['h-7', 'px-2', 'text-xs'],
+            default: ['h-8', 'px-3', 'text-sm'],
+            lg: ['h-9', 'px-4', 'text-base'],
+        },
+        variant: {
+            primary: [
+                'bg-primary',
+                'text-primary-foreground',
+                'hover:bg-primary-hover',
+            ],
+            secondary: [
+                'bg-muted',
+                'text-muted-foreground',
+                'hover:bg-muted-hover',
+            ],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+        variant: 'secondary',
+    },
+});
+/**
+ * CVA variants for the range separator.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const datepickerRangeSeparatorVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'text-muted-foreground',
+    'shrink-0',
+], {
+    variants: {
+        size: {
+            sm: ['px-1', 'text-xs'],
+            default: ['px-2', 'text-sm'],
+            lg: ['px-3', 'text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+
+/** Default position for the datepicker panel. */
+const DEFAULT_POSITIONS$1 = [
+    // Below trigger, aligned start
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    // Above trigger, aligned start
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    // Below trigger, aligned end
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    // Above trigger, aligned end
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+];
+/**
+ * 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"
+ * />
+ * ```
+ */
+class ComDatepicker {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    document = inject(DOCUMENT);
+    dateAdapter = inject(DATE_ADAPTER);
+    /** NgControl bound to this datepicker (if using reactive forms). */
+    ngControl = inject(NgControl, { optional: true, self: true });
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    /** Reference to the trigger element. */
+    triggerRef = viewChild.required('triggerElement');
+    /** Reference to the input element. */
+    inputRef = viewChild.required('inputElement');
+    /** Reference to the panel template. */
+    panelTemplateRef = viewChild.required('panelTemplate');
+    /** Overlay reference. */
+    overlayRef = null;
+    /** Unique ID for the datepicker. */
+    datepickerId = generateDatepickerId();
+    // ============ INPUTS ============
+    /** Current value. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Minimum selectable date. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /** Maximum selectable date. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Custom filter function to disable specific dates. */
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
+    /** Date the calendar opens to (defaults to selected or today). */
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
+    /** Initial calendar view. */
+    startView = input('month', ...(ngDevMode ? [{ debugName: "startView" }] : []));
+    /** First day of week override (0=Sun, 1=Mon, ..., 6=Sat). */
+    firstDayOfWeek = input(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+    /** Placeholder text. */
+    placeholder = input('Select date...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Whether the datepicker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Whether the datepicker is required. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /** Display format for the date. */
+    dateFormat = input('medium', ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
+    /** Show a clear button in the trigger. */
+    showClearButton = input(false, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    /** Show a today button in the footer. */
+    showTodayButton = input(false, ...(ngDevMode ? [{ debugName: "showTodayButton" }] : []));
+    /** Show a clear button in the footer. */
+    showFooterClearButton = input(false, ...(ngDevMode ? [{ debugName: "showFooterClearButton" }] : []));
+    /** Don't auto-close on selection. */
+    keepOpen = input(false, ...(ngDevMode ? [{ debugName: "keepOpen" }] : []));
+    /** Allow manual text input. */
+    allowManualInput = input(true, ...(ngDevMode ? [{ debugName: "allowManualInput" }] : []));
+    /** Additional CSS classes for the panel. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    /** Panel width strategy. */
+    panelWidth = input('auto', ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    /** CVA variant for trigger styling. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size variant. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Validation state. */
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** Additional CSS classes for the trigger. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Accessible label for the input. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** ID of element describing the input. */
+    ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    /** Custom error state matcher for determining when to show errors. */
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    // Signal Forms inputs — set automatically by [formField] via setInputOnDirectives
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    sfErrors = input([], { ...(ngDevMode ? { debugName: "sfErrors" } : {}), alias: 'errors' });
+    /** Whether to show the time picker below the calendar. */
+    showTimePicker = input(false, ...(ngDevMode ? [{ debugName: "showTimePicker" }] : []));
+    /** 12h vs 24h format for the time picker. `null` = auto-detect. */
+    use12HourFormat = input(null, ...(ngDevMode ? [{ debugName: "use12HourFormat" }] : []));
+    /** Whether the time picker shows seconds. */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    /** Step interval for minutes in the time picker. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
+    // ============ OUTPUTS ============
+    /** Emitted when a date is selected. */
+    dateChange = output();
+    /** Emitted when the panel opens. */
+    opened = output();
+    /** Emitted when the panel closes. */
+    closed = output();
+    // ============ INTERNAL STATE ============
+    /** Whether the panel is open. */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Internal value state (managed by CVA or input). */
+    internalValue = linkedSignal(() => this.value() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
+    calendarActiveDate = linkedSignal({ ...(ngDevMode ? { debugName: "calendarActiveDate" } : {}), source: () => ({ value: this.internalValue(), startAt: this.startAt() }),
+        computation: ({ value, startAt }) => value ?? startAt ?? this.dateAdapter.today() });
+    /** Live announcements for screen readers. */
+    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** Whether the input is focused (not panel). */
+    _inputFocused = signal(false, ...(ngDevMode ? [{ debugName: "_inputFocused" }] : []));
+    /** IDs for aria-describedby (set by form-field). */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    /** Form field appearance (set by form-field). */
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
+    // ============ FormFieldControl SIGNALS ============
+    /** Whether the datepicker is focused (input focused or panel open). Implements FormFieldControl. */
+    focused = computed(() => this._inputFocused() || this.isOpen(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Whether the label should float. Label floats when focused or has a value. */
+    shouldLabelFloat = computed(() => this.focused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    errorState = computed(() => {
+        if (!this.ngControl) {
+            // Signal Forms: gate on invalid AND touched
+            return this.invalid() && this.touched();
+        }
+        // Reactive Forms: use ErrorStateMatcher
+        this.isOpen();
+        this.hasValue();
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Structured validation errors from Signal Forms, exposed for the parent form field. */
+    errors = computed(() => !this.ngControl ? this.sfErrors() : null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    /** Unique ID for the control. Implements FormFieldControl. */
+    id = computed(() => `${this.datepickerId}-input`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * Effective state combining manual state with automatic error detection.
+     * Manual state takes precedence over auto-detected error state.
+     */
+    effectiveState = computed(() => {
+        const manualState = this.state();
+        if (manualState !== 'default')
+            return manualState;
+        return this.errorState() ? 'error' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
+    /** Combined aria-describedby from form-field and manual input. */
+    effectiveAriaDescribedBy = computed(() => this._describedByIds() || this.ariaDescribedBy() || null, ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedBy" }] : []));
+    // ============ COMPUTED STATE ============
+    /** Input element ID (alias for FormFieldControl id). */
+    inputId = this.id;
+    /** Panel element ID. */
+    panelId = computed(() => `${this.datepickerId}-panel`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /** Whether the datepicker has a value. */
+    hasValue = computed(() => this.internalValue() !== null, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /** Icon size based on datepicker size. */
+    iconSize = computed(() => {
+        const sizeMap = {
+            sm: 'sm',
+            default: 'md',
+            lg: 'lg',
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    /** Formatted display value. */
+    displayValue = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return '';
+        return this.dateAdapter.format(value, this.effectiveDateFormat());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    /** Computed trigger classes. */
+    triggerClasses = computed(() => {
+        const baseClasses = datepickerTriggerVariants({
+            variant: this.variant(),
+            size: this.size(),
+            state: this.effectiveState(),
+            open: this.isOpen(),
+        });
+        const disabledClasses = this.disabled() ? datepickerDisabledVariants() : '';
+        // For naked variant, add padding based on form-field appearance
+        let paddingClasses = '';
+        if (this.variant() === 'naked') {
+            paddingClasses = this._appearance() === 'fill' ? 'pt-5 pb-1.5 px-3' : 'py-2.5 px-3';
+        }
+        return mergeClasses(baseClasses, disabledClasses, paddingClasses, this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    /** Computed input classes. */
+    inputClasses = computed(() => {
+        return datepickerInputVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    /** Computed icon classes. */
+    iconClasses = computed(() => {
+        return datepickerIconVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    /** Computed clear button classes. */
+    clearClasses = computed(() => {
+        return datepickerClearVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "clearClasses" }] : []));
+    /** Computed panel classes. */
+    panelClasses = computed(() => {
+        const baseClasses = datepickerPanelVariants({ size: this.size() });
+        return joinClasses(baseClasses, this.panelClass());
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Computed footer classes. */
+    footerClasses = computed(() => {
+        return datepickerFooterVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "footerClasses" }] : []));
+    /** Computed today button classes. */
+    todayButtonClasses = computed(() => {
+        return datepickerFooterButtonVariants({ size: this.size(), variant: 'primary' });
+    }, ...(ngDevMode ? [{ debugName: "todayButtonClasses" }] : []));
+    /** Computed clear button classes (footer). */
+    clearButtonClasses = computed(() => {
+        return datepickerFooterButtonVariants({ size: this.size(), variant: 'secondary' });
+    }, ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : []));
+    /** Time section divider classes. */
+    timeSectionClasses = computed(() => {
+        return timepickerSectionVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "timeSectionClasses" }] : []));
+    /** Time value derived from the current date value. */
+    timeValue = computed(() => {
+        const date = this.internalValue();
+        if (!date)
+            return null;
+        return createTimeValue(this.dateAdapter.getHours(date), this.dateAdapter.getMinutes(date), this.dateAdapter.getSeconds(date));
+    }, ...(ngDevMode ? [{ debugName: "timeValue" }] : []));
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    effectiveDateFormat = computed(() => {
+        if (this.showTimePicker()) {
+            return this.showSeconds() ? 'dateTimeLong' : 'dateTimeMedium';
+        }
+        return this.dateFormat();
+    }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    effectiveKeepOpen = computed(() => {
+        return this.keepOpen() || this.showTimePicker();
+    }, ...(ngDevMode ? [{ debugName: "effectiveKeepOpen" }] : []));
+    // ============ CVA CALLBACKS ============
+    onChange = () => { };
+    onTouched = () => { };
+    onValidatorChange = () => { };
+    constructor() {
+        // Wire up NgControl if present
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
+    // ============ CVA IMPLEMENTATION ============
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(_isDisabled) {
+        // Disabled state is handled via the disabled input
+    }
+    // ============ VALIDATOR IMPLEMENTATION ============
+    validate() {
+        const value = this.internalValue();
+        // Required validation
+        if (this.required() && !value) {
+            return { required: true };
+        }
+        if (value) {
+            // Min validation
+            const min = this.min();
+            if (min && this.dateAdapter.compareDate(value, min) < 0) {
+                return { minDate: { min, actual: value } };
+            }
+            // Max validation
+            const max = this.max();
+            if (max && this.dateAdapter.compareDate(value, max) > 0) {
+                return { maxDate: { max, actual: value } };
+            }
+            // Date filter validation
+            const dateFilter = this.dateFilter();
+            if (dateFilter && !dateFilter(value)) {
+                return { dateFilter: true };
+            }
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // ============ PUBLIC METHODS ============
+    /** Opens the datepicker panel. */
+    open() {
+        if (this.disabled() || this.isOpen()) {
+            return;
+        }
+        this.createOverlay();
+        this.isOpen.set(true);
+        this.opened.emit();
+        this.announce('Calendar opened');
+    }
+    /** Closes the datepicker panel. */
+    close() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.destroyOverlay();
+        this.isOpen.set(false);
+        this.closed.emit();
+        this.onTouched();
+        this.touched.set(true);
+        // Return focus to trigger
+        this.inputRef().nativeElement.focus();
+    }
+    /** Toggles the datepicker panel. */
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Clears the selected date. */
+    clear(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        this.updateValue(null);
+        this.announce('Date cleared');
+    }
+    /** Selects today's date. */
+    selectToday() {
+        const today = this.dateAdapter.today();
+        this.updateValue(today);
+        if (!this.effectiveKeepOpen()) {
+            this.close();
+        }
+    }
+    // ============ EVENT HANDLERS ============
+    onInputFocus() {
+        this._inputFocused.set(true);
+    }
+    onTriggerClick() {
+        if (!this.disabled()) {
+            this.toggle();
+        }
+    }
+    onTriggerKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.open();
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    }
+    onInputKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    // Commit manual input
+                    this.parseAndSetValue(this.inputRef().nativeElement.value);
+                }
+                else {
+                    this.open();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+            case 'ArrowDown':
+                if (!this.isOpen()) {
+                    event.preventDefault();
+                    this.open();
+                }
+                break;
+        }
+    }
+    onInputChange(event) {
+        if (!this.allowManualInput()) {
+            return;
+        }
+        const _input = event.target;
+        // Debounce or wait for blur/enter to actually parse
+        // For now, we just allow typing without immediate parsing
+    }
+    onInputBlur() {
+        this._inputFocused.set(false);
+        if (this.allowManualInput()) {
+            this.parseAndSetValue(this.inputRef().nativeElement.value);
+        }
+        this.onTouched();
+        this.touched.set(true);
+    }
+    onPanelKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    onDateSelected(date) {
+        // Preserve time when selecting a new date if time picker is shown
+        if (this.showTimePicker()) {
+            const currentValue = this.internalValue();
+            if (currentValue) {
+                const withTime = this.dateAdapter.setTime(date, this.dateAdapter.getHours(currentValue), this.dateAdapter.getMinutes(currentValue), this.dateAdapter.getSeconds(currentValue));
+                this.updateValue(withTime);
+            }
+            else {
+                this.updateValue(date);
+            }
+        }
+        else {
+            this.updateValue(date);
+        }
+        if (!this.effectiveKeepOpen()) {
+            this.close();
+        }
+        this.announce(`Selected ${this.dateAdapter.format(date, 'long')}`);
+    }
+    onTimeChange(time) {
+        if (!time)
+            return;
+        const current = this.internalValue() ?? this.dateAdapter.today();
+        const updated = this.dateAdapter.setTime(current, time.hours, time.minutes, time.seconds);
+        this.updateValue(updated);
+    }
+    onActiveDateChange(date) {
+        this.calendarActiveDate.set(date);
+    }
+    // ============ FormFieldControl IMPLEMENTATION ============
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event) {
+        const target = event.target;
+        if (!this.disabled() && !this.triggerRef().nativeElement.contains(target)) {
+            this.toggle();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
+    // ============ PRIVATE METHODS ============
+    createOverlay() {
+        if (this.overlayRef) {
+            return;
+        }
+        const hostEl = this.elementRef.nativeElement;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(hostEl)
+            .withPositions(DEFAULT_POSITIONS$1)
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        // Attach panel template
+        const portal = new TemplatePortal(this.panelTemplateRef(), this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on backdrop click
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        // Close on outside click
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+    }
+    destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    updateValue(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.dateChange.emit(value);
+        this.onValidatorChange();
+    }
+    parseAndSetValue(inputValue) {
+        if (!inputValue.trim()) {
+            // Empty input - clear if allowed
+            if (this.hasValue()) {
+                this.updateValue(null);
+            }
+            return;
+        }
+        const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
+        if (parsed && this.dateAdapter.isValid(parsed)) {
+            // Validate against min/max/filter
+            if (this.isDateValid(parsed)) {
+                this.updateValue(parsed);
+            }
+            else {
+                // Invalid date - revert to current value
+                this.inputRef().nativeElement.value = this.displayValue();
+            }
+        }
+        else {
+            // Parse failed - revert to current value
+            this.inputRef().nativeElement.value = this.displayValue();
+        }
+    }
+    isDateValid(date) {
+        const min = this.min();
+        const max = this.max();
+        const filter = this.dateFilter();
+        if (min && this.dateAdapter.compareDate(date, min) < 0) {
+            return false;
+        }
+        if (max && this.dateAdapter.compareDate(date, max) > 0) {
+            return false;
+        }
+        if (filter && !filter(date)) {
+            return false;
+        }
+        return true;
+    }
+    announce(message) {
+        this.liveAnnouncement.set(message);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDatepicker, isStandalone: true, selector: "com-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", dateChange: "dateChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-datepicker-disabled": "disabled()", "class.com-datepicker-open": "isOpen()" }, classAttribute: "com-datepicker-host inline-block" }, providers: [
+            SingleSelectionStrategy,
+            { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
+            { provide: FormFieldControl, useExisting: forwardRef(() => ComDatepicker) },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDatepicker"], ngImport: i0, template: `
+    <!-- Trigger container -->
+    <div
+      #triggerElement
+      [class]="triggerClasses()"
+      role="group"
+      tabindex="-1"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-owns]="panelId()"
+      [attr.aria-disabled]="disabled() || null"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <!-- Date input display -->
+      <input
+        #inputElement
+        type="text"
+        [class]="inputClasses()"
+        [value]="displayValue()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="!allowManualInput()"
+        [attr.id]="inputId()"
+        [attr.aria-label]="ariaLabel() || placeholder()"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
+        [attr.aria-required]="required() || null"
+        (focus)="onInputFocus()"
+        (input)="onInputChange($event)"
+        (blur)="onInputBlur()"
+        (keydown)="onInputKeydown($event)"
+      />
+
+      <!-- Clear button -->
+      @if (showClearButton() && hasValue() && !disabled()) {
+        <button
+          type="button"
+          [class]="clearClasses()"
+          [attr.aria-label]="'Clear date'"
+          (click)="clear($event)"
+        >
+          <com-icon name="x" [size]="iconSize()" />
+        </button>
+      }
+
+      <!-- Calendar icon -->
+      <button
+        type="button"
+        [class]="iconClasses()"
+        [attr.aria-label]="isOpen() ? 'Close calendar' : 'Open calendar'"
+        [disabled]="disabled()"
+        tabindex="-1"
+      >
+        <com-icon name="calendar" [size]="iconSize()" />
+      </button>
+    </div>
+
+    <!-- Panel template (rendered in overlay) -->
+    <ng-template #panelTemplate>
+      <div
+        [class]="panelClasses()"
+        [attr.id]="panelId()"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="'Choose date'"
+        (keydown)="onPanelKeydown($event)"
+        cdkTrapFocus
+        [cdkTrapFocusAutoCapture]="true"
+      >
+        <com-calendar
+          [activeDate]="calendarActiveDate()"
+          [selected]="internalValue()"
+          [minDate]="min()"
+          [maxDate]="max()"
+          [dateFilter]="dateFilter()"
+          [startView]="startView()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [bordered]="false"
+          (selectedChange)="onDateSelected($event)"
+          (activeDateChange)="onActiveDateChange($event)"
+        />
+
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <com-time-picker
+              variant="embedded"
+              [size]="size()"
+              [value]="timeValue()"
+              [use12HourFormat]="use12HourFormat()"
+              [showSeconds]="showSeconds()"
+              [minuteStep]="minuteStep()"
+              [disabled]="disabled()"
+              (timeChange)="onTimeChange($event)"
+            />
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+          <div [class]="footerClasses()">
+            @if (showTodayButton()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="selectToday()"
+              >
+                Today
+              </button>
+            }
+            @if (showFooterClearButton()) {
+              <button
+                type="button"
+                [class]="clearButtonClasses()"
+                (click)="clear($event)"
+              >
+                Clear
+              </button>
+            }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- Live announcer region -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: ComTimePicker, selector: "com-time-picker", inputs: ["value", "disabled", "required", "showSeconds", "use12HourFormat", "minuteStep", "secondStep", "minTime", "maxTime", "variant", "size", "state", "ariaLabel", "class", "placeholder", "errorStateMatcher", "touched", "invalid", "errors"], outputs: ["valueChange", "disabledChange", "touchedChange", "timeChange"], exportAs: ["comTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDatepicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-datepicker', exportAs: 'comDatepicker', template: `
+    <!-- Trigger container -->
+    <div
+      #triggerElement
+      [class]="triggerClasses()"
+      role="group"
+      tabindex="-1"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-owns]="panelId()"
+      [attr.aria-disabled]="disabled() || null"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <!-- Date input display -->
+      <input
+        #inputElement
+        type="text"
+        [class]="inputClasses()"
+        [value]="displayValue()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="!allowManualInput()"
+        [attr.id]="inputId()"
+        [attr.aria-label]="ariaLabel() || placeholder()"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
+        [attr.aria-required]="required() || null"
+        (focus)="onInputFocus()"
+        (input)="onInputChange($event)"
+        (blur)="onInputBlur()"
+        (keydown)="onInputKeydown($event)"
+      />
+
+      <!-- Clear button -->
+      @if (showClearButton() && hasValue() && !disabled()) {
+        <button
+          type="button"
+          [class]="clearClasses()"
+          [attr.aria-label]="'Clear date'"
+          (click)="clear($event)"
+        >
+          <com-icon name="x" [size]="iconSize()" />
+        </button>
+      }
+
+      <!-- Calendar icon -->
+      <button
+        type="button"
+        [class]="iconClasses()"
+        [attr.aria-label]="isOpen() ? 'Close calendar' : 'Open calendar'"
+        [disabled]="disabled()"
+        tabindex="-1"
+      >
+        <com-icon name="calendar" [size]="iconSize()" />
+      </button>
+    </div>
+
+    <!-- Panel template (rendered in overlay) -->
+    <ng-template #panelTemplate>
+      <div
+        [class]="panelClasses()"
+        [attr.id]="panelId()"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="'Choose date'"
+        (keydown)="onPanelKeydown($event)"
+        cdkTrapFocus
+        [cdkTrapFocusAutoCapture]="true"
+      >
+        <com-calendar
+          [activeDate]="calendarActiveDate()"
+          [selected]="internalValue()"
+          [minDate]="min()"
+          [maxDate]="max()"
+          [dateFilter]="dateFilter()"
+          [startView]="startView()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [bordered]="false"
+          (selectedChange)="onDateSelected($event)"
+          (activeDateChange)="onActiveDateChange($event)"
+        />
+
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <com-time-picker
+              variant="embedded"
+              [size]="size()"
+              [value]="timeValue()"
+              [use12HourFormat]="use12HourFormat()"
+              [showSeconds]="showSeconds()"
+              [minuteStep]="minuteStep()"
+              [disabled]="disabled()"
+              (timeChange)="onTimeChange($event)"
+            />
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+          <div [class]="footerClasses()">
+            @if (showTodayButton()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="selectToday()"
+              >
+                Today
+              </button>
+            }
+            @if (showFooterClearButton()) {
+              <button
+                type="button"
+                [class]="clearButtonClasses()"
+                (click)="clear($event)"
+              >
+                Clear
+              </button>
+            }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- Live announcer region -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, imports: [
+                        OverlayModule,
+                        A11yModule,
+                        ComCalendar,
+                        ComIcon,
+                        ComTimePicker,
+                    ], providers: [
+                        SingleSelectionStrategy,
+                        { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
+                        { provide: FormFieldControl, useExisting: forwardRef(() => ComDatepicker) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'com-datepicker-host inline-block',
+                        '[class.com-datepicker-disabled]': 'disabled()',
+                        '[class.com-datepicker-open]': 'isOpen()',
+                    }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/** Default position for the datepicker panel. */
+const DEFAULT_POSITIONS = [
+    // Below trigger, aligned start
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    // Above trigger, aligned start
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    // Below trigger, aligned end
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    // Above trigger, aligned end
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+];
+/**
+ * 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"
+ * />
+ * ```
+ */
+class ComDateRangePicker {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    document = inject(DOCUMENT);
+    dateAdapter = inject(DATE_ADAPTER);
+    /** NgControl bound to this date range picker (if using reactive forms). */
+    ngControl = inject(NgControl, { optional: true, self: true });
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    /** Reference to the trigger element. */
+    triggerRef = viewChild.required('triggerElement');
+    /** Reference to the start input element. */
+    startInputRef = viewChild.required('startInputElement');
+    /** Reference to the end input element. */
+    endInputRef = viewChild.required('endInputElement');
+    /** Reference to the panel template. */
+    panelTemplateRef = viewChild.required('panelTemplate');
+    /** Overlay reference. */
+    overlayRef = null;
+    /** Unique ID for the datepicker. */
+    datepickerId = generateDatepickerId();
+    // ============ INPUTS ============
+    /** Current value. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Minimum selectable date. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /** Maximum selectable date. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Custom filter function to disable specific dates. */
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
+    /** Date the calendar opens to (defaults to start date or today). */
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
+    /** Initial calendar view. */
+    startView = input('month', ...(ngDevMode ? [{ debugName: "startView" }] : []));
+    /** First day of week override (0=Sun, 1=Mon, ..., 6=Sat). */
+    firstDayOfWeek = input(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+    /** Placeholder text for start date. */
+    startPlaceholder = input('Start date', ...(ngDevMode ? [{ debugName: "startPlaceholder" }] : []));
+    /** Placeholder text for end date. */
+    endPlaceholder = input('End date', ...(ngDevMode ? [{ debugName: "endPlaceholder" }] : []));
+    /** Whether the datepicker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Whether the datepicker is required. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /** Display format for the date. */
+    dateFormat = input('medium', ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
+    /** Show a clear button in the trigger. */
+    showClearButton = input(false, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    /** Show a today button in the footer. */
+    showTodayButton = input(false, ...(ngDevMode ? [{ debugName: "showTodayButton" }] : []));
+    /** Show a clear button in the footer. */
+    showFooterClearButton = input(false, ...(ngDevMode ? [{ debugName: "showFooterClearButton" }] : []));
+    /** Don't auto-close on complete range selection. */
+    keepOpen = input(false, ...(ngDevMode ? [{ debugName: "keepOpen" }] : []));
+    /** Allow manual text input. */
+    allowManualInput = input(true, ...(ngDevMode ? [{ debugName: "allowManualInput" }] : []));
+    /** Additional CSS classes for the panel. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    /** Panel width strategy. */
+    panelWidth = input('auto', ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    /** CVA variant for trigger styling. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size variant. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Validation state. */
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** Additional CSS classes for the trigger. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Accessible label for the start input. */
+    startAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "startAriaLabel" }] : []));
+    /** Accessible label for the end input. */
+    endAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "endAriaLabel" }] : []));
+    /** Custom error state matcher for determining when to show errors. */
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    // Signal Forms inputs — set automatically by [formField] via setInputOnDirectives
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    sfErrors = input([], { ...(ngDevMode ? { debugName: "sfErrors" } : {}), alias: 'errors' });
+    /** Whether to show time pickers below the calendar. */
+    showTimePicker = input(false, ...(ngDevMode ? [{ debugName: "showTimePicker" }] : []));
+    /** 12h vs 24h format for the time pickers. `null` = auto-detect. */
+    use12HourFormat = input(null, ...(ngDevMode ? [{ debugName: "use12HourFormat" }] : []));
+    /** Whether the time pickers show seconds. */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    /** Step interval for minutes in the time pickers. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
+    // ============ OUTPUTS ============
+    /** Emitted when a complete range is selected. */
+    rangeChange = output();
+    /** Emitted when the panel opens. */
+    opened = output();
+    /** Emitted when the panel closes. */
+    closed = output();
+    // ============ INTERNAL STATE ============
+    /** Whether the panel is open. */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Which input is currently focused. */
+    activeInput = signal(null, ...(ngDevMode ? [{ debugName: "activeInput" }] : []));
+    /** Internal value state (managed by CVA or input). */
+    internalValue = linkedSignal(() => this.value() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
+    calendarActiveDate = linkedSignal({ ...(ngDevMode ? { debugName: "calendarActiveDate" } : {}), source: () => ({ value: this.internalValue(), startAt: this.startAt() }),
+        computation: ({ value, startAt }) => value?.start ?? startAt ?? this.dateAdapter.today() });
+    /** Live announcements for screen readers. */
+    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** Whether any input is focused. */
+    _inputFocused = signal(false, ...(ngDevMode ? [{ debugName: "_inputFocused" }] : []));
+    /** IDs for aria-describedby (set by form-field). */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    /** Form field appearance (set by form-field). */
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
+    // ============ FormFieldControl SIGNALS ============
+    /** Whether the date range picker is focused. Implements FormFieldControl. */
+    focused = computed(() => this._inputFocused() || this.isOpen(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Whether the label should float. */
+    shouldLabelFloat = computed(() => this.focused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    errorState = computed(() => {
+        if (!this.ngControl) {
+            return this.invalid() && this.touched();
+        }
+        this.isOpen();
+        this.hasValue();
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Structured validation errors from Signal Forms. */
+    errors = computed(() => !this.ngControl ? this.sfErrors() : null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    /** Unique ID for the control (maps to start input). Implements FormFieldControl. */
+    id = computed(() => `${this.datepickerId}-start`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    effectiveState = computed(() => {
+        const manualState = this.state();
+        if (manualState !== 'default')
+            return manualState;
+        return this.errorState() ? 'error' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
+    /** Combined aria-describedby from form-field. */
+    effectiveAriaDescribedBy = computed(() => this._describedByIds() || null, ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedBy" }] : []));
+    // ============ COMPUTED STATE ============
+    /** Start input element ID (alias for FormFieldControl id). */
+    startInputId = this.id;
+    /** End input element ID. */
+    endInputId = computed(() => `${this.datepickerId}-end`, ...(ngDevMode ? [{ debugName: "endInputId" }] : []));
+    /** Panel element ID. */
+    panelId = computed(() => `${this.datepickerId}-panel`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /** Whether the datepicker has a value. */
+    hasValue = computed(() => {
+        const value = this.internalValue();
+        return value !== null && (value.start !== null || value.end !== null);
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /** Icon size based on datepicker size. */
+    iconSize = computed(() => {
+        const sizeMap = {
+            sm: 'sm',
+            default: 'md',
+            lg: 'lg',
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    /** Calendar selection (converts DateRangeValue to DateRange for calendar). */
+    calendarSelection = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return null;
+        return { start: value.start, end: value.end };
+    }, ...(ngDevMode ? [{ debugName: "calendarSelection" }] : []));
+    /** Formatted start display value. */
+    startDisplayValue = computed(() => {
+        const value = this.internalValue();
+        if (!value?.start)
+            return '';
+        return this.dateAdapter.format(value.start, this.effectiveDateFormat());
+    }, ...(ngDevMode ? [{ debugName: "startDisplayValue" }] : []));
+    /** Formatted end display value. */
+    endDisplayValue = computed(() => {
+        const value = this.internalValue();
+        if (!value?.end)
+            return '';
+        return this.dateAdapter.format(value.end, this.effectiveDateFormat());
+    }, ...(ngDevMode ? [{ debugName: "endDisplayValue" }] : []));
+    /** Computed trigger classes. */
+    triggerClasses = computed(() => {
+        const baseClasses = datepickerTriggerVariants({
+            variant: this.variant(),
+            size: this.size(),
+            state: this.effectiveState(),
+            open: this.isOpen(),
+        });
+        const disabledClasses = this.disabled() ? datepickerDisabledVariants() : '';
+        // For naked variant, add padding based on form-field appearance
+        let paddingClasses = '';
+        if (this.variant() === 'naked') {
+            paddingClasses = this._appearance() === 'fill' ? 'pt-5 pb-1.5 px-3' : 'py-2.5 px-3';
+        }
+        return mergeClasses(baseClasses, disabledClasses, paddingClasses, this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    /** Computed input classes. */
+    inputClasses = computed(() => {
+        return datepickerInputVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    /** Computed separator classes. */
+    separatorClasses = computed(() => {
+        return datepickerRangeSeparatorVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "separatorClasses" }] : []));
+    /** Computed icon classes. */
+    iconClasses = computed(() => {
+        return datepickerIconVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    /** Computed clear button classes. */
+    clearClasses = computed(() => {
+        return datepickerClearVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "clearClasses" }] : []));
+    /** Computed panel classes. */
+    panelClasses = computed(() => {
+        const baseClasses = datepickerPanelVariants({ size: this.size() });
+        return joinClasses(baseClasses, this.panelClass());
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Computed footer classes. */
+    footerClasses = computed(() => {
+        return datepickerFooterVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "footerClasses" }] : []));
+    /** Computed today button classes. */
+    todayButtonClasses = computed(() => {
+        return datepickerFooterButtonVariants({ size: this.size(), variant: 'primary' });
+    }, ...(ngDevMode ? [{ debugName: "todayButtonClasses" }] : []));
+    /** Computed clear button classes (footer). */
+    clearButtonClasses = computed(() => {
+        return datepickerFooterButtonVariants({ size: this.size(), variant: 'secondary' });
+    }, ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : []));
+    /** Time section divider classes. */
+    timeSectionClasses = computed(() => {
+        return timepickerSectionVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "timeSectionClasses" }] : []));
+    /** Time label classes. */
+    timeLabelClasses = computed(() => {
+        return timepickerLabelVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "timeLabelClasses" }] : []));
+    /** Start time value derived from the start date. */
+    startTimeValue = computed(() => {
+        const value = this.internalValue();
+        if (!value?.start)
+            return null;
+        return createTimeValue(this.dateAdapter.getHours(value.start), this.dateAdapter.getMinutes(value.start), this.dateAdapter.getSeconds(value.start));
+    }, ...(ngDevMode ? [{ debugName: "startTimeValue" }] : []));
+    /** End time value derived from the end date. */
+    endTimeValue = computed(() => {
+        const value = this.internalValue();
+        if (!value?.end)
+            return null;
+        return createTimeValue(this.dateAdapter.getHours(value.end), this.dateAdapter.getMinutes(value.end), this.dateAdapter.getSeconds(value.end));
+    }, ...(ngDevMode ? [{ debugName: "endTimeValue" }] : []));
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    effectiveDateFormat = computed(() => {
+        if (this.showTimePicker()) {
+            return this.showSeconds() ? 'dateTimeLong' : 'dateTimeMedium';
+        }
+        return this.dateFormat();
+    }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    effectiveKeepOpen = computed(() => {
+        return this.keepOpen() || this.showTimePicker();
+    }, ...(ngDevMode ? [{ debugName: "effectiveKeepOpen" }] : []));
+    // ============ CVA CALLBACKS ============
+    onChange = () => { };
+    onTouched = () => { };
+    onValidatorChange = () => { };
+    constructor() {
+        // Wire up NgControl if present
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
+    // ============ CVA IMPLEMENTATION ============
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(_isDisabled) {
+        // Disabled state is handled via the disabled input
+    }
+    // ============ VALIDATOR IMPLEMENTATION ============
+    validate() {
+        const value = this.internalValue();
+        // Required validation
+        if (this.required() && (!value || (!value.start && !value.end))) {
+            return { required: true };
+        }
+        if (value) {
+            const { start, end } = value;
+            const min = this.min();
+            const max = this.max();
+            const dateFilter = this.dateFilter();
+            // Min validation for start
+            if (start && min && this.dateAdapter.compareDate(start, min) < 0) {
+                return { minDate: { min, actual: start } };
+            }
+            // Max validation for end
+            if (end && max && this.dateAdapter.compareDate(end, max) > 0) {
+                return { maxDate: { max, actual: end } };
+            }
+            // Date filter validation
+            if (start && dateFilter && !dateFilter(start)) {
+                return { dateFilter: { date: start } };
+            }
+            if (end && dateFilter && !dateFilter(end)) {
+                return { dateFilter: { date: end } };
+            }
+            // Range validation (start must be before or equal to end)
+            if (start && end && this.dateAdapter.compareDate(start, end) > 0) {
+                return { rangeInvalid: { start, end } };
+            }
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // ============ PUBLIC METHODS ============
+    /** Opens the datepicker panel. */
+    open() {
+        if (this.disabled() || this.isOpen()) {
+            return;
+        }
+        this.createOverlay();
+        this.isOpen.set(true);
+        this.opened.emit();
+        this.announce('Calendar opened. Select a start date.');
+    }
+    /** Closes the datepicker panel. */
+    close() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.destroyOverlay();
+        this.isOpen.set(false);
+        this.closed.emit();
+        this.onTouched();
+        this.touched.set(true);
+        // Return focus to appropriate input
+        const activeInput = this.activeInput();
+        if (activeInput === 'end') {
+            this.endInputRef().nativeElement.focus();
+        }
+        else {
+            this.startInputRef().nativeElement.focus();
+        }
+    }
+    /** Toggles the datepicker panel. */
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Clears the selected date range. */
+    clear(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        this.updateValue(null);
+        this.announce('Date range cleared');
+    }
+    /** Selects today's date as the start date. */
+    selectToday() {
+        const today = this.dateAdapter.today();
+        const currentValue = this.internalValue();
+        // Set today as start if no start, or as end if we have a start
+        if (!currentValue?.start) {
+            this.updateValue(createDateRangeValue(today, null));
+            this.announce('Start date set to today');
+        }
+        else if (!currentValue.end) {
+            // Ensure proper ordering
+            const newRange = this.dateAdapter.compareDate(today, currentValue.start) < 0
+                ? createDateRangeValue(today, currentValue.start)
+                : createDateRangeValue(currentValue.start, today);
+            this.updateValue(newRange);
+            if (!this.effectiveKeepOpen()) {
+                this.close();
+            }
+        }
+    }
+    // ============ EVENT HANDLERS ============
+    onTriggerClick() {
+        if (!this.disabled() && !this.isOpen()) {
+            this.open();
+        }
+    }
+    onTriggerKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    }
+    onStartInputFocus() {
+        this.activeInput.set('start');
+        this._inputFocused.set(true);
+    }
+    onEndInputFocus() {
+        this.activeInput.set('end');
+        this._inputFocused.set(true);
+    }
+    onInputKeydown(event, inputType) {
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    // Commit manual input
+                    if (inputType === 'start') {
+                        this.parseAndSetStart(this.startInputRef().nativeElement.value);
+                    }
+                    else {
+                        this.parseAndSetEnd(this.endInputRef().nativeElement.value);
+                    }
+                }
+                else {
+                    this.open();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+            case 'ArrowDown':
+                if (!this.isOpen()) {
+                    event.preventDefault();
+                    this.open();
+                }
+                break;
+            case 'Tab':
+                // Allow natural tab navigation between inputs
+                break;
+        }
+    }
+    onStartInputChange(_event) {
+        // Debounced in blur handler
+    }
+    onEndInputChange(_event) {
+        // Debounced in blur handler
+    }
+    onStartInputBlur() {
+        this._inputFocused.set(false);
+        if (this.allowManualInput()) {
+            this.parseAndSetStart(this.startInputRef().nativeElement.value);
+        }
+        this.onTouched();
+        this.touched.set(true);
+    }
+    onEndInputBlur() {
+        this._inputFocused.set(false);
+        if (this.allowManualInput()) {
+            this.parseAndSetEnd(this.endInputRef().nativeElement.value);
+        }
+        this.onTouched();
+        this.touched.set(true);
+    }
+    onPanelKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    onCalendarSelectionChange(selection) {
+        // The calendar emits the selection from the strategy
+        const range = selection;
+        if (range) {
+            const newValue = createDateRangeValue(range.start, range.end);
+            this.updateValue(newValue);
+            if (range.start && range.end) {
+                // Complete range selected
+                this.announce(`Range selected: ${this.formatDate(range.start)} to ${this.formatDate(range.end)}`);
+                if (!this.effectiveKeepOpen()) {
+                    this.close();
+                }
+            }
+            else if (range.start) {
+                this.announce(`Start date selected: ${this.formatDate(range.start)}. Now select end date.`);
+            }
+        }
+    }
+    onActiveDateChange(date) {
+        this.calendarActiveDate.set(date);
+    }
+    onStartTimeChange(time) {
+        if (!time)
+            return;
+        const value = this.internalValue();
+        const startDate = value?.start ?? this.dateAdapter.today();
+        const updated = this.dateAdapter.setTime(startDate, time.hours, time.minutes, time.seconds);
+        this.updateValue(createDateRangeValue(updated, value?.end ?? null));
+    }
+    onEndTimeChange(time) {
+        if (!time)
+            return;
+        const value = this.internalValue();
+        const endDate = value?.end ?? this.dateAdapter.today();
+        const updated = this.dateAdapter.setTime(endDate, time.hours, time.minutes, time.seconds);
+        this.updateValue(createDateRangeValue(value?.start ?? null, updated));
+    }
+    // ============ FormFieldControl IMPLEMENTATION ============
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event) {
+        const target = event.target;
+        if (!this.disabled() && !this.triggerRef().nativeElement.contains(target)) {
+            this.open();
+            this.startInputRef().nativeElement.focus();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
+    // ============ PRIVATE METHODS ============
+    createOverlay() {
+        if (this.overlayRef) {
+            return;
+        }
+        const hostEl = this.elementRef.nativeElement;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(hostEl)
+            .withPositions(DEFAULT_POSITIONS)
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        // Attach panel template
+        const portal = new TemplatePortal(this.panelTemplateRef(), this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on backdrop click
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        // Close on outside click
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+    }
+    destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    updateValue(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.rangeChange.emit(value);
+        this.onValidatorChange();
+    }
+    parseAndSetStart(inputValue) {
+        const currentValue = this.internalValue();
+        if (!inputValue.trim()) {
+            // Clear start date
+            if (currentValue?.start) {
+                this.updateValue(createDateRangeValue(null, currentValue.end));
+            }
+            return;
+        }
+        const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
+        if (parsed && this.dateAdapter.isValid(parsed) && this.isDateValid(parsed)) {
+            // Ensure start <= end
+            if (currentValue?.end && this.dateAdapter.compareDate(parsed, currentValue.end) > 0) {
+                // Swap dates
+                this.updateValue(createDateRangeValue(currentValue.end, parsed));
+            }
+            else {
+                this.updateValue(createDateRangeValue(parsed, currentValue?.end ?? null));
+            }
+        }
+        else {
+            // Revert to current value
+            this.startInputRef().nativeElement.value = this.startDisplayValue();
+        }
+    }
+    parseAndSetEnd(inputValue) {
+        const currentValue = this.internalValue();
+        if (!inputValue.trim()) {
+            // Clear end date
+            if (currentValue?.end) {
+                this.updateValue(createDateRangeValue(currentValue.start, null));
+            }
+            return;
+        }
+        const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
+        if (parsed && this.dateAdapter.isValid(parsed) && this.isDateValid(parsed)) {
+            // Ensure start <= end
+            if (currentValue?.start && this.dateAdapter.compareDate(parsed, currentValue.start) < 0) {
+                // Swap dates
+                this.updateValue(createDateRangeValue(parsed, currentValue.start));
+            }
+            else {
+                this.updateValue(createDateRangeValue(currentValue?.start ?? null, parsed));
+            }
+        }
+        else {
+            // Revert to current value
+            this.endInputRef().nativeElement.value = this.endDisplayValue();
+        }
+    }
+    isDateValid(date) {
+        const min = this.min();
+        const max = this.max();
+        const filter = this.dateFilter();
+        if (min && this.dateAdapter.compareDate(date, min) < 0) {
+            return false;
+        }
+        if (max && this.dateAdapter.compareDate(date, max) > 0) {
+            return false;
+        }
+        if (filter && !filter(date)) {
+            return false;
+        }
+        return true;
+    }
+    formatDate(date) {
+        return this.dateAdapter.format(date, 'long');
+    }
+    announce(message) {
+        this.liveAnnouncement.set(message);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDateRangePicker, isStandalone: true, selector: "com-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-date-range-picker-disabled": "disabled()", "class.com-date-range-picker-open": "isOpen()" }, classAttribute: "com-date-range-picker-host inline-block" }, providers: [
+            RangeSelectionStrategy,
+            { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },
+            { provide: FormFieldControl, useExisting: forwardRef(() => ComDateRangePicker) },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "startInputRef", first: true, predicate: ["startInputElement"], descendants: true, isSignal: true }, { propertyName: "endInputRef", first: true, predicate: ["endInputElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDateRangePicker"], ngImport: i0, template: `
+    <!-- Trigger container -->
+    <div
+      #triggerElement
+      [class]="triggerClasses()"
+      role="group"
+      tabindex="-1"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-owns]="panelId()"
+      [attr.aria-disabled]="disabled() || null"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <!-- Start date input -->
+      <input
+        #startInputElement
+        type="text"
+        [class]="inputClasses()"
+        [value]="startDisplayValue()"
+        [placeholder]="startPlaceholder()"
+        [disabled]="disabled()"
+        [readonly]="!allowManualInput()"
+        [attr.id]="startInputId()"
+        [attr.aria-label]="startAriaLabel() || startPlaceholder()"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
+        [attr.aria-required]="required() || null"
+        (focus)="onStartInputFocus()"
+        (input)="onStartInputChange($event)"
+        (blur)="onStartInputBlur()"
+        (keydown)="onInputKeydown($event, 'start')"
+      />
+
+      <!-- Range separator -->
+      <span [class]="separatorClasses()">
+        <com-icon name="arrow-right" [size]="iconSize()" />
+      </span>
+
+      <!-- End date input -->
+      <input
+        #endInputElement
+        type="text"
+        [class]="inputClasses()"
+        [value]="endDisplayValue()"
+        [placeholder]="endPlaceholder()"
+        [disabled]="disabled()"
+        [readonly]="!allowManualInput()"
+        [attr.id]="endInputId()"
+        [attr.aria-label]="endAriaLabel() || endPlaceholder()"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
+        (focus)="onEndInputFocus()"
+        (input)="onEndInputChange($event)"
+        (blur)="onEndInputBlur()"
+        (keydown)="onInputKeydown($event, 'end')"
+      />
+
+      <!-- Clear button -->
+      @if (showClearButton() && hasValue() && !disabled()) {
+        <button
+          type="button"
+          [class]="clearClasses()"
+          [attr.aria-label]="'Clear date range'"
+          (click)="clear($event)"
+        >
+          <com-icon name="x" [size]="iconSize()" />
+        </button>
+      }
+
+      <!-- Calendar icon -->
+      <button
+        type="button"
+        [class]="iconClasses()"
+        [attr.aria-label]="isOpen() ? 'Close calendar' : 'Open calendar'"
+        [disabled]="disabled()"
+        tabindex="-1"
+      >
+        <com-icon name="calendar" [size]="iconSize()" />
+      </button>
+    </div>
+
+    <!-- Panel template (rendered in overlay) -->
+    <ng-template #panelTemplate>
+      <div
+        [class]="panelClasses()"
+        [attr.id]="panelId()"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="'Choose date range'"
+        (keydown)="onPanelKeydown($event)"
+        cdkTrapFocus
+        [cdkTrapFocusAutoCapture]="true"
+      >
+        <com-calendar
+          [activeDate]="calendarActiveDate()"
+          [selected]="calendarSelection()"
+          [minDate]="min()"
+          [maxDate]="max()"
+          [dateFilter]="dateFilter()"
+          [startView]="startView()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [monthColumns]="2"
+          [bordered]="false"
+          (selectedChange)="onCalendarSelectionChange($event)"
+          (activeDateChange)="onActiveDateChange($event)"
+        />
+
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <div class="flex items-center gap-3">
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">Start time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="startTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="Start time"
+                  (timeChange)="onStartTimeChange($event)"
+                />
+              </div>
+              <span class="text-muted-foreground mt-5">
+                <com-icon name="arrow-right" [size]="iconSize()" />
+              </span>
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">End time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="endTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="End time"
+                  (timeChange)="onEndTimeChange($event)"
+                />
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+          <div [class]="footerClasses()">
+            @if (showTodayButton()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="selectToday()"
+              >
+                Today
+              </button>
+            }
+            @if (showFooterClearButton()) {
+              <button
+                type="button"
+                [class]="clearButtonClasses()"
+                (click)="clear($event)"
+              >
+                Clear
+              </button>
+            }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- Live announcer region -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: ComTimePicker, selector: "com-time-picker", inputs: ["value", "disabled", "required", "showSeconds", "use12HourFormat", "minuteStep", "secondStep", "minTime", "maxTime", "variant", "size", "state", "ariaLabel", "class", "placeholder", "errorStateMatcher", "touched", "invalid", "errors"], outputs: ["valueChange", "disabledChange", "touchedChange", "timeChange"], exportAs: ["comTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDateRangePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-date-range-picker', exportAs: 'comDateRangePicker', template: `
+    <!-- Trigger container -->
+    <div
+      #triggerElement
+      [class]="triggerClasses()"
+      role="group"
+      tabindex="-1"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-owns]="panelId()"
+      [attr.aria-disabled]="disabled() || null"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <!-- Start date input -->
+      <input
+        #startInputElement
+        type="text"
+        [class]="inputClasses()"
+        [value]="startDisplayValue()"
+        [placeholder]="startPlaceholder()"
+        [disabled]="disabled()"
+        [readonly]="!allowManualInput()"
+        [attr.id]="startInputId()"
+        [attr.aria-label]="startAriaLabel() || startPlaceholder()"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
+        [attr.aria-required]="required() || null"
+        (focus)="onStartInputFocus()"
+        (input)="onStartInputChange($event)"
+        (blur)="onStartInputBlur()"
+        (keydown)="onInputKeydown($event, 'start')"
+      />
+
+      <!-- Range separator -->
+      <span [class]="separatorClasses()">
+        <com-icon name="arrow-right" [size]="iconSize()" />
+      </span>
+
+      <!-- End date input -->
+      <input
+        #endInputElement
+        type="text"
+        [class]="inputClasses()"
+        [value]="endDisplayValue()"
+        [placeholder]="endPlaceholder()"
+        [disabled]="disabled()"
+        [readonly]="!allowManualInput()"
+        [attr.id]="endInputId()"
+        [attr.aria-label]="endAriaLabel() || endPlaceholder()"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
+        (focus)="onEndInputFocus()"
+        (input)="onEndInputChange($event)"
+        (blur)="onEndInputBlur()"
+        (keydown)="onInputKeydown($event, 'end')"
+      />
+
+      <!-- Clear button -->
+      @if (showClearButton() && hasValue() && !disabled()) {
+        <button
+          type="button"
+          [class]="clearClasses()"
+          [attr.aria-label]="'Clear date range'"
+          (click)="clear($event)"
+        >
+          <com-icon name="x" [size]="iconSize()" />
+        </button>
+      }
+
+      <!-- Calendar icon -->
+      <button
+        type="button"
+        [class]="iconClasses()"
+        [attr.aria-label]="isOpen() ? 'Close calendar' : 'Open calendar'"
+        [disabled]="disabled()"
+        tabindex="-1"
+      >
+        <com-icon name="calendar" [size]="iconSize()" />
+      </button>
+    </div>
+
+    <!-- Panel template (rendered in overlay) -->
+    <ng-template #panelTemplate>
+      <div
+        [class]="panelClasses()"
+        [attr.id]="panelId()"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="'Choose date range'"
+        (keydown)="onPanelKeydown($event)"
+        cdkTrapFocus
+        [cdkTrapFocusAutoCapture]="true"
+      >
+        <com-calendar
+          [activeDate]="calendarActiveDate()"
+          [selected]="calendarSelection()"
+          [minDate]="min()"
+          [maxDate]="max()"
+          [dateFilter]="dateFilter()"
+          [startView]="startView()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [monthColumns]="2"
+          [bordered]="false"
+          (selectedChange)="onCalendarSelectionChange($event)"
+          (activeDateChange)="onActiveDateChange($event)"
+        />
+
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <div class="flex items-center gap-3">
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">Start time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="startTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="Start time"
+                  (timeChange)="onStartTimeChange($event)"
+                />
+              </div>
+              <span class="text-muted-foreground mt-5">
+                <com-icon name="arrow-right" [size]="iconSize()" />
+              </span>
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">End time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="endTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="End time"
+                  (timeChange)="onEndTimeChange($event)"
+                />
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+          <div [class]="footerClasses()">
+            @if (showTodayButton()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="selectToday()"
+              >
+                Today
+              </button>
+            }
+            @if (showFooterClearButton()) {
+              <button
+                type="button"
+                [class]="clearButtonClasses()"
+                (click)="clear($event)"
+              >
+                Clear
+              </button>
+            }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- Live announcer region -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, imports: [
+                        OverlayModule,
+                        A11yModule,
+                        ComCalendar,
+                        ComIcon,
+                        ComTimePicker,
+                    ], providers: [
+                        RangeSelectionStrategy,
+                        { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },
+                        { provide: FormFieldControl, useExisting: forwardRef(() => ComDateRangePicker) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'com-date-range-picker-host inline-block',
+                        '[class.com-date-range-picker-disabled]': 'disabled()',
+                        '[class.com-date-range-picker-open]': 'isOpen()',
+                    }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], startInputRef: [{ type: i0.ViewChild, args: ['startInputElement', { isSignal: true }] }], endInputRef: [{ type: i0.ViewChild, args: ['endInputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Datepicker components public API.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComDateRangePicker, ComDatepicker, createDateRangeValue, datepickerClearVariants, datepickerDisabledVariants, datepickerFooterButtonVariants, datepickerFooterVariants, datepickerIconVariants, datepickerInputVariants, datepickerPanelVariants, datepickerRangeSeparatorVariants, datepickerTriggerVariants, generateDatepickerId };
+//# sourceMappingURL=ngx-com-components-datepicker.mjs.map