tyrell-components 1.0.0-RC6

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

@@ -0,0 +1,379 @@
+/**
+ * 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>
+ * ```
+ */
+import { TyComponent } from '../base/ty-component.js';
+import type { PropertyChange } from '../utils/property-manager.js';
+/**
+ * Date components (internal representation in local timezone)
+ */
+interface DateComponents {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+}
+/**
+ * Internal date picker state
+ */
+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' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+/**
+ * Date format types
+ */
+type DateFormatType = 'short' | 'medium' | 'long' | 'full';
+/**
+ * Change event detail
+ */
+export interface DatePickerChangeDetail {
+    value: string | null;
+    localValue: string | null;
+    milliseconds: number | null;
+    formatted: string | null;
+    source: 'selection' | 'time-change' | 'clear' | 'external';
+}
+export declare class TyDatePicker extends TyComponent<DatePickerState> {
+    protected static properties: {
+        size: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        flavor: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        label: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        placeholder: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        name: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        required: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        disabled: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        clearable: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+            aliases: {
+                'not-clearable': boolean;
+            };
+        };
+        format: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        locale: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        value: {
+            type: "string";
+            visual: boolean;
+            formValue: boolean;
+            emitChange: boolean;
+            default: null;
+        };
+        'with-time': {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+    };
+    private _state;
+    private _clickListener?;
+    private _keydownListener?;
+    private _dialogClickListener?;
+    private _closeTimestamp;
+    private _timeInput?;
+    private _localeObserver?;
+    /**
+     * Form-associated custom element
+     */
+    static formAssociated: boolean;
+    constructor();
+    /**
+     * Called when component connects to DOM
+     * TyComponent handles property capture automatically
+     */
+    protected onConnect(): void;
+    /**
+     * Called when component disconnects from DOM
+     */
+    protected onDisconnect(): void;
+    /**
+     * Called when properties change
+     * 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
+     */
+    private hasDate;
+    /**
+     * Format current components for display using Intl API
+     */
+    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
+     * Compares before setting to prevent circular triggers
+     */
+    private syncFormValue;
+    /**
+     * Handle time input changes from TimeInput class
+     *
+     * PORTED FROM: handle-time-change! in date_picker.cljs
+     */
+    handleTimeInputChange(hour: number, minute: number): void;
+    /**
+     * Emit change event
+     *
+     * PORTED FROM: emit-change-event! in date_picker.cljs
+     */
+    private emitChangeEvent;
+    get size(): DatePickerSize;
+    set size(v: DatePickerSize);
+    get flavor(): DatePickerFlavor;
+    set flavor(v: DatePickerFlavor);
+    get label(): string;
+    set label(v: string);
+    get placeholder(): string;
+    set placeholder(v: string);
+    get name(): string;
+    set name(v: string);
+    get format(): DateFormatType;
+    set format(v: DateFormatType);
+    get locale(): string;
+    set locale(v: string);
+    get required(): boolean;
+    set required(v: boolean);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get clearable(): boolean;
+    set clearable(v: boolean);
+    get withTime(): boolean;
+    set withTime(v: boolean);
+    /**
+     * Get current value (UTC ISO string)
+     */
+    get value(): string | null;
+    /**
+     * Set value (UTC ISO string, Date object, or null)
+     *
+     * When set to null/undefined/empty string, the attribute is removed.
+     * When set to a valid date, the attribute is set to ISO UTC string.
+     */
+    set value(val: string | Date | null);
+    /**
+     * 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.
+     * Uses <input type="date"> or <input type="datetime-local"> when with-time.
+     * 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;
+    /**
+     * Clear the date value, sync state, emit event, and re-render.
+     */
+    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

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAOH,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAMnE;;GAEG;AACH,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,UAAU,eAAgB,SAAQ,cAAc;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;CACf;AAaD;;GAEG;AACH,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvD;;GAEG;AACH,KAAK,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/F;;GAEG;AACH,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC;CAC5D;AAikBD,qBAAa,YAAa,SAAQ,WAAW,CAAC,eAAe,CAAC;IAI5D,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;0BAMT,GAAG;wBACL,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsDD,GAAG;wBACL,GAAG;;;;;;;;;;;;;;;;;;;MAiCjB;IAMF,OAAO,CAAC,MAAM,CAGZ;IAGF,OAAO,CAAC,cAAc,CAAC,CAAqB;IAC5C,OAAO,CAAC,gBAAgB,CAAC,CAAqB;IAC9C,OAAO,CAAC,oBAAoB,CAAC,CAAqB;IAGlD,OAAO,CAAC,eAAe,CAAK;IAG5B,OAAO,CAAC,UAAU,CAAC,CAAY;IAG/B,OAAO,CAAC,eAAe,CAAC,CAAa;IAErC;;OAEG;IACH,MAAM,CAAC,cAAc,UAAQ;;IAgB7B;;;OAGG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAa3B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAW9B;;;OAGG;IACH,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI;IA4F9D;;;OAGG;IACH,SAAS,CAAC,YAAY,IAAI,kBAAkB,GAAG,IAAI;IAQnD;;OAEG;IACH,OAAO,CAAC,aAAa;IAUrB;;OAEG;IACH,OAAO,CAAC,OAAO;IAIf;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAwBvB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAYnB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAwBrB;;;;OAIG;IACH,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAQzD;;;;OAIG;IACH,OAAO,CAAC,eAAe;IA4BvB,IAAI,IAAI,IAAI,cAAc,CAAuD;IACjF,IAAI,IAAI,CAAC,CAAC,EAAE,cAAc,EAAkC;IAE5D,IAAI,MAAM,IAAI,gBAAgB,CAA2D;IACzF,IAAI,MAAM,CAAC,CAAC,EAAE,gBAAgB,EAAoC;IAElE,IAAI,KAAK,IAAI,MAAM,CAAsC;IACzD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAmC;IAEtD,IAAI,WAAW,IAAI,MAAM,CAA4C;IACrE,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAAyC;IAElE,IAAI,IAAI,IAAI,MAAM,CAAqC;IACvD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAAkC;IAEpD,IAAI,MAAM,IAAI,cAAc,CAAyD;IACrF,IAAI,MAAM,CAAC,CAAC,EAAE,cAAc,EAAoC;IAEhE,IAAI,MAAM,IAAI,MAAM,CAAuC;IAC3D,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM,EAAoC;IAGxD,IAAI,QAAQ,IAAI,OAAO,CAAyC;IAChE,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAsC;IAE7D,IAAI,QAAQ,IAAI,OAAO,CAAyC;IAChE,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAsC;IAE7D,IAAI,SAAS,IAAI,OAAO,CAA0C;IAClE,IAAI,SAAS,CAAC,CAAC,EAAE,OAAO,EAAuC;IAG/D,IAAI,QAAQ,IAAI,OAAO,CAA0C;IACjE,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAuC;IAG9D;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IAED;;;;;OAKG;IACH,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,EAOlC;IAMD;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAgBxB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAwDlB;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IAW9B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA0BzB;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IA0C9B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAgFzB;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IAyDjC;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAgBvB;;;;OAIG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;IAiDxB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IA6CrB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,eAAe;IAYvB;;OAEG;IACH,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,gBAAgB;IAMxB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAsC5B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAczB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAY1B;;;;OAIG;IACH,OAAO,CAAC,eAAe;IASvB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAmCpB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IA+BrB;;;;OAIG;IACH,OAAO,CAAC,OAAO;CA6BhB"}