@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/input/controllers/base.controller.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+export type { ErrorHandler } from '@nuralyui/common/controllers';
+/**
+ * Base interface for input controllers
+ */
+export interface InputBaseController {
+    host: InputHost;
+}
+/**
+ * Input host interface - defines what the input component should provide
+ */
+export interface InputHost {
+    value: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    type?: string;
+    label?: string;
+    placeholder?: string;
+    requestUpdate(): void;
+}
+/**
+ * Abstract base controller class that implements common functionality
+ * for all input component controllers
+ */
+export declare abstract class BaseInputController extends BaseComponentController<InputHost & ReactiveControllerHost> {
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/src/components/input/controllers/base.controller.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all input component controllers
+ */
+export class BaseInputController extends BaseComponentController {
+}
+//# sourceMappingURL=base.controller.js.map

package/dist/src/components/input/controllers/event.controller.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseInputController, InputHost } from './base.controller.js';
+/**
+ * Event controller interface for input components
+ */
+export interface EventController {
+    handleKeyDown(event: KeyboardEvent): void;
+    handleValueChange(event: Event): void;
+    handleFocus(event: Event): void;
+    handleBlur(event: Event): void;
+    handleIconKeydown(event: KeyboardEvent): void;
+    handleCopy(): Promise<void>;
+    handleClear(): void;
+    handleTogglePassword(): void;
+    handleIncrement(): void;
+    handleDecrement(): void;
+}
+/**
+ * Enhanced input host interface with additional properties needed for events
+ */
+export interface InputEventHost extends InputHost {
+    readonly?: boolean;
+    maxLength?: number;
+    withCopy?: boolean;
+    allowClear?: boolean;
+    inputType?: string;
+    focused?: boolean;
+    debounce?: number;
+    isReadonlyKeyAllowed?(keyDownEvent: KeyboardEvent): boolean;
+    isActivationKey?(keyDownEvent: KeyboardEvent): boolean;
+    getCursorPosition?(): number | null;
+    getSelectedText?(): string;
+    increment?(): void;
+    decrement?(): void;
+    dispatchInputEvent(eventName: string, detail: any): void;
+    dispatchFocusEvent(eventName: string, detail: any): void;
+    dispatchActionEvent(eventName: string, detail: any): void;
+    shadowRoot?: ShadowRoot | null;
+}
+/**
+ * Event controller that manages all user interactions and event handling
+ * for the input component. This includes keyboard events, focus/blur,
+ * value changes, and action button interactions.
+ */
+export declare class InputEventController extends BaseInputController implements EventController {
+    private debounceTimer;
+    protected get eventHost(): InputEventHost;
+    private get inputElement();
+    /**
+     * Clear debounce timer on disconnect
+     */
+    clearDebounceTimer(): void;
+    /**
+     * Handle keyboard interactions
+     */
+    handleKeyDown: (event: KeyboardEvent) => void;
+    /**
+     * Handle input value changes
+     */
+    handleValueChange: (event: Event) => void;
+    /**
+     * Handle focus events
+     */
+    handleFocus: (event: Event) => void;
+    /**
+     * Handle blur events
+     */
+    handleBlur: (event: Event) => void;
+    /**
+     * Handle icon button keyboard interactions
+     */
+    handleIconKeydown: (event: KeyboardEvent) => void;
+    /**
+     * Handle copy action
+     */
+    handleCopy: () => Promise<void>;
+    /**
+     * Handle clear action
+     */
+    handleClear: () => void;
+    /**
+     * Handle password visibility toggle
+     */
+    handleTogglePassword: () => void;
+    /**
+     * Handle increment action for number inputs
+     */
+    handleIncrement: () => void;
+    /**
+     * Handle decrement action for number inputs
+     */
+    handleDecrement: () => void;
+    /**
+     * Helper methods
+     */
+    private handleNumericKeyDown;
+    private handleNumberIconAction;
+    private dispatchEnterEvent;
+    private validateNumericValue;
+    private restoreCursorPosition;
+    private setFocusState;
+    private getCursorPosition;
+    private getSelectedText;
+    private isReadonlyKeyAllowed;
+    private isActivationKey;
+}
+//# sourceMappingURL=event.controller.d.ts.map

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

