tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/date-picker.d.ts

@@ -1,51 +1,9 @@
 /**
- * TyDatePicker Web Component
- * PORTED FROM: cljs/ty/components/date_picker.cljs
- *
- * A date picker component with read-only input and calendar dropdown.
- * Supports date-only and date+time modes with smart time input.
- *
- * Architecture:
- * - Read-only input stub (displays formatted date)
- * - Calendar dropdown (modal dialog with ty-calendar)
- * - Optional time input (with smart digit navigation)
- * - Form participation via ElementInternals
- * - UTC output, local display
- *
- * Features:
- * - Date selection with calendar dropdown
- * - Optional time input with smart navigation
- * - Form integration (works with FormData)
- * - UTC value output for server communication
- * - Localized display formatting (Intl API)
- * - Clearable with clear button
- * - Keyboard navigation (Escape to close)
- * - Outside click handling
- *
- * @example
- * ```html
- * <!-- Basic date picker -->
- * <ty-date-picker
- *   label="Select Date"
- *   placeholder="Choose a date">
- * </ty-date-picker>
- *
- * <!-- With time -->
- * <ty-date-picker
- *   with-time="true"
- *   label="Select Date & Time">
- * </ty-date-picker>
- *
- * <!-- Form integration -->
- * <form>
- *   <ty-date-picker name="booking-date"></ty-date-picker>
- *   <button type="submit">Submit</button>
- * </form>
- *
- * <!-- Pre-filled value (UTC) -->
- * <ty-date-picker value="2024-09-21T08:30:00.000Z"></ty-date-picker>
- * ```
+ * TyDatePicker Web Component — read-only input stub + calendar dropdown
+ * (modal <dialog>), optional time input, form participation via
+ * ElementInternals. Value is UTC; display is local.
  */
+import { type Placement } from '../utils/positioning.js';
 import { TyComponent } from '../base/ty-component.js';
 import type { Flavor } from '../types/common.js';
 import type { PropertyChange } from '../utils/property-manager.js';
@@ -66,17 +24,11 @@ interface DatePickerState extends DateComponents {
     withTime: boolean;
     open: boolean;
 }
-/**
- * Date picker sizes
- */
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Date picker flavors (visual styles)
  */
 type DatePickerFlavor = 'default' | Flavor;
-/**
- * Date format types
- */
 type DateFormatType = 'short' | 'medium' | 'long' | 'full';
 /**
  * Change event detail
@@ -90,10 +42,15 @@ export interface DatePickerChangeDetail {
 }
 export declare class TyDatePicker extends TyComponent<DatePickerState> {
     protected static properties: {
-        size: {
+        placement: {
             type: "string";
             visual: boolean;
             default: string;
+        };
+        size: {
+            type: "string";
+            visual: boolean;
+            default: import("../types/common.js").Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };
@@ -178,35 +135,20 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     private _timeInput?;
     private _localeObserver?;
     private _customFlavorSheet;
-    /**
-     * Form-associated custom element
-     */
     static formAssociated: boolean;
     constructor();
-    /**
-     * Called when component connects to DOM
-     * TyComponent handles property capture automatically
-     */
+    /** TyComponent handles property capture automatically. */
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
-    /**
-     * Called when properties change
-     * Handle state updates BEFORE render
-     */
+    /** Handle state updates BEFORE render. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
     /**
      * Get form value - returns UTC string from current state
      * TyComponent calls this automatically when value property changes
      */
     protected getFormValue(): FormDataEntryValue | null;
-    /**
-     * Extract current date components from internal state
-     */
     private getComponents;
     /**
      * Whether internal state has a complete date
@@ -218,15 +160,8 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     private getFormattedValue;
     /**
      * Initialize component state from attributes
-     *
-     * PORTED FROM: init-component-state! in date_picker.cljs
      */
     private initializeState;
