ngx-com 0.0.21 → 0.1.0

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

@@ -1,14 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, LOCALE_ID, Injectable, viewChild, input, output, computed, ChangeDetectionStrategy, Component, signal, afterEveryRender, Directive, viewChildren, linkedSignal, ElementRef, DestroyRef, ViewContainerRef, DOCUMENT, effect } from '@angular/core';
+import { InjectionToken, inject, LOCALE_ID, Injectable, viewChild, input, output, computed, ChangeDetectionStrategy, Component, signal, afterEveryRender, Directive, viewChildren, linkedSignal } from '@angular/core';
 import { cva } from 'class-variance-authority';
 import { NgTemplateOutlet } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgControl } 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 { ComIcon } from 'ngx-com/components/icon';
 
 /**
  * Calendar shared types and interfaces
@@ -339,14 +332,14 @@ const calendarCellVariants = cva(
     'cursor-pointer',
     'select-none',
     'transition-colors',
-    'duration-150',
+    'duration-normal',
     'focus-visible:outline-[1px]',
     'focus-visible:outline-offset-2',
     'focus-visible:outline-ring',
 ], {
     variants: {
         view: {
-            month: ['h-9', 'w-9', 'text-sm', 'rounded-full'],
+            month: ['h-9', 'w-9', 'text-sm', 'rounded-pill'],
             year: ['h-10', 'w-16', 'text-sm', 'rounded-calendar-cell'],
             'multi-year': ['h-10', 'w-14', 'text-sm', 'rounded-calendar-cell'],
         },
@@ -369,7 +362,7 @@ const calendarCellVariants = cva(
                 'bg-primary',
                 'text-primary-foreground',
                 'font-semibold',
-                'rounded-l-full',
+                'rounded-l-pill',
                 'rounded-r-none',
                 'hover:bg-primary-hover',
             ],
@@ -383,14 +376,17 @@ const calendarCellVariants = cva(
                 'bg-primary',
                 'text-primary-foreground',
                 'font-semibold',
-                'rounded-r-full',
+                'rounded-r-pill',
                 'rounded-l-none',
                 'hover:bg-primary-hover',
             ],
+            // Preview states use opacity-70 intentionally: the reduced opacity distinguishes
+            // the hover preview range from the committed selection, providing clear UX feedback.
+            // No semantic token exists for this transient visual state.
             'preview-start': [
                 'bg-primary-subtle',
                 'text-primary-subtle-foreground',
-                'rounded-l-full',
+                'rounded-l-pill',
                 'rounded-r-none',
                 'ring-1',
                 'ring-ring',
@@ -405,7 +401,7 @@ const calendarCellVariants = cva(
             'preview-end': [
                 'bg-primary-subtle',
                 'text-primary-subtle-foreground',
-                'rounded-r-full',
+                'rounded-r-pill',
                 'rounded-l-none',
                 'ring-1',
                 'ring-ring',
@@ -444,9 +440,9 @@ const calendarCellWrapperVariants = cva(['relative', 'flex', 'items-center', 'ju
     variants: {
         range: {
             none: [],
-            start: ['bg-primary-subtle', 'rounded-l-full'],
+            start: ['bg-primary-subtle', 'rounded-l-pill'],
             middle: ['bg-primary-subtle'],
-            end: ['bg-primary-subtle', 'rounded-r-full'],
+            end: ['bg-primary-subtle', 'rounded-r-pill'],
             single: [],
         },
     },
@@ -481,7 +477,7 @@ const calendarHeaderButtonVariants = cva([
     'justify-center',
     'select-none',
     'transition-colors',
-    'duration-150',
+    'duration-normal',
     'text-foreground',
     'focus-visible:outline-[1px]',
     'focus-visible:outline-offset-2',
@@ -494,7 +490,7 @@ const calendarHeaderButtonVariants = cva([
             navigation: [
                 'h-9',
                 'w-9',
-                'rounded-full',
+                'rounded-pill',
                 'hover:bg-muted',
             ],
             period: [
@@ -696,17 +692,6 @@ function isYearDisabled(year, minDate, maxDate, adapter) {
 function getMultiYearStartingYear(activeYear, yearsPerPage = 24) {
     return Math.floor(activeYear / yearsPerPage) * yearsPerPage;
 }
-/**
- * Joins CSS class strings, filtering out null/undefined values.
- * Unlike `mergeClasses` from utils, this does NOT resolve Tailwind conflicts -
- * it simply concatenates class strings. Use when classes are guaranteed not to conflict.
- *
- * @param classes - Class strings (may include null/undefined)
- * @returns Space-separated class string
- */
-function joinClasses(...classes) {
-    return classes.filter(Boolean).join(' ');
-}
 
 /**
  * A single cell in the calendar grid.
@@ -1292,7 +1277,7 @@ const TOTAL_CELLS = DAYS_PER_WEEK * WEEKS_PER_MONTH;
 class ComCalendarMonthView extends CalendarViewBase {
     view = 'month';
     /** Cell components for focus management */
