easy-forms-core 1.0.11 → 1.1.1

package/dist/easy-form.js

@@ -382,7 +382,41 @@ function getBaseStyles(colors) {
     .easy-form-wizard-nav {
       display: flex;
       gap: 1rem;
-      margin-top: 1rem;
+      margin-top: 2rem;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .easy-form-wizard-prev,
+    .easy-form-wizard-next {
+      padding: 0.75rem 1.5rem;
+      background: var(--easy-form-primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-family: inherit;
+      min-width: 120px;
+    }
+    .easy-form-wizard-prev:hover:not(:disabled),
+    .easy-form-wizard-next:hover:not(:disabled) {
+      opacity: 0.9;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .easy-form-wizard-prev:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .easy-form-wizard-prev {
+      background: var(--easy-form-secondary);
+      order: 1;
+    }
+    .easy-form-wizard-next {
+      background: var(--easy-form-primary);
+      order: 2;
     }
     .easy-form-array-item {
       padding: 1rem;
@@ -1731,7 +1765,20 @@ var ValidationEngine = class {
     if (!value) {
       return { isValid: true };
     }
-    const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+    let regex;
+    if (pattern instanceof RegExp) {
+      regex = pattern;
+    } else if (typeof pattern === "string") {
+      try {
+        regex = new RegExp(pattern);
+      } catch (e) {
+        console.warn("Invalid regex pattern:", pattern);
+        return { isValid: true };
+      }
+    } else {
+      console.warn("Pattern validation expects string or RegExp, got:", typeof pattern, pattern);
+      return { isValid: true };
+    }
     const isValid = regex.test(String(value));
     return {
       isValid,
@@ -2019,6 +2066,26 @@ var StateManager = class {
     }
     return allFields;
   }
+  /**
+   * Encuentra el path completo de un campo dentro de grupos
+   */
+  findFieldPath(fieldName, fields, parentPath = "") {
+    for (const field of fields) {
+      const currentPath = parentPath ? `${parentPath}.${field.name}` : field.name;
+      if (field.name === fieldName) {
+        return currentPath;
+      }
+      if (field.type === "group" && "fields" in field) {
+        const found = this.findFieldPath(fieldName, field.fields, currentPath);
+        if (found) return found;
+      }
+      if (field.type === "row" && "fields" in field) {
+        const found = this.findFieldPath(fieldName, field.fields, currentPath);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
   /**
    * Construye el mapa de dependencias para optimizar re-evaluaciones
    */
@@ -2201,6 +2268,7 @@ var StateManager = class {
    */
   setValueWithoutValidation(fieldName, value) {
     setNestedValue(this.state.values, fieldName, value);
+    this.invalidateDependencyCache(fieldName);
   }
   /**
    * Valida un campo específico
@@ -2233,6 +2301,13 @@ var StateManager = class {
    */
   getActiveValidations(field) {
     let validations = [...field.validations || []];
+    const isRequired = this.getFieldRequired(field.name);
+    const hasRequiredValidation = validations.some((v) => v.type === "required");
+    if (isRequired && !hasRequiredValidation) {
+      validations = [{ type: "required" }, ...validations];
+    } else if (!isRequired && hasRequiredValidation) {
+      validations = validations.filter((v) => v.type !== "required");
+    }
     if (field.conditionalValidations) {
       for (const conditional of field.conditionalValidations) {
         const conditionMet = this.conditionEngine.evaluateConditions(
@@ -2365,13 +2440,41 @@ var StateManager = class {
     if (!this.schema) return true;
     const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
     const allFields = this.extractAllFields(topLevelFields);
-    const field = allFields.find((f) => f.name === fieldName);
+    let field = allFields.find((f) => {
+      const fullPath = this.findFieldPath(f.name, topLevelFields);
+      return fullPath === fieldName || f.name === fieldName;
+    });
+    if (!field) {
+      field = allFields.find((f) => f.name === fieldName);
+    }
     if (!field || !field.dependencies) {
       return !field?.hidden;
     }
+    const fieldFullPath = this.findFieldPath(field.name, topLevelFields) || field.name;
+    const groupPath = fieldFullPath.includes(".") ? fieldFullPath.split(".").slice(0, -1).join(".") : "";
+    let valuesContext = { ...this.state.values };
+    if (groupPath && field.dependencies) {
+      const groupValues = getNestedValue(this.state.values, groupPath);
+      if (groupValues && typeof groupValues === "object") {
+        const createRelativeContext = (obj, prefix = "") => {
+          const result2 = {};
+          for (const [key, value] of Object.entries(obj)) {
+            const relativeKey = prefix ? `${prefix}.${key}` : key;
+            if (value && typeof value === "object" && !Array.isArray(value) && value !== null) {
+              Object.assign(result2, createRelativeContext(value, relativeKey));
+            } else {
+              result2[relativeKey] = value;
+            }
+          }
+          return result2;
+        };
+        const relativeContext = createRelativeContext(groupValues);
+        valuesContext = { ...this.state.values, ...relativeContext };
+      }
+    }
     const result = this.conditionEngine.evaluateDependencies(
       field.dependencies,
-      this.state.values
+      valuesContext
     );
     this.dependencyCache.set(fieldName, result);
     return result.visible && !field.hidden;
@@ -2446,7 +2549,15 @@ var BaseInput = class {
    */
   createFieldContainer(input) {
     const container = document.createElement("div");
-    container.className = "easy-form-field";
+    const inputClasses = Array.from(input.classList);
+    const componentContainerClasses = inputClasses.filter(
+      (cls) => cls.startsWith("easy-form-") && cls !== "easy-form-field" && (cls.includes("-container") || cls.includes("-wrapper"))
+    );
+    if (componentContainerClasses.length > 0) {
+      container.className = `easy-form-field ${componentContainerClasses.join(" ")}`;
+    } else {
+      container.className = "easy-form-field";
+    }
     if (this.field.label) {
       const label = document.createElement("label");
       label.className = "easy-form-label";
@@ -2693,7 +2804,18 @@ var MaskEngine = class {
       return value;
     }
     const customMask = this.getCustomMask(mask);
-    const unformatted = this.removeMask(value, mask);
+    const editableTokens = tokens.filter((t) => t.editable);
+    const acceptedTypes = new Set(editableTokens.map((t) => t.type));
+    let unformatted = "";
+    for (const char of value) {
+      if (acceptedTypes.has("any")) {
+        unformatted += char;
+      } else if (acceptedTypes.has("digit") && /\d/.test(char)) {
+        unformatted += char;
+      } else if (acceptedTypes.has("letter") && /[a-zA-Z]/.test(char)) {
+        unformatted += char;
+      }
+    }
     let formatted = formatValue(unformatted, tokens);
     if (customMask.transform) {
       formatted = customMask.transform(formatted);
@@ -2828,7 +2950,9 @@ var TextInput = class extends BaseInput {
     }
     input.value = displayValue;
     this.applyCommonProps(input);
-    if (this.maskEngine && this.field.mask && !this.field.placeholder) {
+    if (this.field.placeholder) {
+      input.placeholder = this.field.placeholder;
+    } else if (this.maskEngine && this.field.mask) {
       const maskPlaceholder = this.maskEngine.getMaskPlaceholder(this.field.mask);
       if (maskPlaceholder) {
         input.placeholder = maskPlaceholder;
@@ -2940,7 +3064,6 @@ var NumberInput = class extends BaseInput {
       input.type = "number";
       input.value = this.value ?? "";
     }
-    input.placeholder = this.field.placeholder || "";
     const numberField = this.field;
     if (!this.maskEngine && input.type === "number") {
       if (numberField.min !== void 0) {
@@ -2954,7 +3077,9 @@ var NumberInput = class extends BaseInput {
       }
     }
     this.applyCommonProps(input);
-    if (this.maskEngine && this.field.mask && !this.field.placeholder) {
+    if (this.field.placeholder) {
+      input.placeholder = this.field.placeholder;
+    } else if (this.maskEngine && this.field.mask) {
       const maskPlaceholder = this.maskEngine.getMaskPlaceholder(this.field.mask);
       if (maskPlaceholder) {
         input.placeholder = maskPlaceholder;
@@ -4524,26 +4649,45 @@ var EasyForm = class extends BrowserHTMLElement {
         return;
       }
       const preservedValues = this.preserveCurrentValues();
+      const previousWizardState = this.stateManager.getWizardState();
       if (preservedValues && Object.keys(preservedValues).length > 0) {
         for (const [key, value] of Object.entries(preservedValues)) {
           this.stateManager.setValueWithoutValidation(key, value);
         }
       }
       const initialData = this.initialData;
-      this.stateManager.initializeSchema(schema, initialData || void 0);
-      const wizardState = this.stateManager.getWizardState();
+      const wasWizard = previousWizardState !== null;
+      const isWizard = schema.steps && schema.steps.length > 0;
+      const shouldReinitialize = !previousWizardState || !wasWizard || !isWizard || previousWizardState && schema.steps && previousWizardState.totalSteps !== schema.steps.length;
+      if (shouldReinitialize) {
+        this.stateManager.initializeSchema(schema, initialData || void 0);
+        if (wasWizard && isWizard && previousWizardState) {
+          const wizardState = this.stateManager.getWizardState();
+          if (wizardState && previousWizardState.totalSteps === wizardState.totalSteps) {
+            if (previousWizardState.currentStep >= 0 && previousWizardState.currentStep < wizardState.totalSteps) {
+              this.stateManager.goToStep(previousWizardState.currentStep);
+            }
+            for (const completedStep of previousWizardState.completedSteps) {
+              if (completedStep >= 0 && completedStep < wizardState.totalSteps) {
+                this.stateManager.completeStep(completedStep);
+              }
+            }
+          }
+        }
+      }
+      const finalWizardState = this.stateManager.getWizardState();
       const newFormElement = document.createElement("form");
       newFormElement.addEventListener("submit", (e) => this.handleSubmit(e));
-      if (wizardState) {
-        this.renderWizard(newFormElement, wizardState);
+      if (finalWizardState) {
+        this.renderWizard(newFormElement);
       } else {
         this.renderFields(newFormElement, schema.fields || []);
+        const submitButton = document.createElement("button");
+        submitButton.type = "submit";
+        submitButton.textContent = "Enviar";
+        submitButton.className = "easy-form-submit";
+        newFormElement.appendChild(submitButton);
       }
-      const submitButton = document.createElement("button");
-      submitButton.type = "submit";
-      submitButton.textContent = "Enviar";
-      submitButton.className = "easy-form-submit";
-      newFormElement.appendChild(submitButton);
       const oldForm = this.shadow.querySelector("form");
       if (oldForm && oldForm.parentNode === this.shadow && oldForm !== newFormElement) {
         try {
@@ -4832,7 +4976,9 @@ var EasyForm = class extends BrowserHTMLElement {
   /**
    * Renderiza wizard
    */
-  renderWizard(container, wizardState) {
+  renderWizard(container) {
+    const wizardState = this.stateManager.getWizardState();
+    if (!wizardState) return;
     const wizardContainer = document.createElement("div");
     wizardContainer.className = "easy-form-wizard";
     const stepsIndicator = document.createElement("div");
@@ -4865,43 +5011,83 @@ var EasyForm = class extends BrowserHTMLElement {
     wizardContainer.appendChild(fieldsContainer);
     const navContainer = document.createElement("div");
     navContainer.className = "easy-form-wizard-nav";
-    const prevButton = document.createElement("button");
-    prevButton.type = "button";
-    prevButton.textContent = "Anterior";
-    prevButton.className = "easy-form-wizard-prev";
-    prevButton.disabled = wizardState.currentStep === 0;
-    prevButton.addEventListener("click", () => {
-      if (this.stateManager.previousStep()) {
-        this.render();
-        this.emitStepChange();
-      }
-    });
-    navContainer.appendChild(prevButton);
-    const nextButton = document.createElement("button");
-    nextButton.type = "button";
-    nextButton.textContent = wizardState.currentStep === wizardState.totalSteps - 1 ? "Enviar" : "Siguiente";
-    nextButton.className = "easy-form-wizard-next";
-    nextButton.addEventListener("click", async () => {
-      if (wizardState.currentStep === wizardState.totalSteps - 1) {
-        await this.handleSubmit(new Event("submit"));
-      } else {
+    if (wizardState.currentStep > 0) {
+      const prevButton = document.createElement("button");
+      prevButton.type = "button";
+      prevButton.textContent = "Anterior";
+      prevButton.className = "easy-form-wizard-prev";
+      prevButton.addEventListener("click", () => {
+        const currentState = this.stateManager.getWizardState();
+        if (currentState && this.stateManager.previousStep()) {
+          this.render();
+          this.emitStepChange();
+        }
+      });
+      navContainer.appendChild(prevButton);
+    }
+    if (wizardState.currentStep < wizardState.totalSteps - 1) {
+      const nextButton = document.createElement("button");
+      nextButton.type = "button";
+      nextButton.textContent = "Siguiente";
+      nextButton.className = "easy-form-wizard-next";
+      nextButton.addEventListener("click", async () => {
+        const currentState = this.stateManager.getWizardState();
+        if (!currentState) return;
         const currentFields2 = this.stateManager.getCurrentStepFields();
-        const errors = await this.stateManager.validateForm();
-        const hasErrors = currentFields2.some(
-          (f) => errors[f.name] && errors[f.name].length > 0
-        );
+        for (const field of currentFields2) {
+          if (this.stateManager.getFieldVisibility(field.name)) {
+            await this.stateManager.validateField(field.name);
+          }
+        }
+        const allErrors = this.stateManager.getAllErrors();
+        const stepErrors = {};
+        for (const field of currentFields2) {
+          if (allErrors[field.name] && allErrors[field.name].length > 0) {
+            stepErrors[field.name] = allErrors[field.name];
+          }
+        }
+        const hasErrors = Object.keys(stepErrors).length > 0;
         if (!hasErrors) {
-          this.stateManager.completeStep(wizardState.currentStep);
-          if (this.stateManager.nextStep()) {
+          this.stateManager.completeStep(currentState.currentStep);
+          const moved = this.stateManager.nextStep();
+          if (moved) {
             this.render();
             this.emitStepChange();
           }
         } else {
-          this.emitError(errors);
+          this.emitError(stepErrors);
         }
-      }
-    });
-    navContainer.appendChild(nextButton);
+      });
+      navContainer.appendChild(nextButton);
+    }
+    if (wizardState.currentStep === wizardState.totalSteps - 1) {
+      const submitButton = document.createElement("button");
+      submitButton.type = "button";
+      submitButton.textContent = "Enviar";
+      submitButton.className = "easy-form-wizard-next";
+      submitButton.addEventListener("click", async () => {
+        const currentFields2 = this.stateManager.getCurrentStepFields();
+        for (const field of currentFields2) {
+          if (this.stateManager.getFieldVisibility(field.name)) {
+            await this.stateManager.validateField(field.name);
+          }
+        }
+        const allErrors = this.stateManager.getAllErrors();
+        const stepErrors = {};
+        for (const field of currentFields2) {
+          if (allErrors[field.name] && allErrors[field.name].length > 0) {
+            stepErrors[field.name] = allErrors[field.name];
+          }
+        }
+        const hasErrors = Object.keys(stepErrors).length > 0;
+        if (!hasErrors) {
+          await this.handleSubmit(new Event("submit"));
+        } else {
+          this.emitError(stepErrors);
+        }
+      });
+      navContainer.appendChild(submitButton);
+    }
     wizardContainer.appendChild(navContainer);
     container.appendChild(wizardContainer);
   }