@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,1558 @@
+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 { NgControl, NgForm, FormGroupDirective, Validators } 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 { FormFieldControl, FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { CalendarComponent, provideSingleSelectionStrategy, DATE_ADAPTER } from '@cdevhub/ngx-tw/calendar';
+import { ButtonDirective } from '@cdevhub/ngx-tw/button';
+import { TimePickerComponent } from '@cdevhub/ngx-tw/time-picker';
+
+/**
+ * Internal overlay panel for `tw-date-picker`. Hosts the calendar and, when
+ * the parent enables `showActions`, the action bar. Receives configuration
+ * and interaction callbacks via signal-backed fields set from the outer
+ * component. Not exported from the public API.
+ */
+class DatePickerOverlayComponent {
+    elementRef = inject((ElementRef));
+    calendarRef = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendarRef" }] : /* istanbul ignore next */ []));
+    // ── Config signals set by the parent component ──
+    /** @internal */
+    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    color = signal('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minDate = signal(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    maxDate = signal(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dateFilter = signal(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    startView = signal('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    startAt = signal(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    /** @internal Current committed-or-pending value shown as selected in the calendar. */
+    pendingValue = signal(null, ...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showActions = signal(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    todayLabel = signal('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    clearLabel = signal('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    cancelLabel = signal('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    applyLabel = signal('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dialogId = signal('', ...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dialogAriaLabel = signal('Choose a date', ...(ngDevMode ? [{ debugName: "dialogAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelClassValue = signal('', ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    /** @internal Forwarded to the calendar — per-cell CSS classes. */
+    dateClass = signal(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    /** @internal Forwarded to the calendar — cell-content template. */
+    cellTemplate = signal(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal Forwarded to the calendar — per-instance locale override. */
+    locale = signal(null, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** @internal Quick-select presets rendered above the calendar. */
+    presets = signal([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    // ── Time-picker config ──
+    /** @internal */
+    withTime = signal(false, ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    timeFormat = signal('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showSeconds = signal(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hourStep = signal(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minuteStep = signal(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    secondStep = signal(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minTime = signal(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    maxTime = signal(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    // ── Callbacks set by the parent component ──
+    /** @internal */
+    onCalendarSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCalendarSelect" }] : /* istanbul ignore next */ []));
+    /** @internal Fires whenever the embedded time-picker commits a new time. */
+    onTimeInput = signal(() => { }, ...(ngDevMode ? [{ debugName: "onTimeInput" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onToday = signal(() => { }, ...(ngDevMode ? [{ debugName: "onToday" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onClear = signal(() => { }, ...(ngDevMode ? [{ debugName: "onClear" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onCancel = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCancel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onApply = signal(() => { }, ...(ngDevMode ? [{ debugName: "onApply" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onPresetSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onPresetSelect" }] : /* istanbul ignore next */ []));
+    // ── Classes ──
+    /** @internal */
+    panelClasses = computed(() => {
+        const base = 'block bg-surface-overlay border border-border rounded-lg shadow-md overflow-hidden flex flex-col';
+        const custom = this.panelClassValue();
+        return custom ? `${base} ${custom}` : base;
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    // ── Template callbacks ──
+    /** @internal */
+    onCalendarDateSelected(value) {
+        // Single-mode strategy emits a scalar `D`. Guard against the wider calendar
+        // output type for safety.
+        if (value === null || value === undefined)
+            return;
+        if (Array.isArray(value))
+            return;
+        if (typeof value === 'object' && value !== null && 'start' in value && 'end' in value)
+            return;
+        this.onCalendarSelect()(value);
+    }
+    /** @internal */
+    onTimeChange(event) {
+        if (event.source === 'programmatic')
+            return;
+        this.onTimeInput()(event.value);
+    }
+    /** @internal */
+    handleToday() {
+        this.onToday()();
+    }
+    /** @internal */
+    handleClear() {
+        this.onClear()();
+    }
+    /** @internal */
+    handleCancel() {
+        this.onCancel()();
+    }
+    /** @internal */
+    handleApply() {
+        this.onApply()();
+    }
+    /** @internal */
+    handlePreset(preset) {
+        this.onPresetSelect()(preset);
+    }
+    /** @internal */
+    presetKey(index, preset) {
+        return preset.id ?? preset.label ?? index;
+    }
+    /** @internal */
+    isActivePreset(preset) {
+        return !!preset.id && this.activePresetId() === preset.id;
+    }
+    /** @internal Tracks the most recently picked preset for visual state. Set by the parent. */
+    activePresetId = signal(undefined, ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
+    /** @internal Moves focus to the active calendar cell. Called by the parent after open. */
+    focusCalendar() {
+        this.calendarRef()?.focusActiveCell();
+    }
+    /** @internal Exposes the root overlay element for tests. */
+    getElement() {
+        return this.elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DatePickerOverlayComponent, isStandalone: true, selector: "tw-date-picker-overlay", host: { properties: { "class": "panelClasses()", "id": "dialogId()", "attr.role": "\"dialog\"", "attr.aria-modal": "\"true\"", "attr.aria-label": "dialogAriaLabel()", "animate.enter": "\"scale-in\"", "animate.leave": "leaving() ? \"scale-out\" : \"\"" } }, providers: [provideSingleSelectionStrategy()], viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (presets().length) {
+      <div
+        class="flex flex-col gap-1 p-2 border-b border-border bg-surface-muted"
+        role="listbox"
+        aria-label="Preset dates"
+      >
+        @for (preset of presets(); track presetKey($index, preset)) {
+          <button
+            twButton
+            variant="ghost"
+            size="sm"
+            type="button"
+            role="option"
+            class="w-full justify-start"
+            [attr.aria-selected]="isActivePreset(preset) ? 'true' : 'false'"
+            (click)="handlePreset(preset)"
+          >
+            {{ preset.label }}
+          </button>
+        }
+      </div>
+    }
+
+    <tw-calendar
+      #calendar
+      class="!block !rounded-none !border-0 !bg-transparent !p-2"
+      [bordered]="false"
+      [value]="pendingValue()"
+      [startAt]="startAt()"
+      [startView]="startView()"
+      [minDate]="minDate()"
+      [maxDate]="maxDate()"
+      [dateFilter]="dateFilter()"
+      [dateClass]="dateClass()"
+      [cellTemplate]="cellTemplate()"
+      [locale]="locale()"
+      aria-label="Calendar"
+      (valueChange)="onCalendarDateSelected($event)"
+    />
+
+    @if (withTime()) {
+      <div class="border-t border-border px-3 py-2 flex items-center justify-center">
+        <tw-time-picker
+          variant="naked"
+          [value]="pendingValue()"
+          [size]="size()"
+          [color]="color()"
+          [format]="timeFormat()"
+          [showSeconds]="showSeconds()"
+          [hourStep]="hourStep()"
+          [minuteStep]="minuteStep()"
+          [secondStep]="secondStep()"
+          [minTime]="minTime()"
+          [maxTime]="maxTime()"
+          [showClear]="false"
+          [referenceDate]="pendingValue() ?? startAt() ?? null"
+          aria-label="Time"
+          (timeChange)="onTimeChange($event)"
+        />
+      </div>
+    }
+
+    @if (showActions()) {
+      <div class="border-t border-border flex items-center justify-between gap-2 px-3 py-2">
+        <div class="flex items-center gap-2">
+          <button twButton variant="ghost" size="sm" type="button" (click)="handleToday()">
+            {{ todayLabel() }}
+          </button>
+          @if (pendingValue() !== null) {
+            <button twButton variant="ghost" size="sm" type="button" (click)="handleClear()">
+              {{ clearLabel() }}
+            </button>
+          }
+        </div>
+        <div class="flex items-center gap-2">
+          <button twButton variant="ghost" size="sm" type="button" (click)="handleCancel()">
+            {{ cancelLabel() }}
+          </button>
+          <button twButton variant="solid" size="sm" type="button" (click)="handleApply()">
+            {{ applyLabel() }}
+          </button>
+        </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: ["modeChange", "valueChange", "selectionStart", "rangePreview", "selectionComplete", "selectionRestart", "selectionCleared", "selectionLimitReached", "presetChange", "viewChange", "activeDateChange", "monthChange", "yearChange", "cellClick", "cellHover"] }, { 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: "21.2.14", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-date-picker-overlay',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CalendarComponent, TimePickerComponent, ButtonDirective],
+                    providers: [provideSingleSelectionStrategy()],
+                    host: {
+                        '[class]': 'panelClasses()',
+                        '[id]': 'dialogId()',
+                        '[attr.role]': '"dialog"',
+                        '[attr.aria-modal]': '"true"',
+                        '[attr.aria-label]': 'dialogAriaLabel()',
+                        '[animate.enter]': '"scale-in"',
+                        '[animate.leave]': 'leaving() ? "scale-out" : ""',
+                    },
+                    template: `
+    @if (presets().length) {
+      <div
+        class="flex flex-col gap-1 p-2 border-b border-border bg-surface-muted"
+        role="listbox"
+        aria-label="Preset dates"
+      >
+        @for (preset of presets(); track presetKey($index, preset)) {
+          <button
+            twButton
+            variant="ghost"
+            size="sm"
+            type="button"
+            role="option"
+            class="w-full justify-start"
+            [attr.aria-selected]="isActivePreset(preset) ? 'true' : 'false'"
+            (click)="handlePreset(preset)"
+          >
+            {{ preset.label }}
+          </button>
+        }
+      </div>
+    }
+
+    <tw-calendar
+      #calendar
+      class="!block !rounded-none !border-0 !bg-transparent !p-2"
+      [bordered]="false"
+      [value]="pendingValue()"
+      [startAt]="startAt()"
+      [startView]="startView()"
+      [minDate]="minDate()"
+      [maxDate]="maxDate()"
+      [dateFilter]="dateFilter()"
+      [dateClass]="dateClass()"
+      [cellTemplate]="cellTemplate()"
+      [locale]="locale()"
+      aria-label="Calendar"
+      (valueChange)="onCalendarDateSelected($event)"
+    />
+
+    @if (withTime()) {
+      <div class="border-t border-border px-3 py-2 flex items-center justify-center">
+        <tw-time-picker
+          variant="naked"
+          [value]="pendingValue()"
+          [size]="size()"
+          [color]="color()"
+          [format]="timeFormat()"
+          [showSeconds]="showSeconds()"
+          [hourStep]="hourStep()"
+          [minuteStep]="minuteStep()"
+          [secondStep]="secondStep()"
+          [minTime]="minTime()"
+          [maxTime]="maxTime()"
+          [showClear]="false"
+          [referenceDate]="pendingValue() ?? startAt() ?? null"
+          aria-label="Time"
+          (timeChange)="onTimeChange($event)"
+        />
+      </div>
+    }
+
+    @if (showActions()) {
+      <div class="border-t border-border flex items-center justify-between gap-2 px-3 py-2">
+        <div class="flex items-center gap-2">
+          <button twButton variant="ghost" size="sm" type="button" (click)="handleToday()">
+            {{ todayLabel() }}
+          </button>
+          @if (pendingValue() !== null) {
+            <button twButton variant="ghost" size="sm" type="button" (click)="handleClear()">
+              {{ clearLabel() }}
+            </button>
+          }
+        </div>
+        <div class="flex items-center gap-2">
+          <button twButton variant="ghost" size="sm" type="button" (click)="handleCancel()">
+            {{ cancelLabel() }}
+          </button>
+          <button twButton variant="solid" size="sm" type="button" (click)="handleApply()">
+            {{ applyLabel() }}
+          </button>
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { calendarRef: [{ type: i0.ViewChild, args: ['calendar', { isSignal: true }] }] } });
+
+// ── tv() config ───────────────────────────────────────────────────
+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',
+        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.
+        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: {
+        size: {
+            xs: {
+                root: 'gap-1 text-xs',
+                input: 'text-xs',
+                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',
+            },
+            sm: {
+                root: 'gap-1.5 text-sm',
+                input: 'text-sm',
+                triggerButton: 'size-7',
+                triggerIcon: 'size-4',
+            },
+            md: {
+                root: 'gap-2 text-sm',
+                input: 'text-sm',
+                triggerButton: 'size-8',
+                triggerIcon: 'size-4',
+            },
+            lg: {
+                root: 'gap-2 text-base',
+                input: 'text-base',
+                triggerButton: 'size-9',
+                triggerIcon: 'size-5',
+            },
+            xl: {
+                root: 'gap-2 text-base',
+                input: 'text-base',
+                // size-10 (40px) extends the codified xs..lg square-interactive scale (24/28/32/36) by one step for xl. Stepping down to size-9 would make lg and xl visually identical since both use text-base; matches paginator's xl handling (size-11).
+                triggerButton: 'size-10',
+                triggerIcon: 'size-5',
+            },
+        },
+        variant: {
+            default: {
+                root: 'rounded-md border border-border bg-surface px-3 py-2 hover:border-border-strong',
+            },
+            naked: {
+                root: 'bg-transparent border-0 rounded-none p-0 focus-within:outline-none',
+            },
+        },
+        open: { true: { triggerButton: 'bg-surface-muted text-fg' }, false: {} },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none cursor-not-allowed' },
+            false: {},
+        },
+        focused: { true: {}, false: {} },
+        errorState: { true: {}, false: {} },
+        color: {
+            primary: {},
+            secondary: {},
+            accent: {},
+            neutral: {},
+            info: {},
+            success: {},
+            warning: {},
+            error: {},
+        },
+    },
+    compoundVariants: [
+        // 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' } },
+        { variant: 'default', focused: true, color: 'accent', class: { root: 'border-accent-500' } },
+        { variant: 'default', focused: true, color: 'neutral', class: { root: 'border-border-strong' } },
+        { variant: 'default', focused: true, color: 'info', class: { root: 'border-info-500' } },
+        { variant: 'default', focused: true, color: 'success', class: { root: 'border-success-500' } },
+        { variant: 'default', focused: true, color: 'warning', class: { root: 'border-warning-500' } },
+        { variant: 'default', focused: true, color: 'error', class: { root: 'border-error-500' } },
+        // Default variant + error state → red outline
+        { variant: 'default', errorState: true, class: { root: 'border-error-500' } },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'default',
+        open: false,
+        disabled: false,
+        errorState: false,
+        focused: false,
+        color: 'primary',
+    },
+}, { twMerge: true });
+// ── ID generator ──────────────────────────────────────────────────
+let nextDatePickerId = 0;
+// ── Default display format ────────────────────────────────────────
+const DEFAULT_DISPLAY_FORMAT = {
+    dateTimeFormat: { year: 'numeric', month: 'short', day: 'numeric' },
+};
+/**
+ * ARIA date-picker dialog. Combines a typable text input with a popover
+ * calendar. All three Angular forms strategies (reactive, template-driven,
+ * signal-forms) are supported via `ControlValueAccessor`, and the component
+ * integrates with `<tw-form-field>` by implementing `FormFieldControl`.
+ *
+ * All date operations go through the injected `DateAdapter<D>`; call
+ * `provideNativeDateAdapter()` in your app providers to bootstrap the default.
+ */
+class DatePickerComponent extends FormFieldControl {
+    // ── Inputs ──
+    /** Id on the date-picker's input element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
+    idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+    /** Minimum selectable date. Typed input earlier than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Maximum selectable date. Typed input later than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Per-date predicate — return `false` to disable. Applied in both the calendar and the text-parse path. */
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
+    startView = input('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    /** Date to focus when the calendar opens with no selection. Falls back to today. */
+    startAt = input(null, ...(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. */
+    format = input(DEFAULT_DISPLAY_FORMAT, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Optional format hint passed to `DateAdapter.parse()`. Ignored by the native adapter. */
+    parseFormat = input(undefined, ...(ngDevMode ? [{ debugName: "parseFormat" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown in the input when no value is entered. */
+    placeholder = input(undefined, ...(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`. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
+    /** 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`. */
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly',
+        transform: booleanAttribute });
+    /** Trigger padding, font size, and calendar cell density. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color for focused border, calendar selection ring, and today marker. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** 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, ...(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.
+    showClear = input(true, ...(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, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    /** Label for the `Today` action in the overlay's action bar. */
+    todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the `Clear` action in the overlay's action bar. */
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the `Cancel` action in the overlay's action bar. */
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /** Label for the `Apply` action in the overlay's action bar. */
+    applyLabel = input('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    /** When true, focusing the text input opens the overlay. Defaults to `false`. */
+    openOnFocus = input(false, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
+    /** Extra class(es) applied to the overlay panel element. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
+    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    /** Pixel distance between trigger and overlay. Defaults to `4`. */
+    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the calendar trigger button. Defaults to `'Open calendar'`. */
+    triggerAriaLabel = input('Open calendar', ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* 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.
+     *
+     * Defaults to `null` (no time field). Pass an empty object `{}` to enable the time picker with all defaults.
+     */
+    timeConfig = input(null, ...(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`. */
+    locale = input(null, ...(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). */
+    dateClass = input(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    /** Optional cell-content template, forwarded to the embedded calendar. Use to customize cell visuals beyond `dateClass`. */
+    cellTemplate = input(null, ...(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. */
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    /** Per-instance override of the `ErrorStateMatcher`. */
+    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the input. Required when no visible label is supplied. Alias: `aria-label`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element that labels the input. Alias: `aria-labelledby`. */
+    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`. */
+    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`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Two-way bound open state of the calendar overlay. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    /** Fires after the overlay's enter animation completes. Payload is the trigger element. */
+    opened = output();
+    /** Fires after the overlay's leave animation completes. Payload is the reason it closed. */
+    closed = output();
+    /** Fires on every keystroke in the text input (before parsing). Does NOT mean the value has committed. */
+    dateInput = output();
+    /** Fires after a commit — from parsing typed input or picking in the calendar. */
+    dateChange = output();
+    /** Fires when the user picks one of the entries from `presets`. Payload is the preset that fired. */
+    presetSelected = output();
+    // ── Injected deps ──
+    adapter = inject(DATE_ADAPTER);
+    overlayService = inject(Overlay);
+    focusMonitor = inject(FocusMonitor);
+    liveAnnouncer = inject(LiveAnnouncer);
+    coordinator = inject(PickerOverlayCoordinator);
+    elementRef = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    formField = inject(FormFieldComponent, { optional: true });
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    // ── View refs ──
+    inputRef = viewChild.required('dateInput');
+    triggerRef = viewChild('triggerBtn', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    /** @internal Whether a `[slot=trigger]` is projected. Detected post-mount via DOM query so we can drop the default chrome. */
+    hasCustomTrigger = signal(false, ...(ngDevMode ? [{ debugName: "hasCustomTrigger" }] : /* istanbul ignore next */ []));
+    // ── Identity ──
+    uid = nextDatePickerId++;
+    /** @internal */
+    hostId = `tw-date-picker-${this.uid}`;
+    /** @internal */
+    dialogId = `${this.hostId}-dialog`;
+    // ── Internal state ──
+    /** @internal Decouples programmatic writes from user commits so `writeValue` doesn't re-trigger parent effects. */
+    internalValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rawInputText = signal('', ...(ngDevMode ? [{ debugName: "rawInputText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    parseError = signal(false, ...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rangeError = signal(false, ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    closingSignal = signal(false, ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
+    lastValueBeforeOpen = signal(null, ...(ngDevMode ? [{ debugName: "lastValueBeforeOpen" }] : /* istanbul ignore next */ []));
+    pendingCalendarValue = signal(null, ...(ngDevMode ? [{ debugName: "pendingCalendarValue" }] : /* istanbul ignore next */ []));
+    activePresetIdSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "activePresetIdSignal" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    overlayInstanceSignal = signal(null, ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    returnFocusTo = null;
+    get overlayInstance() {
+        return this.overlayInstanceSignal();
+    }
+    // ── Derived state ──
+    /** @internal */
+    isDisabled = computed(() => {
+        this._ngControlRev();
+        return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
+    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isEmpty = computed(() => this.internalValue() === null && !this.rawInputText(), ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    /** Whether the time picker is rendered inside the overlay. True iff `timeConfig` is non-null. */
+    withTime = computed(() => this.timeConfig() !== null, ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
+    /** @internal Effective time-of-day configuration — merges `timeConfig` over the documented per-field defaults. */
+    effectiveTimeConfig = computed(() => {
+        const cfg = this.timeConfig();
+        return {
+            format: cfg?.format ?? '24h',
+            showSeconds: cfg?.showSeconds ?? false,
+            hourStep: cfg?.hourStep ?? 1,
+            minuteStep: cfg?.minuteStep ?? 1,
+            secondStep: cfg?.secondStep ?? 1,
+            minTime: cfg?.minTime ?? null,
+            maxTime: cfg?.maxTime ?? null,
+        };
+    }, ...(ngDevMode ? [{ debugName: "effectiveTimeConfig" }] : /* istanbul ignore next */ []));
+    /** @internal Effective display format — folds hour/minute (and optional seconds) into the default when `withTime` is on and the user hasn't overridden `format`. */
+    effectiveFormat = computed(() => {
+        const fmt = this.format();
+        if (!this.withTime() || fmt !== DEFAULT_DISPLAY_FORMAT)
+            return fmt;
+        const time = this.effectiveTimeConfig();
+        const hour12 = time.format === '12h';
+        const base = {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12,
+        };
+        if (time.showSeconds)
+            base.second = '2-digit';
+        return { dateTimeFormat: base };
+    }, ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    describedBy = computed(() => {
+        const extra = this.describedByIdsSignal();
+        const user = this.userAriaDescribedByInput();
+        const merged = [...extra];
+        if (user) {
+            for (const id of user.split(/\s+/)) {
+                if (id)
+                    merged.push(id);
+            }
+        }
+        return merged.length ? merged.join(' ') : '';
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // ── tv() output ──
+    variantResult = computed(() => datePickerVariants({
+        size: this.size(),
+        variant: this.resolvedVariant(),
+        open: this.open(),
+        disabled: this.isDisabled(),
+        errorState: this.errorState(),
+        focused: this.focusedSignal(),
+        color: this.color(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    inputClasses = computed(() => this.variantResult().input(), ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    triggerButtonClasses = computed(() => this.variantResult().triggerButton(), ...(ngDevMode ? [{ debugName: "triggerButtonClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    triggerIconClasses = computed(() => this.variantResult().triggerIcon(), ...(ngDevMode ? [{ debugName: "triggerIconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    // ── FormFieldControl impl ──
+    /** @internal */
+    id = computed(() => this.idInput() ?? this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focused = this.focusedSignal.asReadonly();
+    /** @internal */
+    empty = this.isEmpty;
+    /** @internal */
+    disabled = this.isDisabled;
+    /** @internal */
+    required = computed(() => {
+        this._ngControlRev();
+        if (this.requiredInput())
+            return true;
+        return !!this.ngControl?.control?.hasValidator(Validators.required);
+    }, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @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);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlType = 'date-picker';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.userAriaDescribedByInput(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    // ── Constructor ──
+    constructor() {
+        super();
+        // Wire this component as the NgControl's value accessor without registering
+        // NG_VALUE_ACCESSOR in providers, which would create a circular DI with the
+        // `inject(NgControl, { self: true })` above.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        // Sync rawInputText whenever the underlying value changes (programmatic or user).
+        effect(() => {
+            const v = this.internalValue();
+            const fmt = this.effectiveFormat();
+            untracked(() => {
+                const display = v === null ? '' : this.adapter.format(v, fmt);
+                this.rawInputText.set(display);
+                this.parseError.set(false);
+                this.rangeError.set(false);
+            });
+        });
+        // Mirror the `open` model into the overlay lifecycle.
+        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');
+            }
+        });
+        // 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.
+        effect(() => {
+            const instance = this.overlayInstance;
+            if (!instance)
+                return;
+            const time = this.effectiveTimeConfig();
+            const size = this.size();
+            const color = this.color();
+            const minDate = this.minDate();
+            const maxDate = this.maxDate();
+            const dateFilter = this.dateFilter();
+            const startView = this.startView();
+            const startAt = this.startAt() ?? this.internalValue() ?? null;
+            const pendingValue = this.pendingCalendarValue();
+            const showActions = this.showActions();
+            const todayLabel = this.todayLabel();
+            const clearLabel = this.clearLabel();
+            const cancelLabel = this.cancelLabel();
+            const applyLabel = this.applyLabel();
+            const dialogAriaLabel = this.resolveDialogAriaLabel();
+            const panelClassValue = this.resolvePanelClass();
+            const withTime = this.withTime();
+            const locale = this.locale();
+            const dateClass = this.dateClass();
+            const cellTemplate = this.cellTemplate();
+            const presets = this.presets();
+            const activePresetId = this.activePresetIdSignal();
+            untracked(() => {
+                instance.size.set(size);
+                instance.color.set(color);
+                instance.minDate.set(minDate);
+                instance.maxDate.set(maxDate);
+                instance.dateFilter.set(dateFilter);
+                instance.startView.set(startView);
+                instance.startAt.set(startAt);
+                instance.pendingValue.set(pendingValue);
+                instance.showActions.set(showActions);
+                instance.todayLabel.set(todayLabel);
+                instance.clearLabel.set(clearLabel);
+                instance.cancelLabel.set(cancelLabel);
+                instance.applyLabel.set(applyLabel);
+                instance.dialogId.set(this.dialogId);
+                instance.dialogAriaLabel.set(dialogAriaLabel);
+                instance.panelClassValue.set(panelClassValue);
+                instance.withTime.set(withTime);
+                instance.timeFormat.set(time.format);
+                instance.showSeconds.set(time.showSeconds);
+                instance.hourStep.set(time.hourStep);
+                instance.minuteStep.set(time.minuteStep);
+                instance.secondStep.set(time.secondStep);
+                instance.minTime.set(time.minTime);
+                instance.maxTime.set(time.maxTime);
+                instance.locale.set(locale);
+                instance.dateClass.set(dateClass);
+                instance.cellTemplate.set(cellTemplate);
+                instance.presets.set(presets);
+                instance.activePresetId.set(activePresetId);
+            });
+        });
+        // Push locale into the adapter for parse/format. The calendar also calls
+        // setLocale, but a standalone picker without a calendar open still needs
+        // the parser to honour the picker's locale.
+        effect(() => {
+            const locale = this.locale();
+            if (locale === null)
+                return;
+            untracked(() => this.adapter.setLocale(locale));
+        });
+        // Dev-mode accessible-name warning + projected-trigger detection.
+        afterNextRender(() => {
+            const host = this.elementRef.nativeElement;
+            // Detect [slot=trigger] projection by querying for projected children that carry the attribute.
+            // Angular's <ng-content select="[slot=trigger]"> moves them into the rendered DOM under the host.
+            if (host.querySelector('[slot="trigger"]')) {
+                this.hasCustomTrigger.set(true);
+            }
+            if (!isDevMode())
+                return;
+            const hasLabel = !!this.ariaLabel() ||
+                !!this.ariaLabelledby() ||
+                !!this.formField?.labelChild();
+            if (!hasLabel) {
+                console.warn('[tw-date-picker] The date-picker has no accessible name. Set aria-label, aria-labelledby, or wrap the component in a <tw-form-field> with a <label twLabel>.');
+            }
+        });
+        // Monitor focus on the host (trigger + input + overlay when opened).
+        const monitorSub = this.focusMonitor
+            .monitor(this.elementRef, true)
+            .subscribe((origin) => {
+            const wasFocused = this.focusedSignal();
+            this.focusedSignal.set(!!origin);
+            if (wasFocused && !origin) {
+                this.onTouched();
+                this._ngControlRev.update((n) => n + 1);
+            }
+        });
+        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);
+        });
+    }
+    ngOnInit() {
+        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));
+        }
+    }
+    // ── Public imperative API ──
+    /** Opens the overlay. No-op when disabled or already open. */
+    openPicker() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+    }
+    /** Closes the overlay. No-op when already closed. */
+    closePicker() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+    }
+    /** Toggles the overlay's open state. */
+    toggle() {
+        if (this.open())
+            this.closePicker();
+        else
+            this.openPicker();
+    }
+    /** Clears the current value and emits `dateChange` with `source: 'clear'`. */
+    clear() {
+        this.commit(null, 'clear');
+    }
+    // ── Input interactions ──
+    /** @internal */
+    onInputEvent(event) {
+        const target = event.target;
+        const rawText = target.value;
+        this.rawInputText.set(rawText);
+        this.parseError.set(false);
+        this.rangeError.set(false);
+        // Non-committing parse so the payload's `parsed` field reflects success when achievable.
+        let parsed = null;
+        if (rawText.trim()) {
+            const candidate = this.adapter.parse(rawText, this.parseFormat());
+            if (candidate && this.adapter.isValid(candidate) && this.isInRange(candidate)) {
+                parsed = candidate;
+            }
+        }
+        this.dateInput.emit({ rawText, parsed, target });
+    }
+    /** @internal */
+    onInputBlur() {
+        this.commitFromInput();
+    }
+    /** @internal */
+    onInputFocus() {
+        if (this.openOnFocus() && !this.isDisabled() && !this.readonlyInput()) {
+            this.returnFocusTo = this.inputRef().nativeElement;
+            this.openPicker();
+        }
+    }
+    /** @internal */
+    onInputKeydown(event) {
+        if (this.isDisabled())
+            return;
+        const key = event.key;
+        if (event.altKey && key === 'ArrowDown') {
+            event.preventDefault();
+            this.returnFocusTo = this.inputRef().nativeElement;
+            this.openPicker();
+            return;
+        }
+        if (event.altKey && key === 'ArrowUp') {
+            if (this.open()) {
+                event.preventDefault();
+                this.closeOverlay('cancel', /* restore */ true);
+            }
+            return;
+        }
+        switch (key) {
+            case 'Enter':
+                event.preventDefault();
+                this.commitFromInput();
+                if (this.open()) {
+                    this.closeOverlay('select');
+                }
+                return;
+            case 'Escape':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.closeOverlay('escape', /* restore */ true);
+                }
+                return;
+            case 'Tab':
+                if (this.open()) {
+                    // Let focus move out naturally; close the overlay.
+                    this.closeOverlay('programmatic');
+                }
+                return;
+            default:
+                return;
+        }
+    }
+    /** @internal */
+    onClearClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.clear();
+    }
+    /** @internal */
+    onTriggerClick() {
+        if (this.isDisabled())
+            return;
+        const trigger = this.triggerRef();
+        if (trigger)
+            this.returnFocusTo = trigger.nativeElement;
+        this.toggle();
+    }
+    /** @internal */
+    onTriggerKeydown(event) {
+        if (this.isDisabled())
+            return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            const trigger = this.triggerRef();
+            if (trigger)
+                this.returnFocusTo = trigger.nativeElement;
+            if (!this.open())
+                this.openPicker();
+        }
+        else if (event.key === 'Escape' && this.open()) {
+            event.preventDefault();
+            this.closeOverlay('escape', /* restore */ true);
+        }
+    }
+    /** @internal */
+    onCustomTriggerClick(event) {
+        if (!this.hasCustomTrigger() || this.isDisabled())
+            return;
+        // The projected element itself is the focus target on close.
+        const target = event.currentTarget;
+        if (target)
+            this.returnFocusTo = target;
+        event.preventDefault();
+        this.toggle();
+    }
+    /** @internal */
+    onCustomTriggerKeydown(event) {
+        if (!this.hasCustomTrigger() || this.isDisabled())
+            return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            const target = event.currentTarget;
+            if (target)
+                this.returnFocusTo = target;
+            if (!this.open())
+                this.openPicker();
+        }
+        else if (event.key === 'Escape' && this.open()) {
+            event.preventDefault();
+            this.closeOverlay('escape', /* restore */ true);
+        }
+    }
+    // ── Parse & commit ──
+    commitFromInput() {
+        const raw = this.rawInputText().trim();
+        if (!raw) {
+            if (this.internalValue() !== null || this.parseError() || this.rangeError()) {
+                this.commit(null, 'input');
+            }
+            else {
+                this.parseError.set(false);
+                this.rangeError.set(false);
+            }
+            return;
+        }
+        const parsed = this.adapter.parse(raw, this.parseFormat());
+        if (!parsed || !this.adapter.isValid(parsed)) {
+            this.parseError.set(true);
+            this.rangeError.set(false);
+            return;
+        }
+        if (!this.isInRange(parsed)) {
+            this.parseError.set(false);
+            this.rangeError.set(true);
+            return;
+        }
+        this.commit(parsed, 'input');
+    }
+    commit(next, source) {
+        const previous = this.internalValue();
+        this.internalValue.set(next);
+        this.value.set(next);
+        this.parseError.set(false);
+        this.rangeError.set(false);
+        const display = next === null ? '' : this.adapter.format(next, this.effectiveFormat());
+        this.rawInputText.set(display);
+        const el = this.inputRef().nativeElement;
+        if (el.value !== display)
+            el.value = display;
+        if (source !== 'programmatic') {
+            this.onChange(next);
+            this.onTouched();
+            if (next === null) {
+                this.liveAnnouncer.announce('Date cleared', 'polite');
+            }
+            else {
+                this.liveAnnouncer.announce(`${display} selected`, 'polite');
+            }
+        }
+        this.dateChange.emit({ value: next, previousValue: previous, source });
+    }
+    isInRange(d) {
+        const min = this.minDate();
+        if (min && this.adapter.compare(d, min) < 0)
+            return false;
+        const max = this.maxDate();
+        if (max && this.adapter.compare(d, max) > 0)
+            return false;
+        const filter = this.dateFilter();
+        if (filter && !filter(d))
+            return false;
+        if (this.withTime() && !this.isTimeInRange(d))
+            return false;
+        return true;
+    }
+    isTimeInRange(d) {
+        const { minTime: min, maxTime: max } = this.effectiveTimeConfig();
+        if (!min && !max)
+            return true;
+        const adapter = this.adapter;
+        const vSecs = timeOfDaySeconds(adapter.getHours(d), adapter.getMinutes(d), adapter.getSeconds(d));
+        if (min && adapter.isValid(min)) {
+            const minSecs = timeOfDaySeconds(adapter.getHours(min), adapter.getMinutes(min), adapter.getSeconds(min));
+            if (vSecs < minSecs)
+                return false;
+        }
+        if (max && adapter.isValid(max)) {
+            const maxSecs = timeOfDaySeconds(adapter.getHours(max), adapter.getMinutes(max), adapter.getSeconds(max));
+            if (vSecs > maxSecs)
+                return false;
+        }
+        return true;
+    }
+    // ── Overlay lifecycle ──
+    openOverlay() {
+        if (!this.returnFocusTo) {
+            this.returnFocusTo = this.resolveFocusTarget();
+        }
+        this.lastValueBeforeOpen.set(this.internalValue());
+        this.pendingCalendarValue.set(this.internalValue());
+        const result = this.coordinator.open({
+            origin: this.elementRef,
+            portalComponent: DatePickerOverlayComponent,
+            viewContainerRef: this.viewContainerRef,
+            injector: this.injector,
+            positions: buildSelectLikePositions(this.offset()),
+            scrollStrategy: resolveSelectScrollStrategy(this.scrollStrategy(), this.overlayService),
+            panelClass: 'tw-date-picker-panel',
+        });
+        if (!result)
+            return;
+        const instance = result.instance;
+        instance.onCalendarSelect.set((date) => this.onCalendarSelection(date));
+        instance.onTimeInput.set((date) => this.onTimeInput(date));
+        instance.onToday.set(() => this.onTodayClicked());
+        instance.onClear.set(() => this.onClearAction());
+        instance.onCancel.set(() => this.onCancelAction());
+        instance.onApply.set(() => this.onApplyAction());
+        instance.onPresetSelect.set((preset) => this.onPresetClick(preset));
+        instance.activePresetId.set(this.activePresetIdSignal());
+        this.overlayInstanceSignal.set(instance);
+        // 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.
+        this.coordinator
+            .backdropClick$()
+            .subscribe(() => this.closeOverlay('backdrop'));
+        this.coordinator.escape$().subscribe((event) => {
+            event.preventDefault();
+            this.closeOverlay('escape', /* restore */ true);
+        });
+        // Defer `opened` emission until after the enter animation completes — was
+        // previously fired synchronously on open() (audit Medium, date-picker.ts:1199).
+        this.coordinator
+            .opened$()
+            .subscribe(() => this.opened.emit({ trigger: this.elementRef.nativeElement }));
+        queueMicrotask(() => {
+            this.overlayInstance?.focusCalendar();
+        });
+    }
+    closeOverlay(reason, restore = false) {
+        if (this.closingSignal() || !this.overlayInstance)
+            return;
+        this.closingSignal.set(true);
+        this.overlayInstance.leaving.set(true);
+        if (restore) {
+            const previous = this.lastValueBeforeOpen();
+            if (previous !== this.internalValue()) {
+                // Silent restore — no emit of dateChange.
+                this.internalValue.set(previous);
+                this.value.set(previous);
+                const display = previous === null ? '' : this.adapter.format(previous, this.effectiveFormat());
+                this.rawInputText.set(display);
+                this.parseError.set(false);
+                this.rangeError.set(false);
+            }
+        }
+        // Fallback chain ensures focus always returns to a visible element even when
+        // returnFocusTo was never set (e.g. open() flipped programmatically).
+        (this.returnFocusTo ?? this.resolveFocusTarget()).focus();
+        this.coordinator.close(() => {
+            this.overlayInstanceSignal.set(null);
+            this.pendingCalendarValue.set(null);
+            this.returnFocusTo = null;
+            untracked(() => this.open.set(false));
+            this.closingSignal.set(false);
+            this.closed.emit(reason);
+        });
+    }
+    // ── Calendar / action-bar callbacks ──
+    onCalendarSelection(date) {
+        const withTime = this.withTime() ? this.carryTimeOfDay(date) : date;
+        // When time-of-day editing is active, picking a day never auto-commits —
+        // the user needs a chance to tweak the time before closing.
+        if (this.showActions() || this.withTime()) {
+            this.pendingCalendarValue.set(withTime);
+            return;
+        }
+        this.commit(withTime, 'calendar');
+        this.closeOverlay('select');
+    }
+    /** @internal Called by the overlay when the embedded time-picker reports a new value. */
+    onTimeInput(date) {
+        if (date === null) {
+            this.pendingCalendarValue.set(null);
+            if (!this.showActions()) {
+                this.commit(null, 'calendar');
+            }
+            return;
+        }
+        this.pendingCalendarValue.set(date);
+        if (!this.showActions()) {
+            this.commit(date, 'calendar');
+        }
+    }
+    onTodayClicked() {
+        const today = this.adapter.today();
+        if (!this.isInRange(today))
+            return;
+        const withTime = this.withTime() ? this.carryTimeOfDay(today) : today;
+        this.pendingCalendarValue.set(withTime);
+    }
+    /** Copies the time-of-day from the current pending/selected value onto `picked`. */
+    carryTimeOfDay(picked) {
+        const source = this.pendingCalendarValue() ?? this.internalValue();
+        if (source === null || !this.adapter.isValid(source))
+            return picked;
+        return this.adapter.withTime(picked, this.adapter.getHours(source), this.adapter.getMinutes(source), this.adapter.getSeconds(source));
+    }
+    onClearAction() {
+        this.commit(null, 'clear');
+        this.closeOverlay('apply');
+    }
+    onCancelAction() {
+        this.closeOverlay('cancel', /* restore */ true);
+    }
+    onApplyAction() {
+        const pending = this.pendingCalendarValue();
+        if (pending !== null && !this.isInRange(pending)) {
+            this.closeOverlay('cancel', /* restore */ true);
+            return;
+        }
+        this.commit(pending, 'apply');
+        this.closeOverlay('apply');
+    }
+    onPresetClick(preset) {
+        const next = preset.date();
+        if (!this.adapter.isValid(next) || !this.isInRange(next))
+            return;
+        this.activePresetIdSignal.set(preset.id);
+        this.presetSelected.emit(preset);
+        if (this.showActions()) {
+            this.pendingCalendarValue.set(next);
+            return;
+        }
+        this.commit(next, 'calendar');
+        this.closeOverlay('select');
+    }
+    // ── Helpers ──
+    resolveDialogAriaLabel() {
+        return this.ariaLabel() || 'Choose a date';
+    }
+    resolvePanelClass() {
+        const raw = this.panelClass();
+        return Array.isArray(raw) ? raw.join(' ') : raw;
+    }
+    /** Picks the best element to receive focus on overlay close. Prefers the explicit `returnFocusTo` source, then the trigger button, the projected custom trigger, and finally the input. */
+    resolveFocusTarget() {
+        const trigger = this.triggerRef();
+        if (trigger)
+            return trigger.nativeElement;
+        const host = this.elementRef.nativeElement;
+        const custom = host.querySelector('[slot="trigger"]');
+        if (custom)
+            return custom;
+        return this.inputRef().nativeElement;
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        if (value === null || value === undefined || value === '') {
+            this.internalValue.set(null);
+            this.value.set(null);
+            this.parseError.set(false);
+            this.rangeError.set(false);
+            this.rawInputText.set('');
+            this.dateChange.emit({
+                value: null,
+                previousValue: this.internalValue(),
+                source: 'programmatic',
+            });
+            return;
+        }
+        const coerced = this.adapter.deserialize(value);
+        if (coerced === null) {
+            this.internalValue.set(null);
+            this.value.set(null);
+            this.rawInputText.set('');
+            this.parseError.set(false);
+            this.rangeError.set(false);
+            return;
+        }
+        if (!this.adapter.isValid(coerced)) {
+            this.parseError.set(true);
+            this.rawInputText.set(String(value));
+            return;
+        }
+        const previous = this.internalValue();
+        this.internalValue.set(coerced);
+        this.value.set(coerced);
+        this.parseError.set(false);
+        this.rangeError.set(false);
+        this.rawInputText.set(this.adapter.format(coerced, this.effectiveFormat()));
+        this.dateChange.emit({ value: coerced, previousValue: previous, source: 'programmatic' });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── FormFieldControl methods ──
+    /** @internal */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    onContainerClick(event) {
+        if (this.isDisabled() || this.hasCustomTrigger())
+            return;
+        // Don't steal focus when the user clicks the trigger button directly.
+        const target = event.target;
+        const triggerEl = this.triggerRef()?.nativeElement;
+        if (triggerEl && target && triggerEl.contains(target))
+            return;
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl && document.activeElement !== inputEl) {
+            inputEl.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => DatePickerComponent),
+            },
+            PickerOverlayCoordinator,
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- Optional rich-label trigger. When projected (a child carries [slot=trigger]), the default input/clear/trigger chrome is hidden. Clicks anywhere in the projected content open the overlay. -->
+    <div
+      class="contents"
+      (click)="onCustomTriggerClick($event)"
+      (keydown)="onCustomTriggerKeydown($event)"
+    >
+      <ng-content select="[slot=trigger]" />
+    </div>
+
+    <input
+      #dateInput
+      type="text"
+      [id]="hostId"
+      [class]="inputClasses()"
+      [class.sr-only]="hasCustomTrigger()"
+      [value]="rawInputText()"
+      [placeholder]="placeholder() || ''"
+      [disabled]="isDisabled()"
+      [tabindex]="hasCustomTrigger() ? -1 : null"
+      [attr.readonly]="readonlyInput() ? 'true' : null"
+      [attr.role]="'combobox'"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-expanded]="open() ? 'true' : 'false'"
+      [attr.aria-controls]="dialogId"
+      [attr.aria-autocomplete]="'none'"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-invalid]="errorState() || null"
+      [attr.aria-disabled]="isDisabled() || null"
+      [attr.data-variant]="resolvedVariant()"
+      (input)="onInputEvent($event)"
+      (blur)="onInputBlur()"
+      (focus)="onInputFocus()"
+      (keydown)="onInputKeydown($event)"
+    />
+
+    @if (!hasCustomTrigger() && showClear() && !isEmpty() && !isDisabled() && !readonlyInput()) {
+      <button
+        type="button"
+        tabindex="-1"
+        [class]="clearButtonClasses()"
+        [attr.aria-label]="'Clear date'"
+        (click)="onClearClick($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+
+    @if (!hasCustomTrigger()) {
+      <button
+        #triggerBtn
+        type="button"
+        [class]="triggerButtonClasses()"
+        [attr.aria-label]="triggerAriaLabel()"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="open() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-disabled]="isDisabled() || null"
+        [disabled]="isDisabled()"
+        (click)="onTriggerClick()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        <ng-content select="[slot=trigger-icon]">
+          <svg
+            [class]="triggerIconClasses()"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <line x1="16" y1="2" x2="16" y2="6" />
+            <line x1="8" y1="2" x2="8" y2="6" />
+            <line x1="3" y1="10" x2="21" y2="10" />
+          </svg>
+        </ng-content>
+      </button>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-date-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                        },
+                        PickerOverlayCoordinator,
+                    ],
+                    template: `
+    <!-- Optional rich-label trigger. When projected (a child carries [slot=trigger]), the default input/clear/trigger chrome is hidden. Clicks anywhere in the projected content open the overlay. -->
+    <div
+      class="contents"
+      (click)="onCustomTriggerClick($event)"
+      (keydown)="onCustomTriggerKeydown($event)"
+    >
+      <ng-content select="[slot=trigger]" />
+    </div>
+
+    <input
+      #dateInput
+      type="text"
+      [id]="hostId"
+      [class]="inputClasses()"
+      [class.sr-only]="hasCustomTrigger()"
+      [value]="rawInputText()"
+      [placeholder]="placeholder() || ''"
+      [disabled]="isDisabled()"
+      [tabindex]="hasCustomTrigger() ? -1 : null"
+      [attr.readonly]="readonlyInput() ? 'true' : null"
+      [attr.role]="'combobox'"
+      [attr.aria-haspopup]="'dialog'"
+      [attr.aria-expanded]="open() ? 'true' : 'false'"
+      [attr.aria-controls]="dialogId"
+      [attr.aria-autocomplete]="'none'"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-invalid]="errorState() || null"
+      [attr.aria-disabled]="isDisabled() || null"
+      [attr.data-variant]="resolvedVariant()"
+      (input)="onInputEvent($event)"
+      (blur)="onInputBlur()"
+      (focus)="onInputFocus()"
+      (keydown)="onInputKeydown($event)"
+    />
+
+    @if (!hasCustomTrigger() && showClear() && !isEmpty() && !isDisabled() && !readonlyInput()) {
+      <button
+        type="button"
+        tabindex="-1"
+        [class]="clearButtonClasses()"
+        [attr.aria-label]="'Clear date'"
+        (click)="onClearClick($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+
+    @if (!hasCustomTrigger()) {
+      <button
+        #triggerBtn
+        type="button"
+        [class]="triggerButtonClasses()"
+        [attr.aria-label]="triggerAriaLabel()"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="open() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-disabled]="isDisabled() || null"
+        [disabled]="isDisabled()"
+        (click)="onTriggerClick()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        <ng-content select="[slot=trigger-icon]">
+          <svg
+            [class]="triggerIconClasses()"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <line x1="16" y1="2" x2="16" y2="6" />
+            <line x1="8" y1="2" x2="8" y2="6" />
+            <line x1="3" y1="10" x2="21" y2="10" />
+          </svg>
+        </ng-content>
+      </button>
+    }
+  `,
+                    host: {
+                        '[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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatePickerComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-date-picker.mjs.map