@cdevhub/ngx-tw 0.5.0 → 0.6.0

package/fesm2022/cdevhub-ngx-tw-date-picker.mjs

@@ -1,12 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, viewChild, signal, computed, ChangeDetectionStrategy, Component, input, booleanAttribute, model, output, ViewContainerRef, Injector, DestroyRef, linkedSignal, effect, untracked, afterNextRender, isDevMode, forwardRef } from '@angular/core';
-import { NgForm, FormGroupDirective, Validators, NgControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Overlay } from '@angular/cdk/overlay';
 import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { merge } from 'rxjs';
 import { tv } from 'tailwind-variants';
-import { PickerOverlayCoordinator, TW_ERROR_STATE_MATCHER, timeOfDaySeconds, resolveSelectScrollStrategy, buildSelectLikePositions } from '@cdevhub/ngx-tw/core';
+import { PickerOverlayCoordinator, wireErrorState, timeOfDaySeconds, resolveSelectScrollStrategy, buildSelectLikePositions } from '@cdevhub/ngx-tw/core';
 import { FormFieldControl, TW_FORM_FIELD, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 import { CalendarComponent, provideSingleSelectionStrategy, DATE_ADAPTER, calendarValidator } from '@cdevhub/ngx-tw/calendar';
 import { ButtonDirective } from '@cdevhub/ngx-tw/button';
@@ -285,7 +283,7 @@ class DatePickerOverlayComponent {
         </div>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: CalendarComponent, selector: "tw-calendar", inputs: ["mode", "value", "startAt", "minDate", "maxDate", "dateFilter", "disabledDates", "disabledDaysOfWeek", "constraints", "minRangeLength", "maxRangeLength", "maxSelections", "maxSelectionBehavior", "errorAriaDescribedBy", "rangeClickBehavior", "rangeBehavior", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "disabled", "readonly", "resetBehavior", "cellTemplate", "locale", "intl"], outputs: ["valueChange", "selectionStart", "rangePreview", "selectionComplete", "selectionRestart", "selectionCleared", "selectionLimitReached", "presetChange", "viewChange", "activeDateChange", "monthChange", "yearChange", "cellClick", "cellHover", "modeChange"] }, { kind: "component", type: TimePickerComponent, selector: "tw-time-picker", inputs: ["id", "disabled", "required", "readonly", "size", "color", "variant", "format", "showSeconds", "hourStep", "minuteStep", "secondStep", "minTime", "maxTime", "referenceDate", "placeholder", "showSteppers", "showClear", "clearLabel", "errorStateMatcher", "aria-label", "aria-labelledby", "aria-describedby", "value"], outputs: ["valueChange", "timeInput", "timeChange"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: CalendarComponent, selector: "tw-calendar", inputs: ["mode", "value", "startAt", "minDate", "maxDate", "dateFilter", "disabledDates", "disabledDaysOfWeek", "constraints", "minRangeLength", "maxRangeLength", "maxSelections", "maxSelectionBehavior", "errorAriaDescribedBy", "aria-describedby", "rangeClickBehavior", "rangeBehavior", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "disabled", "readonly", "resetBehavior", "cellTemplate", "locale", "intl"], outputs: ["valueChange", "selectionStart", "rangePreview", "selectionComplete", "selectionRestart", "selectionCleared", "selectionLimitReached", "presetChange", "viewChange", "activeDateChange", "monthChange", "yearChange", "cellClick", "cellHover", "modeChange"] }, { kind: "component", type: TimePickerComponent, selector: "tw-time-picker", inputs: ["id", "disabled", "required", "readonly", "size", "color", "variant", "format", "showSeconds", "hourStep", "minuteStep", "secondStep", "minTime", "maxTime", "referenceDate", "placeholder", "showSteppers", "showClear", "clearLabel", "errorStateMatcher", "aria-label", "aria-labelledby", "aria-describedby", "value"], outputs: ["valueChange", "timeInput", "timeChange"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
             type: Component,
@@ -396,10 +394,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 const datePickerVariants = tv({
     slots: {
         root: 'relative inline-flex items-center w-full text-fg transition-[color,border-color,box-shadow] duration-normal motion-reduce:transition-none',
-        input: 'flex-1 min-w-0 bg-transparent text-fg placeholder:text-fg-subtle outline-none border-0 p-0 m-0 font-inherit',
+        // `self-stretch` so the text field fills the pinned control height — without
+        // it the input is only its line box tall and the rest of the box is dead
+        // click area (up to 22px at xl).
+        input: 'flex-1 min-w-0 self-stretch bg-transparent text-fg placeholder:text-fg-subtle outline-none border-0 p-0 m-0 font-inherit',
         triggerButton: 'inline-flex items-center justify-center shrink-0 rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
         triggerIcon: 'shrink-0',
         // size-6 (24×24 CSS px) is the WCAG AA minimum interactive target — bumping past size-5 keeps the affordance hittable without growing the inline row.
+        // Held flat across every size: it fits the 30/34/42/46px content boxes at sm..xl, and at xs it
+        // coincides with the root's border-box for the reason spelled out on `triggerButton` below.
         clearButton: 'inline-flex items-center justify-center shrink-0 rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none size-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
     },
     variants: {
@@ -407,6 +410,13 @@ const datePickerVariants = tv({
             xs: {
                 root: 'gap-1 text-xs',
                 input: 'text-xs',
+                // At xs the pinned root is h-6 (24px border-box), so its content box is
+                // only 22px. size-6 is kept anyway: 24×24 is the WCAG 2.2 SC 2.5.8
+                // floor and docs/vertical-rhythm.md calls it non-negotiable. The button
+                // therefore coincides with the root's *border*-box, overlapping the 1px
+                // border row top and bottom. The root's height is unaffected (h-6 is a
+                // definite height) and the only visible effect is the hover fill
+                // meeting the border at the densest size.
                 triggerButton: 'size-6',
                 // size-3.5 (14px) is the codified half-step for xs-density chevrons — size-3 (12px) looks pinched next to text-xs and size-4 (16px) crowds the 24px trigger.
                 triggerIcon: 'size-3.5',
@@ -439,12 +449,19 @@ const datePickerVariants = tv({
         },
         variant: {
             default: {
-                root: 'rounded-md border border-border bg-surface px-3 py-2 hover:border-border-strong',
+                // No `py-*`: the height is pinned per size in compoundVariants below.
+                // See docs/vertical-rhythm.md §3 — padding and a pinned height fight,
+                // and under border-box the taller one silently wins.
+                root: 'rounded-md border border-border bg-surface px-3 hover:border-border-strong',
             },
             naked: {
                 root: 'bg-transparent border-0 rounded-none p-0 focus-within:outline-none',
             },
         },
+        // True when a `[slot=trigger]` element is projected. The projected content
+        // then owns its own height (it can be a lg button, a card, a badge row),
+        // so the pinned control height must not apply.
+        customTrigger: { true: {}, false: {} },
         open: { true: { triggerButton: 'bg-surface-muted text-fg' }, false: {} },
         disabled: {
             true: { root: 'opacity-50 pointer-events-none cursor-not-allowed' },
@@ -464,6 +481,21 @@ const datePickerVariants = tv({
         },
     },
     compoundVariants: [
+        // ── Pinned control height (docs/vertical-rhythm.md §1) ──
+        // Only the `default` variant carries a height. `naked` means somebody else
+        // owns the box — either `<tw-form-field>` (which auto-nakeds this picker and
+        // supplies its own bordered, padded controlWrapper) or the calendar overlay
+        // footer. Pinning naked would stack 36px on top of the form-field's own
+        // `py-2`, inflating a wrapped picker from 38px to 54px at md.
+        { variant: 'default', customTrigger: false, size: 'xs', class: { root: 'h-6' } },
+        { variant: 'default', customTrigger: false, size: 'sm', class: { root: 'h-8' } },
+        { variant: 'default', customTrigger: false, size: 'md', class: { root: 'h-9' } },
+        { variant: 'default', customTrigger: false, size: 'lg', class: { root: 'h-11' } },
+        { variant: 'default', customTrigger: false, size: 'xl', class: { root: 'h-12' } },
+        // …and the projected-trigger path keeps the vertical padding the pinned
+        // sizes drop, so a rich trigger still sits inset from the shell's border
+        // exactly as it did before the height migration.
+        { variant: 'default', customTrigger: true, class: { root: 'py-2' } },
         // Default variant — focused border per color
         { variant: 'default', focused: true, color: 'primary', class: { root: 'border-primary-500' } },
         { variant: 'default', focused: true, color: 'secondary', class: { root: 'border-secondary-500' } },
@@ -479,6 +511,7 @@ const datePickerVariants = tv({
     defaultVariants: {
         size: 'md',
         variant: 'default',
+        customTrigger: false,
         open: false,
         disabled: false,
         errorState: false,
@@ -511,13 +544,13 @@ class DatePickerComponent extends FormFieldControl {
     /** Maximum selectable date. Typed input later than this commits the value and marks the bound control invalid with `calendarMaxDate`; the calendar disables the cell. Defaults to `null`. */
     maxDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    /** Per-date predicate — return `false` to disable. Applied in the calendar, the text-parse path, and the `calendarDisabledDate` validation error. */
+    /** Per-date predicate — return `false` to disable. Applied in the calendar, the text-parse path, and the `calendarDisabledDate` validation error. Defaults to `null`. */
     dateFilter = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
     /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
     startView = input('day', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
-    /** Date to focus when the calendar opens with no selection. Falls back to today. */
+    /** Date to focus when the calendar opens with no selection. Falls back to today. Defaults to `null`. */
     startAt = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
     /** Display format passed to `DateAdapter.format()`. With the default adapter, accepts `{ dateTimeFormat: Intl.DateTimeFormatOptions }`. When `withTime` is true and this is left at the default, hour/minute (and optional seconds) are folded in automatically. */
@@ -526,7 +559,7 @@ class DatePickerComponent extends FormFieldControl {
     /** Optional format hint passed to `DateAdapter.parse()`. Ignored by the native adapter. */
     parseFormat = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "parseFormat" }] : /* istanbul ignore next */ []));
-    /** Placeholder text shown in the input when no value is entered. */
+    /** Placeholder text shown in the input when no value is entered. Defaults to `undefined`. */
     placeholder = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** When true, the input is disabled, the trigger cannot open the calendar, and `aria-disabled="true"` is set. Defaults to `false`. */
@@ -535,7 +568,7 @@ class DatePickerComponent extends FormFieldControl {
     /** When true, exposes `aria-required="true"`. Validators.required on a bound NgControl is also honoured. Defaults to `false`. */
     requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required',
         transform: booleanAttribute });
-    /** When true, blocks typing but still allows picking via the calendar trigger. Defaults to `false`. */
+    /** When true, blocks typing but still allows picking via the calendar trigger. Defaults to `false`. Alias: `readonly`. */
     readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly',
         transform: booleanAttribute });
     /** Trigger padding, font size, and calendar cell density. Defaults to `'md'`. */
@@ -547,29 +580,28 @@ class DatePickerComponent extends FormFieldControl {
     /** Visual style of the trigger. `'default'` draws its own border; `'naked'` strips chrome. Auto-resolves to `'naked'` when inside `<tw-form-field>`. */
     variant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Whether to show a clear-button affordance inside the trigger when a value is set. Defaults to `true`. */
-    // TRUE-default: a picker without a clear affordance forces consumers to wire one — most form pickers expect the inline clear, matching `<tw-input>`'s clear button.
+    /** Whether to show a clear-button affordance inside the trigger when a value is set. Defaults to `true` — most form pickers expect the inline clear, matching `<tw-input>`'s clear button; without it consumers must wire one themselves. */
     showClear = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     /** When true, renders a `Today / Clear / Cancel / Apply` action bar at the bottom of the overlay. Defaults to `false`. */
     showActions = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
-    /** Label for the `Today` action in the overlay's action bar. */
+    /** Label for the `Today` action in the overlay's action bar. Defaults to `'Today'`. */
     todayLabel = input('Today', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
-    /** Label for the `Clear` action in the overlay's action bar. */
+    /** Label for the `Clear` action in the overlay's action bar. Defaults to `'Clear'`. */
     clearLabel = input('Clear', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
-    /** Label for the `Cancel` action in the overlay's action bar. */
+    /** Label for the `Cancel` action in the overlay's action bar. Defaults to `'Cancel'`. */
     cancelLabel = input('Cancel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
-    /** Label for the `Apply` action in the overlay's action bar. */
+    /** Label for the `Apply` action in the overlay's action bar. Defaults to `'Apply'`. */
     applyLabel = input('Apply', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
     /** When true, focusing the text input opens the overlay. Defaults to `false`. */
     openOnFocus = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
-    /** Extra class(es) applied to the overlay panel element. */
+    /** Extra class(es) applied to the overlay panel element. Defaults to an empty string. */
     panelClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
@@ -581,6 +613,9 @@ class DatePickerComponent extends FormFieldControl {
     /** Accessible name for the calendar trigger button. Defaults to `'Open calendar'`. */
     triggerAriaLabel = input('Open calendar', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the inline clear button shown when a value is set. Mirrors `tw-date-range-picker`'s input of the same name; distinct from `clearLabel`, which is the overlay action bar's visible button text. Defaults to `'Clear date'`. */
+    clearAriaLabel = input('Clear date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Bundles the time-of-day configuration. Passing a non-null object turns on the embedded `<tw-time-picker>` and forwards each field.
      *
@@ -588,32 +623,32 @@ class DatePickerComponent extends FormFieldControl {
      */
     timeConfig = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "timeConfig" }] : /* istanbul ignore next */ []));
-    /** Per-instance locale override. Forwarded to the embedded calendar and the underlying `DateAdapter` for parse/format. Falls back to Angular `LOCALE_ID` when `null`. */
+    /** Per-instance locale override. Forwarded to the embedded calendar and the underlying `DateAdapter` for parse/format. Falls back to Angular `LOCALE_ID` when `null`. Defaults to `null`. */
     locale = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    /** Function producing per-cell CSS classes, forwarded to the embedded calendar. Useful for visually marking special dates (holidays, billing cycles). */
+    /** Function producing per-cell CSS classes, forwarded to the embedded calendar. Useful for visually marking special dates (holidays, billing cycles). Defaults to `null`. */
     dateClass = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
-    /** Optional cell-content template, forwarded to the embedded calendar. Use to customize cell visuals beyond `dateClass`. */
+    /** Optional cell-content template, forwarded to the embedded calendar. Use to customize cell visuals beyond `dateClass`. Defaults to `null`. */
     cellTemplate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
-    /** Optional quick-select presets rendered as a vertical list before the calendar. Each preset provides a `label` and a `date` factory. An empty array hides the preset panel. */
+    /** Optional quick-select presets rendered as a vertical list before the calendar. Each preset provides a `label` and a `date` factory. An empty array hides the preset panel. Defaults to an empty array. */
     presets = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
-    /** Per-instance override of the `ErrorStateMatcher`. */
+    /** Per-instance override of the `ErrorStateMatcher`. Defaults to `undefined`. */
     errorStateMatcher = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the input. Required when no visible label is supplied. Alias: `aria-label`. */
+    /** Accessible name for the input. Required when no visible label is supplied. Alias: `aria-label`. Defaults to `undefined`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** ID of an external element that labels the input. Alias: `aria-labelledby`. */
+    /** ID of an external element that labels the input. Alias: `aria-labelledby`. Defaults to `undefined`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** Consumer-supplied `aria-describedby` ids. The form-field preserves these when merging hint/error ids. Alias: `aria-describedby`. */
+    /** Consumer-supplied `aria-describedby` ids. The form-field preserves these when merging hint/error ids. Alias: `aria-describedby`. Defaults to `undefined`. */
     userAriaDescribedByInput = input(undefined, { ...(ngDevMode ? { debugName: "userAriaDescribedByInput" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     // ── Models (two-way) ──
-    /** Two-way bound selected date. `null` when no selection. Setting programmatically updates the display; does NOT trigger `onChange`. */
+    /** Two-way bound selected date. `null` when no selection. Setting programmatically updates the display; does NOT trigger `onChange`. Defaults to `null`. */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Two-way bound open state of the calendar overlay. */
+    /** Two-way bound open state of the calendar overlay. Defaults to `false`. */
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
@@ -644,9 +679,6 @@ class DatePickerComponent extends FormFieldControl {
     // back into this instance while it is still being created. Mirrors
     // `date-range-picker.ts` and `calendar.ts`.
     ngControl = null;
-    parentForm = inject(NgForm, { optional: true });
-    parentFormGroup = inject(FormGroupDirective, { optional: true });
-    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     // ── View refs ──
     inputRef = viewChild.required('dateInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
@@ -706,30 +738,42 @@ class DatePickerComponent extends FormFieldControl {
     ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     describedByIdsSignal = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
-    closingSignal = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
     lastValueBeforeOpen = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "lastValueBeforeOpen" }] : /* istanbul ignore next */ []));
     pendingCalendarValue = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pendingCalendarValue" }] : /* istanbul ignore next */ []));
     activePresetIdSignal = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activePresetIdSignal" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** @internal Shared `errorState` / `required` / `errors` derivation — see `wireErrorState`. */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        required: () => this.requiredInput(),
+        track: [() => this.focusedSignal()],
+        // An unparseable entry or an out-of-range date is an error regardless of validator status.
+        errorStateOverride: () => (this.parseError() || this.rangeError() ? true : undefined),
+    });
     onChange = () => { };
     onTouched = () => { };
-    overlayInstanceSignal = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    // Overlay lifecycle bookkeeping. Both are PLAIN FIELDS, not signals, and that
+    // is load-bearing: the lifecycle effect in the constructor both reads and
+    // writes them, so as signals they would form a read → write → re-trigger
+    // cycle of exactly the shape CLAUDE.md forbids. Demoting them is the fix
+    // `popover.ts` and `command-palette.ts` already use — see the comment on that
+    // effect. Do not promote either back to `signal()`.
+    overlayInstance = null;
+    closing = false;
     returnFocusTo = null;
-    get overlayInstance() {
-        return this.overlayInstanceSignal();
-    }
+    // The one piece of overlay state that must stay a signal: it is the *only*
+    // dependency that re-runs the overlay state-push effect when the panel
+    // attaches. Written here (openOverlay / closeOverlay), never read by the
+    // lifecycle effect, so it cannot cycle. Mirrors `command-palette.ts`.
+    isAttached = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAttached" }] : /* istanbul ignore next */ []));
     // ── Derived state ──
     /** @internal */
     isDisabled = computed(() => {
-        this._ngControlRev();
+        this.errorWiring.rev();
         return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -794,6 +838,7 @@ class DatePickerComponent extends FormFieldControl {
     variantResult = computed(() => datePickerVariants({
         size: this.size(),
         variant: this.resolvedVariant(),
+        customTrigger: this.hasCustomTrigger(),
         open: this.open(),
         disabled: this.isDisabled(),
         errorState: this.errorState(),
@@ -827,26 +872,18 @@ class DatePickerComponent extends FormFieldControl {
     /** @internal */
     disabled = this.isDisabled;
     /** @internal */
-    required = computed(() => {
-        this._ngControlRev();
-        if (this.requiredInput())
-            return true;
-        return !!this.ngControl?.control?.hasValidator(Validators.required);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    required = this.errorWiring.required;
     /** @internal */
-    errorState = computed(() => {
-        this._ngControlRev();
-        this._formSubmitRev();
-        this.focusedSignal();
-        if (this.parseError() || this.rangeError())
-            return true;
-        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
-        const form = this.parentFormGroup ??
-            this.parentForm;
-        return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    errorState = this.errorWiring.errorState;
+    /**
+     * @internal Active validation errors map from the bound `NgControl` (or `null` when the
+     * control reports none / is unbound). This is what `[twError match="…"]` filters on inside a
+     * `<tw-form-field>`; without it every `match`-targeted message — including the
+     * `calendarMinDate` / `calendarMaxDate` / `calendarDisabledDate` / `calendarInvalidValue`
+     * codes this component's `NG_VALIDATORS` apparatus exists to produce — stays permanently
+     * hidden. (Authoritative key list: `CalendarValidationErrors` in `calendar.types.ts`.)
+     */
+    errors = this.errorWiring.errors;
     /** @internal */
     controlType = 'date-picker';
     /** @internal */
@@ -887,24 +924,54 @@ class DatePickerComponent extends FormFieldControl {
             });
         });
         // Mirror the `open` model into the overlay lifecycle.
+        //
+        // The only tracked reads here are `open()` and `isDisabled()`. Everything
+        // this effect *writes* — `overlayInstance`, `closing` — is a plain field,
+        // never a signal, so opening or closing cannot re-trigger the effect that
+        // ordered it. That is the whole reason those two are declared as fields
+        // (see their declaration); promoting either back to `signal()` recreates
+        // the read → write → re-trigger cycle CLAUDE.md forbids.
+        //
+        // `openOverlay()` / `closeOverlay()` do write `isAttached`, but this effect
+        // never reads it, so that write is a one-way hand-off to the state-push
+        // effect below and terminates there.
+        //
+        // The body is wrapped in `untracked()` because demoting the two fields is
+        // NOT sufficient on its own. `openOverlay()` reads roughly twenty-five
+        // inputs while pushing them into the freshly attached panel, and it writes
+        // two signals it then reads straight back. Called from the tracked phase,
+        // every one of those reads becomes a dependency of THIS effect, which both
+        // recreates the forbidden write-then-read-back shape and re-runs the whole
+        // lifecycle on any of those twenty-five inputs changing. Tracked reads are
+        // now exactly `open()` and `isDisabled()`, which is what the paragraph
+        // above claims — and only now true.
         effect(() => {
             const shouldOpen = this.open();
             const disabled = this.isDisabled();
-            if (disabled && this.overlayInstance) {
-                this.closeOverlay('programmatic');
-                return;
-            }
-            if (shouldOpen && !this.overlayInstance && !disabled && !this.closingSignal()) {
-                this.openOverlay();
-            }
-            else if (!shouldOpen && this.overlayInstance && !this.closingSignal()) {
-                this.closeOverlay('programmatic');
-            }
+            untracked(() => {
+                if (disabled && this.overlayInstance) {
+                    this.closeOverlay('programmatic');
+                    return;
+                }
+                if (shouldOpen && !this.overlayInstance && !disabled && !this.closing) {
+                    this.openOverlay();
+                }
+                else if (!shouldOpen && this.overlayInstance && !this.closing) {
+                    this.closeOverlay('programmatic');
+                }
+            });
         });
         // Push state into the overlay whenever anything relevant changes.
         // Reads happen in the tracked phase; writes to the overlay instance are
         // wrapped in `untracked()` so they never feed back into this effect.
+        //
+        // `isAttached()` MUST be read first and unconditionally: it is this
+        // effect's only dependency on the overlay's existence, so it is what makes
+        // the initial push happen when the panel attaches (`overlayInstance` is a
+        // plain field and is invisible to the signal graph). Do not reorder it
+        // behind the null check — the effect would then never re-run on open.
         effect(() => {
+            this.isAttached();
             const instance = this.overlayInstance;
             if (!instance)
                 return;
@@ -996,15 +1063,16 @@ class DatePickerComponent extends FormFieldControl {
             this.focusedSignal.set(!!origin);
             if (wasFocused && !origin) {
                 this.onTouched();
-                this._ngControlRev.update((n) => n + 1);
+                this.errorWiring.bump();
             }
         });
         this.destroyRef.onDestroy(() => {
             monitorSub.unsubscribe();
             this.focusMonitor.stopMonitoring(this.elementRef);
             // The coordinator's own DestroyRef.onDestroy disposes the overlay and
-            // clears its timers; we only need to drop the local instance signal.
-            this.overlayInstanceSignal.set(null);
+            // clears its timers; we only need to drop the local instance reference.
+            this.overlayInstance = null;
+            this.isAttached.set(false);
         });
     }
     ngOnInit() {
@@ -1015,22 +1083,8 @@ class DatePickerComponent extends FormFieldControl {
         this.ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
         // Anything read off `ngControl` before this point saw `null`; bump the
         // revision so `isDisabled`, `required` and `errorState` recompute.
-        this._ngControlRev.update((n) => n + 1);
-        const ctrl = this.ngControl?.control;
-        if (ctrl) {
-            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
-            if (streams.length) {
-                merge(...streams)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
-            }
-        }
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        if (submit) {
-            submit
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
-        }
+        this.errorWiring.bump();
+        this.errorWiring.connect();
     }
     // ── Public imperative API ──
     /** Opens the overlay. No-op when disabled or already open. */
@@ -1323,7 +1377,10 @@ class DatePickerComponent extends FormFieldControl {
         instance.onApply.set(() => this.onApplyAction());
         instance.onPresetSelect.set((preset) => this.onPresetClick(preset));
         instance.activePresetId.set(this.activePresetIdSignal());
-        this.overlayInstanceSignal.set(instance);
+        this.overlayInstance = instance;
+        // Must follow the assignment above: this is what wakes the state-push
+        // effect, and it reads `overlayInstance` as a plain field.
+        this.isAttached.set(true);
         // Per-open streams from the coordinator complete on close, so no
         // takeUntilDestroyed is needed — accumulating subscribers across multiple
         // open/close cycles is the bug we'd hit otherwise.
@@ -1344,9 +1401,9 @@ class DatePickerComponent extends FormFieldControl {
         });
     }
     closeOverlay(reason, restore = false) {
-        if (this.closingSignal() || !this.overlayInstance)
+        if (this.closing || !this.overlayInstance)
             return;
-        this.closingSignal.set(true);
+        this.closing = true;
         this.overlayInstance.leaving.set(true);
         if (restore) {
             const previous = this.lastValueBeforeOpen();
@@ -1363,11 +1420,12 @@ class DatePickerComponent extends FormFieldControl {
         // returnFocusTo was never set (e.g. open() flipped programmatically).
         (this.returnFocusTo ?? this.resolveFocusTarget()).focus();
         this.coordinator.close(() => {
-            this.overlayInstanceSignal.set(null);
+            this.overlayInstance = null;
+            this.isAttached.set(false);
             this.pendingCalendarValue.set(null);
             this.returnFocusTo = null;
             untracked(() => this.open.set(false));
-            this.closingSignal.set(false);
+            this.closing = false;
             this.closed.emit(reason);
         });
     }
@@ -1549,7 +1607,7 @@ class DatePickerComponent extends FormFieldControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DatePickerComponent, isStandalone: true, selector: "tw-date-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", 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 }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, parseFormat: { classPropertyName: "parseFormat", publicName: "parseFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, timeConfig: { classPropertyName: "timeConfig", publicName: "timeConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, userAriaDescribedByInput: { classPropertyName: "userAriaDescribedByInput", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", opened: "opened", closed: "closed", dateInput: "dateInput", dateChange: "dateChange", presetSelected: "presetSelected" }, host: { properties: { "class": "rootClasses()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DatePickerComponent, isStandalone: true, selector: "tw-date-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", 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 }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, parseFormat: { classPropertyName: "parseFormat", publicName: "parseFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, timeConfig: { classPropertyName: "timeConfig", publicName: "timeConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, userAriaDescribedByInput: { classPropertyName: "userAriaDescribedByInput", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", opened: "opened", closed: "closed", dateInput: "dateInput", dateChange: "dateChange", presetSelected: "presetSelected" }, host: { properties: { "class": "rootClasses()" } }, providers: [
             {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => DatePickerComponent),
@@ -1604,7 +1662,7 @@ class DatePickerComponent extends FormFieldControl {
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="ariaLabelledby() || null"
       [attr.aria-describedby]="describedBy() || null"
-      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-required]="required() || null"
       [attr.aria-invalid]="errorState() || null"
       [attr.aria-disabled]="isDisabled() || null"
       [attr.data-variant]="resolvedVariant()"
@@ -1619,7 +1677,7 @@ class DatePickerComponent extends FormFieldControl {
         type="button"
         tabindex="-1"
         [class]="clearButtonClasses()"
-        [attr.aria-label]="'Clear date'"
+        [attr.aria-label]="clearAriaLabel()"
         (click)="onClearClick($event)"
       >
         <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
@@ -1728,7 +1786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="ariaLabelledby() || null"
       [attr.aria-describedby]="describedBy() || null"
-      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-required]="required() || null"
       [attr.aria-invalid]="errorState() || null"
       [attr.aria-disabled]="isDisabled() || null"
       [attr.data-variant]="resolvedVariant()"
@@ -1743,7 +1801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         type="button"
         tabindex="-1"
         [class]="clearButtonClasses()"
-        [attr.aria-label]="'Clear date'"
+        [attr.aria-label]="clearAriaLabel()"
         (click)="onClearClick($event)"
       >
         <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
@@ -1794,7 +1852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class]': 'rootClasses()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], parseFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: false }] }], timeConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeConfig", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], userAriaDescribedByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dateInput: [{ type: i0.Output, args: ["dateInput"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], presetSelected: [{ type: i0.Output, args: ["presetSelected"] }], inputRef: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], parseFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], timeConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeConfig", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], userAriaDescribedByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dateInput: [{ type: i0.Output, args: ["dateInput"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], presetSelected: [{ type: i0.Output, args: ["presetSelected"] }], inputRef: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.