tyrell-components 1.0.0-TC7

package/lib/components/input.d.ts

@@ -0,0 +1,270 @@
+/**
+ * TyInput Web Component
+ * PORTED FROM: clj/ty/components/input.cljs
+ * Phase D: Complete with debounce feature for input and change events
+ *
+ * Enhanced input component with:
+ * - Label, error messages, semantic styling
+ * - Icon slots (start/end)
+ * - Numeric formatting with shadow values
+ * - Currency, percent, compact notation
+ * - Format-on-blur / raw-on-focus behavior
+ * - Debounce (0-5000ms) for input/change events
+ * - Immediate event firing on blur (cancels pending debounce)
+ *
+ * NOTE: Checkbox functionality is in separate ty-checkbox component
+ */
+import type { Flavor, Size, InputType, TyInputElement } from '../types/common.js';
+import { TyComponent } from '../base/ty-component.js';
+import type { PropertyChange } from '../utils/property-manager.js';
+/**
+ * Ty Input Component (Phase D - Complete with Debounce)
+ *
+ * @example
+ * ```html
+ * <!-- Basic input -->
+ * <ty-input label="Email" type="email" placeholder="Enter email" required></ty-input>
+ *
+ * <!-- With icons -->
+ * <ty-input label="Search">
+ *   <ty-icon slot="start" name="search"></ty-icon>
+ * </ty-input>
+ *
+ * <!-- With debounce (500ms) -->
+ * <ty-input
+ *   label="Search"
+ *   debounce="500"
+ *   placeholder="Type to search...">
+ * </ty-input>
+ *
+ * <!-- Currency formatting -->
+ * <ty-input
+ *   label="Price"
+ *   type="currency"
+ *   currency="USD"
+ *   locale="en-US"
+ *   value="1234.56">
+ * </ty-input>
+ *
+ * <!-- Percent formatting -->
+ * <ty-input
+ *   label="Tax Rate"
+ *   type="percent"
+ *   value="15"
+ *   precision="2">
+ * </ty-input>
+ * ```
+ */
+/**
+ * Internal state interface for TyInput component
+ */
+interface InputState {
+    shadowValue: number | string | null;
+    isFocused: boolean;
+    listenersSetup: boolean;
+    inputHandler: ((e: Event) => void) | null;
+    changeHandler: ((e: Event) => void) | null;
+    focusHandler: ((e: Event) => void) | null;
+    blurHandler: ((e: Event) => void) | null;
+    inputDebounceTimer: number | null;
+    changeDebounceTimer: number | null;
+    localeObserver?: () => void;
+}
+export declare class TyInput extends TyComponent<InputState> implements TyInputElement {
+    static formAssociated: boolean;
+    protected static properties: {
+        type: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        value: {
+            type: "string";
+            visual: boolean;
+            formValue: boolean;
+            emitChange: boolean;
+            default: string;
+        };
+        name: {
+            type: "string";
+            default: string;
+        };
+        placeholder: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        label: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        disabled: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        required: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        error: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        size: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        flavor: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        currency: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        locale: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        precision: {
+            type: "number";
+            visual: boolean;
+            default: undefined;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => number | undefined;
+        };
+        debounce: {
+            type: "number";
+            default: number;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => number;
+        };
+    };
+    private _shadowValue;
+    private _isFocused;
+    private _listenersSetup;
+    private _inputHandler;
+    private _changeHandler;
+    private _focusHandler;
+    private _blurHandler;
+    private _inputDebounceTimer;
+    private _changeDebounceTimer;
+    private _localeObserver?;
+    constructor();
+    /**
+     * Called when component connects to DOM
+     * TyComponent already handled pre-connection property capture
+     */
+    protected onConnect(): void;
+    /**
+     * Called when component disconnects from DOM
+     */
+    protected onDisconnect(): void;
+    /**
+     * Handle property changes - called BEFORE render
+     * This replaces the old attributeChangedCallback logic
+     */
+    protected onPropertiesChanged(changes: PropertyChange[]): void;
+    /**
+     * Hook: Called when form is reset
+     * Clear shadow value and focus state
+     */
+    protected onFormReset(): void;
+    /**
+     * Override form value to return shadow value
+     * This ensures numeric types submit their parsed values
+     */
+    protected getFormValue(): FormDataEntryValue | null;
+    /**
+     * Initialize shadow value from the initial value attribute
+     */
+    private initializeShadowValue;
+    /**
+     * Parse a string value to the appropriate shadow value type
+     */
+    private parseShadowValue;
+    /**
+     * Check if current input should format numbers
+     */
+    private shouldFormat;
+    /**
+     * Get the format configuration for current input
+     */
+    private getFormatConfig;
+    /**
+     * Get the display value (formatted or raw)
+     */
+    private getDisplayValue;
+    get type(): InputType;
+    set type(v: InputType);
+    get value(): string;
+    set value(v: string);
+    get name(): string;
+    set name(v: string);
+    get placeholder(): string;
+    set placeholder(v: string);
+    get label(): string;
+    set label(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    get error(): string;
+    set error(v: string);
+    get size(): Size;
+    set size(v: Size);
+    get flavor(): Flavor;
+    set flavor(v: Flavor);
+    get currency(): string;
+    set currency(v: string);
+    get locale(): string;
+    set locale(v: string);
+    get precision(): number | undefined;
+    set precision(v: number | string | undefined);
+    get debounce(): number;
+    set debounce(v: number | string);
+    get form(): HTMLFormElement | null;
+    /**
+     * Build CSS class list for input wrapper
+     */
+    private buildClassList;
+    /**
+     * Dispatch input event (helper method for debouncing)
+     */
+    private dispatchInputEvent;
+    /**
+     * Dispatch change event (helper method for debouncing)
+     */
+    private dispatchChangeEvent;
+    /**
+     * Remove event listeners for cleanup
+     */
+    private removeEventListeners;
+    /**
+   * Setup event listeners for input element
+   * IMPORTANT: Only called ONCE, not on every render (like ClojureScript)
+   */
+    private setupEventListeners;
+    /**
+     * Render the input component with wrapper and slots
+     * Phase C: Uses getDisplayValue() for formatted output
+     *
+     */
+    render(): void;
+}
+export {};
+//# sourceMappingURL=input.d.ts.map

package/lib/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.ts"],"names":[],"mappings":"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"}