@nuralyui/form 0.1.0

package/controllers/validation.controller.js

@@ -0,0 +1,236 @@
+/**
+ * @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 { FormValidationState, FORM_EVENTS } from '../form.types.js';
+/**
+ * Controller that coordinates validation across all form fields
+ * This does NOT perform validation - it coordinates existing component validations
+ */
+export class FormValidationController {
+    constructor(host) {
+        this.host = host;
+        this.fields = new Map();
+        this.validationState = FormValidationState.Pristine;
+        this.validationPromise = null;
+    }
+    /**
+     * Register a form field for validation coordination
+     */
+    registerField(element) {
+        var _a;
+        const name = element.name || element.getAttribute('name') || `field-${Date.now()}`;
+        const field = {
+            element,
+            name,
+            value: element.value,
+            isValid: element.getValidationStatus().isValid,
+            validationMessage: element.validationMessage || '',
+            required: (_a = element.required) !== null && _a !== void 0 ? _a : false,
+            touched: false,
+            dirty: false
+        };
+        this.fields.set(name, field);
+        // Listen for field changes
+        this.addFieldListeners(element, name);
+    }
+    /**
+     * Unregister a form field
+     */
+    unregisterField(name) {
+        const field = this.fields.get(name);
+        if (field) {
+            this.removeFieldListeners(field.element);
+            this.fields.delete(name);
+        }
+    }
+    /**
+     * Add event listeners to a form field
+     */
+    addFieldListeners(element, fieldName) {
+        element.addEventListener('nr-validation', (event) => this.handleFieldValidation(fieldName, event));
+    }
+    /**
+     * Remove event listeners from a form field
+     */
+    removeFieldListeners(_element) {
+        // Remove all event listeners (implementation depends on your needs)
+        // You might want to store listener references for proper cleanup
+    }
+    /**
+     * Handle field validation event
+     */
+    handleFieldValidation(fieldName, event) {
+        const field = this.fields.get(fieldName);
+        if (!field)
+            return;
+        if (event && event.detail) {
+            // Use the detailed validation information from the nr-validation event
+            field.isValid = event.detail.isValid || false;
+            field.validationMessage = event.detail.validationMessage || '';
+        }
+        else {
+            // Fallback to ValidatableComponent validation
+            const status = field.element.getValidationStatus();
+            field.isValid = status.isValid;
+            field.validationMessage = field.element.validationMessage || '';
+        }
+        // Update form validation state based on all fields
+        this.updateFormValidationState();
+    }
+    /**
+     * Update form validation state based on current field states
+     */
+    updateFormValidationState() {
+        const invalidFields = this.getInvalidFields();
+        const isFormValid = invalidFields.length === 0;
+        this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;
+        const result = {
+            isValid: isFormValid,
+            invalidFields,
+            validationErrors: this.buildValidationErrors(),
+            summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`
+        };
+        this.dispatchValidationEvent(result);
+    }
+    /**
+     * Build validation errors object from current field states
+     */
+    buildValidationErrors() {
+        const errors = {};
+        for (const [name, field] of this.fields) {
+            if (!field.isValid && field.validationMessage) {
+                errors[name] = field.validationMessage;
+            }
+        }
+        return errors;
+    }
+    /**
+     * Validate all form fields (coordinates existing validations)
+     */
+    validateForm() {
+        // Return existing promise if validation is in progress
+        if (this.validationPromise) {
+            return this.validationPromise;
+        }
+        this.validationState = FormValidationState.Pending;
+        this.validationPromise = this.performValidation();
+        return this.validationPromise;
+    }
+    /**
+     * Perform the actual validation coordination
+     */
+    performValidation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const invalidFields = [];
+            const validationErrors = {};
+            // Check each field's validation state
+            for (const [name, field] of this.fields) {
+                // Trigger validation on the field component itself
+                const status = field.element.getValidationStatus();
+                const isValid = status.isValid;
+                field.isValid = isValid;
+                field.validationMessage = field.element.validationMessage || '';
+                if (!isValid) {
+                    invalidFields.push(field);
+                    validationErrors[name] = field.validationMessage;
+                }
+            }
+            const isFormValid = invalidFields.length === 0;
+            this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;
+            const result = {
+                isValid: isFormValid,
+                invalidFields,
+                validationErrors,
+                summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`
+            };
+            this.dispatchValidationEvent(result);
+            this.validationPromise = null;
+            return result;
+        });
+    }
+    /**
+     * Get current validation state
+     */
+    getValidationState() {
+        return this.validationState;
+    }
+    /**
+     * Get all registered fields
+     */
+    getFields() {
+        return Array.from(this.fields.values());
+    }
+    /**
+     * Get invalid fields
+     */
+    getInvalidFields() {
+        return Array.from(this.fields.values()).filter(field => !field.isValid);
+    }
+    /**
+     * Check if form is valid
+     */
+    isValid() {
+        return this.validationState === FormValidationState.Valid &&
+            Array.from(this.fields.values()).every(field => field.isValid);
+    }
+    /**
+     * Focus first invalid field
+     */
+    focusFirstInvalidField() {
+        const invalidField = Array.from(this.fields.values()).find(field => !field.isValid);
+        if (invalidField && typeof invalidField.element.focus === 'function') {
+            invalidField.element.focus();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Reset all fields
+     */
+    reset() {
+        for (const field of this.fields.values()) {
+            // Reset using ValidatableComponent interface if available
+            if ('clearValidation' in field.element && typeof field.element.clearValidation === 'function') {
+                field.element.clearValidation();
+            }
+            // Reset value if component supports it
+            if ('value' in field.element) {
+                field.element.value = '';
+            }
+            field.touched = false;
+            field.dirty = false;
+            field.isValid = true;
+            field.validationMessage = '';
+        }
+        this.validationState = FormValidationState.Pristine;
+        this.dispatchResetEvent();
+    }
+    /**
+     * Dispatch validation event
+     */
+    dispatchValidationEvent(result) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.VALIDATION_CHANGED, {
+            validationResult: result
+        });
+    }
+    /**
+     * Dispatch reset event
+     */
+    dispatchResetEvent() {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.RESET, {});
+    }
+}
+//# sourceMappingURL=validation.controller.js.map

