@nuralyui/form 0.1.0

package/form.style.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .form-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-form-gap, 16px);
+  }
+
+  .form-wrapper[disabled] {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* Form validation states */
+  :host([data-validation-state="pristine"]) {
+    border-left: 3px solid transparent;
+  }
+
+  :host([data-validation-state="valid"]) {
+    border-left: 3px solid #52c41a;
+  }
+
+  :host([data-validation-state="invalid"]) {
+    border-left: 3px solid #ff4d4f;
+  }
+
+  :host([data-validation-state="pending"]) {
+    border-left: 3px solid #1890ff;
+  }
+
+  /* Form submission states */
+  :host([data-submission-state="submitting"]) {
+    opacity: 0.8;
+    pointer-events: none;
+  }
+
+  :host([data-submission-state="success"]) {
+    border-left: 3px solid #52c41a;
+  }
+
+  :host([data-submission-state="error"]) {
+    border-left: 3px solid #ff4d4f;
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .form-wrapper {
+      gap: var(--nuraly-form-gap-mobile, 12px);
+    }
+  }
+`;
+//# sourceMappingURL=form.style.js.map

package/form.types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ValidatableComponent, FormFieldInfo } from '../../shared/validation.types.js';
+/**
+ * Form validation states that can be applied to the form and its children
+ */
+export declare enum FormValidationState {
+    Pristine = "pristine",
+    Pending = "pending",
+    Valid = "valid",
+    Invalid = "invalid",
+    Submitted = "submitted"
+}
+/**
+ * Form submission states
+ */
+export declare enum FormSubmissionState {
+    Idle = "idle",
+    Submitting = "submitting",
+    Success = "success",
+    Error = "error"
+}
+/**
+ * Form configuration options
+ */
+export interface FormConfig {
+    /** Enable real-time validation */
+    validateOnChange?: boolean;
+    /** Validate fields on blur */
+    validateOnBlur?: boolean;
+    /** Show validation errors immediately */
+    showErrorsImmediately?: boolean;
+    /** Prevent submission if invalid */
+    preventInvalidSubmission?: boolean;
+    /** Reset form after successful submission */
+    resetOnSuccess?: boolean;
+    /** Custom validation debounce delay (ms) */
+    validationDelay?: number;
+}
+/**
+ * Form field information
+ */
+export interface FormField extends FormFieldInfo {
+}
+/**
+ * Form validation result
+ */
+export interface FormValidationResult {
+    isValid: boolean;
+    invalidFields: FormField[];
+    validationErrors: Record<string, string>;
+    summary: string;
+}
+/**
+ * Form submission data
+ */
+export interface FormSubmissionData {
+    formData: FormData;
+    jsonData: Record<string, any>;
+    fields: Record<string, any>;
+}
+/**
+ * Interface that form field components must implement
+ * @deprecated Use ValidatableComponent from shared/validation.types.js instead
+ */
+export interface FormFieldCapable extends ValidatableComponent {
+}
+/**
+ * Form event details
+ */
+export interface FormEventDetail {
+    formData?: FormSubmissionData;
+    validationResult?: FormValidationResult;
+    field?: FormField;
+    error?: Error;
+}
+/**
+ * Custom form events
+ */
+export declare const FORM_EVENTS: {
+    readonly VALIDATION_CHANGED: "nr-form-validation-changed";
+    readonly FIELD_CHANGED: "nr-form-field-changed";
+    readonly SUBMIT_ATTEMPT: "nr-form-submit-attempt";
+    readonly SUBMIT_SUCCESS: "nr-form-submit-success";
+    readonly SUBMIT_ERROR: "nr-form-submit-error";
+    readonly RESET: "nr-form-reset";
+};
+export declare type FormEventType = typeof FORM_EVENTS[keyof typeof FORM_EVENTS];
+//# sourceMappingURL=form.types.d.ts.map

package/form.types.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Form validation states that can be applied to the form and its children
+ */
+export var FormValidationState;
+(function (FormValidationState) {
+    FormValidationState["Pristine"] = "pristine";
+    FormValidationState["Pending"] = "pending";
+    FormValidationState["Valid"] = "valid";
+    FormValidationState["Invalid"] = "invalid";
+    FormValidationState["Submitted"] = "submitted"; // Form has been submitted
+})(FormValidationState || (FormValidationState = {}));
+/**
+ * Form submission states
+ */
+export var FormSubmissionState;
+(function (FormSubmissionState) {
+    FormSubmissionState["Idle"] = "idle";
+    FormSubmissionState["Submitting"] = "submitting";
+    FormSubmissionState["Success"] = "success";
+    FormSubmissionState["Error"] = "error";
+})(FormSubmissionState || (FormSubmissionState = {}));
+/**
+ * Custom form events
+ */
+export const FORM_EVENTS = {
+    VALIDATION_CHANGED: 'nr-form-validation-changed',
+    FIELD_CHANGED: 'nr-form-field-changed',
+    SUBMIT_ATTEMPT: 'nr-form-submit-attempt',
+    SUBMIT_SUCCESS: 'nr-form-submit-success',
+    SUBMIT_ERROR: 'nr-form-submit-error',
+    RESET: 'nr-form-reset',
+};
+//# sourceMappingURL=form.types.js.map

package/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { NrFormElement } from './form.component.js';
+export * from './form.types.js';
+export { FormValidationController } from './controllers/validation.controller.js';
+export { FormSubmissionController } from './controllers/submission.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Main component
+export { NrFormElement } from './form.component.js';
+// Types and interfaces
+export * from './form.types.js';
+// Controllers
+export { FormValidationController } from './controllers/validation.controller.js';
+export { FormSubmissionController } from './controllers/submission.controller.js';
+//# sourceMappingURL=index.js.map

package/interfaces/validation.interface.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Standard interface that all form-compatible components should implement
+ * This ensures consistent validation API across all form field components
+ */
+export interface FormFieldValidation {
+    /** Component name for form submission */
+    name?: string;
+    /** Current field value */
+    value: any;
+    /** Required field indicator */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Readonly state */
+    readonly?: boolean;
+    /** Current validation message */
+    validationMessage?: string;
+    /**
+     * Validate the field and return true if valid
+     */
+    validate?(): boolean;
+    /**
+     * Check if the field satisfies HTML5 constraints
+     */
+    checkValidity?(): boolean;
+    /**
+     * Report validation state (shows validation UI)
+     */
+    reportValidity?(): boolean;
+    /**
+     * Set custom validation message
+     */
+    setCustomValidity?(message: string): void;
+    /**
+     * Reset field to initial state
+     */
+    reset?(): void;
+    /**
+     * Focus the field
+     */
+    focus?(): void;
+}
+/**
+ * Enhanced validation interface for components with advanced validation features
+ */
+export interface AdvancedFormFieldValidation extends FormFieldValidation {
+    /** Validation state details */
+    isValid?: boolean;
+    isTouched?: boolean;
+    isDirty?: boolean;
+    /** Validation rules */
+    validationRules?: ValidationRule[];
+    /** Custom validators */
+    customValidators?: CustomValidator[];
+    /**
+     * Get detailed validation result
+     */
+    getValidationResult?(): {
+        isValid: boolean;
+        errors: string[];
+        warnings: string[];
+    };
+    /**
+     * Add custom validation rule
+     */
+    addValidationRule?(rule: ValidationRule): void;
+    /**
+     * Remove validation rule
+     */
+    removeValidationRule?(ruleId: string): void;
+}
+/**
+ * Validation rule definition
+ */
+export interface ValidationRule {
+    id: string;
+    message: string;
+    validator: (value: any) => boolean;
+    severity?: 'error' | 'warning';
+}
+/**
+ * Custom validator function
+ */
+export interface CustomValidator {
+    id: string;
+    validate: (value: any, element: any) => {
+        isValid: boolean;
+        message: string;
+    };
+}
+/**
+ * Validation event details
+ */
+export interface ValidationEventDetail {
+    isValid: boolean;
+    value: any;
+    message: string;
+    errors: string[];
+    warnings?: string[];
+    field?: string;
+    timestamp: number;
+}
+/**
+ * Form field registration info
+ */
+export interface FormFieldRegistration {
+    element: HTMLElement & FormFieldValidation;
+    name: string;
+    type: string;
+    initialValue: any;
+    registrationTime: number;
+}
+//# sourceMappingURL=validation.interface.d.ts.map

package/interfaces/validation.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.interface.d.ts","sourceRoot":"","sources":["../../../../src/components/form/interfaces/validation.interface.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,GAAG,CAAC;IAEX,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,IAAI,OAAO,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,IAAI,OAAO,CAAC;IAE3B;;OAEG;IACH,iBAAiB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,IAAI,IAAI,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,IAAI,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,uBAAuB;IACvB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IAEnC,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IAErC;;OAEG;IACH,mBAAmB,CAAC,IAAI;QACtB,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IAEF;;OAEG;IACH,iBAAiB,CAAC,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IAE/C;;OAEG;IACH,oBAAoB,CAAC,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7C;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK;QACtC,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,WAAW,GAAG,mBAAmB,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,GAAG,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;CAC1B"}

package/interfaces/validation.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=validation.interface.js.map

package/interfaces/validation.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.interface.js","sourceRoot":"","sources":["../../../../src/components/form/interfaces/validation.interface.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Standard interface that all form-compatible components should implement\n * This ensures consistent validation API across all form field components\n */\nexport interface FormFieldValidation {\n  /** Component name for form submission */\n  name?: string;\n  \n  /** Current field value */\n  value: any;\n  \n  /** Required field indicator */\n  required?: boolean;\n  \n  /** Disabled state */\n  disabled?: boolean;\n  \n  /** Readonly state */\n  readonly?: boolean;\n  \n  /** Current validation message */\n  validationMessage?: string;\n  \n  /**\n   * Validate the field and return true if valid\n   */\n  validate?(): boolean;\n  \n  /**\n   * Check if the field satisfies HTML5 constraints\n   */\n  checkValidity?(): boolean;\n  \n  /**\n   * Report validation state (shows validation UI)\n   */\n  reportValidity?(): boolean;\n  \n  /**\n   * Set custom validation message\n   */\n  setCustomValidity?(message: string): void;\n  \n  /**\n   * Reset field to initial state\n   */\n  reset?(): void;\n  \n  /**\n   * Focus the field\n   */\n  focus?(): void;\n}\n\n/**\n * Enhanced validation interface for components with advanced validation features\n */\nexport interface AdvancedFormFieldValidation extends FormFieldValidation {\n  /** Validation state details */\n  isValid?: boolean;\n  isTouched?: boolean;\n  isDirty?: boolean;\n  \n  /** Validation rules */\n  validationRules?: ValidationRule[];\n  \n  /** Custom validators */\n  customValidators?: CustomValidator[];\n  \n  /**\n   * Get detailed validation result\n   */\n  getValidationResult?(): {\n    isValid: boolean;\n    errors: string[];\n    warnings: string[];\n  };\n  \n  /**\n   * Add custom validation rule\n   */\n  addValidationRule?(rule: ValidationRule): void;\n  \n  /**\n   * Remove validation rule\n   */\n  removeValidationRule?(ruleId: string): void;\n}\n\n/**\n * Validation rule definition\n */\nexport interface ValidationRule {\n  id: string;\n  message: string;\n  validator: (value: any) => boolean;\n  severity?: 'error' | 'warning';\n}\n\n/**\n * Custom validator function\n */\nexport interface CustomValidator {\n  id: string;\n  validate: (value: any, element: any) => {\n    isValid: boolean;\n    message: string;\n  };\n}\n\n/**\n * Validation event details\n */\nexport interface ValidationEventDetail {\n  isValid: boolean;\n  value: any;\n  message: string;\n  errors: string[];\n  warnings?: string[];\n  field?: string;\n  timestamp: number;\n}\n\n/**\n * Form field registration info\n */\nexport interface FormFieldRegistration {\n  element: HTMLElement & FormFieldValidation;\n  name: string;\n  type: string;\n  initialValue: any;\n  registrationTime: number;\n}\n"]}

package/mixins/form-field-integration.mixin.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { FormFieldCapable } from '../form.types.js';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Lightweight mixin that provides only form integration capabilities
+ * This replaces the heavier FormFieldValidationMixin for components that have their own validation
+ *
+ * @example
+ * ```typescript
+ * export class InputComponent extends FormFieldIntegrationMixin(NuralyUIBaseMixin(LitElement)) {
+ *   // Component manages its own validation via controllers
+ * }
+ * ```
+ */
+export declare const FormFieldIntegrationMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FormFieldCapable> & T;
+export {};
+//# sourceMappingURL=form-field-integration.mixin.d.ts.map

package/mixins/form-field-integration.mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-integration.mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/form/mixins/form-field-integration.mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,yBAAyB,yFA+GrC,CAAC"}

package/mixins/form-field-integration.mixin.js

@@ -0,0 +1,78 @@
+/**
+ * @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;
+};
+import { property } from 'lit/decorators.js';
+/**
+ * Lightweight mixin that provides only form integration capabilities
+ * This replaces the heavier FormFieldValidationMixin for components that have their own validation
+ *
+ * @example
+ * ```typescript
+ * export class InputComponent extends FormFieldIntegrationMixin(NuralyUIBaseMixin(LitElement)) {
+ *   // Component manages its own validation via controllers
+ * }
+ * ```
+ */
+export const FormFieldIntegrationMixin = (superClass) => {
+    class FormFieldIntegrationMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /** Disabled state */
+            this.disabled = false;
+            /** Readonly state */
+            this.readonly = false;
+        }
+        /**
+         * Dispatch a standardized field change event for form integration
+         */
+        dispatchFieldChangeEvent() {
+            var _a, _b;
+            this.dispatchEvent(new CustomEvent('nr-field-change', {
+                detail: {
+                    name: this.name,
+                    value: this.value,
+                    isValid: (_b = (_a = this.checkValidity) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : true
+                },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        /**
+         * Dispatch a standardized validation event for form integration
+         */
+        dispatchValidationEvent(isValid, message) {
+            this.dispatchEvent(new CustomEvent('nr-validation', {
+                detail: {
+                    name: this.name,
+                    isValid,
+                    message: message || '',
+                    value: this.value
+                },
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    __decorate([
+        property({ type: String })
+    ], FormFieldIntegrationMixinClass.prototype, "name", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormFieldIntegrationMixinClass.prototype, "required", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormFieldIntegrationMixinClass.prototype, "disabled", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormFieldIntegrationMixinClass.prototype, "readonly", void 0);
+    return FormFieldIntegrationMixinClass;
+};
+//# sourceMappingURL=form-field-integration.mixin.js.map

package/mixins/form-field-integration.mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-integration.mixin.js","sourceRoot":"","sources":["../../../../src/components/form/mixins/form-field-integration.mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC5F,MAAM,8BAA+B,SAAQ,UAAU;QAAvD;;YAUE,qBAAqB;YAErB,aAAQ,GAAG,KAAK,CAAC;YAEjB,qBAAqB;YAErB,aAAQ,GAAG,KAAK,CAAC;QA2FnB,CAAC;QA9BC;;WAEG;QACO,wBAAwB;;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACpD,MAAM,EAAE;oBACN,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,OAAO,EAAE,MAAA,MAAA,IAAI,CAAC,aAAa,oDAAI,mCAAI,IAAI;iBACxC;gBACD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;QACN,CAAC;QAED;;WAEG;QACO,uBAAuB,CAAC,OAAgB,EAAE,OAAgB;YAClE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE;gBAClD,MAAM,EAAE;oBACN,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,OAAO;oBACP,OAAO,EAAE,OAAO,IAAI,EAAE;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;gBACD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;QACN,CAAC;KACF;IAvGC;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEACb;IAId;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oEACT;IAInB;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oEAC1B;IAIjB;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oEAC1B;IA6FnB,OAAO,8BAAmE,CAAC;AAC7E,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormFieldCapable } from '../form.types.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Lightweight mixin that provides only form integration capabilities\n * This replaces the heavier FormFieldValidationMixin for components that have their own validation\n * \n * @example\n * ```typescript\n * export class InputComponent extends FormFieldIntegrationMixin(NuralyUIBaseMixin(LitElement)) {\n *   // Component manages its own validation via controllers\n * }\n * ```\n */\nexport const FormFieldIntegrationMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class FormFieldIntegrationMixinClass extends superClass implements FormFieldCapable {\n    \n    /** Field name for form submission */\n    @property({ type: String })\n    name?: string;\n    \n    /** Required field indicator */\n    @property({ type: Boolean })\n    required?: boolean;\n    \n    /** Disabled state */\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    /** Readonly state */\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n    \n    /** Field value - must be implemented by component */\n    declare value: any;\n    \n    /** Validation message - should be managed by component's validation system */\n    declare validationMessage?: string;\n\n    // These methods should be implemented by the component using this mixin\n    // They are declared here to satisfy the FormFieldCapable interface\n    \n    /**\n     * Validate the field - should be implemented by component\n     */\n    validate?(): boolean | Promise<boolean>;\n    \n    /**\n     * HTML5 checkValidity - should be implemented by component\n     */\n    checkValidity?(): boolean;\n    \n    /**\n     * HTML5 reportValidity - should be implemented by component\n     */\n    reportValidity?(): boolean;\n    \n    /**\n     * Set custom validity message - should be implemented by component\n     */\n    setCustomValidity?(message: string): void;\n    \n    /**\n     * Reset field - should be implemented by component\n     */\n    reset?(): void;\n    \n    /**\n     * Get current value - should be implemented by component\n     */\n    getValue?(): any;\n    \n    /**\n     * Set field value - should be implemented by component\n     */\n    setValue?(value: any): void;\n    \n    /**\n     * Get validation error - should be implemented by component\n     */\n    getError?(): string | null;\n    \n    /**\n     * Clear validation - should be implemented by component\n     */\n    clearValidation?(): void;\n    \n    /**\n     * Check if touched - should be implemented by component\n     */\n    isTouched?(): boolean;\n\n    /**\n     * Dispatch a standardized field change event for form integration\n     */\n    protected dispatchFieldChangeEvent(): void {\n      this.dispatchEvent(new CustomEvent('nr-field-change', {\n        detail: {\n          name: this.name,\n          value: this.value,\n          isValid: this.checkValidity?.() ?? true\n        },\n        bubbles: true,\n        composed: true\n      }));\n    }\n\n    /**\n     * Dispatch a standardized validation event for form integration\n     */\n    protected dispatchValidationEvent(isValid: boolean, message?: string): void {\n      this.dispatchEvent(new CustomEvent('nr-validation', {\n        detail: {\n          name: this.name,\n          isValid,\n          message: message || '',\n          value: this.value\n        },\n        bubbles: true,\n        composed: true\n      }));\n    }\n  }\n  \n  return FormFieldIntegrationMixinClass as Constructor<FormFieldCapable> & T;\n};\n"]}

package/mixins/form-field-validation.mixin.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @deprecated This mixin is deprecated and no longer used.
+ *
+ * Form field validation is now handled by individual component validation controllers:
+ * - Input validation: InputValidationController
+ * - Form coordination: FormValidationController (listens to validation events)
+ *
+ * This approach eliminates duplication and provides better separation of concerns.
+ * Components handle their own validation, and forms coordinate/listen to validation events.
+ */
+import { LitElement } from 'lit';
+import { FormFieldValidation } from '../interfaces/validation.interface.js';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Mixin that provides standardized form field validation capabilities
+ * This should be used by input components that need to participate in forms
+ *
+ * @example
+ * ```typescript
+ * export class InputComponent extends FormFieldValidationMixin(NuralyUIBaseMixin(LitElement)) {
+ *   // Component-specific validation logic
+ *   protected validateValue(value: string): boolean {
+ *     return value.length >= this.minLength;
+ *   }
+ * }
+ * ```
+ */
+export declare const FormFieldValidationMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FormFieldValidation> & T;
+export {};
+//# sourceMappingURL=form-field-validation.mixin.d.ts.map

package/mixins/form-field-validation.mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-validation.mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/form/mixins/form-field-validation.mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;GASG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,mBAAmB,EAAyB,MAAM,uCAAuC,CAAC;AAEnG,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,wBAAwB,4FAqTpC,CAAC"}