@@ -0,0 +1,355 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { BaseInputController } from './base.controller.js';
+/**
+ * Event controller that manages all user interactions and event handling
+ * for the input component. This includes keyboard events, focus/blur,
+ * value changes, and action button interactions.
+ */
+export class InputEventController extends BaseInputController {
+    constructor() {
+        super(...arguments);
+        this.debounceTimer = null;
+        /**
+         * Handle keyboard interactions
+         */
+        this.handleKeyDown = (event) => {
+            // Handle readonly mode
+            if (this.eventHost.readonly && !this.isReadonlyKeyAllowed(event)) {
+                event.preventDefault();
+                return;
+            }
+            // Handle Enter key
+            if (event.key === 'Enter') {
+                this.dispatchEnterEvent(event);
+                return;
+            }
+            // Handle number input specific keys
+            if (this.eventHost.type === "number" /* INPUT_TYPE.NUMBER */) {
+                this.handleNumericKeyDown(event);
+            }
+        };
+        /**
+         * Handle input value changes
+         */
+        this.handleValueChange = (event) => {
+            if (this.eventHost.readonly) {
+                event.preventDefault();
+                return;
+            }
+            const target = event.target;
+            const newValue = target.value;
+            // Validate character limit
+            if (this.eventHost.maxLength && newValue.length > this.eventHost.maxLength) {
+                event.preventDefault();
+                return;
+            }
+            // Handle numeric value validation
+            if (this.eventHost.type === "number" /* INPUT_TYPE.NUMBER */ && newValue) {
+                this.validateNumericValue(newValue, event);
+            }
+            // Update value immediately
+            this.eventHost.value = newValue;
+            // Trigger validation (if validation controller exists)
+            const host = this.eventHost;
+            if (host.validationController && typeof host.validationController.validateOnChange === 'function') {
+                host.validationController.validateOnChange();
+            }
+            // Dispatch event with debounce if configured
+            const debounceMs = this.eventHost.debounce || 0;
+            if (debounceMs > 0) {
+                this.clearDebounceTimer();
+                this.debounceTimer = setTimeout(() => {
+                    this.eventHost.dispatchInputEvent('nr-input', {
+                        value: this.eventHost.value,
+                        target: target,
+                        originalEvent: event
+                    });
+                }, debounceMs);
+            }
+            else {
+                this.eventHost.dispatchInputEvent('nr-input', {
+                    value: this.eventHost.value,
+                    target: target,
+                    originalEvent: event
+                });
+            }
+        };
+        /**
+         * Handle focus events
+         */
+        this.handleFocus = (event) => {
+            var _a;
+            this.setFocusState(true);
+            const input = event.target;
+            this.restoreCursorPosition(input);
+            const focusDetail = {
+                focused: true,
+                cursorPosition: (_a = this.getCursorPosition()) !== null && _a !== void 0 ? _a : undefined,
+                selectedText: this.getSelectedText()
+            };
+            this.eventHost.dispatchFocusEvent('nr-focus', Object.assign({ target: event.target, value: this.eventHost.value }, focusDetail));
+            this.eventHost.dispatchFocusEvent('nr-focus-change', focusDetail);
+        };
+        /**
+         * Handle blur events
+         */
+        this.handleBlur = (event) => {
+            var _a;
+            this.setFocusState(false);
+            const focusDetail = {
+                focused: false,
+                cursorPosition: (_a = this.getCursorPosition()) !== null && _a !== void 0 ? _a : undefined,
+                selectedText: this.getSelectedText()
+            };
+            // Trigger validation on blur
+            const host = this.eventHost;
+            if (host.validationController && typeof host.validationController.validateOnBlur === 'function') {
+                host.validationController.validateOnBlur();
+            }
+            this.eventHost.dispatchFocusEvent('nr-blur', Object.assign({ target: event.target, value: this.eventHost.value }, focusDetail));
+            this.eventHost.dispatchFocusEvent('nr-focus-change', focusDetail);
+        };
+        /**
+         * Handle icon button keyboard interactions
+         */
+        this.handleIconKeydown = (event) => {
+            if (!this.isActivationKey(event))
+                return;
+            event.preventDefault();
+            const target = event.target;
+            // Handle different icon actions
+            switch (target.id) {
+                case 'copy-icon':
+                    this.handleCopy();
+                    break;
+                case 'clear-icon':
+                    this.handleClear();
+                    break;
+                case 'password-icon':
+                    this.handleTogglePassword();
+                    break;
+                default:
+                    // Handle number input icons
+                    if (target.closest('#number-icons')) {
+                        this.handleNumberIconAction(target);
+                    }
+                    break;
+            }
+        };
+        /**
+         * Handle copy action
+         */
+        this.handleCopy = () => __awaiter(this, void 0, void 0, function* () {
+            if (!this.eventHost.withCopy || this.eventHost.disabled)
+                return;
+            try {
+                const input = this.inputElement;
+                if (!input)
+                    return;
+                input.select();
+                yield navigator.clipboard.writeText(input.value);
+                this.eventHost.dispatchActionEvent('nr-copy-success', {
+                    value: input.value,
+                    action: 'copy'
+                });
+            }
+            catch (error) {
+                this.handleError(error, 'copy');
+                this.eventHost.dispatchActionEvent('nr-copy-error', {
+                    error,
+                    action: 'copy'
+                });
+            }
+        });
+        /**
+         * Handle clear action
+         */
+        this.handleClear = () => {
+            if (this.eventHost.disabled || this.eventHost.readonly || !this.eventHost.allowClear) {
+                return;
+            }
+            const previousValue = this.eventHost.value;
+            this.eventHost.value = '';
+            const input = this.inputElement;
+            if (input) {
+                input.value = '';
+                input.focus();
+            }
+            this.eventHost.dispatchActionEvent('nr-clear', {
+                previousValue,
+                newValue: this.eventHost.value,
+                target: input,
+                action: 'clear'
+            });
+            this.eventHost.dispatchInputEvent('nr-input', {
+                value: this.eventHost.value,
+                target: input,
+                action: 'clear'
+            });
+        };
+        /**
+         * Handle password visibility toggle
+         */
+        this.handleTogglePassword = () => {
+            if (this.eventHost.type !== "password" /* INPUT_TYPE.PASSWORD */)
+                return;
+            const currentType = this.eventHost.inputType;
+            const newType = currentType === "password" /* INPUT_TYPE.PASSWORD */ ? "text" /* INPUT_TYPE.TEXT */ : "password" /* INPUT_TYPE.PASSWORD */;
+            this.eventHost.inputType = newType;
+            this.requestUpdate();
+            this.eventHost.dispatchActionEvent('nr-password-toggle', {
+                visible: newType === "text" /* INPUT_TYPE.TEXT */,
+                action: 'password-toggle'
+            });
+        };
+        /**
+         * Handle increment action for number inputs
+         */
+        this.handleIncrement = () => {
+            if (this.eventHost.type !== "number" /* INPUT_TYPE.NUMBER */)
+                return;
+            if (this.eventHost.increment) {
+                this.eventHost.increment();
+            }
+        };
+        /**
+         * Handle decrement action for number inputs
+         */
+        this.handleDecrement = () => {
+            if (this.eventHost.type !== "number" /* INPUT_TYPE.NUMBER */)
+                return;
+            if (this.eventHost.decrement) {
+                this.eventHost.decrement();
+            }
+        };
+    }
+    get eventHost() {
+        return this.host;
+    }
+    get inputElement() {
+        var _a, _b;
+        return ((_b = (_a = this.eventHost).querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, '#input')) || null;
+    }
+    /**
+     * Clear debounce timer on disconnect
+     */
+    clearDebounceTimer() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+    }
+    /**
+     * Helper methods
+     */
+    handleNumericKeyDown(event) {
+        // Allow navigation and special keys
+        const allowedKeys = [
+            'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+            'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+            'Home', 'End'
+        ];
+        if (allowedKeys.includes(event.key))
+            return;
+        // Allow Ctrl/Cmd combinations
+        if (event.ctrlKey || event.metaKey)
+            return;
+        // Allow decimal point and minus for applicable number inputs
+        if (event.key === '.' || event.key === '-')
+            return;
+        // Only allow numeric characters
+        if (!/^\d$/.test(event.key)) {
+            event.preventDefault();
+        }
+    }
+    handleNumberIconAction(target) {
+        const isIncrement = target.classList.contains('increment') ||
+            target.closest('.increment');
+        const isDecrement = target.classList.contains('decrement') ||
+            target.closest('.decrement');
+        if (isIncrement) {
+            this.handleIncrement();
+        }
+        else if (isDecrement) {
+            this.handleDecrement();
+        }
+    }
+    dispatchEnterEvent(event) {
+        this.eventHost.dispatchInputEvent('nr-enter', {
+            value: this.eventHost.value,
+            target: event.target,
+            originalEvent: event
+        });
+    }
+    validateNumericValue(_value, _event) {
+        // Additional numeric validation can be added here
+        // This could integrate with the validation controller
+        // For now, let the number mixin handle validation
+    }
+    restoreCursorPosition(input) {
+        if (input.dataset.restoreCursor) {
+            const position = Number.parseInt(input.dataset.restoreCursor, 10);
+            if (!Number.isNaN(position)) {
+                input.setSelectionRange(position, position);
+            }
+            delete input.dataset.restoreCursor;
+        }
+    }
+    setFocusState(focused) {
+        if (this.eventHost.hasOwnProperty('focused')) {
+            this.eventHost.focused = focused;
+            this.requestUpdate();
+        }
+    }
+    getCursorPosition() {
+        if (this.eventHost.getCursorPosition) {
+            return this.eventHost.getCursorPosition();
+        }
+        const input = this.inputElement;
+        return input ? input.selectionStart : null;
+    }
+    getSelectedText() {
+        if (this.eventHost.getSelectedText) {
+            return this.eventHost.getSelectedText();
+        }
+        const input = this.inputElement;
+        if (input && input.selectionStart !== null && input.selectionEnd !== null) {
+            return input.value.substring(input.selectionStart, input.selectionEnd);
+        }
+        return '';
+    }
+    isReadonlyKeyAllowed(event) {
+        if (this.eventHost.isReadonlyKeyAllowed) {
+            return this.eventHost.isReadonlyKeyAllowed(event);
+        }
+        // Fallback implementation
+        const allowedKeys = [
+            'Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+            'Home', 'End', 'PageUp', 'PageDown'
+        ];
+        if (event.ctrlKey || event.metaKey) {
+            return ['KeyA', 'KeyC'].includes(event.code);
+        }
+        return allowedKeys.includes(event.key);
+    }
+    isActivationKey(event) {
+        if (this.eventHost.isActivationKey) {
+            return this.eventHost.isActivationKey(event);
+        }
+        return event.key === 'Enter' || event.key === ' ';
+    }
+}
+//# sourceMappingURL=event.controller.js.map

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseInputController } from './base.controller.js';
+export { InputValidationController, } from './validation.controller.js';
+export { ValidationStateController, } from './state.controller.js';
+export { InputEventController, } from './event.controller.js';
+export type { InputBaseController, InputHost, ErrorHandler } from './base.controller.js';
+export type { InputValidationEventDetail, InputValidationHost } from './validation.controller.js';
+export type { ValidationState, StateController, ValidationStateHost } from './state.controller.js';
+export type { EventController, InputEventHost } from './event.controller.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseInputController } from './base.controller.js';
+export { InputValidationController, } from './validation.controller.js';
+export { ValidationStateController, } from './state.controller.js';
+export { InputEventController, } from './event.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/input/controllers/state.controller.d.ts

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseInputController, InputHost } from './base.controller.js';
+import { InputValidationResult } from '../input.types.js';
+/**
+ * Validation states for tracking validation lifecycle
+ */
+export declare enum ValidationState {
+    Pristine = "pristine",
+    Pending = "pending",
+    Valid = "valid",
+    Invalid = "invalid",
+    Warning = "warning"
+}
+/**
+ * Enhanced input host interface for state management
+ */
+export interface ValidationStateHost extends InputHost {
+    validationTrigger: 'change' | 'blur' | 'submit';
+    validateOnChangeInput: boolean;
+    validateOnBlurInput: boolean;
+    validationDebounce?: number;
+    allowWarnings: boolean;
+}
+/**
+ * State controller interface for validation state management
+ */
+export interface StateController {
+    validationState: ValidationState;
+    isValidating: boolean;
+    isValid: boolean;
+    validationMessage: string;
+    validationResult: InputValidationResult;
+    setValidationState(state: ValidationState): void;
+    setValidationResult(result: InputValidationResult): void;
+    setValidating(validating: boolean): void;
+    shouldValidateOnChange(): boolean;
+    shouldValidateOnBlur(): boolean;
+    clearDebounceTimer(): void;
+    debounceValidation(callback: () => void): void;
+}
+/**
+ * Validation state controller manages all state-related aspects of validation
+ * including timing, debouncing, and state transitions.
+ */
+export declare class ValidationStateController extends BaseInputController implements StateController {
+    private _validationState;
+    private _isValidating;
+    private _isValid;
+    private _validationMessage;
+    private _validationResult;
+    private _debounceTimer;
+    protected get stateHost(): ValidationStateHost;
+    /**
+     * Get current validation state
+     */
+    get validationState(): ValidationState;
+    /**
+     * Check if currently validating
+     */
+    get isValidating(): boolean;
+    /**
+     * Get validation validity status
+     */
+    get isValid(): boolean;
+    /**
+     * Get validation message
+     */
+    get validationMessage(): string;
+    /**
+     * Get validation result
+     */
+    get validationResult(): InputValidationResult;
+    /**
+     * Set validation state and update component
+     */
+    setValidationState(state: ValidationState): void;
+    /**
+     * Set validation result and update related state
+     */
+    setValidationResult(result: InputValidationResult): void;
+    /**
+     * Set validating status
+     */
+    setValidating(validating: boolean): void;
+    /**
+     * Check if validation should occur on change events
+     */
+    shouldValidateOnChange(): boolean;
+    /**
+     * Check if validation should occur on blur events
+     */
+    shouldValidateOnBlur(): boolean;
+    /**
+     * Clear any existing debounce timer
+     */
+    clearDebounceTimer(): void;
+    /**
+     * Debounce validation execution
+     */
+    debounceValidation(callback: () => void): void;
+    /**
+     * Reset validation state to pristine
+     */
+    resetValidationState(): void;
+    /**
+     * Mark as touched (no longer pristine)
+     */
+    markAsTouched(): void;
+    /**
+     * Check if validation state is pristine
+     */
+    isPristine(): boolean;
+    /**
+     * Check if validation state has error
+     */
+    hasError(): boolean;
+    /**
+     * Check if validation state has warning
+     */
+    hasWarning(): boolean;
+    /**
+     * Check if validation is pending
+     */
+    isPending(): boolean;
+    /**
+     * Get state summary for external use
+     */
+    getStateSummary(): {
+        state: ValidationState;
+        isValidating: boolean;
+        isValid: boolean;
+        message: string;
+        result: InputValidationResult;
+        isPristine: boolean;
+        hasError: boolean;
+        hasWarning: boolean;
+        shouldValidateOnChange: boolean;
+        shouldValidateOnBlur: boolean;
+    };
+    /**
+     * Handle component lifecycle - cleanup timers
+     */
+    hostDisconnected(): void;
+    /**
+     * Dispatch state change events
+     */
+    private dispatchStateChangeEvent;
+}
+//# sourceMappingURL=state.controller.d.ts.map