tyrell-components 1.0.0-TC7

package/lib/components/textarea.d.ts

@@ -0,0 +1,241 @@
+/**
+ * ty-textarea - Enhanced textarea component with auto-resize functionality
+ *
+ * Features:
+ * - Auto-resize based on content
+ * - Form-associated custom element
+ * - Min/max height constraints
+ * - Size variants (xs, sm, md, lg, xl)
+ * - Validation states (error, required)
+ * - Manual resize control options
+ * - Accessibility support
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <ty-textarea label="Description" placeholder="Enter details..."></ty-textarea>
+ *
+ * <!-- With validation -->
+ * <ty-textarea
+ *   label="Bio"
+ *   required
+ *   error="Bio is required"
+ *   size="lg">
+ * </ty-textarea>
+ *
+ * <!-- With height constraints -->
+ * <ty-textarea
+ *   min-height="100px"
+ *   max-height="300px"
+ *   placeholder="Auto-resizing textarea">
+ * </ty-textarea>
+ *
+ * <!-- Manual resize control -->
+ * <ty-textarea resize="vertical"></ty-textarea>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string, originalEvent: Event}>} input - Emitted on input
+ * @fires {CustomEvent<{value: string, originalEvent: Event}>} change - Emitted on change
+ */
+import { TyComponent } from '../base/ty-component.js';
+import type { PropertyChange } from '../utils/property-manager.js';
+/**
+ * Component internal state (for typing TyComponent)
+ * Actual state stored as private fields
+ */
+interface TextareaState {
+    value: string;
+    isFocused: boolean;
+    textareaEl: HTMLTextAreaElement | null;
+    dummyEl: HTMLPreElement | null;
+}
+export interface TyTextareaElement extends HTMLElement {
+    value?: string;
+    name?: string;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    rows?: string | number;
+    cols?: string | number;
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    minHeight?: string;
+    maxHeight?: string;
+}
+export declare class TyTextarea extends TyComponent<TextareaState> implements TyTextareaElement {
+    static formAssociated: boolean;
+    protected static properties: {
+        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;
+        };
+        rows: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            coerce: (v: any) => string;
+        };
+        cols: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            coerce: (v: any) => string;
+        };
+        resize: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        minHeight: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        maxHeight: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+    };
+    private _textareaEl;
+    private _dummyEl;
+    private _scrollbar;
+    private _isFocused;
+    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;
+    /**
+     * Override form value to return current value
+     */
+    protected getFormValue(): FormDataEntryValue | null;
+    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(): 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    set size(v: 'xs' | 'sm' | 'md' | 'lg' | 'xl');
+    get rows(): string;
+    set rows(v: string | number);
+    get cols(): string;
+    set cols(v: string | number);
+    get resize(): 'none' | 'both' | 'horizontal' | 'vertical';
+    set resize(v: 'none' | 'both' | 'horizontal' | 'vertical');
+    get minHeight(): string;
+    set minHeight(v: string);
+    get maxHeight(): string;
+    set maxHeight(v: string);
+    /**
+     * Extract font-related CSS properties from element
+     */
+    private getFontStyle;
+    /**
+     * Extract spacing-related CSS properties from element
+     */
+    private getSpacingStyle;
+    /**
+     * Setup the hidden dummy element for height measurement
+     */
+    private setupDummyElement;
+    /**
+     * Resize textarea based on dummy element content with min/max height constraints
+     */
+    private resizeTextarea;
+    private _setupScrollbar;
+    private _destroyScrollbar;
+    /**
+     * Emit custom input and change events
+     */
+    private emitValueEvents;
+    /**
+     * Handle textarea input event
+     */
+    private handleInputEvent;
+    /**
+     * Handle textarea focus event
+     */
+    private handleFocusEvent;
+    /**
+     * Handle textarea blur event
+     */
+    private handleBlurEvent;
+    /**
+     * Build class list for textarea element
+     */
+    private buildClassList;
+    /**
+     * Apply min/max height constraints to textarea element
+     */
+    private applyHeightConstraints;
+    /**
+     * Setup event listeners for textarea
+     */
+    private setupTextareaEvents;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=textarea.d.ts.map

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

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