tyrell-components 1.0.0-TC57 → 1.0.0-TC59

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

@@ -1,26 +1,18 @@
 /**
  * TyDatePicker Web Component — read-only input stub + calendar dropdown
  * (modal <dialog>), optional time input, form participation via
- * ElementInternals. Value is UTC; display is local.
+ * ElementInternals. Value is a UTC instant (wall-clock with `native`);
+ * 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';
-/**
- * Date components (internal representation in local timezone)
- */
-interface DateComponents {
-    year?: number;
-    month?: number;
-    day?: number;
-    hour?: number;
-    minute?: number;
-}
+import { type DateTimeParts } from '../utils/calendar-utils.js';
 /**
  * Internal date picker state
  */
-interface DatePickerState extends DateComponents {
+interface DatePickerState extends DateTimeParts {
     withTime: boolean;
     open: boolean;
 }
@@ -99,6 +91,11 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
             visual: boolean;
             default: boolean;
         };
+        error: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         format: {
             type: "string";
             visual: boolean;
@@ -123,12 +120,19 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
             visual: boolean;
             default: boolean;
         };
+        native: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
     };
     private _state;
     private _clickListener?;
     private _keydownListener?;
     private _dialogClickListener?;
     private _closeTimestamp;
+    private _initialized;
+    private _syncing;
     private _timeInput?;
     private _localeObserver?;
     private _customFlavorSheet;
@@ -142,16 +146,21 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     /** 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
+     * Get form value - the submitted string from current state (see
+     * componentsToOutputValue). TyComponent calls this automatically when the
+     * value property changes.
      */
     protected getFormValue(): FormDataEntryValue | null;
+    private outputValue;
     protected updateFormValue(): void;
-    /** Focus the field: the host itself isn't focusable. */
+    /** The field's focusable element: the stub, or the native input on touch devices. */
+    private focusTarget;
+    /** Focus the field: the host itself isn't focusable. Disabled: nothing, like a native input. */
     focus(options?: FocusOptions): void;
     /**
      * `required` used to be cosmetic: nothing reported valueMissing, so an empty
      * required picker never blocked its form. Disabled pickers don't validate.
+     * The message is a native date (datetime-local with time) input's.
      */
     private updateValidity;
     private getComponents;
@@ -208,17 +217,23 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     set max(v: string);
     get withTime(): boolean;
     set withTime(v: boolean);
+    get native(): boolean;
+    set native(v: boolean);
+    get error(): string;
+    set error(v: string);
     /**
-     * Get current value (UTC ISO string)
+     * Get current value — the string the form submits: a UTC ISO instant, or
+     * wall-clock ('YYYY-MM-DD' / 'YYYY-MM-DDTHH:mm') with `native`. null when
+     * empty (the form then submits name=, like a native date input).
      */
     get value(): string | null;
     /**
-     * Set value (UTC ISO string, Date object, or null)
+     * Set value: any format parseDateTime() reads, a Date, epoch milliseconds,
+     * or null. It's normalized to the submitted form.
      *
      * 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);
+    set value(val: string | number | Date | null);
     /**
      * Clear the date value programmatically WITH a change event (source:
      * 'clear'). Works regardless of `no-clear` — lets any
@@ -232,15 +247,33 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     /** Footer: clock + "Time" on the left, HH : MM on the right, summary below. */
     private renderTimeSection;
     private renderCalendarDropdown;
+    /**
+     * Match the popup calendar to the stub's look: danger while an error
+     * shows, as on the stub (styles: errorLook), else the user's flavor.
+     * 'default' is the stub's own unstyled state, not a real flavor: the
+     * calendar stays on its own default.
+     */
+    private calendarFlavor;
     /**
      * 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;
+    /**
+     * The touch devices' native input follows the picker: type (date, or
+     * datetime-local with time), disabled, required, min/max (datetime-local
+     * wants a time suffix) and value — also when they change at runtime.
+     */
+    private syncNativeInput;
     private calculateCalendarPosition;
     private renderContainer;
     protected render(): void;
+    /**
+     * The `error` line under the field — same markup as ty-input's; the field
+     * (stub, or the native input on touch devices) is described by it.
+     */
+    private syncErrorLine;
     /**
      * Update display without destroying DOM (for open dialog)
      */