@nuralyui/input 0.0.9 → 0.0.10

package/input.component.d.ts

@@ -4,65 +4,109 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement, PropertyValues } from 'lit';
-import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT } from './input.types.js';
-declare const InputBaseMixin: (new (...args: any[]) => import("./mixins/number-mixin.js").NumberCapable) & (new (...args: any[]) => import("./mixins/focus-mixin.js").FocusCapable) & (new (...args: any[]) => import("./mixins/selection-mixin.js").SelectionCapable) & (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
-export declare class NrInputElement extends InputBaseMixin {
+import '../icon/icon.component.js';
+import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, ValidationRule, InputValidationResult } from './input.types.js';
+import { InputValidationHost, InputEventHost } from './controllers/index.js';
+declare const NrInputElement_base: (new (...args: any[]) => import("./mixins/number-mixin.js").NumberCapable) & (new (...args: any[]) => import("./mixins/focus-mixin.js").FocusCapable) & (new (...args: any[]) => import("./mixins/selection-mixin.js").SelectionCapable) & (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * 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
+ */
+export declare class NrInputElement extends NrInputElement_base implements InputValidationHost, InputEventHost {
     static styles: import("lit").CSSResult[];
+    private validationController;
+    private eventController;
+    /** Disables the input */
     disabled: boolean;
+    /** Makes the input read-only */
     readonly: boolean;
+    /** Visual state (default, success, warning, error) */
     state: INPUT_STATE;
+    /** Current input value */
     value: string;
+    /** Input size (small, medium, large) */
     size: INPUT_SIZE;
+    /** Visual variant (outlined, underlined, filled) */
     variant: INPUT_VARIANT;
+    /** Input type (text, password, number, email, etc.) */
     type: INPUT_TYPE;
+    /** Step value for number inputs */
     step?: string;
+    /** Minimum value for number inputs */
     min?: string;
+    /** Maximum value for number inputs */
     max?: string;
+    /** Placeholder text */
     placeholder: string;
+    /** HTML autocomplete attribute */
     autocomplete: string;
+    /** Field name for form submission */
+    name?: string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Shows copy button */
     withCopy: boolean;
+    /** Shows clear button */
     allowClear: boolean;
+    /** Shows character counter */
     showCount: boolean;
+    /** Maximum character limit */
     maxLength?: number;
+    /** Array of validation rules */
+    rules: ValidationRule[];
+    /** Validate on change */
+    validateOnChangeInput: boolean;
+    /** Validate on blur */
+    validateOnBlurInput: boolean;
+    /** Show validation status icon */
+    hasFeedback: boolean;
+    /** Allow validation warnings */
+    allowWarnings: boolean;
+    /** Custom validation trigger */
+    validationTrigger: 'change' | 'blur' | 'submit';
+    /** Validation debounce delay in milliseconds */
+    validationDebounce?: number;
+    /** Input label for better error messages */
+    label?: string;
+    /** Validation message */
+    validationMessage?: string;
     inputType: string;
     hasAddonBefore: boolean;
     hasAddonAfter: boolean;
     focused: boolean;
     private get _input();
-    /**
-     * Get the character count display text
-     */
     get characterCountDisplay(): string;
-    /**
-     * Check if character count is over the limit
-     */
     get isOverCharacterLimit(): boolean;
-    /**
-     * Get the input element
-     */
     protected get input(): HTMLInputElement;
-    /**
-     * Override inputElement getter from mixins to use our @query property
-     */
     protected get inputElement(): HTMLInputElement;
-    /**
-     * Required components that must be registered for this component to work properly
-     */
     requiredComponents: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
-     * Check for required dependencies when component is connected to DOM
+     * Handle validation events from the controller
      */
-    connectedCallback(): void;
+    private _handleValidationEvent;
     willUpdate(_changedProperties: PropertyValues): void;
     updated(_changedProperties: PropertyValues): void;
     firstUpdated(): void;
-    /**
-     * Check initial slot content on first render
-     */
     private _checkInitialSlotContent;
-    /**
-     * Handle slot changes to determine addon visibility
-     */
     private _handleSlotChange;
     private _handleKeyDown;
     private _valueChange;
@@ -75,6 +119,54 @@ export declare class NrInputElement extends InputBaseMixin {
     private _decrement;
     private _togglePasswordIcon;
     private _getAriaDescribedBy;
+    /**
+     * Setup default validation rules based on input properties
+     */
+    /**
+     * Override the form mixin's validateValue method with controller logic
+     */
+    protected validateValue(_value: string): boolean;
+    /**
+     * Add validation rule dynamically
+     */
+    addRule(rule: ValidationRule): void;
+    /**
+     * Remove validation rule
+     */
+    removeRule(predicate: (rule: ValidationRule) => boolean): void;
+    /**
+     * Clear all validation rules
+     */
+    clearRules(): void;
+    /**
+     * Get current validation status
+     */
+    getValidationStatus(): {
+        isValid: boolean;
+        isValidating: boolean;
+        errors: string[];
+        warnings: string[];
+    };
+    /**
+     * Trigger validation manually
+     */
+    validateInput(): Promise<boolean>;
+    /**
+     * Set validation state externally (for form integration)
+     */
+    setValidationStatus(result: InputValidationResult): void;
+    /**
+     * Get validation classes for CSS styling
+     */
+    protected getValidationClasses(): Record<string, boolean>;
+    /**
+     * Render validation feedback icon
+     */
+    private renderValidationIcon;
+    /**
+     * Render validation message
+     */
+    private renderValidationMessage;
     render(): import("lit").TemplateResult<1>;
 }
 export {};