-    /**
-     * Update internal state
-     *
-     * PORTED FROM: update-component-state! in date_picker.cljs
-     */
     private updateState;
     /**
      * Sync form value with current state
@@ -234,19 +169,21 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      */
     private syncFormValue;
     /**
-     * Handle time input changes from TimeInput class
-     *
-     * PORTED FROM: handle-time-change! in date_picker.cljs
+     * Reflect constraint validation to the owning <form> via ElementInternals.
+     * Without this `required` is only cosmetic — unlike ty-input/ty-select/
+     * ty-calendar, which all call setValidity, an empty required date-picker
+     * never blocks form submission.
      */
-    handleTimeInputChange(hour: number, minute: number): void;
+    private updateValidity;
     /**
-     * Emit change event
-     *
-     * PORTED FROM: emit-change-event! in date_picker.cljs
+     * Handle time input changes from TimeInput class
      */
+    handleTimeInputChange(hour: number, minute: number): void;
     private emitChangeEvent;
     get size(): DatePickerSize;
     set size(v: DatePickerSize);
+    get placement(): Placement | '';
+    set placement(v: Placement | '');
     get flavor(): DatePickerFlavor;
     set flavor(v: DatePickerFlavor);
     get label(): string;
@@ -289,33 +226,10 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      * without needing the built-in clear button. Mirrors ty-select's clear().
      */
     clear(): void;
-    /**
-     * Build CSS classes for the stub element
-     *
-     * PORTED FROM: build-stub-classes in date_picker.cljs
-     */
     private buildStubClasses;
-    /**
-     * Render the date picker stub (input display)
-     *
-     * PORTED FROM: render-date-picker-stub in date_picker.cljs
-     */
     private renderStub;
-    /**
-     * Create time input element
-     *
-     * PORTED FROM: create-time-input in date_picker.cljs
-     */
     private createTimeInputElement;
-    /**
-     * Render time input section
-     */
     private renderTimeSection;
-    /**
-     * Render calendar dropdown with dialog
-     *
-     * PORTED FROM: render-calendar-dropdown in date_picker.cljs
-     */
     private renderCalendarDropdown;
     /**
      * Render native date input for mobile touch devices.
@@ -323,33 +237,13 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      * Reuses .date-picker-stub styling and existing event/state infrastructure.
      */
     private renderNativeInput;
-    /**
-     * Calculate calendar position
-     *
-     * PORTED FROM: calculate-calendar-position! in date_picker.cljs
-     */
     private calculateCalendarPosition;
-    /**
-     * Render container structure
-     *
-     * PORTED FROM: render-container-structure in date_picker.cljs
-     */
     private renderContainer;
-    /**
-     * Main render method
-     *
-     * PORTED FROM: render! in date_picker.cljs
-     */
     protected render(): void;
     /**
      * Update display without destroying DOM (for open dialog)
-     *
-     * PORTED FROM: update-display! in date_picker.cljs
      */
     private updateDisplay;
-    /**
-     * Setup document-level event listeners
-     */
     private setupEventListeners;
     private handleStubClick;
     /**
@@ -357,48 +251,12 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      */
     private clearValue;
     private handleClearClick;
-    /**
-     * Handle calendar date selection
-     *
-     * PORTED FROM: handle-calendar-change! in date_picker.cljs
-     */
     private handleCalendarChange;
-    /**
-     * Handle dialog backdrop clicks
-     *
-     * PORTED FROM: handle-dialog-click! in date_picker.cljs
-     */
     private handleDialogClick;
-    /**
-     * Handle clicks outside the date picker
-     *
-     * PORTED FROM: handle-outside-click! in date_picker.cljs
-     */
     private handleOutsideClick;
-    /**
-     * Handle Escape key press
-     *
-     * PORTED FROM: handle-escape-key! in date_picker.cljs
-     */
     private handleEscapeKey;
-    /**
-     * Open calendar dropdown
-     *
-     * PORTED FROM: open-dropdown! in date_picker.cljs
-     */
     private openDropdown;
-    /**
-     * Close calendar dropdown
-     *
-     * PORTED FROM: close-dropdown! in date_picker.cljs
-     */
     private closeDropdown;
-    /**
-     * Clean up event listeners and state
-     *
-     * PORTED FROM: cleanup! in date_picker.cljs
-     */
     private cleanup;
 }
 export {};
-//# sourceMappingURL=date-picker.d.ts.map