package/controllers/validation.controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.controller.js","sourceRoot":"","sources":["../../../../src/components/form/controllers/validation.controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {\n    FormField,\n    FormValidationResult,\n    FormValidationState,\n    FORM_EVENTS\n} from '../form.types.js';\nimport { ValidatableComponent } from '../../../shared/validation.types.js';\n\n/**\n * Controller that coordinates validation across all form fields\n * This does NOT perform validation - it coordinates existing component validations\n */\nexport class FormValidationController {\n  private fields: Map<string, FormField> = new Map();\n  private validationState: FormValidationState = FormValidationState.Pristine;\n  private validationPromise: Promise<FormValidationResult> | null = null;\n\n  constructor(private host: any) {}\n\n  /**\n   * Register a form field for validation coordination\n   */\n  registerField(element: HTMLElement & ValidatableComponent): void {\n    const name = element.name || element.getAttribute('name') || `field-${Date.now()}`;\n    \n    const field: FormField = {\n      element,\n      name,\n      value: element.value,\n      isValid: element.getValidationStatus().isValid,\n      validationMessage: element.validationMessage || '',\n      required: element.required ?? false,\n      touched: false,\n      dirty: false\n    };\n\n    this.fields.set(name, field);\n\n    // Listen for field changes\n    this.addFieldListeners(element, name);\n  }\n\n  /**\n   * Unregister a form field\n   */\n  unregisterField(name: string): void {\n    const field = this.fields.get(name);\n    if (field) {\n      this.removeFieldListeners(field.element);\n      this.fields.delete(name);\n    }\n  }\n\n  /**\n   * Add event listeners to a form field\n   */\n  private addFieldListeners(element: HTMLElement, fieldName: string): void {\n    element.addEventListener('nr-validation', (event) => this.handleFieldValidation(fieldName, event as CustomEvent));\n  }\n\n  /**\n   * Remove event listeners from a form field\n   */\n  private removeFieldListeners(_element: HTMLElement): void {\n    // Remove all event listeners (implementation depends on your needs)\n    // You might want to store listener references for proper cleanup\n  }\n\n\n  /**\n   * Handle field validation event\n   */\n  private handleFieldValidation(fieldName: string, event?: CustomEvent): void {\n    const field = this.fields.get(fieldName);\n    if (!field) return;\n\n    if (event && event.detail) {\n      // Use the detailed validation information from the nr-validation event\n      field.isValid = event.detail.isValid || false;\n      field.validationMessage = event.detail.validationMessage || '';\n    } else {\n      // Fallback to ValidatableComponent validation\n      const status = field.element.getValidationStatus();\n      field.isValid = status.isValid;\n      field.validationMessage = field.element.validationMessage || '';\n    }\n\n    // Update form validation state based on all fields\n    this.updateFormValidationState();\n  }\n\n  /**\n   * Update form validation state based on current field states\n   */\n  private updateFormValidationState(): void {\n    const invalidFields = this.getInvalidFields();\n    const isFormValid = invalidFields.length === 0;\n    \n    this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;\n    \n    const result: FormValidationResult = {\n      isValid: isFormValid,\n      invalidFields,\n      validationErrors: this.buildValidationErrors(),\n      summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`\n    };\n    \n    this.dispatchValidationEvent(result);\n  }\n\n  /**\n   * Build validation errors object from current field states\n   */\n  private buildValidationErrors(): Record<string, string> {\n    const errors: Record<string, string> = {};\n    for (const [name, field] of this.fields) {\n      if (!field.isValid && field.validationMessage) {\n        errors[name] = field.validationMessage;\n      }\n    }\n    return errors;\n  }\n\n \n\n  /**\n   * Validate all form fields (coordinates existing validations)\n   */\n  validateForm(): Promise<FormValidationResult> {\n    // Return existing promise if validation is in progress\n    if (this.validationPromise) {\n      return this.validationPromise;\n    }\n\n    this.validationState = FormValidationState.Pending;\n\n    this.validationPromise = this.performValidation();\n    \n    return this.validationPromise;\n  }\n\n  /**\n   * Perform the actual validation coordination\n   */\n  private async performValidation(): Promise<FormValidationResult> {\n    const invalidFields: FormField[] = [];\n    const validationErrors: Record<string, string> = {};\n\n    // Check each field's validation state\n    for (const [name, field] of this.fields) {\n      // Trigger validation on the field component itself\n      const status = field.element.getValidationStatus();\n      const isValid = status.isValid;\n      \n      field.isValid = isValid;\n      field.validationMessage = field.element.validationMessage || '';\n\n      if (!isValid) {\n        invalidFields.push(field);\n        validationErrors[name] = field.validationMessage;\n      }\n    }\n\n    const isFormValid = invalidFields.length === 0;\n    this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;\n\n    const result: FormValidationResult = {\n      isValid: isFormValid,\n      invalidFields,\n      validationErrors,\n      summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`\n    };\n\n    this.dispatchValidationEvent(result);\n\n    this.validationPromise = null;\n\n    return result;\n  }\n\n  /**\n   * Get current validation state\n   */\n  getValidationState(): FormValidationState {\n    return this.validationState;\n  }\n\n  /**\n   * Get all registered fields\n   */\n  getFields(): FormField[] {\n    return Array.from(this.fields.values());\n  }\n\n  /**\n   * Get invalid fields\n   */\n  getInvalidFields(): FormField[] {\n    return Array.from(this.fields.values()).filter(field => !field.isValid);\n  }\n\n  /**\n   * Check if form is valid\n   */\n  isValid(): boolean {\n    return this.validationState === FormValidationState.Valid && \n           Array.from(this.fields.values()).every(field => field.isValid);\n  }\n\n  /**\n   * Focus first invalid field\n   */\n  focusFirstInvalidField(): boolean {\n    const invalidField = Array.from(this.fields.values()).find(field => !field.isValid);\n    if (invalidField && typeof invalidField.element.focus === 'function') {\n      invalidField.element.focus();\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * Reset all fields\n   */\n  reset(): void {\n    for (const field of this.fields.values()) {\n      // Reset using ValidatableComponent interface if available\n      if ('clearValidation' in field.element && typeof field.element.clearValidation === 'function') {\n        field.element.clearValidation();\n      }\n      // Reset value if component supports it\n      if ('value' in field.element) {\n        field.element.value = '';\n      }\n      field.touched = false;\n      field.dirty = false;\n      field.isValid = true;\n      field.validationMessage = '';\n    }\n    \n    this.validationState = FormValidationState.Pristine;\n    this.dispatchResetEvent();\n  }\n\n  \n\n  /**\n   * Dispatch validation event\n   */\n  private dispatchValidationEvent(result: FormValidationResult): void {\n    (this.host as any).dispatchCustomEvent?.(FORM_EVENTS.VALIDATION_CHANGED, {\n      validationResult: result\n    });\n  }\n\n  /**\n   * Dispatch reset event\n   */\n  private dispatchResetEvent(): void {\n    (this.host as any).dispatchCustomEvent?.(FORM_EVENTS.RESET, {});\n  }\n}\n"]}

package/form.component.d.ts

@@ -0,0 +1,279 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { FormConfig, FormValidationState, FormSubmissionState } from './form.types.js';
+declare const NrFormElement_base: (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;
+/**
+ * Comprehensive form component with field management and validation API
+ *
+ * Key Features:
+ * - Coordinates validation across all form fields (does NOT validate itself)
+ * - Handles form submission with built-in validation checks
+ * - Provides form state management and events
+ * - Integrates with existing component validation controllers
+ * - Supports both programmatic and user-driven interactions
+ * - Comprehensive API for field manipulation and validation
+ *
+ * @example Basic Usage
+ * ```html
+ * <nr-form @nr-form-submit-success="${handleSuccess}" validate-on-change>
+ *   <nr-input name="username" required></nr-input>
+ *   <nr-input name="email" type="email" required></nr-input>
+ *   <nr-button type="submit">Submit</nr-button>
+ * </nr-form>
+ * ```
+ *
+ * @example Programmatic Usage
+ * ```typescript
+ * const form = document.querySelector('nr-form');
+ *
+ * // Set field values
+ * form.setFieldsValue({ username: 'john', email: 'john@example.com' });
+ *
+ * // Get field values
+ * const values = form.getFieldsValue();
+ *
+ * // Validate and submit
+ * try {
+ *   const values = await form.finish();
+ *   console.log('Form submitted:', values);
+ * } catch (errors) {
+ *   console.log('Validation failed:', errors);
+ * }
+ *
+ * // Reset specific fields
+ * form.resetFields(['username']);
+ * ```
+ *
+ * @fires nr-form-validation-changed - Validation state changes
+ * @fires nr-form-field-changed - Individual field changes
+ * @fires nr-form-submit-attempt - Form submission attempted
+ * @fires nr-form-submit-success - Form submitted successfully
+ * @fires nr-form-submit-error - Form submission failed
+ * @fires nr-form-reset - Form was reset
+ *
+ * @slot default - Form content (inputs, buttons, etc.)
+ */
+export declare class NrFormElement extends NrFormElement_base {
+    static styles: import("lit").CSSResult;
+    /** Form configuration */
+    config: FormConfig;
+    /** Enable real-time validation on field changes */
+    validateOnChange: boolean;
+    /** Enable validation on field blur */
+    validateOnBlur: boolean;
+    /** Prevent form submission if validation fails */
+    preventInvalidSubmission: boolean;
+    /** Reset form after successful submission */
+    resetOnSuccess: boolean;
+    /** Form action URL for native submission */
+    action?: string;
+    /** Form method for native submission */
+    method: 'GET' | 'POST';
+    /** Form encoding type */
+    enctype: string;
+    /** Target for form submission */
+    target?: string;
+    /** Disable the entire form */
+    disabled: boolean;
+    /** Form validation state */
+    private _validationState;
+    /** Form submission state */
+    private _submissionState;
+    /** Validation controller */
+    private validationController;
+    /** Submission controller */
+    private submissionController;
+    /** Get current validation state */
+    get validationState(): FormValidationState;
+    /** Get current submission state */
+    get submissionState(): FormSubmissionState;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    firstUpdated(): void;
+    /**
+     * Setup mutation observer to detect new form fields
+     */
+    private setupFormObserver;
+    /**
+     * Cleanup mutation observer
+     */
+    private cleanupFormObserver;
+    /**
+     * Register existing form fields
+     */
+    private registerExistingFields;
+    /**
+     * Register form fields in an element
+     */
+    private registerFieldsInElement;
+    /**
+     * Setup form events
+     */
+    private setupFormEvents;
+    /**
+     * Handle form submission
+     */
+    private handleFormSubmit;
+    /**
+     * Handle form reset
+     */
+    private handleFormReset;
+    /**
+     * Handle validation state changes
+     */
+    private handleValidationChanged;
+    /**
+     * Perform native form submission
+     */
+    private performNativeSubmission;
+    /**
+     * Validate the form
+     */
+    validate(): Promise<boolean>;
+    /**
+     * Submit the form programmatically
+     */
+    submit(customData?: Record<string, any>): Promise<void>;
+    /**
+     * Reset the form
+     */
+    reset(): void;
+    /**
+     * Check if form is valid
+     */
+    get isValid(): boolean;
+    /**
+     * Check if form is submitting
+     */
+    get isSubmitting(): boolean;
+    /**
+     * Get form data
+     */
+    getFormData(): import("./form.types.js").FormSubmissionData;
+    /**
+     * Get invalid fields
+     */
+    getInvalidFields(): import("./form.types.js").FormField[];
+    /**
+     * Get values of all fields
+     * @returns Object containing all field values
+     */
+    getFieldsValue(nameList?: string[]): Record<string, any>;
+    /**
+     * Get value of specific field
+     * @param name Field name
+     * @returns Field value
+     */
+    getFieldValue(name: string): any;
+    /**
+     * Set values of fields
+     * @param values Object containing field values to set
+     */
+    setFieldsValue(values: Record<string, any>): void;
+    /**
+     * Set value of specific field
+     * @param name Field name
+     * @param value Field value
+     */
+    setFieldValue(name: string, value: any): void;
+    /**
+     * Validate specific fields
+     * @param nameList Array of field names to validate, if empty validates all
+     * @returns Promise with validation result
+     */
+    validateFields(nameList?: string[]): Promise<Record<string, any>>;
+    /**
+     * Reset specific fields
+     * @param nameList Array of field names to reset, if empty resets all
+     */
+    resetFields(nameList?: string[]): void;
+    /**
+     * Get field error
+     * @param name Field name
+     * @returns Field error message or null
+     */
+    getFieldError(name: string): string | null;
+    /**
+     * Get all field errors
+     * @param nameList Array of field names, if empty returns all
+     * @returns Object containing field errors
+     */
+    getFieldsError(nameList?: string[]): Record<string, string | null>;
+    /**
+     * Check if field has been touched
+     * @param name Field name
+     * @returns Whether field has been touched
+     */
+    isFieldTouched(name: string): boolean;
+    /**
+     * Check if any fields have been touched
+     * @param nameList Array of field names, if empty checks all
+     * @returns Whether any of the specified fields have been touched
+     */
+    isFieldsTouched(nameList?: string[]): boolean;
+    /**
+     * Check if field value has been modified
+     * @param name Field name
+     * @returns Whether field has been modified
+     */
+    isFieldDirty(name: string): boolean;
+    /**
+     * Check if any fields have been modified
+     * @param nameList Array of field names, if empty checks all
+     * @returns Whether any of the specified fields have been modified
+     */
+    isFieldsDirty(nameList?: string[]): boolean;
+    /**
+     * Get field instance
+     * @param name Field name
+     * @returns Field element or null
+     */
+    getFieldInstance(name: string): HTMLElement | null;
+    /**
+     * Scroll to first error field
+     * @returns Whether scrolled to a field
+     */
+    scrollToField(name?: string): boolean;
+    /**
+     * Submit form and validate
+     * @returns Promise with form values
+     */
+    finish(): Promise<Record<string, any>>;
+    /**
+     * Get field names that have validation errors
+     * @returns Array of field names with errors
+     */
+    getFieldsWithErrors(): string[];
+    /**
+     * Check if form has any validation errors
+     * @returns Whether form has errors
+     */
+    hasErrors(): boolean;
+    /**
+     * Get summary of form state
+     * @returns Object with form state information
+     */
+    getFormState(): {
+        isValid: boolean;
+        isSubmitting: boolean;
+        hasErrors: boolean;
+        errorCount: number;
+        fieldCount: number;
+        touchedFields: string[];
+        dirtyFields: string[];
+        invalidFields: string[];
+    };
+    /**
+     * Set form loading state (useful for async operations)
+     * @param loading Whether form is in loading state
+     */
+    setLoading(loading: boolean): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=form.component.d.ts.map