-    cellComponents = viewChildren((ComCalendarCell), ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
+    cellComponents = viewChildren(ComCalendarCell, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
     /** Override first day of week (0=Sun, 1=Mon, ..., 6=Sat) */
     firstDayOfWeek = input(0, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
     /** Grid index for dual-month display (0=left, 1=right) */
@@ -1312,8 +1297,8 @@ class ComCalendarMonthView extends CalendarViewBase {
     /** Grid of day cells (7 columns x 6 rows = 42 cells) */
     cells = computed(() => {
         const activeDate = this.activeDate();
-        const year = this.dateAdapter.getYear(activeDate);
-        const month = this.dateAdapter.getMonth(activeDate);
+        const _year = this.dateAdapter.getYear(activeDate);
+        const _month = this.dateAdapter.getMonth(activeDate);
         const firstOfMonth = this.dateAdapter.getFirstDayOfMonth(activeDate);
         const firstDayOfWeek = this.firstDayOfWeek();
         // Calculate the offset to start the grid
@@ -1441,7 +1426,7 @@ class ComCalendarMonthView extends CalendarViewBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCalendarMonthView, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendarMonthView, isStandalone: true, selector: "com-calendar-month-view", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, gridIndex: { classPropertyName: "gridIndex", publicName: "gridIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "com-calendar-month-view-host" }, viewQueries: [{ propertyName: "cellComponents", predicate: (ComCalendarCell), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendarMonthView, isStandalone: true, selector: "com-calendar-month-view", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, gridIndex: { classPropertyName: "gridIndex", publicName: "gridIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "com-calendar-month-view-host" }, viewQueries: [{ propertyName: "cellComponents", predicate: ComCalendarCell, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       role="grid"
       class="com-calendar-month-view"
@@ -1554,7 +1539,7 @@ const MONTHS_PER_YEAR = 12;
 class ComCalendarYearView extends CalendarViewBase {
     view = 'year';
     /** Cell components for focus management */
-    cellComponents = viewChildren((ComCalendarCell), ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
+    cellComponents = viewChildren(ComCalendarCell, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
     /** The year being displayed */
     displayYear = computed(() => {
         return this.dateAdapter.getYear(this.activeDate());
@@ -1566,7 +1551,7 @@ class ComCalendarYearView extends CalendarViewBase {
         const today = this.today();
         const todayYear = this.dateAdapter.getYear(today);
         const todayMonth = this.dateAdapter.getMonth(today);
-        const activeMonth = this.dateAdapter.getMonth(this.activeDate());
+        const _activeMonth = this.dateAdapter.getMonth(this.activeDate());
         const minDate = this.minDate();
         const maxDate = this.maxDate();
         const dateClass = this.dateClass();
@@ -1730,7 +1715,7 @@ class ComCalendarYearView extends CalendarViewBase {
             this.dateAdapter.compareDate(monthDate, endMonth) < 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCalendarYearView, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendarYearView, isStandalone: true, selector: "com-calendar-year-view", host: { classAttribute: "com-calendar-year-view-host" }, viewQueries: [{ propertyName: "cellComponents", predicate: (ComCalendarCell), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendarYearView, isStandalone: true, selector: "com-calendar-year-view", host: { classAttribute: "com-calendar-year-view-host" }, viewQueries: [{ propertyName: "cellComponents", predicate: ComCalendarCell, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       role="grid"
       class="com-calendar-year-view"
@@ -1812,7 +1797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ComCalendarMultiYearView extends CalendarViewBase {
     view = 'multi-year';
     /** Cell components for focus management */
-    cellComponents = viewChildren((ComCalendarCell), ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
+    cellComponents = viewChildren(ComCalendarCell, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
     /** The first year in the displayed range */
     startYear = computed(() => {
         const activeYear = this.dateAdapter.getYear(this.activeDate());
@@ -1827,7 +1812,7 @@ class ComCalendarMultiYearView extends CalendarViewBase {
         const start = this.startYear();
         const today = this.today();
         const todayYear = this.dateAdapter.getYear(today);
-        const activeYear = this.dateAdapter.getYear(this.activeDate());
+        const _activeYear = this.dateAdapter.getYear(this.activeDate());
         const minDate = this.minDate();
         const maxDate = this.maxDate();
         const dateClass = this.dateClass();
@@ -1984,7 +1969,7 @@ class ComCalendarMultiYearView extends CalendarViewBase {
         return year > startYear && year < endYear;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCalendarMultiYearView, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendarMultiYearView, isStandalone: true, selector: "com-calendar-multi-year-view", host: { classAttribute: "com-calendar-multi-year-view-host" }, viewQueries: [{ propertyName: "cellComponents", predicate: (ComCalendarCell), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendarMultiYearView, isStandalone: true, selector: "com-calendar-multi-year-view", host: { classAttribute: "com-calendar-multi-year-view-host" }, viewQueries: [{ propertyName: "cellComponents", predicate: ComCalendarCell, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       role="grid"
       class="com-calendar-multi-year-view"
@@ -2409,7 +2394,7 @@ class ComCalendar {
         optional: true,
     });
     /** Query for month views for cross-grid focus management */
-    monthViews = viewChildren((ComCalendarMonthView), ...(ngDevMode ? [{ debugName: "monthViews" }] : []));
+    monthViews = viewChildren(ComCalendarMonthView, ...(ngDevMode ? [{ debugName: "monthViews" }] : []));
     /** The date to display and navigate from */
     activeDate = input(...(ngDevMode ? [undefined, { debugName: "activeDate" }] : []));
     /** The currently selected date or date range */
@@ -2777,7 +2762,7 @@ class ComCalendar {
         this.liveAnnouncement.set(`Navigated to ${direction} ${this.periodLabel()}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendar, isStandalone: true, selector: "com-calendar", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", 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 }, monthColumns: { classPropertyName: "monthColumns", publicName: "monthColumns", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", activeDateChange: "activeDateChange" }, host: { classAttribute: "com-calendar-host block" }, viewQueries: [{ propertyName: "monthViews", predicate: (ComCalendarMonthView), descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCalendar, isStandalone: true, selector: "com-calendar", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", 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 }, monthColumns: { classPropertyName: "monthColumns", publicName: "monthColumns", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", activeDateChange: "activeDateChange" }, host: { classAttribute: "com-calendar-host block" }, viewQueries: [{ propertyName: "monthViews", predicate: ComCalendarMonthView, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       [class]="calendarClasses()"
       role="application"
@@ -3085,3076 +3070,6 @@ function provideWeekSelectionStrategy() {
     return { provide: CALENDAR_SELECTION_STRATEGY, useClass: WeekSelectionStrategy };
 }
 
-/**
- * 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-150',
-    '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',
-            ],
-        },
-        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'],
-        },
-    ],
-    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-lg',
-    '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',
-    },
-});
-
-/**
- * CVA variants for the time picker container.
- *
- * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
- *         `--color-ring`, `--color-warn`, `--color-success`, `--radius-input`
- */
-const timepickerContainerVariants = cva([
-    'inline-flex',
-    'items-center',
-    'gap-1',
-    'rounded-input',
-    'transition-colors',
-    'duration-150',
-], {
-    variants: {
-        variant: {
-            standalone: [
-                'border',
-                'border-input-border',
-                'bg-input-background',
-                'text-input-foreground',
-                'focus-within:outline-[1px]',
-                'focus-within:outline-offset-2',
-                'focus-within:outline-ring',
-            ],
-            embedded: [
-                'border-transparent',
-                'bg-transparent',
-                'text-foreground',
-            ],
-        },
-        size: {
-            sm: ['h-8', 'px-2', 'text-xs', 'gap-0.5'],
-            default: ['h-10', 'px-3', 'text-sm', 'gap-1'],
-            lg: ['h-12', 'px-4', 'text-base', 'gap-1.5'],
-        },
-        state: {
-            default: [],
-            error: [
-                'border-warn',
-                'focus-within:outline-warn',
-            ],
-            success: [
-                'border-success',
-                'focus-within:outline-success',
-            ],
-        },
-    },
-    compoundVariants: [
-        {
-            variant: 'embedded',
-            state: 'error',
-            class: [],
-        },
-        {
-            variant: 'embedded',
-            state: 'success',
-            class: [],
-        },
-    ],
-    defaultVariants: {
-        variant: 'standalone',
-        size: 'default',
-        state: 'default',
-    },
-});
-/**
- * CVA variants for the disabled state of time picker.
- *
- * @tokens `--color-disabled`, `--color-disabled-foreground`
- */
-const timepickerDisabledVariants = cva([
-    'cursor-not-allowed',
-    'bg-disabled',
-    'text-disabled-foreground',
-    'pointer-events-none',
-]);
-/**
- * CVA variants for each time segment input.
- *
- * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--radius-interactive-sm`
- */
-const timepickerSegmentVariants = cva([
-    'bg-transparent',
-    'outline-none',
-    'text-center',
-    'font-mono',
-    'tabular-nums',
-    'select-all',
-    'focus:bg-primary-subtle',
-    'focus:text-primary-subtle-foreground',
-    'focus:rounded-interactive-sm',
-], {
-    variants: {
-        size: {
-            sm: ['w-5', 'text-xs'],
-            default: ['w-7', 'text-sm'],
-            lg: ['w-9', 'text-base'],
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-/**
- * CVA variants for the colon separator.
- *
- * @tokens `--color-muted-foreground`
- */
-const timepickerSeparatorVariants = cva([
-    'text-muted-foreground',
-    'select-none',
-    'font-mono',
-], {
-    variants: {
-        size: {
-            sm: ['text-xs'],
-            default: ['text-sm'],
-            lg: ['text-base'],
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-/**
- * CVA variants for the AM/PM toggle button.
- *
- * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`, `--color-ring`,
- *         `--radius-control-sm`
- */
-const timepickerPeriodVariants = cva([
-    'inline-flex',
-    'items-center',
-    'justify-center',
-    'rounded-control-sm',
-    'font-medium',
-    'transition-colors',
-    'select-none',
-    'bg-muted',
-    'text-muted-foreground',
-    'hover:bg-muted-hover',
-    'focus-visible:outline-[1px]',
-    'focus-visible:outline-offset-2',
-    'focus-visible:outline-ring',
-], {
-    variants: {
-        size: {
-            sm: ['h-5', 'px-1', 'text-xs', 'ml-0.5'],
-            default: ['h-6', 'px-1.5', 'text-xs', 'ml-1'],
-            lg: ['h-7', 'px-2', 'text-sm', 'ml-1.5'],
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-/**
- * CVA variants for the time section divider in datepicker panel.
- *
- * @tokens `--color-border-subtle`
- */
-const timepickerSectionVariants = cva([
-    'flex',
-    'items-center',
-    'justify-center',
-    'border-t',
-    'border-border-subtle',
-], {
-    variants: {
-        size: {
-            sm: ['pt-2', 'mt-2'],
-            default: ['pt-3', 'mt-3'],
-            lg: ['pt-4', 'mt-4'],
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-/**
- * CVA variants for time labels in date range picker.
- *
- * @tokens `--color-muted-foreground`
- */
-const timepickerLabelVariants = cva([
-    'text-muted-foreground',
-    'font-medium',
-], {
-    variants: {
-        size: {
-            sm: ['text-xs'],
-            default: ['text-xs'],
-            lg: ['text-sm'],
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-
-/**
- * Types and interfaces for the TimePicker component.
- */
-/** Creates a ComTimeValue */
-function createTimeValue(hours = 0, minutes = 0, seconds = 0) {
-    return { hours, minutes, seconds };
-}
-/**
- * Compares two ComTimeValue objects.
- * @returns negative if a < b, 0 if equal, positive if a > b
- */
-function compareTime(a, b) {
-    const diff = a.hours * 3600 + a.minutes * 60 + a.seconds - (b.hours * 3600 + b.minutes * 60 + b.seconds);
-    return diff;
-}
-/** Generates a unique ID for time picker instances */
-let timePickerIdCounter = 0;
-function generateTimePickerId() {
-    return `com-time-picker-${timePickerIdCounter++}`;
-}
-
-/**
- * Time picker component with segmented numeric input fields.
- * Supports standalone usage with ControlValueAccessor and embedded usage
- * within datepicker/date-range-picker panels.
- *
- * Visual layout: `[HH] : [MM] : [SS] [AM|PM]`
- *
- * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
- *         `--color-ring`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
- *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
- *         `--color-disabled`, `--color-disabled-foreground`,
- *         `--color-warn`, `--color-success`, `--color-border`
- *
- * @example
- * ```html
- * <!-- Standalone with reactive forms -->
- * <com-time-picker formControlName="startTime" />
- *
- * <!-- 12-hour format with seconds -->
- * <com-time-picker formControlName="alarm" [use12HourFormat]="true" [showSeconds]="true" />
- *
- * <!-- 15-minute steps -->
- * <com-time-picker formControlName="meeting" [minuteStep]="15" />
- *
- * <!-- Embedded inside datepicker panel -->
- * <com-time-picker variant="embedded" [value]="time" (timeChange)="onTime($event)" />
- * ```
- */
-class ComTimePicker {
-    localeId = inject(LOCALE_ID);
-    ngControl = inject(NgControl, { optional: true, self: true });
-    timepickerId = generateTimePickerId();
-    hoursInputRef = viewChild('hoursInput', ...(ngDevMode ? [{ debugName: "hoursInputRef" }] : []));
-    minutesInputRef = viewChild('minutesInput', ...(ngDevMode ? [{ debugName: "minutesInputRef" }] : []));
-    secondsInputRef = viewChild('secondsInput', ...(ngDevMode ? [{ debugName: "secondsInputRef" }] : []));
-    periodButtonRef = viewChild('periodButton', ...(ngDevMode ? [{ debugName: "periodButtonRef" }] : []));
-    // ============ INPUTS ============
-    /** Current time value. */
-    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /** Whether the time picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /** Whether the time picker is required. */
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-    /** Whether to show the seconds segment. */
-    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
-    /** 12h vs 24h format. `null` = auto-detect from locale. */
-    use12HourFormat = input(null, ...(ngDevMode ? [{ debugName: "use12HourFormat" }] : []));
-    /** Step interval for minutes. */
-    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
-    /** Step interval for seconds. */
-    secondStep = input(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : []));
-    /** Minimum selectable time. */
-    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : []));
-    /** Maximum selectable time. */
-    maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : []));
-    /** Visual variant. */
-    variant = input('standalone', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    /** Size variant. */
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /** Validation state. */
-    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
-    /** Accessible label for the group. */
-    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    /** Additional CSS classes. */
-    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
-    /** Placeholder text for empty segments. */
-    placeholder = input('--', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    // ============ OUTPUTS ============
-    /** Emitted when time value changes. */
-    timeChange = output();
-    // ============ INTERNAL STATE ============
-    /** Internal value state. */
-    internalValue = linkedSignal(() => this.value() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
-    /** Which segment is currently focused. */
-    activeSegment = signal(null, ...(ngDevMode ? [{ debugName: "activeSegment" }] : []));
-    /** Pending typed digits for auto-advance. */
-    pendingDigits = signal('', ...(ngDevMode ? [{ debugName: "pendingDigits" }] : []));
-    /** Live announcements for screen readers. */
-    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
-    // ============ COMPUTED STATE ============
-    /** Whether to use 12-hour format. */
-    is12Hour = computed(() => {
-        const explicit = this.use12HourFormat();
-        if (explicit !== null)
-            return explicit;
-        try {
-            const options = new Intl.DateTimeFormat(this.localeId, { hour: 'numeric' }).resolvedOptions();
-            return options.hour12 === true;
-        }
-        catch {
-            return false;
-        }
-    }, ...(ngDevMode ? [{ debugName: "is12Hour" }] : []));
-    /** Current period (AM/PM). */
-    period = computed(() => {
-        const value = this.internalValue();
-        if (!value)
-            return 'AM';
-        return value.hours >= 12 ? 'PM' : 'AM';
-    }, ...(ngDevMode ? [{ debugName: "period" }] : []));
-    /** Display hours (converted from 24h to 12h when needed). */
-    displayHours = computed(() => {
-        const value = this.internalValue();
-        if (!value)
-            return null;
-        if (!this.is12Hour())
-            return value.hours;
-        const h = value.hours % 12;
-        return h === 0 ? 12 : h;
-    }, ...(ngDevMode ? [{ debugName: "displayHours" }] : []));
-    /** Formatted hours string. */
-    formattedHours = computed(() => {
-        const h = this.displayHours();
-        if (h === null)
-            return '';
-        return h.toString().padStart(2, '0');
-    }, ...(ngDevMode ? [{ debugName: "formattedHours" }] : []));
-    /** Formatted minutes string. */
-    formattedMinutes = computed(() => {
-        const value = this.internalValue();
-        if (!value)
-            return '';
-        return value.minutes.toString().padStart(2, '0');
-    }, ...(ngDevMode ? [{ debugName: "formattedMinutes" }] : []));
-    /** Formatted seconds string. */
-    formattedSeconds = computed(() => {
-        const value = this.internalValue();
-        if (!value)
-            return '';
-        return value.seconds.toString().padStart(2, '0');
-    }, ...(ngDevMode ? [{ debugName: "formattedSeconds" }] : []));
-    /** Container classes. */
-    containerClasses = computed(() => {
-        const base = timepickerContainerVariants({
-            variant: this.variant(),
-            size: this.size(),
-            state: this.state(),
-        });
-        const disabled = this.disabled() ? timepickerDisabledVariants() : '';
-        return joinClasses(base, disabled, this.userClass());
-    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
-    /** Segment input classes. */
-    segmentClasses = computed(() => {
-        return timepickerSegmentVariants({ size: this.size() });
-    }, ...(ngDevMode ? [{ debugName: "segmentClasses" }] : []));
-    /** Separator classes. */
-    separatorClasses = computed(() => {
-        return timepickerSeparatorVariants({ size: this.size() });
-    }, ...(ngDevMode ? [{ debugName: "separatorClasses" }] : []));
-    /** Period button classes. */
-    periodClasses = computed(() => {
-        return timepickerPeriodVariants({ size: this.size() });
-    }, ...(ngDevMode ? [{ debugName: "periodClasses" }] : []));
-    // ============ CVA CALLBACKS ============
-    onChange = () => { };
-    onTouched = () => { };
-    onValidatorChange = () => { };
-    constructor() {
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    // ============ 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();
-        if (this.required() && !value) {
-            return { required: true };
-        }
-        if (value) {
-            const minTime = this.minTime();
-            if (minTime && compareTime(value, minTime) < 0) {
-                return { minTime: { min: minTime, actual: value } };
-            }
-            const maxTime = this.maxTime();
-            if (maxTime && compareTime(value, maxTime) > 0) {
-                return { maxTime: { max: maxTime, actual: value } };
-            }
-        }
-        return null;
-    }
-    registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
-    }
-    // ============ EVENT HANDLERS ============
-    onSegmentFocus(segment) {
-        this.activeSegment.set(segment);
-        this.pendingDigits.set('');
-    }
-    onSegmentBlur(segment) {
-        this.activeSegment.set(null);
-        this.pendingDigits.set('');
-        this.snapToStep(segment);
-        this.onTouched();
-    }
-    onSegmentInput(event, segment) {
-        // Prevent default browser input handling — we manage value via keydown
-        const input = event.target;
-        const value = this.internalValue();
-        // Restore the formatted value to prevent browser from changing display
-        if (segment === 'hours') {
-            input.value = this.formattedHours();
-        }
-        else if (segment === 'minutes') {
-            input.value = this.formattedMinutes();
-        }
-        else {
-            input.value = this.formattedSeconds();
-        }
-    }
-    onSegmentKeydown(event, segment) {
-        switch (event.key) {
-            case 'ArrowUp':
-                event.preventDefault();
-                this.incrementSegment(segment, 1);
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this.incrementSegment(segment, -1);
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                this.focusNextSegment(segment);
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                this.focusPrevSegment(segment);
-                break;
-            case 'Home':
-                event.preventDefault();
-                this.setSegmentToMin(segment);
-                break;
-            case 'End':
-                event.preventDefault();
-                this.setSegmentToMax(segment);
-                break;
-            case 'Backspace':
-            case 'Delete':
-                event.preventDefault();
-                this.pendingDigits.set('');
-                break;
-            default:
-                if (/^[0-9]$/.test(event.key)) {
-                    event.preventDefault();
-                    this.handleDigitInput(event.key, segment);
-                }
-                break;
-        }
-    }
-    onPeriodKeydown(event) {
-        switch (event.key) {
-            case 'ArrowUp':
-            case 'ArrowDown':
-                event.preventDefault();
-                this.togglePeriod();
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                this.focusPrevSegment('period');
-                break;
-            case 'a':
-            case 'A':
-                event.preventDefault();
-                this.setPeriod('AM');
-                break;
-            case 'p':
-            case 'P':
-                event.preventDefault();
-                this.setPeriod('PM');
-                break;
-        }
-    }
-    togglePeriod() {
-        const value = this.internalValue();
-        if (!value) {
-            this.updateValue({ hours: 12, minutes: 0, seconds: 0 });
-            return;
-        }
-        const newHours = value.hours >= 12 ? value.hours - 12 : value.hours + 12;
-        this.updateValue({ ...value, hours: newHours });
-    }
-    // ============ PRIVATE METHODS ============
-    setPeriod(period) {
-        const value = this.internalValue();
-        if (!value) {
-            const hours = period === 'AM' ? 0 : 12;
-            this.updateValue({ hours, minutes: 0, seconds: 0 });
-            return;
-        }
-        const currentPeriod = this.period();
-        if (currentPeriod === period)
-            return;
-        const newHours = period === 'AM' ? value.hours - 12 : value.hours + 12;
-        this.updateValue({ ...value, hours: newHours });
-    }
-    incrementSegment(segment, direction) {
-        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
-        const step = segment === 'minutes' ? this.minuteStep() : segment === 'seconds' ? this.secondStep() : 1;
-        const delta = step * direction;
-        let newValue;
-        switch (segment) {
-            case 'hours': {
-                const max = this.is12Hour() ? 12 : 23;
-                const min = this.is12Hour() ? 1 : 0;
-                let h = this.is12Hour() ? (this.displayHours() ?? min) : value.hours;
-                h += delta;
-                // Wrap
-                if (this.is12Hour()) {
-                    if (h > max)
-                        h = min;
-                    if (h < min)
-                        h = max;
-                    // Convert back to 24h
-                    const isPM = this.period() === 'PM';
-                    let h24 = h === 12 ? 0 : h;
-                    if (isPM)
-                        h24 += 12;
-                    newValue = { ...value, hours: h24 };
-                }
-                else {
-                    if (h > 23)
-                        h = 0;
-                    if (h < 0)
-                        h = 23;
-                    newValue = { ...value, hours: h };
-                }
-                break;
-            }
-            case 'minutes': {
-                let m = value.minutes + delta;
-                if (m > 59)
-                    m = 0;
-                if (m < 0)
-                    m = 59;
-                newValue = { ...value, minutes: m };
-                break;
-            }
-            case 'seconds': {
-                let s = value.seconds + delta;
-                if (s > 59)
-                    s = 0;
-                if (s < 0)
-                    s = 59;
-                newValue = { ...value, seconds: s };
-                break;
-            }
-        }
-        this.updateValue(newValue);
-    }
-    handleDigitInput(digit, segment) {
-        const pending = this.pendingDigits() + digit;
-        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
-        let parsed = parseInt(pending, 10);
-        switch (segment) {
-            case 'hours': {
-                const max = this.is12Hour() ? 12 : 23;
-                const min = this.is12Hour() ? 1 : 0;
-                if (parsed > max)
-                    parsed = parseInt(digit, 10);
-                if (parsed < min && pending.length >= 2)
-                    parsed = min;
-                // Convert to 24h if 12h mode
-                let h24 = parsed;
-                if (this.is12Hour()) {
-                    const isPM = this.period() === 'PM';
-                    h24 = parsed === 12 ? 0 : parsed;
-                    if (isPM)
-                        h24 += 12;
-                }
-                this.updateValue({ ...value, hours: h24 });
-                break;
-            }
-            case 'minutes': {
-                if (parsed > 59)
-                    parsed = parseInt(digit, 10);
-                this.updateValue({ ...value, minutes: parsed });
-                break;
-            }
-            case 'seconds': {
-                if (parsed > 59)
-                    parsed = parseInt(digit, 10);
-                this.updateValue({ ...value, seconds: parsed });
-                break;
-            }
-        }
-        // Auto-advance after 2 digits
-        if (pending.length >= 2) {
-            this.pendingDigits.set('');
-            this.focusNextSegment(segment);
-        }
-        else {
-            this.pendingDigits.set(pending);
-        }
-    }
-    snapToStep(segment) {
-        const value = this.internalValue();
-        if (!value)
-            return;
-        if (segment === 'minutes' && this.minuteStep() > 1) {
-            const step = this.minuteStep();
-            const snapped = Math.round(value.minutes / step) * step;
-            const clamped = Math.min(snapped, 59);
-            if (clamped !== value.minutes) {
-                this.updateValue({ ...value, minutes: clamped });
-            }
-        }
-        if (segment === 'seconds' && this.secondStep() > 1) {
-            const step = this.secondStep();
-            const snapped = Math.round(value.seconds / step) * step;
-            const clamped = Math.min(snapped, 59);
-            if (clamped !== value.seconds) {
-                this.updateValue({ ...value, seconds: clamped });
-            }
-        }
-    }
-    setSegmentToMin(segment) {
-        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
-        switch (segment) {
-            case 'hours': {
-                if (this.is12Hour()) {
-                    // Min display is 1; convert to 24h
-                    const isPM = this.period() === 'PM';
-                    const h24 = isPM ? 13 : 1;
-                    this.updateValue({ ...value, hours: h24 });
-                }
-                else {
-                    this.updateValue({ ...value, hours: 0 });
-                }
-                break;
-            }
-            case 'minutes':
-                this.updateValue({ ...value, minutes: 0 });
-                break;
-            case 'seconds':
-                this.updateValue({ ...value, seconds: 0 });
-                break;
-        }
-    }
-    setSegmentToMax(segment) {
-        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
-        switch (segment) {
-            case 'hours': {
-                if (this.is12Hour()) {
-                    // Max display is 12; 12 in 12h = 0 in 24h (for AM) or 12 (for PM)
-                    const isPM = this.period() === 'PM';
-                    const h24 = isPM ? 12 : 0;
-                    this.updateValue({ ...value, hours: h24 });
-                }
-                else {
-                    this.updateValue({ ...value, hours: 23 });
-                }
-                break;
-            }
-            case 'minutes':
-                this.updateValue({ ...value, minutes: 59 });
-                break;
-            case 'seconds':
-                this.updateValue({ ...value, seconds: 59 });
-                break;
-        }
-    }
-    focusNextSegment(current) {
-        switch (current) {
-            case 'hours':
-                this.minutesInputRef()?.nativeElement.focus();
-                break;
-            case 'minutes':
-                if (this.showSeconds()) {
-                    this.secondsInputRef()?.nativeElement.focus();
-                }
-                else if (this.is12Hour()) {
-                    this.periodButtonRef()?.nativeElement.focus();
-                }
-                break;
-            case 'seconds':
-                if (this.is12Hour()) {
-                    this.periodButtonRef()?.nativeElement.focus();
-                }
-                break;
-        }
-    }
-    focusPrevSegment(current) {
-        switch (current) {
-            case 'minutes':
-                this.hoursInputRef()?.nativeElement.focus();
-                break;
-            case 'seconds':
-                this.minutesInputRef()?.nativeElement.focus();
-                break;
-            case 'period':
-                if (this.showSeconds()) {
-                    this.secondsInputRef()?.nativeElement.focus();
-                }
-                else {
-                    this.minutesInputRef()?.nativeElement.focus();
-                }
-                break;
-        }
-    }
-    updateValue(value) {
-        this.internalValue.set(value);
-        this.onChange(value);
-        this.timeChange.emit(value);
-        this.onValidatorChange();
-        if (value) {
-            const h = this.is12Hour()
-                ? `${(value.hours % 12 || 12)}:${value.minutes.toString().padStart(2, '0')}${this.showSeconds() ? ':' + value.seconds.toString().padStart(2, '0') : ''} ${value.hours >= 12 ? 'PM' : 'AM'}`
-                : `${value.hours.toString().padStart(2, '0')}:${value.minutes.toString().padStart(2, '0')}${this.showSeconds() ? ':' + value.seconds.toString().padStart(2, '0') : ''}`;
-            this.liveAnnouncement.set(`Time set to ${h}`);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComTimePicker, isStandalone: true, selector: "com-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange" }, host: { properties: { "class.com-time-picker-disabled": "disabled()", "attr.role": "\"group\"", "attr.aria-label": "ariaLabel() || \"Time picker\"", "attr.aria-disabled": "disabled() || null" }, classAttribute: "com-time-picker-host inline-block" }, viewQueries: [{ propertyName: "hoursInputRef", first: true, predicate: ["hoursInput"], descendants: true, isSignal: true }, { propertyName: "minutesInputRef", first: true, predicate: ["minutesInput"], descendants: true, isSignal: true }, { propertyName: "secondsInputRef", first: true, predicate: ["secondsInput"], descendants: true, isSignal: true }, { propertyName: "periodButtonRef", first: true, predicate: ["periodButton"], descendants: true, isSignal: true }], exportAs: ["comTimePicker"], ngImport: i0, template: `
-    <div [class]="containerClasses()">
-      <!-- Hours -->
-      <input
-        #hoursInput
-        type="text"
-        inputmode="numeric"
-        role="spinbutton"
-        [class]="segmentClasses()"
-        [attr.aria-label]="'Hours'"
-        [attr.aria-valuenow]="displayHours()"
-        [attr.aria-valuemin]="is12Hour() ? 1 : 0"
-        [attr.aria-valuemax]="is12Hour() ? 12 : 23"
-        [value]="formattedHours()"
-        [placeholder]="placeholder()"
-        [disabled]="disabled()"
-        maxlength="2"
-        (keydown)="onSegmentKeydown($event, 'hours')"
-        (input)="onSegmentInput($event, 'hours')"
-        (focus)="onSegmentFocus('hours')"
-        (blur)="onSegmentBlur('hours')"
-      />
-
-      <span [class]="separatorClasses()" aria-hidden="true">:</span>
-
-      <!-- Minutes -->
-      <input
-        #minutesInput
-        type="text"
-        inputmode="numeric"
-        role="spinbutton"
-        [class]="segmentClasses()"
-        [attr.aria-label]="'Minutes'"
-        [attr.aria-valuenow]="internalValue()?.minutes ?? null"
-        [attr.aria-valuemin]="0"
-        [attr.aria-valuemax]="59"
-        [value]="formattedMinutes()"
-        [placeholder]="placeholder()"
-        [disabled]="disabled()"
-        maxlength="2"
-        (keydown)="onSegmentKeydown($event, 'minutes')"
-        (input)="onSegmentInput($event, 'minutes')"
-        (focus)="onSegmentFocus('minutes')"
-        (blur)="onSegmentBlur('minutes')"
-      />
-
-      @if (showSeconds()) {
-        <span [class]="separatorClasses()" aria-hidden="true">:</span>
-
-        <!-- Seconds -->
-        <input
-          #secondsInput
-          type="text"
-          inputmode="numeric"
-          role="spinbutton"
-          [class]="segmentClasses()"
-          [attr.aria-label]="'Seconds'"
-          [attr.aria-valuenow]="internalValue()?.seconds ?? null"
-          [attr.aria-valuemin]="0"
-          [attr.aria-valuemax]="59"
-          [value]="formattedSeconds()"
-          [placeholder]="placeholder()"
-          [disabled]="disabled()"
-          maxlength="2"
-          (keydown)="onSegmentKeydown($event, 'seconds')"
-          (input)="onSegmentInput($event, 'seconds')"
-          (focus)="onSegmentFocus('seconds')"
-          (blur)="onSegmentBlur('seconds')"
-        />
-      }
-
-      @if (is12Hour()) {
-        <button
-          #periodButton
-          type="button"
-          [class]="periodClasses()"
-          [attr.aria-label]="'Toggle AM/PM, currently ' + period()"
-          [disabled]="disabled()"
-          (click)="togglePeriod()"
-          (keydown)="onPeriodKeydown($event)"
-        >
-          {{ period() }}
-        </button>
-      }
-    </div>
-
-    <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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTimePicker, decorators: [{
-            type: Component,
-            args: [{ selector: 'com-time-picker', exportAs: 'comTimePicker', template: `
-    <div [class]="containerClasses()">
-      <!-- Hours -->
-      <input
-        #hoursInput
-        type="text"
-        inputmode="numeric"
-        role="spinbutton"
-        [class]="segmentClasses()"
-        [attr.aria-label]="'Hours'"
-        [attr.aria-valuenow]="displayHours()"
-        [attr.aria-valuemin]="is12Hour() ? 1 : 0"
-        [attr.aria-valuemax]="is12Hour() ? 12 : 23"
-        [value]="formattedHours()"
-        [placeholder]="placeholder()"
-        [disabled]="disabled()"
-        maxlength="2"
-        (keydown)="onSegmentKeydown($event, 'hours')"
-        (input)="onSegmentInput($event, 'hours')"
-        (focus)="onSegmentFocus('hours')"
-        (blur)="onSegmentBlur('hours')"
-      />
-
-      <span [class]="separatorClasses()" aria-hidden="true">:</span>
-
-      <!-- Minutes -->
-      <input
-        #minutesInput
-        type="text"
-        inputmode="numeric"
-        role="spinbutton"
-        [class]="segmentClasses()"
-        [attr.aria-label]="'Minutes'"
-        [attr.aria-valuenow]="internalValue()?.minutes ?? null"
-        [attr.aria-valuemin]="0"
-        [attr.aria-valuemax]="59"
-        [value]="formattedMinutes()"
-        [placeholder]="placeholder()"
-        [disabled]="disabled()"
-        maxlength="2"
-        (keydown)="onSegmentKeydown($event, 'minutes')"
-        (input)="onSegmentInput($event, 'minutes')"
-        (focus)="onSegmentFocus('minutes')"
-        (blur)="onSegmentBlur('minutes')"
-      />
-
-      @if (showSeconds()) {
-        <span [class]="separatorClasses()" aria-hidden="true">:</span>
-
-        <!-- Seconds -->
-        <input
-          #secondsInput
-          type="text"
-          inputmode="numeric"
-          role="spinbutton"
-          [class]="segmentClasses()"
-          [attr.aria-label]="'Seconds'"
-          [attr.aria-valuenow]="internalValue()?.seconds ?? null"
-          [attr.aria-valuemin]="0"
-          [attr.aria-valuemax]="59"
-          [value]="formattedSeconds()"
-          [placeholder]="placeholder()"
-          [disabled]="disabled()"
-          maxlength="2"
-          (keydown)="onSegmentKeydown($event, 'seconds')"
-          (input)="onSegmentInput($event, 'seconds')"
-          (focus)="onSegmentFocus('seconds')"
-          (blur)="onSegmentBlur('seconds')"
-        />
-      }
-
-      @if (is12Hour()) {
-        <button
-          #periodButton
-          type="button"
-          [class]="periodClasses()"
-          [attr.aria-label]="'Toggle AM/PM, currently ' + period()"
-          [disabled]="disabled()"
-          (click)="togglePeriod()"
-          (keydown)="onPeriodKeydown($event)"
-        >
-          {{ period() }}
-        </button>
-      }
-    </div>
-
-    <div class="sr-only" aria-live="polite" aria-atomic="true">
-      {{ liveAnnouncement() }}
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'com-time-picker-host inline-block',
-                        '[class.com-time-picker-disabled]': 'disabled()',
-                        '[attr.role]': '"group"',
-                        '[attr.aria-label]': 'ariaLabel() || "Time picker"',
-                        '[attr.aria-disabled]': 'disabled() || null',
-                    }, 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: { hoursInputRef: [{ type: i0.ViewChild, args: ['hoursInput', { isSignal: true }] }], minutesInputRef: [{ type: i0.ViewChild, args: ['minutesInput', { isSignal: true }] }], secondsInputRef: [{ type: i0.ViewChild, args: ['secondsInput', { isSignal: true }] }], periodButtonRef: [{ type: i0.ViewChild, args: ['periodButton', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
-
-/** 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);
-    /** Optional NgControl for form integration. */
-    ngControl = inject(NgControl, { optional: true, self: 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 = input(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" }] : []));
-    /** 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. */
-    calendarActiveDate = signal(this.dateAdapter.today(), ...(ngDevMode ? [{ debugName: "calendarActiveDate" }] : []));
-    /** Live announcements for screen readers. */
-    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
-    // ============ COMPUTED STATE ============
-    /** Input element ID. */
-    inputId = computed(() => `${this.datepickerId}-input`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
-    /** 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.state(),
-            open: this.isOpen(),
-        });
-        const disabledClasses = this.disabled() ? datepickerDisabledVariants() : '';
-        return joinClasses(baseClasses, disabledClasses, 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;
-        }
-        // Sync calendar active date with internal value or startAt
-        effect(() => {
-            const value = this.internalValue();
-            const startAt = this.startAt();
-            if (value) {
-                this.calendarActiveDate.set(value);
-            }
-            else if (startAt) {
-                this.calendarActiveDate.set(startAt);
-            }
-            else {
-                this.calendarActiveDate.set(this.dateAdapter.today());
-            }
-        }, {});
-    }
-    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();
-        // 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 ============
-    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() {
-        if (this.allowManualInput()) {
-            this.parseAndSetValue(this.inputRef().nativeElement.value);
-        }
-        this.onTouched();
-    }
-    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);
-    }
-    // ============ 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.internalValue.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 }, 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: { 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 },
-        ], 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()"
-      [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]="ariaDescribedBy() || null"
-        [attr.aria-invalid]="state() === 'error' || null"
-        [attr.aria-required]="required() || null"
-        (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"], outputs: ["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()"
-      [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]="ariaDescribedBy() || null"
-        [attr.aria-invalid]="state() === 'error' || null"
-        [attr.aria-required]="required() || null"
-        (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 },
-                    ], 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 }] }], 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 }] }], 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);
-    /** Optional NgControl for form integration. */
-    ngControl = inject(NgControl, { optional: true, self: 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 = input(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" }] : []));
-    /** 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. */
-    calendarActiveDate = signal(this.dateAdapter.today(), ...(ngDevMode ? [{ debugName: "calendarActiveDate" }] : []));
-    /** Live announcements for screen readers. */
-    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
-    // ============ COMPUTED STATE ============
-    /** Start input element ID. */
-    startInputId = computed(() => `${this.datepickerId}-start`, ...(ngDevMode ? [{ debugName: "startInputId" }] : []));
-    /** 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.state(),
-            open: this.isOpen(),
-        });
-        const disabledClasses = this.disabled() ? datepickerDisabledVariants() : '';
-        return joinClasses(baseClasses, disabledClasses, 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;
-        }
-        // Sync calendar active date with internal value or startAt
-        effect(() => {
-            const value = this.internalValue();
-            const startAt = this.startAt();
-            if (value?.start) {
-                this.calendarActiveDate.set(value.start);
-            }
-            else if (startAt) {
-                this.calendarActiveDate.set(startAt);
-            }
-            else {
-                this.calendarActiveDate.set(this.dateAdapter.today());
-            }
-        }, {});
-    }
-    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();
-        // 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');
-    }
-    onEndInputFocus() {
-        this.activeInput.set('end');
-    }
-    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() {
-        if (this.allowManualInput()) {
-            this.parseAndSetStart(this.startInputRef().nativeElement.value);
-        }
-        this.onTouched();
-    }
-    onEndInputBlur() {
-        if (this.allowManualInput()) {
-            this.parseAndSetEnd(this.endInputRef().nativeElement.value);
-        }
-        this.onTouched();
-    }
-    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));
-    }
-    // ============ 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.internalValue.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 }, 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: { 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 },
-        ], 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()"
-      [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-invalid]="state() === '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]="state() === '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"], outputs: ["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()"
-      [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-invalid]="state() === '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]="state() === '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 },
-                    ], 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 }] }], 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 }] }], 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.
- */
-
-/**
- * TimePicker component public API.
- */
-
 /**
  * ngx-com/components/calendar
  * Calendar component public API
@@ -6164,5 +3079,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CALENDAR_SELECTION_STRATEGY, CalendarSelectionStrategy, CalendarViewBase, ComCalendar, ComCalendarCell, ComCalendarHeader, ComCalendarMonthView, ComCalendarMultiYearView, ComCalendarYearView, ComDateRangePicker, ComDatepicker, ComTimePicker, DATE_ADAPTER, DAYS_PER_WEEK, DateAdapter, MONTHS_PER_ROW, MultiSelectionStrategy, NativeDateAdapter, RangeSelectionStrategy, SingleSelectionStrategy, WEEKS_PER_MONTH, WeekSelectionStrategy, YEARS_PER_PAGE, YEARS_PER_ROW, calendarCellVariants, calendarCellWrapperVariants, calendarHeaderButtonVariants, calendarHeaderVariants, calendarVariants, compareTime, createCalendarCell, createDateRange, createDateRangeValue, createGrid, createTimeValue, datepickerClearVariants, datepickerDisabledVariants, datepickerFooterButtonVariants, datepickerFooterVariants, datepickerIconVariants, datepickerInputVariants, datepickerPanelVariants, datepickerRangeSeparatorVariants, datepickerTriggerVariants, generateDatepickerId, generateTimePickerId, getMultiYearStartingYear, getWeekdayHeaders, isDateDisabled, isMonthDisabled, isYearDisabled, navigateGrid, provideMultiSelectionStrategy, provideNativeDateAdapter, provideRangeSelectionStrategy, provideSingleSelectionStrategy, provideWeekSelectionStrategy, timepickerContainerVariants, timepickerDisabledVariants, timepickerLabelVariants, timepickerPeriodVariants, timepickerSectionVariants, timepickerSegmentVariants, timepickerSeparatorVariants };
+export { CALENDAR_SELECTION_STRATEGY, CalendarSelectionStrategy, CalendarViewBase, ComCalendar, ComCalendarCell, ComCalendarHeader, ComCalendarMonthView, ComCalendarMultiYearView, ComCalendarYearView, DATE_ADAPTER, DAYS_PER_WEEK, DateAdapter, MONTHS_PER_ROW, MultiSelectionStrategy, NativeDateAdapter, RangeSelectionStrategy, SingleSelectionStrategy, WEEKS_PER_MONTH, WeekSelectionStrategy, YEARS_PER_PAGE, YEARS_PER_ROW, calendarCellVariants, calendarCellWrapperVariants, calendarHeaderButtonVariants, calendarHeaderVariants, calendarVariants, createCalendarCell, createDateRange, createGrid, getMultiYearStartingYear, getWeekdayHeaders, isDateDisabled, isMonthDisabled, isYearDisabled, navigateGrid, provideMultiSelectionStrategy, provideNativeDateAdapter, provideRangeSelectionStrategy, provideSingleSelectionStrategy, provideWeekSelectionStrategy };
 //# sourceMappingURL=ngx-com-components-calendar.mjs.map