easy-forms-core 1.1.7 → 1.1.9

package/README.md

@@ -470,6 +470,7 @@ Puedes sobrescribir cualquier estilo usando las clases CSS del componente. Todas
 - Arrays dinámicos
 - **Rows (filas horizontales)** - Agrupa campos en filas
 - **Slots (row)** - Inserta contenido HTML en posiciones concretas del formulario
+- **Campo password** - Opciones `showToggle` (ver/ocultar) y `characterSeparated` (entrada por caracteres, tipo OTP)
 - **Datos iniciales** - Carga valores iniciales desde datos externos
 - Componentes visuales personalizables
 - Eventos de submit, change y error

package/dist/easy-form.d.ts

@@ -125,7 +125,17 @@ interface BaseField {
  * Campo de texto
  */
 interface TextField extends BaseField {
-    type: 'text' | 'email' | 'password';
+    type: 'text' | 'email';
+}
+/**
+ * Campo password (con opciones de visibilidad y modo carácter separado)
+ */
+interface PasswordField extends BaseField {
+    type: 'password';
+    /** Mostrar botón para alternar visibilidad del texto */
+    showToggle?: boolean;
+    /** Modo carácter separado: true = longitud por defecto 6, number = cantidad de cajas */
+    characterSeparated?: boolean | number;
 }
 /**
  * Campo numérico
@@ -277,7 +287,7 @@ interface OTPField extends BaseField {
 /**
  * Unión de todos los tipos de campos
  */
-type Field = TextField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | ArrayField | GroupField | RowField | CustomField | QuantityField | AccordionSelectField | ImageGridSelectField | OTPField;
+type Field = TextField | PasswordField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | ArrayField | GroupField | RowField | CustomField | QuantityField | AccordionSelectField | ImageGridSelectField | OTPField;
 /**
  * Step para formularios wizard
  */
@@ -464,6 +474,11 @@ declare class EasyForm extends BrowserHTMLElement {
      * Cualquier valor inválido o fuera de rango se normaliza a -1 (final del formulario).
      */
     private getSlotClonesByRow;
+    /**
+     * Aplica estado disabled/loading a un clone de slot: deshabilita elementos
+     * interactivos y añade clase para estilos. Respeta el estado del formulario.
+     */
+    private applySlotDisabledState;
     /**
      * Renderiza campos normales
      */

package/dist/easy-form.js

@@ -689,6 +689,62 @@ function getBaseStyles(colors) {
     .easy-form-otp-input:invalid {
       border-color: var(--easy-form-error);
     }
+    /* Password inner (input + toggle) */
+    .easy-form-password-inner {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .easy-form-password-inner .easy-form-password-input {
+      flex: 1;
+      min-width: 0;
+    }
+    .easy-form-password-toggle {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.35rem;
+      background: transparent;
+      border: 1px solid var(--easy-form-border);
+      border-radius: 4px;
+      cursor: pointer;
+      color: var(--easy-form-text);
+    }
+    .easy-form-password-toggle:hover {
+      border-color: var(--easy-form-primary);
+      color: var(--easy-form-primary);
+    }
+    .easy-form-password-toggle:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--easy-form-primary);
+    }
+    /* Password car\xE1cter separado */
+    .easy-form-password-separated {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 0.5rem;
+      align-items: center;
+    }
+    .easy-form-password-separated-input {
+      width: 2.5rem;
+      height: 2.5rem;
+      text-align: center;
+      font-size: 1.25rem;
+      border: 2px solid var(--easy-form-border);
+      border-radius: 4px;
+      transition: border-color 0.2s ease;
+    }
+    .easy-form-password-separated-input:focus {
+      border-color: var(--easy-form-primary);
+      outline: none;
+    }
+    .easy-form-password-separated-toggle {
+      flex-shrink: 0;
+    }
+    .easy-form-password-separated-toggle .easy-form-password-toggle {
+      padding: 0.35rem;
+    }
     /* Loading Overlay (sobre el formulario) */
     .easy-form-loading-overlay {
       position: absolute;
@@ -741,14 +797,20 @@ function getBaseStyles(colors) {
     }
     /* Disabled State */
     .easy-form-disabled,
-    .easy-form-disabled * {
+    .easy-form-disabled *,
+    .easy-form-slot-disabled,
+    .easy-form-slot-disabled * {
       pointer-events: none;
       opacity: 0.6;
     }
     .easy-form-disabled input,
     .easy-form-disabled textarea,
     .easy-form-disabled select,
-    .easy-form-disabled button {
+    .easy-form-disabled button,
+    .easy-form-slot-disabled input,
+    .easy-form-slot-disabled textarea,
+    .easy-form-slot-disabled select,
+    .easy-form-slot-disabled button {
       cursor: not-allowed;
     }
     .easy-form-input-disabled {
@@ -4190,13 +4252,159 @@ var OTPInput = class extends BaseInput {
   }
 };
 
+// src/components/inputs/password-input.ts
+var DEFAULT_SEPARATED_LENGTH = 6;
+function eyeSvg(visible) {
+  if (visible) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
+}
+var PasswordInput = class extends BaseInput {
+  constructor() {
+    super(...arguments);
+    this.inputs = [];
+    this.visible = false;
+  }
+  get passwordField() {
+    return this.field;
+  }
+  render() {
+    const pf = this.passwordField;
+    const useSeparated = !!pf.characterSeparated;
+    const length = useSeparated ? typeof pf.characterSeparated === "number" ? pf.characterSeparated : DEFAULT_SEPARATED_LENGTH : 0;
+    if (useSeparated) {
+      return this.createFieldContainer(this.renderSeparated(length));
+    }
+    return this.createFieldContainer(this.renderSingle());
+  }
+  renderSingle() {
+    const pf = this.passwordField;
+    const showToggle = !!pf.showToggle;
+    const input = document.createElement("input");
+    input.type = "password";
+    input.value = this.value ?? "";
+    input.id = this.getFieldId();
+    this.applyCommonProps(input);
+    if (this.field.placeholder) input.placeholder = this.field.placeholder;
+    input.addEventListener("input", (e) => {
+      this.onChange(e.target.value);
+    });
+    input.addEventListener("blur", () => this.onBlur());
+    if (!showToggle) {
+      return input;
+    }
+    const wrapper = document.createElement("div");
+    wrapper.className = "easy-form-password-inner";
+    input.classList.add("easy-form-password-input");
+    wrapper.appendChild(input);
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "easy-form-password-toggle";
+    btn.setAttribute("aria-label", "Mostrar contrase\xF1a");
+    btn.innerHTML = eyeSvg(false);
+    btn.addEventListener("click", () => {
+      this.visible = !this.visible;
+      input.type = this.visible ? "text" : "password";
+      btn.setAttribute("aria-label", this.visible ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a");
+      btn.innerHTML = eyeSvg(this.visible);
+    });
+    wrapper.appendChild(btn);
+    return wrapper;
+  }
+  renderSeparated(length) {
+    const pf = this.passwordField;
+    const showToggle = !!pf.showToggle;
+    const value = this.value ?? "";
+    const valueString = String(value).slice(0, length);
+    const container = document.createElement("div");
+    container.className = "easy-form-password-separated";
+    for (let i = 0; i < length; i++) {
+      const input = document.createElement("input");
+      input.type = "password";
+      input.maxLength = 1;
+      input.className = "easy-form-password-separated-input";
+      input.setAttribute("aria-label", `Car\xE1cter ${i + 1} de ${length}`);
+      if (valueString[i]) input.value = valueString[i];
+      this.applyCommonProps(input);
+      input.id = i === 0 ? this.getFieldId() : `${this.getFieldId()}-${i}`;
+      if (i > 0) input.removeAttribute("name");
+      const currentIndex = i;
+      input.addEventListener("input", (e) => {
+        const target = e.target;
+        const val = target.value;
+        if (val && currentIndex < length - 1) {
+          this.inputs[currentIndex + 1].focus();
+        }
+        this.updateSeparatedValue();
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && !e.target.value && currentIndex > 0) {
+          this.inputs[currentIndex - 1].focus();
+          this.inputs[currentIndex - 1].value = "";
+          this.updateSeparatedValue();
+        }
+        if (e.key === "ArrowLeft" && currentIndex > 0) {
+          e.preventDefault();
+          this.inputs[currentIndex - 1].focus();
+        }
+        if (e.key === "ArrowRight" && currentIndex < length - 1) {
+          e.preventDefault();
+          this.inputs[currentIndex + 1].focus();
+        }
+      });
+      input.addEventListener("paste", (e) => {
+        e.preventDefault();
+        const text = (e.clipboardData || window.clipboardData)?.getData("text") || "";
+        const chars = text.slice(0, length - currentIndex).split("");
+        for (let j = 0; j < chars.length && currentIndex + j < length; j++) {
+          this.inputs[currentIndex + j].value = chars[j];
+        }
+        const nextIdx = Math.min(currentIndex + chars.length, length - 1);
+        this.inputs[nextIdx].focus();
+        this.updateSeparatedValue();
+      });
+      input.addEventListener("focus", (e) => e.target.select());
+      input.addEventListener("blur", () => this.onBlur());
+      this.inputs.push(input);
+      container.appendChild(input);
+    }
+    if (showToggle) {
+      const toggleWrap = document.createElement("div");
+      toggleWrap.className = "easy-form-password-separated-toggle";
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "easy-form-password-toggle";
+      btn.setAttribute("aria-label", "Mostrar contrase\xF1a");
+      btn.innerHTML = eyeSvg(false);
+      btn.addEventListener("click", () => {
+        this.visible = !this.visible;
+        const type = this.visible ? "text" : "password";
+        this.inputs.forEach((inp) => {
+          inp.type = type;
+        });
+        btn.setAttribute("aria-label", this.visible ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a");
+        btn.innerHTML = eyeSvg(this.visible);
+      });
+      toggleWrap.appendChild(btn);
+      container.appendChild(toggleWrap);
+    }
+    return container;
+  }
+  updateSeparatedValue() {
+    const value = this.inputs.map((inp) => inp.value).join("");
+    this.onChange(value || null);
+  }
+};
+
 // src/components/inputs/index.ts
 function createInput(field, value, error, onChange, onBlur) {
   switch (field.type) {
     case "text":
     case "email":
-    case "password":
       return new TextInput(field, value, error, onChange, onBlur).render();
+    case "password":
+      return new PasswordInput(field, value, error, onChange, onBlur).render();
     case "number":
       return new NumberInput(field, value, error, onChange, onBlur).render();
     case "textarea":
@@ -5312,6 +5520,20 @@ var EasyForm = class extends BrowserHTMLElement {
     }
     return result;
   }
+  /**
+   * Aplica estado disabled/loading a un clone de slot: deshabilita elementos
+   * interactivos y añade clase para estilos. Respeta el estado del formulario.
+   */
+  applySlotDisabledState(slotElement) {
+    if (!this.disabled && !this.loading) return;
+    slotElement.classList.add("easy-form-slot-disabled");
+    const interactives = slotElement.querySelectorAll(
+      "input, textarea, select, button"
+    );
+    interactives.forEach((el) => {
+      if ("disabled" in el) el.disabled = true;
+    });
+  }
   /**
    * Renderiza campos normales
    */
@@ -5321,6 +5543,7 @@ var EasyForm = class extends BrowserHTMLElement {
       const endSlots2 = slotClones.get(-1);
       if (endSlots2 && endSlots2.length > 0) {
         for (const slotElement of endSlots2) {
+          this.applySlotDisabledState(slotElement);
           container.appendChild(slotElement);
         }
       }
@@ -5332,6 +5555,7 @@ var EasyForm = class extends BrowserHTMLElement {
       const slotsForRow = slotClonesByRow.get(rowIndex);
       if (slotsForRow && slotsForRow.length > 0) {
         for (const slotElement of slotsForRow) {
+          this.applySlotDisabledState(slotElement);
           container.appendChild(slotElement);
         }
         slotClonesByRow.delete(rowIndex);
@@ -5345,6 +5569,7 @@ var EasyForm = class extends BrowserHTMLElement {
     const endSlots = slotClonesByRow.get(-1);
     if (endSlots && endSlots.length > 0) {
       for (const slotElement of endSlots) {
+        this.applySlotDisabledState(slotElement);
         container.appendChild(slotElement);
       }
     }