@nuralyui/form 0.1.0

package/form.component.js

@@ -0,0 +1,644 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './form.style.js';
+import { FormValidationState, FormSubmissionState, FORM_EVENTS } from './form.types.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { FormValidationController } from './controllers/validation.controller.js';
+import { FormSubmissionController } from './controllers/submission.controller.js';
+/**
+ * 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.)
+ */
+let NrFormElement = class NrFormElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Form configuration */
+        this.config = {
+            validateOnChange: false,
+            validateOnBlur: true,
+            showErrorsImmediately: false,
+            preventInvalidSubmission: true,
+            resetOnSuccess: false,
+            validationDelay: 300
+        };
+        /** Enable real-time validation on field changes */
+        this.validateOnChange = false; // Default to false
+        /** Enable validation on field blur */
+        this.validateOnBlur = true;
+        /** Prevent form submission if validation fails */
+        this.preventInvalidSubmission = true;
+        /** Reset form after successful submission */
+        this.resetOnSuccess = false;
+        /** Form method for native submission */
+        this.method = 'POST';
+        /** Form encoding type */
+        this.enctype = 'multipart/form-data';
+        /** Disable the entire form */
+        this.disabled = false;
+        /** Form validation state */
+        this._validationState = FormValidationState.Pristine;
+        /** Form submission state */
+        this._submissionState = FormSubmissionState.Idle;
+        /** Validation controller */
+        this.validationController = new FormValidationController(this);
+        /** Submission controller */
+        this.submissionController = new FormSubmissionController(this);
+        /**
+         * Handle validation state changes
+         */
+        this.handleValidationChanged = (event) => {
+            const customEvent = event;
+            const result = customEvent.detail.validationResult;
+            if (result) {
+                this._validationState = result.isValid ?
+                    FormValidationState.Valid :
+                    FormValidationState.Invalid;
+            }
+        };
+    }
+    /** Get current validation state */
+    get validationState() {
+        return this._validationState;
+    }
+    /** Get current submission state */
+    get submissionState() {
+        return this._submissionState;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupFormObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupFormObserver();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        // Update config when properties change
+        if (changedProperties.has('validateOnChange') ||
+            changedProperties.has('validateOnBlur') ||
+            changedProperties.has('preventInvalidSubmission') ||
+            changedProperties.has('resetOnSuccess')) {
+            this.config = Object.assign(Object.assign({}, this.config), { validateOnChange: this.validateOnChange, validateOnBlur: this.validateOnBlur, preventInvalidSubmission: this.preventInvalidSubmission, resetOnSuccess: this.resetOnSuccess });
+        }
+    }
+    firstUpdated() {
+        this.registerExistingFields();
+        this.setupFormEvents();
+    }
+    /**
+     * Setup mutation observer to detect new form fields
+     */
+    setupFormObserver() {
+        // Implementation for observing DOM changes to register new fields
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach(mutation => {
+                mutation.addedNodes.forEach(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        this.registerFieldsInElement(node);
+                    }
+                });
+            });
+        });
+        observer.observe(this, {
+            childList: true,
+            subtree: true
+        });
+        this._formObserver = observer;
+    }
+    /**
+     * Cleanup mutation observer
+     */
+    cleanupFormObserver() {
+        const observer = this._formObserver;
+        if (observer) {
+            observer.disconnect();
+        }
+    }
+    /**
+     * Register existing form fields
+     */
+    registerExistingFields() {
+        this.registerFieldsInElement(this);
+    }
+    /**
+     * Register form fields in an element
+     */
+    registerFieldsInElement(element) {
+        const selectors = [
+            'nr-input', 'nr-select', 'nr-radio', 'nr-checkbox',
+            'nr-textarea', 'nr-timepicker', 'nr-datepicker'
+        ];
+        selectors.forEach(selector => {
+            const fields = element.querySelectorAll(selector);
+            fields.forEach(field => {
+                if (field.getAttribute('name')) {
+                    this.validationController.registerField(field);
+                }
+            });
+        });
+    }
+    /**
+     * Setup form events
+     */
+    setupFormEvents() {
+        // Listen for form submission
+        this.addEventListener('submit', this.handleFormSubmit);
+        // Listen for form reset
+        this.addEventListener('reset', this.handleFormReset);
+        // Listen for validation events
+        this.addEventListener(FORM_EVENTS.VALIDATION_CHANGED, this.handleValidationChanged);
+    }
+    /**
+     * Handle form submission
+     */
+    handleFormSubmit(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            if (this.disabled) {
+                return;
+            }
+            try {
+                const submissionData = yield this.submissionController.submitForm();
+                if (this.resetOnSuccess) {
+                    this.reset();
+                }
+                // If action is specified, perform native submission
+                if (this.action) {
+                    this.performNativeSubmission(submissionData.formData);
+                }
+            }
+            catch (error) {
+                console.error('Form submission failed:', error);
+                // Error events are already dispatched by submission controller
+            }
+        });
+    }
+    /**
+     * Handle form reset
+     */
+    handleFormReset(event) {
+        event.preventDefault();
+        this.reset();
+    }
+    /**
+     * Perform native form submission
+     */
+    performNativeSubmission(formData) {
+        const form = document.createElement('form');
+        form.action = this.action;
+        form.method = this.method;
+        form.enctype = this.enctype;
+        if (this.target)
+            form.target = this.target;
+        // Add form data as hidden inputs
+        for (const [name, value] of formData.entries()) {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = name;
+            input.value = value;
+            form.appendChild(input);
+        }
+        document.body.appendChild(form);
+        form.submit();
+        document.body.removeChild(form);
+    }
+    /**
+     * Validate the form
+     */
+    validate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.validationController.validateForm();
+            return result.isValid;
+        });
+    }
+    /**
+     * Submit the form programmatically
+     */
+    submit(customData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.submissionController.submitForm(customData);
+        });
+    }
+    /**
+     * Reset the form
+     */
+    reset() {
+        this.validationController.reset();
+        this.submissionController.resetSubmission();
+        this._validationState = FormValidationState.Pristine;
+        this._submissionState = FormSubmissionState.Idle;
+    }
+    /**
+     * Check if form is valid
+     */
+    get isValid() {
+        return this.validationController.isValid();
+    }
+    /**
+     * Check if form is submitting
+     */
+    get isSubmitting() {
+        return this.submissionController.isSubmitting();
+    }
+    /**
+     * Get form data
+     */
+    getFormData() {
+        return this.submissionController.collectFormData();
+    }
+    /**
+     * Get invalid fields
+     */
+    getInvalidFields() {
+        return this.validationController.getInvalidFields();
+    }
+    // ============================================
+    // FORM API METHODS
+    // ============================================
+    /**
+     * Get values of all fields
+     * @returns Object containing all field values
+     */
+    getFieldsValue(nameList) {
+        const formData = this.getFormData();
+        const values = formData.jsonData;
+        if (nameList && nameList.length > 0) {
+            const filteredValues = {};
+            nameList.forEach(name => {
+                if (name in values) {
+                    filteredValues[name] = values[name];
+                }
+            });
+            return filteredValues;
+        }
+        return values;
+    }
+    /**
+     * Get value of specific field
+     * @param name Field name
+     * @returns Field value
+     */
+    getFieldValue(name) {
+        const values = this.getFieldsValue();
+        return values[name];
+    }
+    /**
+     * Set values of fields
+     * @param values Object containing field values to set
+     */
+    setFieldsValue(values) {
+        Object.entries(values).forEach(([name, value]) => {
+            this.setFieldValue(name, value);
+        });
+    }
+    /**
+     * Set value of specific field
+     * @param name Field name
+     * @param value Field value
+     */
+    setFieldValue(name, value) {
+        const fields = this.validationController.getFields();
+        const field = fields.find(f => f.name === name);
+        if (field && field.element) {
+            field.element.value = value;
+            field.value = value;
+            // Trigger change event to update validation
+            field.element.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+    /**
+     * Validate specific fields
+     * @param nameList Array of field names to validate, if empty validates all
+     * @returns Promise with validation result
+     */
+    validateFields(nameList) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.validationController.validateForm();
+            if (nameList && nameList.length > 0) {
+                // Filter validation errors for specific fields
+                const filteredErrors = {};
+                nameList.forEach(name => {
+                    if (result.validationErrors[name]) {
+                        filteredErrors[name] = result.validationErrors[name];
+                    }
+                });
+                if (Object.keys(filteredErrors).length > 0) {
+                    throw new Error(JSON.stringify(filteredErrors));
+                }
+                return this.getFieldsValue(nameList);
+            }
+            if (!result.isValid) {
+                throw new Error(JSON.stringify(result.validationErrors));
+            }
+            return this.getFieldsValue();
+        });
+    }
+    /**
+     * Reset specific fields
+     * @param nameList Array of field names to reset, if empty resets all
+     */
+    resetFields(nameList) {
+        if (!nameList || nameList.length === 0) {
+            this.reset();
+            return;
+        }
+        const fields = this.validationController.getFields();
+        nameList.forEach(name => {
+            const field = fields.find(f => f.name === name);
+            if (field && field.element) {
+                // Reset value
+                field.element.value = '';
+                field.value = '';
+                field.touched = false;
+                field.dirty = false;
+                field.isValid = true;
+                field.validationMessage = '';
+                // Trigger change event
+                field.element.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        });
+    }
+    /**
+     * Get field error
+     * @param name Field name
+     * @returns Field error message or null
+     */
+    getFieldError(name) {
+        const fields = this.validationController.getFields();
+        const field = fields.find(f => f.name === name);
+        return field && !field.isValid ? field.validationMessage : null;
+    }
+    /**
+     * Get all field errors
+     * @param nameList Array of field names, if empty returns all
+     * @returns Object containing field errors
+     */
+    getFieldsError(nameList) {
+        const fields = this.validationController.getFields();
+        const errors = {};
+        const targetFields = nameList
+            ? fields.filter(f => nameList.includes(f.name))
+            : fields;
+        targetFields.forEach(field => {
+            errors[field.name] = field.isValid ? null : field.validationMessage;
+        });
+        return errors;
+    }
+    /**
+     * Check if field has been touched
+     * @param name Field name
+     * @returns Whether field has been touched
+     */
+    isFieldTouched(name) {
+        const fields = this.validationController.getFields();
+        const field = fields.find(f => f.name === name);
+        return field ? field.touched : false;
+    }
+    /**
+     * 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) {
+        const fields = this.validationController.getFields();
+        const targetFields = nameList
+            ? fields.filter(f => nameList.includes(f.name))
+            : fields;
+        return targetFields.some(field => field.touched);
+    }
+    /**
+     * Check if field value has been modified
+     * @param name Field name
+     * @returns Whether field has been modified
+     */
+    isFieldDirty(name) {
+        const fields = this.validationController.getFields();
+        const field = fields.find(f => f.name === name);
+        return field ? field.dirty : false;
+    }
+    /**
+     * 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) {
+        const fields = this.validationController.getFields();
+        const targetFields = nameList
+            ? fields.filter(f => nameList.includes(f.name))
+            : fields;
+        return targetFields.some(field => field.dirty);
+    }
+    /**
+     * Get field instance
+     * @param name Field name
+     * @returns Field element or null
+     */
+    getFieldInstance(name) {
+        const fields = this.validationController.getFields();
+        const field = fields.find(f => f.name === name);
+        return field ? field.element : null;
+    }
+    /**
+     * Scroll to first error field
+     * @returns Whether scrolled to a field
+     */
+    scrollToField(name) {
+        if (name) {
+            const fieldElement = this.getFieldInstance(name);
+            if (fieldElement) {
+                fieldElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                if (typeof fieldElement.focus === 'function') {
+                    fieldElement.focus();
+                }
+                return true;
+            }
+            return false;
+        }
+        // Scroll to first invalid field
+        return this.validationController.focusFirstInvalidField();
+    }
+    /**
+     * Submit form and validate
+     * @returns Promise with form values
+     */
+    finish() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const values = yield this.validateFields();
+                yield this.submit();
+                return values;
+            }
+            catch (error) {
+                this.scrollToField();
+                throw error;
+            }
+        });
+    }
+    /**
+     * Get field names that have validation errors
+     * @returns Array of field names with errors
+     */
+    getFieldsWithErrors() {
+        const fields = this.validationController.getFields();
+        return fields
+            .filter(field => !field.isValid)
+            .map(field => field.name);
+    }
+    /**
+     * Check if form has any validation errors
+     * @returns Whether form has errors
+     */
+    hasErrors() {
+        return this.getFieldsWithErrors().length > 0;
+    }
+    /**
+     * Get summary of form state
+     * @returns Object with form state information
+     */
+    getFormState() {
+        const fields = this.validationController.getFields();
+        return {
+            isValid: this.isValid,
+            isSubmitting: this.isSubmitting,
+            hasErrors: this.hasErrors(),
+            errorCount: this.getFieldsWithErrors().length,
+            fieldCount: fields.length,
+            touchedFields: fields.filter(f => f.touched).map(f => f.name),
+            dirtyFields: fields.filter(f => f.dirty).map(f => f.name),
+            invalidFields: this.getFieldsWithErrors()
+        };
+    }
+    /**
+     * Set form loading state (useful for async operations)
+     * @param loading Whether form is in loading state
+     */
+    setLoading(loading) {
+        this.disabled = loading;
+        this.requestUpdate();
+    }
+    render() {
+        return html `
+      <form 
+        action="${this.action || ''}"
+        method="${this.method.toLowerCase()}"
+        enctype="${this.enctype}"
+        target="${this.target || ''}"
+        class="form-wrapper"
+        data-disabled="${this.disabled}"
+        novalidate
+      >
+        <slot></slot>
+      </form>
+    `;
+    }
+};
+NrFormElement.styles = styles;
+__decorate([
+    property({ type: Object })
+], NrFormElement.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-change' })
+], NrFormElement.prototype, "validateOnChange", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-blur' })
+], NrFormElement.prototype, "validateOnBlur", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'prevent-invalid-submission' })
+], NrFormElement.prototype, "preventInvalidSubmission", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'reset-on-success' })
+], NrFormElement.prototype, "resetOnSuccess", void 0);
+__decorate([
+    property({ type: String })
+], NrFormElement.prototype, "action", void 0);
+__decorate([
+    property({ type: String })
+], NrFormElement.prototype, "method", void 0);
+__decorate([
+    property({ type: String, attribute: 'enctype' })
+], NrFormElement.prototype, "enctype", void 0);
+__decorate([
+    property({ type: String })
+], NrFormElement.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrFormElement.prototype, "disabled", void 0);
+__decorate([
+    state()
+], NrFormElement.prototype, "_validationState", void 0);
+__decorate([
+    state()
+], NrFormElement.prototype, "_submissionState", void 0);
+NrFormElement = __decorate([
+    customElement('nr-form')
+], NrFormElement);
+export { NrFormElement };
+//# sourceMappingURL=form.component.js.map

package/form.style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=form.style.d.ts.map