ngx-com 0.0.21 → 0.0.22

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

@@ -1,14 +1,16 @@
 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, model, forwardRef, ElementRef, DestroyRef, ViewContainerRef, DOCUMENT, effect } 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 { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { ComIcon } from 'ngx-com/components/icon';
+import { mergeClasses } from 'ngx-com/utils';
+import { ErrorStateMatcher, FormFieldControl } from 'ngx-com/components/form-field';
 
 /**
  * Calendar shared types and interfaces
@@ -3145,6 +3147,13 @@ const datepickerTriggerVariants = cva([
                 'bg-muted',
                 'hover:bg-muted-hover',
             ],
+            naked: [
+                'border-transparent',
+                'bg-transparent',
+                'shadow-none',
+                'focus-within:outline-none',
+                'rounded-none',
+            ],
         },
         size: {
             sm: ['h-8', 'px-2', 'text-xs', 'gap-1'],
@@ -3178,6 +3187,24 @@ const datepickerTriggerVariants = cva([
             variant: 'outline',
             class: ['border-primary'],
         },
+        // Naked variant should not show ring when open (form-field provides focus styling)
+        {
+            open: true,
+            variant: 'naked',
+            class: ['outline-none', 'border-transparent'],
+        },
+        // Naked variant should not show error border (form-field provides error styling)
+        {
+            state: 'error',
+            variant: 'naked',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
+        // Naked variant should not show success border (form-field provides styling)
+        {
+            state: 'success',
+            variant: 'naked',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
     ],
     defaultVariants: {
         variant: 'default',
@@ -3419,7 +3446,7 @@ const timepickerContainerVariants = cva([
                 'border-input-border',
                 'bg-input-background',
                 'text-input-foreground',
-                'focus-within:outline-[1px]',
+                'focus-within:outline-1',
                 'focus-within:outline-offset-2',
                 'focus-within:outline-ring',
             ],
@@ -3428,6 +3455,13 @@ const timepickerContainerVariants = cva([
                 'bg-transparent',
                 'text-foreground',
             ],
+            naked: [
+                'border-transparent',
+                'bg-transparent',
+                'shadow-none',
+                'focus-within:outline-none',
+                'rounded-none',
+            ],
         },
         size: {
             sm: ['h-8', 'px-2', 'text-xs', 'gap-0.5'],
@@ -3457,6 +3491,17 @@ const timepickerContainerVariants = cva([
             state: 'success',
             class: [],
         },
+        // Naked variant should not show ring (form-field provides focus styling)
+        {
+            variant: 'naked',
+            state: 'error',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
+        {
+            variant: 'naked',
+            state: 'success',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
     ],
     defaultVariants: {
         variant: 'standalone',
@@ -3537,10 +3582,11 @@ const timepickerPeriodVariants = cva([
     'font-medium',
     'transition-colors',
     'select-none',
+    'outline-none',
     'bg-muted',
     'text-muted-foreground',
     'hover:bg-muted-hover',
-    'focus-visible:outline-[1px]',
+    'focus-visible:outline-1',
     'focus-visible:outline-offset-2',
     'focus-visible:outline-ring',
 ], {
@@ -3651,6 +3697,9 @@ function generateTimePickerId() {
 class ComTimePicker {
     localeId = inject(LOCALE_ID);
     ngControl = inject(NgControl, { optional: true, self: true });
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
     timepickerId = generateTimePickerId();
     hoursInputRef = viewChild('hoursInput', ...(ngDevMode ? [{ debugName: "hoursInputRef" }] : []));
     minutesInputRef = viewChild('minutesInput', ...(ngDevMode ? [{ debugName: "minutesInputRef" }] : []));
@@ -3658,9 +3707,9 @@ class ComTimePicker {
     periodButtonRef = viewChild('periodButton', ...(ngDevMode ? [{ debugName: "periodButtonRef" }] : []));
     // ============ INPUTS ============
     /** Current time value. */
-    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Whether the time picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /** Whether the time picker is required. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     /** Whether to show the seconds segment. */
@@ -3687,6 +3736,12 @@ class ComTimePicker {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
     /** Placeholder text for empty segments. */
     placeholder = input('--', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Custom error state matcher for determining when to show errors. */
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    // Signal Forms inputs — set automatically by [formField] via setInputOnDirectives
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    sfErrors = input([], { ...(ngDevMode ? { debugName: "sfErrors" } : {}), alias: 'errors' });
     // ============ OUTPUTS ============
     /** Emitted when time value changes. */
     timeChange = output();
@@ -3699,6 +3754,39 @@ class ComTimePicker {
     pendingDigits = signal('', ...(ngDevMode ? [{ debugName: "pendingDigits" }] : []));
     /** Live announcements for screen readers. */
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** IDs for aria-describedby (set by form-field). */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    /** Form field appearance (set by form-field). */
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
+    // ============ FormFieldControl SIGNALS ============
+    /** Whether the time picker is focused. Implements FormFieldControl. */
+    focused = computed(() => this.activeSegment() !== null, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Whether the label should float. */
+    shouldLabelFloat = computed(() => this.focused() || this.internalValue() !== null, ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    errorState = computed(() => {
+        if (!this.ngControl) {
+            return this.invalid() && this.touched();
+        }
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Structured validation errors from Signal Forms. */
+    errors = computed(() => !this.ngControl ? this.sfErrors() : null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    /** Unique ID for the control (maps to hours input). Implements FormFieldControl. */
+    id = computed(() => `${this.timepickerId}-hours`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    effectiveState = computed(() => {
+        const manualState = this.state();
+        if (manualState !== 'default')
+            return manualState;
+        return this.errorState() ? 'error' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
+    /** Combined aria-describedby from form-field. */
+    effectiveAriaDescribedBy = computed(() => this._describedByIds() || null, ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedBy" }] : []));
     // ============ COMPUTED STATE ============
     /** Whether to use 12-hour format. */
     is12Hour = computed(() => {
@@ -3756,10 +3844,15 @@ class ComTimePicker {
         const base = timepickerContainerVariants({
             variant: this.variant(),
             size: this.size(),
-            state: this.state(),
+            state: this.effectiveState(),
         });
         const disabled = this.disabled() ? timepickerDisabledVariants() : '';
-        return joinClasses(base, disabled, this.userClass());
+        // For naked variant, add padding based on form-field appearance
+        let paddingClasses = '';
+        if (this.variant() === 'naked') {
+            paddingClasses = this._appearance() === 'fill' ? 'pt-5 pb-1.5 px-3' : 'py-2.5 px-3';
+        }
+        return mergeClasses(base, disabled, paddingClasses, this.userClass());
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
     /** Segment input classes. */
     segmentClasses = computed(() => {
@@ -3792,8 +3885,8 @@ class ComTimePicker {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    setDisabledState(_isDisabled) {
-        // Disabled state is handled via the disabled input
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
     // ============ VALIDATOR IMPLEMENTATION ============
     validate() {
@@ -3826,11 +3919,11 @@ class ComTimePicker {
         this.pendingDigits.set('');
         this.snapToStep(segment);
         this.onTouched();
+        this.touched.set(true);
     }
     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();
@@ -3913,6 +4006,30 @@ class ComTimePicker {
         const newHours = value.hours >= 12 ? value.hours - 12 : value.hours + 12;
         this.updateValue({ ...value, hours: newHours });
     }
+    // ============ FormFieldControl IMPLEMENTATION ============
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(_event) {
+        if (!this.disabled()) {
+            this.hoursInputRef()?.nativeElement.focus();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
     // ============ PRIVATE METHODS ============
     setPeriod(period) {
         const value = this.internalValue();
@@ -4132,7 +4249,7 @@ class ComTimePicker {
         }
     }
     updateValue(value) {
-        this.internalValue.set(value);
+        this.value.set(value);
         this.onChange(value);
         this.timeChange.emit(value);
         this.onValidatorChange();
@@ -4144,7 +4261,7 @@ class ComTimePicker {
         }
     }
     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: `
+    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 }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", 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" }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComTimePicker) }], 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
@@ -4153,7 +4270,9 @@ class ComTimePicker {
         inputmode="numeric"
         role="spinbutton"
         [class]="segmentClasses()"
+        [attr.id]="id()"
         [attr.aria-label]="'Hours'"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
         [attr.aria-valuenow]="displayHours()"
         [attr.aria-valuemin]="is12Hour() ? 1 : 0"
         [attr.aria-valuemax]="is12Hour() ? 12 : 23"
@@ -4246,7 +4365,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         inputmode="numeric"
         role="spinbutton"
         [class]="segmentClasses()"
+        [attr.id]="id()"
         [attr.aria-label]="'Hours'"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
         [attr.aria-valuenow]="displayHours()"
         [attr.aria-valuemin]="is12Hour() ? 1 : 0"
         [attr.aria-valuemax]="is12Hour() ? 12 : 23"
@@ -4326,14 +4447,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     <div class="sr-only" aria-live="polite" aria-atomic="true">
       {{ liveAnnouncement() }}
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  `, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComTimePicker) }], 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"] }] } });
+        }], 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 }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], 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 }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
 
 /** Default position for the datepicker panel. */
 const DEFAULT_POSITIONS$1 = [
@@ -4375,8 +4496,11 @@ class ComDatepicker {
     viewContainerRef = inject(ViewContainerRef);
     document = inject(DOCUMENT);
     dateAdapter = inject(DATE_ADAPTER);
-    /** Optional NgControl for form integration. */
+    /** NgControl bound to this datepicker (if using reactive forms). */
     ngControl = inject(NgControl, { optional: true, self: true });
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
     /** Reference to the trigger element. */
     triggerRef = viewChild.required('triggerElement');
     /** Reference to the input element. */
@@ -4389,7 +4513,7 @@ class ComDatepicker {
     datepickerId = generateDatepickerId();
     // ============ INPUTS ============
     /** Current value. */
-    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Minimum selectable date. */
     min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
     /** Maximum selectable date. */
@@ -4436,6 +4560,12 @@ class ComDatepicker {
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** ID of element describing the input. */
     ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    /** Custom error state matcher for determining when to show errors. */
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    // Signal Forms inputs — set automatically by [formField] via setInputOnDirectives
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    sfErrors = input([], { ...(ngDevMode ? { debugName: "sfErrors" } : {}), alias: 'errors' });
     /** Whether to show the time picker below the calendar. */
     showTimePicker = input(false, ...(ngDevMode ? [{ debugName: "showTimePicker" }] : []));
     /** 12h vs 24h format for the time picker. `null` = auto-detect. */
@@ -4460,9 +4590,49 @@ class ComDatepicker {
     calendarActiveDate = signal(this.dateAdapter.today(), ...(ngDevMode ? [{ debugName: "calendarActiveDate" }] : []));
     /** Live announcements for screen readers. */
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** Whether the input is focused (not panel). */
+    _inputFocused = signal(false, ...(ngDevMode ? [{ debugName: "_inputFocused" }] : []));
+    /** IDs for aria-describedby (set by form-field). */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    /** Form field appearance (set by form-field). */
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
+    // ============ FormFieldControl SIGNALS ============
+    /** Whether the datepicker is focused (input focused or panel open). Implements FormFieldControl. */
+    focused = computed(() => this._inputFocused() || this.isOpen(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Whether the label should float. Label floats when focused or has a value. */
+    shouldLabelFloat = computed(() => this.focused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    errorState = computed(() => {
+        if (!this.ngControl) {
+            // Signal Forms: gate on invalid AND touched
+            return this.invalid() && this.touched();
+        }
+        // Reactive Forms: use ErrorStateMatcher
+        this.isOpen();
+        this.hasValue();
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Structured validation errors from Signal Forms, exposed for the parent form field. */
+    errors = computed(() => !this.ngControl ? this.sfErrors() : null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    /** Unique ID for the control. Implements FormFieldControl. */
+    id = computed(() => `${this.datepickerId}-input`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * Effective state combining manual state with automatic error detection.
+     * Manual state takes precedence over auto-detected error state.
+     */
+    effectiveState = computed(() => {
+        const manualState = this.state();
+        if (manualState !== 'default')
+            return manualState;
+        return this.errorState() ? 'error' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
+    /** Combined aria-describedby from form-field and manual input. */
+    effectiveAriaDescribedBy = computed(() => this._describedByIds() || this.ariaDescribedBy() || null, ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedBy" }] : []));
     // ============ COMPUTED STATE ============
-    /** Input element ID. */
-    inputId = computed(() => `${this.datepickerId}-input`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** Input element ID (alias for FormFieldControl id). */
+    inputId = this.id;
     /** Panel element ID. */
     panelId = computed(() => `${this.datepickerId}-panel`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
     /** Whether the datepicker has a value. */
@@ -4488,11 +4658,16 @@ class ComDatepicker {
         const baseClasses = datepickerTriggerVariants({
             variant: this.variant(),
             size: this.size(),
-            state: this.state(),
+            state: this.effectiveState(),
             open: this.isOpen(),
         });
         const disabledClasses = this.disabled() ? datepickerDisabledVariants() : '';
-        return joinClasses(baseClasses, disabledClasses, this.userClass());
+        // For naked variant, add padding based on form-field appearance
+        let paddingClasses = '';
+        if (this.variant() === 'naked') {
+            paddingClasses = this._appearance() === 'fill' ? 'pt-5 pb-1.5 px-3' : 'py-2.5 px-3';
+        }
+        return mergeClasses(baseClasses, disabledClasses, paddingClasses, this.userClass());
     }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
     /** Computed input classes. */
     inputClasses = computed(() => {
@@ -4634,6 +4809,7 @@ class ComDatepicker {
         this.isOpen.set(false);
         this.closed.emit();
         this.onTouched();
+        this.touched.set(true);
         // Return focus to trigger
         this.inputRef().nativeElement.focus();
     }
@@ -4662,6 +4838,9 @@ class ComDatepicker {
         }
     }
     // ============ EVENT HANDLERS ============
+    onInputFocus() {
+        this._inputFocused.set(true);
+    }
     onTriggerClick() {
         if (!this.disabled()) {
             this.toggle();
@@ -4717,10 +4896,12 @@ class ComDatepicker {
         // For now, we just allow typing without immediate parsing
     }
     onInputBlur() {
+        this._inputFocused.set(false);
         if (this.allowManualInput()) {
             this.parseAndSetValue(this.inputRef().nativeElement.value);
         }
         this.onTouched();
+        this.touched.set(true);
     }
     onPanelKeydown(event) {
         switch (event.key) {
@@ -4760,6 +4941,31 @@ class ComDatepicker {
     onActiveDateChange(date) {
         this.calendarActiveDate.set(date);
     }
+    // ============ FormFieldControl IMPLEMENTATION ============
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event) {
+        const target = event.target;
+        if (!this.disabled() && !this.triggerRef().nativeElement.contains(target)) {
+            this.toggle();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
     // ============ PRIVATE METHODS ============
     createOverlay() {
         if (this.overlayRef) {
@@ -4799,7 +5005,7 @@ class ComDatepicker {
         }
     }
     updateValue(value) {
-        this.internalValue.set(value);
+        this.value.set(value);
         this.onChange(value);
         this.dateChange.emit(value);
         this.onValidatorChange();
@@ -4847,9 +5053,10 @@ class ComDatepicker {
         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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDatepicker, isStandalone: true, selector: "com-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", dateChange: "dateChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-datepicker-disabled": "disabled()", "class.com-datepicker-open": "isOpen()" }, classAttribute: "com-datepicker-host inline-block" }, providers: [
             SingleSelectionStrategy,
             { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
+            { provide: FormFieldControl, useExisting: forwardRef(() => ComDatepicker) },
         ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDatepicker"], ngImport: i0, template: `
     <!-- Trigger container -->
     <div
@@ -4873,9 +5080,10 @@ class ComDatepicker {
         [readonly]="!allowManualInput()"
         [attr.id]="inputId()"
         [attr.aria-label]="ariaLabel() || placeholder()"
-        [attr.aria-describedby]="ariaDescribedBy() || null"
-        [attr.aria-invalid]="state() === 'error' || null"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
         [attr.aria-required]="required() || null"
+        (focus)="onInputFocus()"
         (input)="onInputChange($event)"
         (blur)="onInputBlur()"
         (keydown)="onInputKeydown($event)"
@@ -4983,7 +5191,7 @@ class ComDatepicker {
     <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 });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: ComTimePicker, selector: "com-time-picker", inputs: ["value", "disabled", "required", "showSeconds", "use12HourFormat", "minuteStep", "secondStep", "minTime", "maxTime", "variant", "size", "state", "ariaLabel", "class", "placeholder", "errorStateMatcher", "touched", "invalid", "errors"], outputs: ["valueChange", "disabledChange", "touchedChange", "timeChange"], exportAs: ["comTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDatepicker, decorators: [{
             type: Component,
@@ -5010,9 +5218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [readonly]="!allowManualInput()"
         [attr.id]="inputId()"
         [attr.aria-label]="ariaLabel() || placeholder()"
-        [attr.aria-describedby]="ariaDescribedBy() || null"
-        [attr.aria-invalid]="state() === 'error' || null"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
         [attr.aria-required]="required() || null"
+        (focus)="onInputFocus()"
         (input)="onInputChange($event)"
         (blur)="onInputBlur()"
         (keydown)="onInputKeydown($event)"
@@ -5129,12 +5338,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     ], providers: [
                         SingleSelectionStrategy,
                         { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
+                        { provide: FormFieldControl, useExisting: forwardRef(() => ComDatepicker) },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'com-datepicker-host inline-block',
                         '[class.com-datepicker-disabled]': 'disabled()',
                         '[class.com-datepicker-open]': 'isOpen()',
                     }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /** Default position for the datepicker panel. */
 const DEFAULT_POSITIONS = [
@@ -5177,8 +5387,11 @@ class ComDateRangePicker {
     viewContainerRef = inject(ViewContainerRef);
     document = inject(DOCUMENT);
     dateAdapter = inject(DATE_ADAPTER);
-    /** Optional NgControl for form integration. */
+    /** NgControl bound to this date range picker (if using reactive forms). */
     ngControl = inject(NgControl, { optional: true, self: true });
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
     /** Reference to the trigger element. */
     triggerRef = viewChild.required('triggerElement');
     /** Reference to the start input element. */
@@ -5193,7 +5406,7 @@ class ComDateRangePicker {
     datepickerId = generateDatepickerId();
     // ============ INPUTS ============
     /** Current value. */
-    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Minimum selectable date. */
     min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
     /** Maximum selectable date. */
@@ -5242,6 +5455,12 @@ class ComDateRangePicker {
     startAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "startAriaLabel" }] : []));
     /** Accessible label for the end input. */
     endAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "endAriaLabel" }] : []));
+    /** Custom error state matcher for determining when to show errors. */
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    // Signal Forms inputs — set automatically by [formField] via setInputOnDirectives
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    sfErrors = input([], { ...(ngDevMode ? { debugName: "sfErrors" } : {}), alias: 'errors' });
     /** Whether to show time pickers below the calendar. */
     showTimePicker = input(false, ...(ngDevMode ? [{ debugName: "showTimePicker" }] : []));
     /** 12h vs 24h format for the time pickers. `null` = auto-detect. */
@@ -5268,9 +5487,46 @@ class ComDateRangePicker {
     calendarActiveDate = signal(this.dateAdapter.today(), ...(ngDevMode ? [{ debugName: "calendarActiveDate" }] : []));
     /** Live announcements for screen readers. */
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** Whether any input is focused. */
+    _inputFocused = signal(false, ...(ngDevMode ? [{ debugName: "_inputFocused" }] : []));
+    /** IDs for aria-describedby (set by form-field). */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    /** Form field appearance (set by form-field). */
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
+    // ============ FormFieldControl SIGNALS ============
+    /** Whether the date range picker is focused. Implements FormFieldControl. */
+    focused = computed(() => this._inputFocused() || this.isOpen(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Whether the label should float. */
+    shouldLabelFloat = computed(() => this.focused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    errorState = computed(() => {
+        if (!this.ngControl) {
+            return this.invalid() && this.touched();
+        }
+        this.isOpen();
+        this.hasValue();
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Structured validation errors from Signal Forms. */
+    errors = computed(() => !this.ngControl ? this.sfErrors() : null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    /** Unique ID for the control (maps to start input). Implements FormFieldControl. */
+    id = computed(() => `${this.datepickerId}-start`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    effectiveState = computed(() => {
+        const manualState = this.state();
+        if (manualState !== 'default')
+            return manualState;
+        return this.errorState() ? 'error' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
+    /** Combined aria-describedby from form-field. */
+    effectiveAriaDescribedBy = computed(() => this._describedByIds() || null, ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedBy" }] : []));
     // ============ COMPUTED STATE ============
-    /** Start input element ID. */
-    startInputId = computed(() => `${this.datepickerId}-start`, ...(ngDevMode ? [{ debugName: "startInputId" }] : []));
+    /** Start input element ID (alias for FormFieldControl id). */
+    startInputId = this.id;
     /** End input element ID. */
     endInputId = computed(() => `${this.datepickerId}-end`, ...(ngDevMode ? [{ debugName: "endInputId" }] : []));
     /** Panel element ID. */
@@ -5315,11 +5571,16 @@ class ComDateRangePicker {
         const baseClasses = datepickerTriggerVariants({
             variant: this.variant(),
             size: this.size(),
-            state: this.state(),
+            state: this.effectiveState(),
             open: this.isOpen(),
         });
         const disabledClasses = this.disabled() ? datepickerDisabledVariants() : '';
-        return joinClasses(baseClasses, disabledClasses, this.userClass());
+        // For naked variant, add padding based on form-field appearance
+        let paddingClasses = '';
+        if (this.variant() === 'naked') {
+            paddingClasses = this._appearance() === 'fill' ? 'pt-5 pb-1.5 px-3' : 'py-2.5 px-3';
+        }
+        return mergeClasses(baseClasses, disabledClasses, paddingClasses, this.userClass());
     }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
     /** Computed input classes. */
     inputClasses = computed(() => {
@@ -5484,6 +5745,7 @@ class ComDateRangePicker {
         this.isOpen.set(false);
         this.closed.emit();
         this.onTouched();
+        this.touched.set(true);
         // Return focus to appropriate input
         const activeInput = this.activeInput();
         if (activeInput === 'end') {
@@ -5547,9 +5809,11 @@ class ComDateRangePicker {
     }
     onStartInputFocus() {
         this.activeInput.set('start');
+        this._inputFocused.set(true);
     }
     onEndInputFocus() {
         this.activeInput.set('end');
+        this._inputFocused.set(true);
     }
     onInputKeydown(event, inputType) {
         switch (event.key) {
@@ -5592,16 +5856,20 @@ class ComDateRangePicker {
         // Debounced in blur handler
     }
     onStartInputBlur() {
+        this._inputFocused.set(false);
         if (this.allowManualInput()) {
             this.parseAndSetStart(this.startInputRef().nativeElement.value);
         }
         this.onTouched();
+        this.touched.set(true);
     }
     onEndInputBlur() {
+        this._inputFocused.set(false);
         if (this.allowManualInput()) {
             this.parseAndSetEnd(this.endInputRef().nativeElement.value);
         }
         this.onTouched();
+        this.touched.set(true);
     }
     onPanelKeydown(event) {
         switch (event.key) {
@@ -5648,6 +5916,32 @@ class ComDateRangePicker {
         const updated = this.dateAdapter.setTime(endDate, time.hours, time.minutes, time.seconds);
         this.updateValue(createDateRangeValue(value?.start ?? null, updated));
     }
+    // ============ FormFieldControl IMPLEMENTATION ============
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event) {
+        const target = event.target;
+        if (!this.disabled() && !this.triggerRef().nativeElement.contains(target)) {
+            this.open();
+            this.startInputRef().nativeElement.focus();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
     // ============ PRIVATE METHODS ============
     createOverlay() {
         if (this.overlayRef) {
@@ -5687,7 +5981,7 @@ class ComDateRangePicker {
         }
     }
     updateValue(value) {
-        this.internalValue.set(value);
+        this.value.set(value);
         this.onChange(value);
         this.rangeChange.emit(value);
         this.onValidatorChange();
@@ -5764,9 +6058,10 @@ class ComDateRangePicker {
         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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDateRangePicker, isStandalone: true, selector: "com-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-date-range-picker-disabled": "disabled()", "class.com-date-range-picker-open": "isOpen()" }, classAttribute: "com-date-range-picker-host inline-block" }, providers: [
             RangeSelectionStrategy,
             { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },
+            { provide: FormFieldControl, useExisting: forwardRef(() => ComDateRangePicker) },
         ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "startInputRef", first: true, predicate: ["startInputElement"], descendants: true, isSignal: true }, { propertyName: "endInputRef", first: true, predicate: ["endInputElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDateRangePicker"], ngImport: i0, template: `
     <!-- Trigger container -->
     <div
@@ -5790,7 +6085,8 @@ class ComDateRangePicker {
         [readonly]="!allowManualInput()"
         [attr.id]="startInputId()"
         [attr.aria-label]="startAriaLabel() || startPlaceholder()"
-        [attr.aria-invalid]="state() === 'error' || null"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
         [attr.aria-required]="required() || null"
         (focus)="onStartInputFocus()"
         (input)="onStartInputChange($event)"
@@ -5814,7 +6110,7 @@ class ComDateRangePicker {
         [readonly]="!allowManualInput()"
         [attr.id]="endInputId()"
         [attr.aria-label]="endAriaLabel() || endPlaceholder()"
-        [attr.aria-invalid]="state() === 'error' || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
         (focus)="onEndInputFocus()"
         (input)="onEndInputChange($event)"
         (blur)="onEndInputBlur()"
@@ -5947,7 +6243,7 @@ class ComDateRangePicker {
     <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 });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: ComTimePicker, selector: "com-time-picker", inputs: ["value", "disabled", "required", "showSeconds", "use12HourFormat", "minuteStep", "secondStep", "minTime", "maxTime", "variant", "size", "state", "ariaLabel", "class", "placeholder", "errorStateMatcher", "touched", "invalid", "errors"], outputs: ["valueChange", "disabledChange", "touchedChange", "timeChange"], exportAs: ["comTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDateRangePicker, decorators: [{
             type: Component,
@@ -5974,7 +6270,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [readonly]="!allowManualInput()"
         [attr.id]="startInputId()"
         [attr.aria-label]="startAriaLabel() || startPlaceholder()"
-        [attr.aria-invalid]="state() === 'error' || null"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
         [attr.aria-required]="required() || null"
         (focus)="onStartInputFocus()"
         (input)="onStartInputChange($event)"
@@ -5998,7 +6295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [readonly]="!allowManualInput()"
         [attr.id]="endInputId()"
         [attr.aria-label]="endAriaLabel() || endPlaceholder()"
-        [attr.aria-invalid]="state() === 'error' || null"
+        [attr.aria-invalid]="effectiveState() === 'error' || null"
         (focus)="onEndInputFocus()"
         (input)="onEndInputChange($event)"
         (blur)="onEndInputBlur()"
@@ -6140,12 +6437,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     ], providers: [
                         RangeSelectionStrategy,
                         { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },
+                        { provide: FormFieldControl, useExisting: forwardRef(() => ComDateRangePicker) },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'com-date-range-picker-host inline-block',
                         '[class.com-date-range-picker-disabled]': 'disabled()',
                         '[class.com-date-range-picker-open]': 'isOpen()',
                     }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], startInputRef: [{ type: i0.ViewChild, args: ['startInputElement', { isSignal: true }] }], endInputRef: [{ type: i0.ViewChild, args: ['endInputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], startInputRef: [{ type: i0.ViewChild, args: ['startInputElement', { isSignal: true }] }], endInputRef: [{ type: i0.ViewChild, args: ['endInputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Datepicker components public API.