@nuralyui/input 0.0.9 → 0.0.11

package/input.component.js

@@ -21,54 +21,120 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './input.style.js';
+import '../icon/icon.component.js';
 import { EMPTY_STRING } from './input.types.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { InputValidationUtils, InputRenderUtils } from './utils/index.js';
 import { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';
-const InputBaseMixin = NumberMixin(FocusMixin(SelectionMixin(NuralyUIBaseMixin(LitElement))));
-let NrInputElement = class NrInputElement extends InputBaseMixin {
+import { InputValidationController, InputEventController } from './controllers/index.js';
+/**
+ * Versatile input component with validation, multiple types, and interactive features.
+ *
+ * @example
+ * ```html
+ * <nr-input type="text" placeholder="Enter name"></nr-input>
+ * <nr-input type="password"></nr-input>
+ * <nr-input type="number" min="0" max="100"></nr-input>
+ * ```
+ *
+ * @fires nr-input - Value changes
+ * @fires nr-focus - Input focused
+ * @fires nr-blur - Input blurred
+ * @fires nr-enter - Enter key pressed
+ * @fires nr-clear - Clear button clicked
+ *
+ * @slot label - Input label
+ * @slot helper-text - Helper text
+ * @slot addon-before - Content before input
+ * @slot addon-after - Content after input
+ */
+let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(SelectionMixin(NuralyUIBaseMixin(LitElement)))) {
     constructor() {
         super(...arguments);
-        // ========================================
-        // PROPERTIES
-        // ========================================
+        this.validationController = new InputValidationController(this);
+        this.eventController = new InputEventController(this);
+        /** Disables the input */
         this.disabled = false;
+        /** Makes the input read-only */
         this.readonly = false;
+        /** Visual state (default, success, warning, error) */
         this.state = "default" /* INPUT_STATE.Default */;
+        /** Current input value */
         this.value = EMPTY_STRING;
+        /** Input size (small, medium, large) */
         this.size = "medium" /* INPUT_SIZE.Medium */;
+        /** Visual variant (outlined, underlined, filled) */
         this.variant = "underlined" /* INPUT_VARIANT.Underlined */;
+        /** Input type (text, password, number, email, etc.) */
         this.type = "text" /* INPUT_TYPE.TEXT */;
+        /** Placeholder text */
         this.placeholder = EMPTY_STRING;
+        /** HTML autocomplete attribute */
         this.autocomplete = 'off';
+        /** Shows copy button */
         this.withCopy = false;
+        /** Shows clear button */
         this.allowClear = false;
+        /** Shows character counter */
         this.showCount = false;
-        // ========================================
-        // STATE
-        // ========================================
+        /** Array of validation rules */
+        this.rules = [];
+        /** Validate on change */
+        this.validateOnChangeInput = true;
+        /** Validate on blur */
+        this.validateOnBlurInput = true;
+        /** Show validation status icon */
+        this.hasFeedback = false;
+        /** Allow validation warnings */
+        this.allowWarnings = false;
+        /** Custom validation trigger */
+        this.validationTrigger = 'change';
         this.inputType = EMPTY_STRING;
         this.hasAddonBefore = false;
         this.hasAddonAfter = false;
         this.focused = false;
-        // ========================================
-        // LIFECYCLE METHODS
-        // ========================================
+        this.requiredComponents = ['nr-icon'];
         /**
-         * Required components that must be registered for this component to work properly
+         * Handle validation events from the controller
          */
-        this.requiredComponents = ['nr-icon'];
+        this._handleValidationEvent = (event) => {
+            const customEvent = event;
+            const detail = customEvent.detail;
+            this.validationMessage = detail.validationMessage || '';
+            let newState = "default" /* INPUT_STATE.Default */;
+            if (detail.validationResult.hasError) {
+                newState = "error" /* INPUT_STATE.Error */;
+            }
+            else if (detail.validationResult.hasWarning && this.allowWarnings) {
+                newState = "warning" /* INPUT_STATE.Warning */;
+            }
+            else if (detail.validationResult.isValid && this.value && this.hasFeedback) {
+                newState = "success" /* INPUT_STATE.Success */;
+            }
+            if (this.state !== newState) {
+                this.state = newState;
+            }
+            this.requestUpdate();
+        };
+        this._handleKeyDown = (keyDownEvent) => {
+            this.eventController.handleKeyDown(keyDownEvent);
+        };
+        this._valueChange = (e) => {
+            this.eventController.handleValueChange(e);
+        };
+        this._focusEvent = (e) => {
+            this.eventController.handleFocus(e);
+        };
+        this._blurEvent = (e) => {
+            this.eventController.handleBlur(e);
+        };
+        this._handleIconKeydown = (keyDownEvent) => {
+            this.eventController.handleIconKeydown(keyDownEvent);
+        };
     }
-    // Use manual query instead of @query decorator to avoid TypeScript mixin issues
     get _input() {
         return this.shadowRoot.querySelector('#input');
     }
-    // ========================================
-    // COMPUTED PROPERTIES
-    // ========================================
-    /**
-     * Get the character count display text
-     */
     get characterCountDisplay() {
         const currentLength = this.value.length;
         if (this.maxLength) {
@@ -76,52 +142,48 @@ let NrInputElement = class NrInputElement extends InputBaseMixin {
         }
         return `${currentLength}`;
     }
-    /**
-     * Check if character count is over the limit
-     */
     get isOverCharacterLimit() {
         return this.maxLength ? this.value.length > this.maxLength : false;
     }
-    // ========================================
-    // COMPUTED PROPERTIES
-    // ========================================
-    /**
-     * Get the input element
-     */
     get input() {
         return this._input;
     }
-    /**
-     * Override inputElement getter from mixins to use our @query property
-     */
     get inputElement() {
         return this._input;
     }
-    /**
-     * Check for required dependencies when component is connected to DOM
-     */
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('nr-validation', this._handleValidationEvent);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        this.removeEventListener('nr-validation', this._handleValidationEvent);
+        (_b = (_a = this.validationController).clearDebounceTimer) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     willUpdate(_changedProperties) {
         super.willUpdate(_changedProperties);
-        // Initialize inputType when type changes or on first render
         if (_changedProperties.has('type') || !this.inputType) {
             this.inputType = this.type;
         }
-        // Set default value for number inputs with min
         if (_changedProperties.has('type') || _changedProperties.has('min')) {
             if (this.type === "number" /* INPUT_TYPE.NUMBER */ && this.min && !this.value) {
                 this.value = this.min;
             }
         }
-        // Validate numeric properties when they change
         if (_changedProperties.has('type') ||
             _changedProperties.has('min') ||
             _changedProperties.has('max') ||
             _changedProperties.has('step')) {
             InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);
         }
+        if (_changedProperties.has('type') ||
+            _changedProperties.has('required') ||
+            _changedProperties.has('maxLength') ||
+            _changedProperties.has('min') ||
+            _changedProperties.has('max')) {
+            this.validationController.setupValidationRules();
+        }
     }
     updated(_changedProperties) {
         if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {
@@ -146,23 +208,12 @@ let NrInputElement = class NrInputElement extends InputBaseMixin {
     firstUpdated() {
         this._checkInitialSlotContent();
     }
-    // ========================================
-    // PRIVATE METHODS
-    // ========================================
-    /**
-     * Check initial slot content on first render
-     */
     _checkInitialSlotContent() {
-        // Check for addon-before content
         const addonBeforeElements = this.querySelectorAll('[slot="addon-before"]');
         this.hasAddonBefore = addonBeforeElements.length > 0;
-        // Check for addon-after content  
         const addonAfterElements = this.querySelectorAll('[slot="addon-after"]');
         this.hasAddonAfter = addonAfterElements.length > 0;
     }
-    /**
-     * Handle slot changes to determine addon visibility
-     */
     _handleSlotChange(e) {
         const slot = e.target;
         const slotName = slot.name;
@@ -173,188 +224,22 @@ let NrInputElement = class NrInputElement extends InputBaseMixin {
             this.hasAddonAfter = slot.assignedElements().length > 0;
         }
     }
-    // ========================================
-    // FOCUS MANAGEMENT METHODS
-    // ========================================
-    // Focus methods are provided by InputMixin
-    // ========================================
-    // EVENT HANDLING METHODS
-    // ========================================
-    // Event handling methods moved to EventHandlerMixin
-    _handleKeyDown(keyDownEvent) {
-        // Prevent all key input when readonly - use mixin utility
-        if (this.readonly && !this.isReadonlyKeyAllowed(keyDownEvent)) {
-            keyDownEvent.preventDefault();
-            return;
-        }
-        // Handle Enter key
-        if (keyDownEvent.key === 'Enter') {
-            this.dispatchCustomEvent('nr-enter', {
-                target: keyDownEvent.target,
-                value: this.value,
-                originalEvent: keyDownEvent
-            });
-            return;
-        }
-        // Prevent non-numeric input for number type
-        if (this.type === "number" /* INPUT_TYPE.NUMBER */) {
-            InputValidationUtils.preventNonNumericInput(keyDownEvent, this.min);
-            if (keyDownEvent.defaultPrevented) {
-                this.dispatchCustomEvent('nr-invalid-key', {
-                    key: keyDownEvent.key,
-                    target: keyDownEvent.target,
-                    value: this.value,
-                    originalEvent: keyDownEvent
-                });
-            }
-        }
-    }
-    _valueChange(e) {
-        if (this.readonly) {
-            e.preventDefault();
-            return;
-        }
-        const target = e.target;
-        const newValue = target.value;
-        // Check character limit
-        if (this.maxLength && newValue.length > this.maxLength) {
-            this.dispatchCustomEvent('nr-character-limit-exceeded', {
-                value: newValue,
-                target: target,
-                limit: this.maxLength,
-                originalEvent: e
-            });
-            // Note: HTML maxlength attribute usually prevents this, but we dispatch event for awareness
-        }
-        if (this.type === "number" /* INPUT_TYPE.NUMBER */ && newValue) {
-            const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);
-            if (!validation.isValid) {
-                console.warn(validation.warnings[0]);
-                this.dispatchValidationEvent('nr-validation-error', {
-                    value: newValue,
-                    target: target,
-                    error: validation.warnings[0],
-                    originalEvent: e,
-                    isValid: false
-                });
-                return;
-            }
-            validation.warnings.forEach(warning => console.warn(warning));
-        }
-        this.value = newValue;
-        this.dispatchInputEvent('nr-input', {
-            value: this.value,
-            target: target,
-            originalEvent: e
-        });
-    }
-    _focusEvent(e) {
-        var _a;
-        this.focused = true;
-        // Handle cursor restoration if requested
-        const input = e.target;
-        if (input.dataset.restoreCursor) {
-            const position = parseInt(input.dataset.restoreCursor, 10);
-            this.setCursorPosition(position);
-            delete input.dataset.restoreCursor;
-        }
-        const focusDetail = {
-            focused: true,
-            cursorPosition: (_a = this.getCursorPosition()) !== null && _a !== void 0 ? _a : undefined,
-            selectedText: this.getSelectedText()
-        };
-        this.dispatchFocusEvent('nr-focus', Object.assign({ target: e.target, value: this.value }, focusDetail));
-        this.dispatchFocusEvent('nr-focus-change', focusDetail);
-    }
-    _blurEvent(e) {
-        var _a;
-        this.focused = false;
-        const focusDetail = {
-            focused: false,
-            cursorPosition: (_a = this.getCursorPosition()) !== null && _a !== void 0 ? _a : undefined,
-            selectedText: this.getSelectedText()
-        };
-        this.dispatchFocusEvent('nr-blur', Object.assign({ target: e.target, value: this.value }, focusDetail));
-        this.dispatchFocusEvent('nr-focus-change', focusDetail);
-    }
-    _handleIconKeydown(keyDownEvent) {
-        if (this.isActivationKey(keyDownEvent)) {
-            keyDownEvent.preventDefault();
-            const target = keyDownEvent.target;
-            if (target.id === 'copy-icon') {
-                this._onCopy();
-            }
-            else if (target.id === 'clear-icon') {
-                this._onClear();
-            }
-            else if (target.id === 'password-icon') {
-                this._togglePasswordIcon();
-            }
-            else if (target.closest('#number-icons')) {
-                if (target.getAttribute('name') === 'plus') {
-                    this._increment();
-                }
-                else if (target.getAttribute('name') === 'minus') {
-                    this._decrement();
-                }
-            }
-        }
-    }
     _onCopy() {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const input = this.shadowRoot.getElementById('input');
-                input.select();
-                yield navigator.clipboard.writeText(input.value);
-                this.dispatchActionEvent('nr-copy-success', {
-                    value: input.value,
-                    action: 'copy'
-                });
-            }
-            catch (error) {
-                this.dispatchCustomEvent('nr-copy-error', { error });
-            }
+            yield this.eventController.handleCopy();
         });
     }
     _onClear() {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        const previousValue = this.value;
-        this.value = EMPTY_STRING;
-        // Update the input element value
-        if (this.input) {
-            this.input.value = EMPTY_STRING;
-        }
-        this.dispatchActionEvent('nr-clear', {
-            previousValue,
-            newValue: this.value,
-            target: this.input,
-            action: 'clear'
-        });
-        // Also dispatch input event for consistency
-        this.dispatchInputEvent('nr-input', {
-            value: this.value,
-            target: this.input,
-            action: 'clear'
-        });
+        this.eventController.handleClear();
     }
-    // ========================================
-    // OPERATION METHODS
-    // ========================================
     _increment() {
-        this.increment();
+        this.eventController.handleIncrement();
     }
     _decrement() {
-        this.decrement();
+        this.eventController.handleDecrement();
     }
     _togglePasswordIcon() {
-        if (this.inputType === "password" /* INPUT_TYPE.PASSWORD */) {
-            this.inputType = "text" /* INPUT_TYPE.TEXT */;
-        }
-        else if (this.inputType === "text" /* INPUT_TYPE.TEXT */ && this.type === "password" /* INPUT_TYPE.PASSWORD */) {
-            this.inputType = "password" /* INPUT_TYPE.PASSWORD */;
-        }
+        this.eventController.handleTogglePassword();
     }
     _getAriaDescribedBy() {
         var _a;
@@ -365,25 +250,107 @@ let NrInputElement = class NrInputElement extends InputBaseMixin {
         }
         return describedBy.join(' ') || '';
     }
-    // ========================================
-    // RENDER METHODS
-    // ========================================
+    /**
+     * Setup default validation rules based on input properties
+     */
+    /**
+     * Override the form mixin's validateValue method with controller logic
+     */
+    validateValue(_value) {
+        return this.validationController.validate();
+    }
+    /**
+     * Add validation rule dynamically
+     */
+    addRule(rule) {
+        this.validationController.addRule(rule);
+    }
+    /**
+     * Remove validation rule
+     */
+    removeRule(predicate) {
+        this.validationController.removeRule(predicate);
+    }
+    /**
+     * Clear all validation rules
+     */
+    clearRules() {
+        this.validationController.clearRules();
+    }
+    /**
+     * Get current validation status
+     */
+    getValidationStatus() {
+        return this.validationController.getValidationStatus();
+    }
+    /**
+     * Trigger validation manually
+     */
+    validateInput() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = this.validationController.validate();
+            if (this.validationController.isValidating) {
+                return new Promise((resolve) => {
+                    const checkValidation = () => {
+                        if (!this.validationController.isValidating) {
+                            resolve(this.validationController.isValid);
+                        }
+                        else {
+                            setTimeout(checkValidation, 50);
+                        }
+                    };
+                    checkValidation();
+                });
+            }
+            return result;
+        });
+    }
+    /**
+     * Set validation state externally (for form integration)
+     */
+    setValidationStatus(result) {
+        this.validationController.setValidationStatus(result);
+    }
+    /**
+     * Get validation classes for CSS styling
+     */
+    getValidationClasses() {
+        return this.validationController.getValidationClasses();
+    }
+    /**
+     * Render validation feedback icon
+     */
+    renderValidationIcon() {
+        return this.validationController.renderValidationIcon();
+    }
+    /**
+     * Render validation message
+     */
+    renderValidationMessage() {
+        return this.validationController.renderValidationMessage();
+    }
     render() {
+        const validationClasses = this.getValidationClasses();
+        const validationRenderState = this.validationController.getValidationRenderState();
         return html `
       <slot name="label"></slot>
-      <div class="input-wrapper" data-theme="${this.currentTheme}">
+      <div class="input-wrapper ${Object.entries(validationClasses).filter(([, value]) => value).map(([key]) => key).join(' ')}" 
+           part="input-wrapper" 
+           data-theme="${this.currentTheme}"
+           ?data-validating="${validationRenderState.isValidating}">
         ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e) => this._handleSlotChange(e))}
-        <div data-size=${this.size} id="input-container">
+        <div data-size=${this.size} id="input-container" part="input-container">
           ${InputRenderUtils.renderPrefix()}
           <input
             id="input"
+            part="input"
             .disabled=${this.disabled}
             .readOnly=${this.readonly}
             .value=${this.value}
             .placeholder=${this.placeholder}
             .type="${this.inputType}"
             .autocomplete=${this.autocomplete}
-            aria-invalid=${this.state === "error" /* INPUT_STATE.Error */ ? 'true' : 'false'}
+            aria-invalid=${validationRenderState.validationResult.hasError ? 'true' : 'false'}
             aria-describedby=${this._getAriaDescribedBy()}
             @input=${this._valueChange}
             @focus=${this._focusEvent}
@@ -393,7 +360,7 @@ let NrInputElement = class NrInputElement extends InputBaseMixin {
           ${InputRenderUtils.renderSuffix()}
           ${InputRenderUtils.renderCopyIcon(this.withCopy, this.disabled, this.readonly, () => this._onCopy(), (e) => this._handleIconKeydown(e))}
           ${InputRenderUtils.renderClearIcon(this.allowClear, this.value, this.disabled, this.readonly, () => this._onClear(), (e) => this._handleIconKeydown(e))}
-          ${InputRenderUtils.renderStateIcon(this.state)}
+          ${validationRenderState.hasValidationFeedback ? this.renderValidationIcon() : InputRenderUtils.renderStateIcon(this.state)}
           ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}
           ${InputRenderUtils.renderPasswordIcon(this.type, this.inputType, this.disabled, this.readonly, () => this._togglePasswordIcon(), (e) => this._handleIconKeydown(e))}
           ${InputRenderUtils.renderNumberIcons(this.type, this.state, this.disabled, this.readonly, () => this._increment(), () => this._decrement(), (e) => this._handleIconKeydown(e))}
@@ -401,8 +368,9 @@ let NrInputElement = class NrInputElement extends InputBaseMixin {
         ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e) => this._handleSlotChange(e))}
       </div>
       <slot name="helper-text"></slot>
+      ${this.renderValidationMessage()}
       ${this.showCount ? html `
-        <div class="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
+        <div class="character-count" part="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
           ${this.characterCountDisplay}
         </div>
       ` : ''}
@@ -446,6 +414,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NrInputElement.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrInputElement.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrInputElement.prototype, "withCopy", void 0);
@@ -458,6 +432,33 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], NrInputElement.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Array })
+], NrInputElement.prototype, "rules", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-change' })
+], NrInputElement.prototype, "validateOnChangeInput", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-blur' })
+], NrInputElement.prototype, "validateOnBlurInput", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-feedback' })
+], NrInputElement.prototype, "hasFeedback", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-warnings' })
+], NrInputElement.prototype, "allowWarnings", void 0);
+__decorate([
+    property({ type: String, attribute: 'validation-trigger' })
+], NrInputElement.prototype, "validationTrigger", void 0);
+__decorate([
+    property({ type: Number, attribute: 'validation-debounce' })
+], NrInputElement.prototype, "validationDebounce", void 0);
+__decorate([
+    property({ type: String })
+], NrInputElement.prototype, "label", void 0);
+__decorate([
+    state()
+], NrInputElement.prototype, "validationMessage", void 0);
 __decorate([
     state()
 ], NrInputElement.prototype, "inputType", void 0);