@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/textarea/controllers/event.controller.js

@@ -0,0 +1,408 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTextareaController } from './base.controller.js';
+/**
+ * Event controller manages all event handling for textarea components
+ * This controller handles:
+ * - Input event handling with debouncing
+ * - Focus and blur state management
+ * - Keyboard interactions (Enter, Escape, etc.)
+ * - Clear functionality
+ * - Auto-resize functionality
+ * - Event dispatching and custom events
+ */
+export class TextareaEventController extends BaseTextareaController {
+    constructor(host) {
+        super(host);
+        this._hasFocus = false;
+        this._inputDebounceMs = 150;
+    }
+    /**
+     * Get the event host with extended interface
+     */
+    get eventHost() {
+        return this._host;
+    }
+    /**
+     * Get focus state
+     */
+    get hasFocus() {
+        return this._hasFocus;
+    }
+    /**
+     * Set input debounce delay
+     */
+    setInputDebounce(ms) {
+        this._inputDebounceMs = ms;
+    }
+    /**
+     * Initialize event controller after host is connected
+     */
+    hostConnected() {
+        super.hostConnected();
+        this.setupEventListeners();
+    }
+    /**
+     * Cleanup event listeners on disconnect
+     */
+    hostDisconnected() {
+        super.hostDisconnected();
+        this.cleanupEventListeners();
+    }
+    /**
+     * Setup event listeners for the textarea
+     */
+    setupEventListeners() {
+        this.safeExecute(() => {
+            var _a, _b;
+            // Find textarea element
+            const hostWithShadowRoot = this._host;
+            this._textareaElement = (_a = hostWithShadowRoot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('textarea');
+            this._clearButtonElement = (_b = hostWithShadowRoot.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.clear-button');
+            if (this._textareaElement) {
+                this.addTextareaEventListeners();
+            }
+            if (this._clearButtonElement && this.eventHost.clearable) {
+                this.addClearButtonEventListeners();
+            }
+        }, 'setupEventListeners');
+    }
+    /**
+     * Cleanup event listeners
+     */
+    cleanupEventListeners() {
+        if (this._inputTimeout) {
+            clearTimeout(this._inputTimeout);
+            this._inputTimeout = undefined;
+        }
+    }
+    /**
+     * Handle input event with debouncing
+     */
+    handleInput(event) {
+        if (this.eventHost.readonly || this.eventHost.disabled) {
+            return;
+        }
+        const target = event.target;
+        const newValue = target.value;
+        // Clear any existing timeout
+        if (this._inputTimeout) {
+            clearTimeout(this._inputTimeout);
+        }
+        // Update value immediately for responsive UI
+        this.eventHost.value = newValue;
+        // Trigger auto-resize if enabled
+        if (this.eventHost.autoResize) {
+            this.handleAutoResize(target);
+        }
+        // Debounced input event dispatch
+        this._inputTimeout = setTimeout(() => {
+            this.dispatchInputEvent(newValue, event);
+        }, this._inputDebounceMs);
+        this.requestHostUpdate();
+    }
+    /**
+     * Handle focus event
+     */
+    handleFocus(event) {
+        if (this.eventHost.disabled) {
+            return;
+        }
+        this._hasFocus = true;
+        this.requestHostUpdate();
+        this.dispatchFocusEvent(event);
+    }
+    /**
+     * Handle blur event
+     */
+    handleBlur(event) {
+        this._hasFocus = false;
+        this.requestHostUpdate();
+        this.dispatchBlurEvent(event);
+    }
+    /**
+     * Handle keydown events
+     */
+    handleKeyDown(event) {
+        if (this.eventHost.readonly || this.eventHost.disabled) {
+            return;
+        }
+        const { key, ctrlKey, metaKey } = event;
+        // Handle Escape key
+        if (key === 'Escape') {
+            this.handleEscape(event);
+            return;
+        }
+        // Handle Ctrl/Cmd + Enter for submit
+        if (key === 'Enter' && (ctrlKey || metaKey)) {
+            this.handleSubmit(event);
+            return;
+        }
+        this.dispatchKeydownEvent(event);
+    }
+    /**
+     * Handle keyup events
+     */
+    handleKeyUp(event) {
+        this.dispatchKeyupEvent(event);
+    }
+    /**
+     * Handle paste events
+     */
+    handlePaste(event) {
+        if (this.eventHost.readonly || this.eventHost.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.dispatchPasteEvent(event);
+    }
+    /**
+     * Handle clear button click
+     */
+    handleClear(event) {
+        if (this.eventHost.readonly || this.eventHost.disabled) {
+            return;
+        }
+        const previousValue = this.eventHost.value;
+        this.eventHost.value = '';
+        // Focus the textarea after clearing
+        if (this._textareaElement) {
+            this._textareaElement.focus();
+        }
+        this.requestHostUpdate();
+        this.dispatchClearEvent(previousValue, event);
+    }
+    /**
+     * Handle auto-resize functionality
+     */
+    handleAutoResize(textareaElement) {
+        if (!this.eventHost.autoResize) {
+            return;
+        }
+        const textarea = textareaElement || this._textareaElement;
+        if (!textarea) {
+            return;
+        }
+        this.safeExecute(() => {
+            // Reset height to auto to get the correct scrollHeight
+            textarea.style.height = 'auto';
+            // Set the height to match the scroll height
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }, 'handleAutoResize');
+    }
+    /**
+     * Focus the textarea programmatically
+     */
+    focus() {
+        this.safeExecute(() => {
+            var _a;
+            (_a = this._textareaElement) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 'focus');
+    }
+    /**
+     * Blur the textarea programmatically
+     */
+    blur() {
+        this.safeExecute(() => {
+            var _a;
+            (_a = this._textareaElement) === null || _a === void 0 ? void 0 : _a.blur();
+        }, 'blur');
+    }
+    /**
+     * Select all text in the textarea
+     */
+    selectAll() {
+        this.safeExecute(() => {
+            var _a;
+            (_a = this._textareaElement) === null || _a === void 0 ? void 0 : _a.select();
+        }, 'selectAll');
+    }
+    /**
+     * Set cursor position
+     */
+    setCursorPosition(position) {
+        this.safeExecute(() => {
+            if (this._textareaElement) {
+                this._textareaElement.setSelectionRange(position, position);
+            }
+        }, 'setCursorPosition');
+    }
+    /**
+     * Get cursor position
+     */
+    getCursorPosition() {
+        var _a, _b;
+        return (_b = (_a = this._textareaElement) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
+    }
+    /**
+     * Add textarea event listeners
+     */
+    addTextareaEventListeners() {
+        if (!this._textareaElement)
+            return;
+        const textarea = this._textareaElement;
+        textarea.addEventListener('input', this.handleInput.bind(this));
+        textarea.addEventListener('focus', this.handleFocus.bind(this));
+        textarea.addEventListener('blur', this.handleBlur.bind(this));
+        textarea.addEventListener('keydown', this.handleKeyDown.bind(this));
+        textarea.addEventListener('keyup', this.handleKeyUp.bind(this));
+        textarea.addEventListener('paste', this.handlePaste.bind(this));
+    }
+    /**
+     * Add clear button event listeners
+     */
+    addClearButtonEventListeners() {
+        if (!this._clearButtonElement)
+            return;
+        this._clearButtonElement.addEventListener('click', this.handleClear.bind(this));
+    }
+    /**
+     * Handle Escape key press
+     */
+    handleEscape(event) {
+        this.blur();
+        this.dispatchEscapeEvent(event);
+    }
+    /**
+     * Handle submit (Ctrl/Cmd + Enter)
+     */
+    handleSubmit(event) {
+        this.dispatchSubmitEvent(event);
+    }
+    /**
+     * Dispatch input event
+     */
+    dispatchInputEvent(value, originalEvent) {
+        const event = new CustomEvent('textarea-input', {
+            detail: {
+                value,
+                originalEvent,
+                cursorPosition: this.getCursorPosition()
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchInputEvent');
+    }
+    /**
+     * Dispatch focus event
+     */
+    dispatchFocusEvent(originalEvent) {
+        const event = new CustomEvent('textarea-focus', {
+            detail: {
+                originalEvent,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchFocusEvent');
+    }
+    /**
+     * Dispatch blur event
+     */
+    dispatchBlurEvent(originalEvent) {
+        const event = new CustomEvent('textarea-blur', {
+            detail: {
+                originalEvent,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchBlurEvent');
+    }
+    /**
+     * Dispatch keydown event
+     */
+    dispatchKeydownEvent(originalEvent) {
+        const event = new CustomEvent('textarea-keydown', {
+            detail: {
+                originalEvent,
+                key: originalEvent.key,
+                ctrlKey: originalEvent.ctrlKey,
+                metaKey: originalEvent.metaKey,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchKeydownEvent');
+    }
+    /**
+     * Dispatch keyup event
+     */
+    dispatchKeyupEvent(originalEvent) {
+        const event = new CustomEvent('textarea-keyup', {
+            detail: {
+                originalEvent,
+                key: originalEvent.key,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchKeyupEvent');
+    }
+    /**
+     * Dispatch paste event
+     */
+    dispatchPasteEvent(originalEvent) {
+        const event = new CustomEvent('textarea-paste', {
+            detail: {
+                originalEvent,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchPasteEvent');
+    }
+    /**
+     * Dispatch clear event
+     */
+    dispatchClearEvent(previousValue, originalEvent) {
+        const event = new CustomEvent('textarea-clear', {
+            detail: {
+                previousValue,
+                originalEvent,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchClearEvent');
+    }
+    /**
+     * Dispatch escape event
+     */
+    dispatchEscapeEvent(originalEvent) {
+        const event = new CustomEvent('textarea-escape', {
+            detail: {
+                originalEvent,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchEscapeEvent');
+    }
+    /**
+     * Dispatch submit event
+     */
+    dispatchSubmitEvent(originalEvent) {
+        const event = new CustomEvent('textarea-submit', {
+            detail: {
+                originalEvent,
+                value: this.eventHost.value
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.safeExecute(() => this._host.dispatchEvent(event), 'dispatchSubmitEvent');
+    }
+}
+//# sourceMappingURL=event.controller.js.map

package/dist/src/components/textarea/controllers/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseTextareaController, type TextareaHost } from './base.controller.js';
+export { TextareaValidationController, type TextareaValidationHost, type TextareaValidationEventDetail } from './validation.controller.js';
+export { TextareaEventController, type TextareaEventHost } from './event.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/textarea/controllers/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseTextareaController } from './base.controller.js';
+export { TextareaValidationController } from './validation.controller.js';
+export { TextareaEventController } from './event.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/textarea/controllers/validation.controller.d.ts

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { TextareaHost } from './base.controller.js';
+import { BaseValidationController, SharedValidationRule } from '@nuralyui/common/controllers';
+import { ValidationRule, TextareaValidationResult } from '../textarea.types.js';
+/**
+ * Validation event detail interface
+ */
+export interface TextareaValidationEventDetail {
+    isValid: boolean;
+    validationMessage: string;
+    errors: string[];
+    warnings: string[];
+    validationResult: TextareaValidationResult;
+}
+/**
+ * Extended textarea host interface for validation
+ */
+export interface TextareaValidationHost extends TextareaHost {
+    rules: ValidationRule[];
+    validateOnChange: boolean;
+    validateOnBlur: boolean;
+    hasFeedback: boolean;
+    state: string;
+    validationMessage?: string;
+}
+/**
+ * Validation controller manages all validation logic for textarea components
+ * This controller handles:
+ * - Rule-based validation (required, patterns, custom validators, etc.)
+ * - Validation timing (change, blur, submit)
+ * - Validation state management
+ * - Error and warning messages
+ * - Character count validation
+ */
+export declare class TextareaValidationController extends BaseValidationController<TextareaValidationHost & ReactiveControllerHost> {
+    private _validationResult?;
+    private _validationDebounceMs;
+    private _validationTimeout?;
+    /**
+     * Get the validation host with extended interface
+     */
+    get validationHost(): TextareaValidationHost & ReactiveControllerHost;
+    /**
+     * Get current validation result
+     */
+    get validationResult(): TextareaValidationResult | undefined;
+    /**
+     * Set validation debounce delay
+     */
+    setValidationDebounce(ms: number): void;
+    /**
+     * Validate the current value against all rules (base contract)
+     */
+    validate(): Promise<boolean>;
+    /**
+     * Validate the current value against all rules (textarea-specific, returns full result)
+     */
+    validateTextarea(value?: string): Promise<TextareaValidationResult>;
+    /**
+     * Validate with debouncing
+     */
+    validateDebounced(value?: string): Promise<TextareaValidationResult>;
+    /**
+     * Validate if change validation is enabled
+     */
+    validateOnChangeIfEnabled(value?: string): Promise<TextareaValidationResult | undefined>;
+    /**
+     * Validate if blur validation is enabled
+     */
+    validateOnBlurIfEnabled(value?: string): Promise<TextareaValidationResult | undefined>;
+    /**
+     * Clear validation state
+     */
+    clearValidation(): void;
+    /**
+     * Check if the current value is valid according to validation rules
+     */
+    isCurrentlyValid(): boolean;
+    /**
+     * Check if validation is blocking (prevents form submission)
+     */
+    isBlocking(): boolean;
+    /**
+     * Get validation messages
+     */
+    getValidationMessages(): string[];
+    /**
+     * Add a validation rule to the host
+     */
+    addRule(rule: SharedValidationRule): void;
+    /**
+     * Remove a validation rule from the host
+     */
+    removeRule(predicate: (rule: SharedValidationRule) => boolean): void;
+    /**
+     * Remove all validation rules
+     */
+    clearRules(): void;
+    /**
+     * Create a required field validation rule
+     */
+    static createRequiredRule(message?: string): ValidationRule;
+    /**
+     * Create a minimum length validation rule
+     */
+    static createMinLengthRule(minLength: number, message?: string): ValidationRule;
+    /**
+     * Create a maximum length validation rule
+     */
+    static createMaxLengthRule(maxLength: number, message?: string): ValidationRule;
+    /**
+     * Create a pattern validation rule
+     */
+    static createPatternRule(pattern: RegExp, message: string): ValidationRule;
+    /**
+     * Update host validation state based on validation result
+     */
+    private updateHostValidationState;
+    /**
+     * Dispatch textarea-specific validation event (standardized to nr-validation)
+     */
+    private dispatchTextareaValidationEvent;
+    /**
+     * Cleanup on disconnect
+     */
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=validation.controller.d.ts.map