@ojiepermana/angular 22.1.10 → 22.1.12

package/fesm2022/ojiepermana-angular-component-date-picker.mjs

@@ -1,7 +1,486 @@
-export * from '@ojiepermana/angular-component/date-picker';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Injector, ViewContainerRef, model, input, booleanAttribute, signal, linkedSignal, untracked, viewChild, computed, effect, afterNextRender, forwardRef, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { formatIsoDate, parseIsoDate, startOfDay, CalendarComponent } from '@ojiepermana/angular/component/calendar';
+import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
+import { overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class DatePickerComponent {
+    overlay = inject(Overlay);
+    documentRef = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    viewContainerRef = inject(ViewContainerRef);
+    instanceId = injectUniqueId('DatePicker');
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    startView = input('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    touchUi = input(false, { ...(ngDevMode ? { debugName: "touchUi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    panelClass = input('datepicker-panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelAriaLabel = input('Choose a date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelAriaLabel" }] : /* istanbul ignore next */ []));
+    invalidFormatMessage = input('Enter a valid date in YYYY-MM-DD format.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidFormatMessage" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    isEditing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * The text the field shows. Re-seeds from `value`, but a draft the user is
+     * still editing -- or one already refused -- outlives an incoming binding
+     * change, so their typing is never swapped out from under them.
+     */
+    inputValue = linkedSignal({ ...(ngDevMode ? { debugName: "inputValue" } : /* istanbul ignore next */ {}), source: () => this.value(),
+        computation: (value, previous) => previous && untracked(() => this.isEditing() || !!this.draftError())
+            ? previous.value
+            : value
+                ? formatIsoDate(value)
+                : '' });
+    panelId = `${this.instanceId}-panel`;
+    errorId = `${this.instanceId}-error`;
+    draftError = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftError" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    restoreFocusElement = null;
+    validatorNotified = false;
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    onValidatorChangeFn = () => { };
+    origin = viewChild.required('origin', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+    input = viewChild.required('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    panel = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    calendar = viewChild('calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('date-picker block w-full', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    inputClasses = computed(() => cn('date-picker-input w-full', this.isDisabled() ? 'opacity-60' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    resolvedId = computed(() => this.id() ?? this.instanceId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * What a bound control is told. A refused draft is reported here as well as
+     * painted on the field, so the form cannot call itself valid while the input
+     * is showing an error the user has to fix.
+     */
+    validationErrors = computed(() => {
+        const draft = this.draftError();
+        if (draft) {
+            return draft;
+        }
+        const value = this.value();
+        return value ? this.rangeError(value) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validationErrors" }] : /* istanbul ignore next */ []));
+    validationError = computed(() => this.validationErrors() ? this.invalidFormatMessage() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []));
+    resolvedAriaDescribedby = computed(() => [this.ariaDescribedby(), this.validationError() ? this.errorId : null]
+        .filter((value) => !!value)
+        .join(' ') || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaDescribedby" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            // Nothing survives the teardown to hand focus back to, so drop the target
+            // before closing: the overlay still has to be disposed of.
+            this.restoreFocusElement = null;
+            this.close();
+        });
+        effect(() => {
+            this.validationErrors();
+            untracked(() => this.notifyValidatorChange());
+        });
+        effect(() => {
+            if (this.isDisabled() && this.isOpen()) {
+                this.close();
+            }
+        });
+    }
+    open(restoreFocusElement) {
+        if (this.isDisabled() || this.isOpen()) {
+            return;
+        }
+        const originEl = this.origin().nativeElement;
+        this.restoreFocusElement =
+            restoreFocusElement ??
+                (this.documentRef.activeElement instanceof HTMLElement
+                    ? this.documentRef.activeElement
+                    : this.input().nativeElement);
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(originEl)
+                .withPositions([
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },
+            ])
+                .withPush(true)
+                .withViewportMargin(8),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: this.panelClass(),
+        });
+        const portal = new TemplatePortal(this.panel(), this.viewContainerRef);
+        const overlayRef = this.overlayRef;
+        if (!overlayRef) {
+            return;
+        }
+        overlayRef.attach(portal);
+        overlayDismissals(overlayRef, originEl)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        this.isOpen.set(true);
+        afterNextRender({ read: () => this.calendar()?.focusActiveCell() }, { injector: this.injector });
+    }
+    close() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        const restoreFocusElement = this.restoreFocusElement;
+        this.restoreFocusElement = null;
+        this.restoreFocusAfterOverlayTeardown(restoreFocusElement);
+    }
+    toggle(event) {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open(event?.currentTarget instanceof HTMLElement ? event.currentTarget : null);
+        }
+    }
+    onInput(event) {
+        const text = event.target.value;
+        this.isEditing.set(true);
+        this.inputValue.set(text);
+        const parsed = parseIsoDate(text);
+        if (parsed && this.isSelectable(parsed)) {
+            this.setValue(parsed, true);
+        }
+        else {
+            this.draftError.set(null);
+        }
+    }
+    onBlur() {
+        this.isEditing.set(false);
+        this.commitInput();
+        this.onTouchedFn();
+    }
+    onEnter(event) {
+        event.preventDefault();
+        this.commitInput();
+    }
+    onCalendarSelect(date) {
+        this.setValue(date, true);
+        this.close();
+    }
+    writeValue(value) {
+        this.setValue(value, false);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(state) {
+        this.cvaDisabled.set(state);
+    }
+    validate() {
+        return this.validationErrors();
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChangeFn = fn;
+    }
+    commitInput() {
+        const draft = this.inputValue().trim();
+        if (!draft && !this.required()) {
+            this.setValue(null, true);
+            return;
+        }
+        const parsed = parseIsoDate(draft);
+        if (!parsed) {
+            this.draftError.set({ dateParse: { text: draft } });
+            return;
+        }
+        const rangeError = this.rangeError(parsed);
+        if (rangeError) {
+            this.draftError.set(rangeError);
+            return;
+        }
+        this.setValue(parsed, true);
+    }
+    setValue(value, emit) {
+        const next = value ? new Date(value.getTime()) : null;
+        this.value.set(next);
+        this.inputValue.set(next ? formatIsoDate(next) : '');
+        this.draftError.set(null);
+        if (emit) {
+            this.onChangeFn(next);
+        }
+    }
+    /**
+     * A refused draft never reaches the control, so nothing else would tell the
+     * forms API to ask again. The first flush is the initial computation, which
+     * the control's own set-up validation already covers.
+     */
+    notifyValidatorChange() {
+        if (!this.validatorNotified) {
+            this.validatorNotified = true;
+            return;
+        }
+        this.onValidatorChangeFn();
+    }
+    isSelectable(date) {
+        return !this.rangeError(date);
+    }
+    /**
+     * The same question the calendar answers, answered the same way, and named.
+     *
+     * This used to compare raw `Date` values while the calendar normalised to the
+     * start of the day, so a `min` or `max` carrying a time component split the
+     * two apart: a boundary date typed into the field was rejected, while the very
+     * same date clicked in the popup was accepted. One rule, one helper, one
+     * answer -- and the answer now says which constraint refused the date, so a
+     * bound control can report it.
+     */
+    rangeError(date) {
+        const day = startOfDay(date).getTime();
+        const min = this.min();
+        if (min && day < startOfDay(min).getTime()) {
+            return { dateMin: { min, actual: date } };
+        }
+        const max = this.max();
+        if (max && day > startOfDay(max).getTime()) {
+            return { dateMax: { max, actual: date } };
+        }
+        const filter = this.dateFilter();
+        return filter && !filter(date) ? { dateFilter: { actual: date } } : null;
+    }
+    /**
+     * CDK disposes its overlay during the current event turn. Restoring focus in
+     * that same turn works in Chromium but WebKit may move it back to the body
+     * while it removes the pane. Defer until the post-disposal frame so every
+     * browser receives a stable focus restoration.
+     */
+    restoreFocusAfterOverlayTeardown(element) {
+        if (!element?.isConnected || this.isDisabled()) {
+            return;
+        }
+        const view = this.documentRef.defaultView;
+        if (!view) {
+            queueMicrotask(() => {
+                if (element.isConnected && !this.isDisabled()) {
+                    element.focus();
+                }
+            });
+            return;
+        }
+        view.requestAnimationFrame(() => {
+            if (element.isConnected && !this.isDisabled()) {
+                element.focus();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DatePickerComponent, isStandalone: true, selector: "DatePicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelAriaLabel: { classPropertyName: "panelAriaLabel", publicName: "panelAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, invalidFormatMessage: { classPropertyName: "invalidFormatMessage", publicName: "invalidFormatMessage", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #origin class="date-picker-shell">
+      <input
+        #input
+        type="text"
+        [id]="resolvedId()"
+        [class]="inputClasses()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-describedby]="resolvedAriaDescribedby()"
+        [attr.aria-invalid]="validationError() ? 'true' : null"
+        [attr.placeholder]="placeholder()"
+        [required]="required()"
+        [disabled]="isDisabled()"
+        [value]="inputValue()"
+        (input)="onInput($any($event))"
+        (blur)="onBlur()"
+        (keydown.enter)="onEnter($any($event))"
+      />
+
+      <button
+        type="button"
+        class="date-picker-toggle"
+        [attr.aria-label]="isOpen() ? 'Close calendar' : 'Open calendar'"
+        [attr.aria-controls]="panelId"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="dialog"
+        [disabled]="isDisabled()"
+        (click)="toggle($event)"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          width="18"
+          height="18"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect x="3" y="5" width="18" height="16" rx="2" />
+          <path d="M8 3v4" />
+          <path d="M16 3v4" />
+          <path d="M3 11h18" />
+        </svg>
+      </button>
+    </div>
+
+    @if (validationError(); as error) {
+      <p [id]="errorId" class="date-picker-error" role="status">{{ error }}</p>
+    }
+
+    <ng-template #panel>
+      <div
+        [id]="panelId"
+        class="date-picker-panel"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="panelAriaLabel()"
+        [attr.data-touch-ui]="touchUi() ? 'true' : null"
+      >
+        <Calendar
+          #calendar
+          [value]="value()"
+          [min]="min()"
+          [max]="max()"
+          [startAt]="startAt()"
+          [startView]="startView()"
+          [dateFilter]="dateFilter()"
+          [disabled]="isDisabled()"
+          (valueChange)="onCalendarSelect($event)"
+        />
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;min-width:0}.date-picker-shell{position:relative;width:100%}.date-picker-input{display:block;width:100%;height:var(--control-height-md);min-width:0;border:1px solid hsl(var(--input));border-radius:var(--radius);background:transparent;padding:calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 11) calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);box-shadow:var(--shadow-sm, 0 1px 2px hsl(var(--foreground) / .05));transition:border-color .15s ease,box-shadow .15s ease}.date-picker-input::placeholder{color:hsl(var(--muted-foreground))}.date-picker-input:hover:not(:disabled){border-color:hsl(var(--foreground) / .45)}.date-picker-input:focus-visible{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}.date-picker-input:disabled{cursor:not-allowed;background:hsl(var(--muted) / .45)}.date-picker-toggle{position:absolute;inset-block-start:50%;inset-inline-end:var(--spacing-base);display:inline-flex;width:calc(var(--spacing-base) * 7);height:calc(var(--spacing-base) * 7);transform:translateY(-50%);align-items:center;justify-content:center;border:0;border-radius:calc(var(--radius) - .125rem);background:transparent;color:hsl(var(--muted-foreground));cursor:pointer;transition:background-color .15s ease,color .15s ease}.date-picker-toggle:hover:not(:disabled){background:hsl(var(--accent));color:hsl(var(--accent-foreground))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-panel{width:fit-content;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--popover));color:hsl(var(--popover-foreground));box-shadow:var(--shadow-md, 0 12px 24px -16px hsl(var(--foreground) / .35))}.date-picker-panel Calendar{border:0;border-radius:inherit;background:transparent}.date-picker-panel[data-touch-ui=true]{max-width:min(100vw - calc(var(--spacing-base) * 8),calc(var(--spacing-base) * 88))}.date-picker-error{margin:calc(var(--spacing-base) * 1.5) 0 0;color:hsl(var(--destructive));font-size:var(--text-sm);line-height:var(--text-sm--line-height)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "Calendar", inputs: ["value", "min", "max", "startAt", "startView", "dateFilter", "disabled", "class"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'DatePicker', imports: [CalendarComponent], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+                    ], host: { '[class]': 'classes()' }, template: `
+    <div #origin class="date-picker-shell">
+      <input
+        #input
+        type="text"
+        [id]="resolvedId()"
+        [class]="inputClasses()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-describedby]="resolvedAriaDescribedby()"
+        [attr.aria-invalid]="validationError() ? 'true' : null"
+        [attr.placeholder]="placeholder()"
+        [required]="required()"
+        [disabled]="isDisabled()"
+        [value]="inputValue()"
+        (input)="onInput($any($event))"
+        (blur)="onBlur()"
+        (keydown.enter)="onEnter($any($event))"
+      />
+
+      <button
+        type="button"
+        class="date-picker-toggle"
+        [attr.aria-label]="isOpen() ? 'Close calendar' : 'Open calendar'"
+        [attr.aria-controls]="panelId"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="dialog"
+        [disabled]="isDisabled()"
+        (click)="toggle($event)"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          width="18"
+          height="18"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect x="3" y="5" width="18" height="16" rx="2" />
+          <path d="M8 3v4" />
+          <path d="M16 3v4" />
+          <path d="M3 11h18" />
+        </svg>
+      </button>
+    </div>
+
+    @if (validationError(); as error) {
+      <p [id]="errorId" class="date-picker-error" role="status">{{ error }}</p>
+    }
+
+    <ng-template #panel>
+      <div
+        [id]="panelId"
+        class="date-picker-panel"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="panelAriaLabel()"
+        [attr.data-touch-ui]="touchUi() ? 'true' : null"
+      >
+        <Calendar
+          #calendar
+          [value]="value()"
+          [min]="min()"
+          [max]="max()"
+          [startAt]="startAt()"
+          [startView]="startView()"
+          [dateFilter]="dateFilter()"
+          [disabled]="isDisabled()"
+          (valueChange)="onCalendarSelect($event)"
+        />
+      </div>
+    </ng-template>
+  `, styles: [":host{display:block;min-width:0}.date-picker-shell{position:relative;width:100%}.date-picker-input{display:block;width:100%;height:var(--control-height-md);min-width:0;border:1px solid hsl(var(--input));border-radius:var(--radius);background:transparent;padding:calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 11) calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);box-shadow:var(--shadow-sm, 0 1px 2px hsl(var(--foreground) / .05));transition:border-color .15s ease,box-shadow .15s ease}.date-picker-input::placeholder{color:hsl(var(--muted-foreground))}.date-picker-input:hover:not(:disabled){border-color:hsl(var(--foreground) / .45)}.date-picker-input:focus-visible{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}.date-picker-input:disabled{cursor:not-allowed;background:hsl(var(--muted) / .45)}.date-picker-toggle{position:absolute;inset-block-start:50%;inset-inline-end:var(--spacing-base);display:inline-flex;width:calc(var(--spacing-base) * 7);height:calc(var(--spacing-base) * 7);transform:translateY(-50%);align-items:center;justify-content:center;border:0;border-radius:calc(var(--radius) - .125rem);background:transparent;color:hsl(var(--muted-foreground));cursor:pointer;transition:background-color .15s ease,color .15s ease}.date-picker-toggle:hover:not(:disabled){background:hsl(var(--accent));color:hsl(var(--accent-foreground))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-panel{width:fit-content;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--popover));color:hsl(var(--popover-foreground));box-shadow:var(--shadow-md, 0 12px 24px -16px hsl(var(--foreground) / .35))}.date-picker-panel Calendar{border:0;border-radius:inherit;background:transparent}.date-picker-panel[data-touch-ui=true]{max-width:min(100vw - calc(var(--spacing-base) * 8),calc(var(--spacing-base) * 88))}.date-picker-error{margin:calc(var(--spacing-base) * 1.5) 0 0;color:hsl(var(--destructive));font-size:var(--text-sm);line-height:var(--text-sm--line-height)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelAriaLabel", required: false }] }], invalidFormatMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFormatMessage", 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 }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], origin: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: ['calendar', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { DatePickerComponent };