easy-forms-core 1.1.8 → 1.1.10

package/dist/easy-form.js

@@ -59,6 +59,10 @@ var SchemaParser = class {
       "switch",
       "date",
       "file",
+      "file-drop",
+      "map",
+      "rating",
+      "slider",
       "array",
       "group",
       "row",
@@ -158,6 +162,22 @@ var SchemaParser = class {
           defaults.numeric = true;
         }
         break;
+      case "slider":
+        if (!("min" in field)) {
+          defaults.min = 0;
+        }
+        if (!("max" in field)) {
+          defaults.max = 100;
+        }
+        if (!("step" in field)) {
+          defaults.step = 1;
+        }
+        break;
+      case "rating":
+        if (!("max" in field)) {
+          defaults.max = 5;
+        }
+        break;
     }
     return { ...defaults, ...field };
   }
@@ -234,6 +254,140 @@ function getBaseStyles(colors) {
       font-weight: 500;
       color: var(--easy-form-label-color);
     }
+    .easy-form-label-down .easy-form-label {
+      margin-bottom: 0;
+      margin-top: 0.5rem;
+    }
+    .easy-form-field-inner-horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+    .easy-form-field-inner-horizontal .easy-form-label {
+      margin-bottom: 0;
+      margin-top: 0;
+      flex-shrink: 0;
+    }
+    .easy-form-direction-vertical {
+      display: block;
+    }
+    .easy-form-direction-horizontal {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+    .easy-form-direction-horizontal > * {
+      flex: 1 1 auto;
+    }
+    .easy-form-completed-indicator {
+      margin-bottom: 1rem;
+    }
+    .easy-form-completed-track {
+      height: 6px;
+      background: var(--easy-form-border);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+    .easy-form-completed-fill {
+      height: 100%;
+      background: var(--easy-form-primary);
+      border-radius: 3px;
+      transition: width 0.2s ease;
+    }
+    .easy-form-slider-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .easy-form-slider-value {
+      min-width: 2rem;
+      font-weight: 500;
+    }
+    .easy-form-rating {
+      display: inline-flex;
+      gap: 0.25rem;
+    }
+    .easy-form-rating-stars {
+      display: flex;
+      gap: 0.25rem;
+    }
+    .easy-form-rating-star {
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      color: var(--easy-form-border);
+    }
+    .easy-form-rating-star svg {
+      display: block;
+    }
+    .easy-form-rating-star-filled {
+      color: #f5a623;
+    }
+    .easy-form-rating-star:hover,
+    .easy-form-rating-star:focus {
+      color: var(--easy-form-primary);
+    }
+    .easy-form-file-drop {
+      border: 2px dashed var(--easy-form-border);
+      border-radius: 8px;
+      padding: 2rem;
+      text-align: center;
+      cursor: pointer;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .easy-form-file-drop:hover,
+    .easy-form-file-drop-over {
+      border-color: var(--easy-form-primary);
+      background: rgba(0, 123, 255, 0.05);
+    }
+    .easy-form-file-drop-list {
+      margin-top: 0.75rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+    .easy-form-file-drop-item {
+      font-size: 0.875rem;
+      color: var(--easy-form-text);
+      padding: 0.25rem 0;
+      border-bottom: 1px solid var(--easy-form-border);
+    }
+    .easy-form-map-inputs {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    .easy-form-map-inputs input {
+      flex: 1;
+    }
+    .easy-form-map-placeholder,
+    .easy-form-map-container {
+      min-height: 300px;
+      height: 300px;
+      border-radius: 4px;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      display: block;
+      box-sizing: border-box;
+    }
+    .easy-form-map-container {
+      background: #f5f5f5;
+    }
+    .easy-form-map-container .leaflet-container {
+      height: 100% !important;
+      width: 100% !important;
+      position: relative !important;
+    }
+    .easy-form-map-container .leaflet-tile-container {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
     .easy-form-required {
       color: var(--easy-form-error);
     }
@@ -689,6 +843,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;
@@ -2842,25 +3052,54 @@ var BaseInput = class {
     const componentContainerClasses = inputClasses.filter(
       (cls) => cls.startsWith("easy-form-") && cls !== "easy-form-field" && (cls.includes("-container") || cls.includes("-wrapper"))
     );
+    const labelPosition = this.field.labelPosition ?? "up";
     if (componentContainerClasses.length > 0) {
-      container.className = `easy-form-field ${componentContainerClasses.join(" ")}`;
+      container.className = `easy-form-field easy-form-label-${labelPosition} ${componentContainerClasses.join(" ")}`;
     } else {
-      container.className = "easy-form-field";
+      container.className = `easy-form-field easy-form-label-${labelPosition}`;
     }
-    if (this.field.label) {
-      const label = document.createElement("label");
-      label.className = "easy-form-label";
-      label.setAttribute("for", this.getFieldId());
-      label.textContent = this.field.label;
+    if (labelPosition === "none" && this.field.label) {
+      const el = input.querySelector("input, textarea, select") || input;
+      if (el instanceof HTMLElement) {
+        el.setAttribute("aria-label", this.field.label);
+      }
+    }
+    const createLabel = () => {
+      if (!this.field.label || labelPosition === "none") return null;
+      const label2 = document.createElement("label");
+      label2.className = "easy-form-label";
+      label2.setAttribute("for", this.getFieldId());
+      label2.textContent = this.field.label;
       if (this.field.validations?.some((v) => v.type === "required")) {
         const required = document.createElement("span");
         required.className = "easy-form-required";
         required.textContent = " *";
-        label.appendChild(required);
+        label2.appendChild(required);
       }
-      container.appendChild(label);
+      return label2;
+    };
+    const label = createLabel();
+    if (labelPosition === "up") {
+      if (label) container.appendChild(label);
+      container.appendChild(input);
+    } else if (labelPosition === "down") {
+      container.appendChild(input);
+      if (label) container.appendChild(label);
+    } else if (labelPosition === "left") {
+      const wrapper = document.createElement("div");
+      wrapper.className = "easy-form-field-inner easy-form-field-inner-horizontal";
+      if (label) wrapper.appendChild(label);
+      wrapper.appendChild(input);
+      container.appendChild(wrapper);
+    } else if (labelPosition === "right") {
+      const wrapper = document.createElement("div");
+      wrapper.className = "easy-form-field-inner easy-form-field-inner-horizontal";
+      wrapper.appendChild(input);
+      if (label) wrapper.appendChild(label);
+      container.appendChild(wrapper);
+    } else {
+      container.appendChild(input);
     }
-    container.appendChild(input);
     if (this.field.description) {
       const description = document.createElement("p");
       description.className = "easy-form-description";
@@ -4196,13 +4435,508 @@ 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/file-drop-input.ts
+var FileDropInput = class extends BaseInput {
+  render() {
+    const fileDropField = this.field;
+    const accept = fileDropField.accept ?? "";
+    const multiple = fileDropField.multiple ?? false;
+    const dropZone = document.createElement("div");
+    dropZone.className = "easy-form-file-drop";
+    dropZone.setAttribute("tabindex", "0");
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "file";
+    hiddenInput.className = "easy-form-file-drop-input";
+    hiddenInput.style.display = "none";
+    if (accept) hiddenInput.accept = accept;
+    if (multiple) hiddenInput.multiple = true;
+    const label = document.createElement("span");
+    label.className = "easy-form-file-drop-label";
+    label.textContent = "Arrastra archivos aqu\xED o haz clic para seleccionar";
+    dropZone.appendChild(label);
+    dropZone.appendChild(hiddenInput);
+    const fileList = document.createElement("div");
+    fileList.className = "easy-form-file-drop-list";
+    const renderFileList = (files) => {
+      const names = !files ? [] : Array.isArray(files) ? files.map((f) => f.name) : [files.name];
+      fileList.innerHTML = "";
+      if (names.length === 0) {
+        fileList.style.display = "none";
+        return;
+      }
+      fileList.style.display = "block";
+      names.forEach((name) => {
+        const item = document.createElement("div");
+        item.className = "easy-form-file-drop-item";
+        item.textContent = name;
+        fileList.appendChild(item);
+      });
+    };
+    renderFileList(this.value);
+    const handleFiles = (files) => {
+      if (!files || files.length === 0) return;
+      const arr = multiple ? Array.from(files) : files[0];
+      this.onChange(arr);
+      this.onBlur();
+      renderFileList(arr);
+    };
+    dropZone.addEventListener("click", () => {
+      hiddenInput.click();
+    });
+    hiddenInput.addEventListener("change", (e) => {
+      const target = e.target;
+      handleFiles(target.files);
+      target.value = "";
+    });
+    dropZone.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropZone.classList.add("easy-form-file-drop-over");
+    });
+    dropZone.addEventListener("dragleave", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropZone.classList.remove("easy-form-file-drop-over");
+    });
+    dropZone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropZone.classList.remove("easy-form-file-drop-over");
+      handleFiles(e.dataTransfer?.files ?? null);
+    });
+    dropZone.appendChild(fileList);
+    return this.createFieldContainer(dropZone);
+  }
+};
+
+// src/components/inputs/map-input.ts
+var LEAFLET_CSS = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
+var MapInput = class extends BaseInput {
+  constructor() {
+    super(...arguments);
+    this.mapInstance = null;
+    this.markerInstance = null;
+  }
+  render() {
+    const mapField = this.field;
+    const center = mapField.center ?? { lat: 0, lng: 0 };
+    const zoom = mapField.zoom ?? 13;
+    const value = this.value;
+    const lat = typeof value === "object" && value?.lat != null ? value.lat : center.lat;
+    const lng = typeof value === "object" && value?.lng != null ? value.lng : center.lng;
+    const container = document.createElement("div");
+    container.className = "easy-form-map";
+    const inputsWrapper = document.createElement("div");
+    inputsWrapper.className = "easy-form-map-inputs";
+    const latInput = document.createElement("input");
+    latInput.type = "number";
+    latInput.step = "any";
+    latInput.placeholder = "Latitud";
+    latInput.value = String(lat);
+    latInput.className = "easy-form-map-lat";
+    const lngInput = document.createElement("input");
+    lngInput.type = "number";
+    lngInput.step = "any";
+    lngInput.placeholder = "Longitud";
+    lngInput.value = String(lng);
+    lngInput.className = "easy-form-map-lng";
+    const updateFromInputs = () => {
+      const latVal = parseFloat(latInput.value);
+      const lngVal = parseFloat(lngInput.value);
+      if (!isNaN(latVal) && !isNaN(lngVal)) {
+        this.onChange({ lat: latVal, lng: lngVal });
+        this.syncMarkerPosition(latVal, lngVal);
+      }
+      this.onBlur();
+    };
+    latInput.addEventListener("change", updateFromInputs);
+    lngInput.addEventListener("change", updateFromInputs);
+    inputsWrapper.appendChild(latInput);
+    inputsWrapper.appendChild(lngInput);
+    container.appendChild(inputsWrapper);
+    const mapContainer = document.createElement("div");
+    mapContainer.className = "easy-form-map-container";
+    container.appendChild(mapContainer);
+    const linkId = "easy-form-leaflet-css";
+    let cssLoaded = false;
+    const link = document.createElement("link");
+    link.id = linkId;
+    link.rel = "stylesheet";
+    link.href = LEAFLET_CSS;
+    link.onload = () => {
+      cssLoaded = true;
+    };
+    container.insertBefore(link, container.firstChild);
+    const initMap = async () => {
+      if (typeof window === "undefined") return;
+      mapContainer.style.height = "300px";
+      mapContainer.style.width = "100%";
+      mapContainer.style.position = "relative";
+      mapContainer.style.overflow = "hidden";
+      mapContainer.style.display = "block";
+      await new Promise((resolve) => {
+        const checkReady = () => {
+          if (cssLoaded && mapContainer.offsetWidth > 0 && mapContainer.offsetHeight > 0) {
+            resolve(void 0);
+          } else {
+            requestAnimationFrame(checkReady);
+          }
+        };
+        checkReady();
+      });
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      let L;
+      try {
+        L = await import("leaflet");
+      } catch {
+        mapContainer.innerHTML = `
+          <div style="padding:2rem;text-align:center;color:#666;font-size:0.875rem;background:#f9f9f9;border-radius:4px;">
+            <strong>Campo map requiere Leaflet</strong><br><br>
+            Instala e importa Leaflet para usar el mapa interactivo:<br>
+            <code>npm install leaflet</code><br><br>
+            En tu app: <code>import 'leaflet'</code> y <code>import 'leaflet/dist/leaflet.css'</code><br>
+            <a href="https://easyforms.dev/docs/tipos-campos#map" target="_blank" rel="noopener" style="color:var(--easy-form-primary,#007bff);">Ver documentaci\xF3n</a>
+          </div>
+        `;
+        return;
+      }
+      delete L.Icon.Default.prototype._getIconUrl;
+      L.Icon.Default.mergeOptions({
+        iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+        iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+        shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png"
+      });
+      this.mapInstance = L.map(mapContainer, {
+        preferCanvas: false,
+        zoomControl: true
+      }).setView([lat, lng], zoom);
+      const tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        maxZoom: 19
+      }).addTo(this.mapInstance);
+      this.mapInstance.invalidateSize();
+      tileLayer.on("load", () => {
+        if (this.mapInstance) {
+          this.mapInstance.invalidateSize();
+        }
+      });
+      const invalidateSize = () => {
+        if (this.mapInstance) {
+          this.mapInstance.invalidateSize();
+        }
+      };
+      setTimeout(invalidateSize, 100);
+      setTimeout(invalidateSize, 300);
+      setTimeout(invalidateSize, 500);
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && this.mapInstance) {
+            setTimeout(() => {
+              this.mapInstance?.invalidateSize();
+            }, 100);
+          }
+        });
+      });
+      observer.observe(mapContainer);
+      this.markerInstance = L.marker([lat, lng], { draggable: true }).addTo(this.mapInstance).on("dragend", () => {
+        const pos = this.markerInstance.getLatLng();
+        latInput.value = String(Number(pos.lat.toFixed(6)));
+        lngInput.value = String(Number(pos.lng.toFixed(6)));
+        this.onChange({ lat: pos.lat, lng: pos.lng });
+        this.onBlur();
+      });
+      this.mapInstance.on("click", (e) => {
+        const { lat: newLat, lng: newLng } = e.latlng;
+        this.markerInstance.setLatLng([newLat, newLng]);
+        latInput.value = String(Number(newLat.toFixed(6)));
+        lngInput.value = String(Number(newLng.toFixed(6)));
+        this.onChange({ lat: newLat, lng: newLng });
+        this.onBlur();
+      });
+    };
+    initMap();
+    return this.createFieldContainer(container);
+  }
+  syncMarkerPosition(newLat, newLng) {
+    if (this.mapInstance && this.markerInstance) {
+      this.markerInstance.setLatLng([newLat, newLng]);
+      this.mapInstance.setView([newLat, newLng]);
+      setTimeout(() => {
+        this.mapInstance?.invalidateSize();
+      }, 50);
+    }
+  }
+};
+
+// src/components/inputs/rating-input.ts
+var STAR_SVG = (filled) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="${filled ? "currentColor" : "none"}" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`;
+var RatingInput = class extends BaseInput {
+  render() {
+    const ratingField = this.field;
+    const max = ratingField.max ?? 5;
+    const half = ratingField.half ?? false;
+    const currentValue = this.value != null ? Number(this.value) : 0;
+    const container = document.createElement("div");
+    container.className = "easy-form-rating";
+    container.setAttribute("role", "slider");
+    container.setAttribute("aria-valuemin", "0");
+    container.setAttribute("aria-valuemax", String(max));
+    container.setAttribute("aria-valuenow", String(currentValue));
+    container.setAttribute("aria-label", this.field.label || "Rating");
+    container.setAttribute("tabindex", "0");
+    const starsContainer = document.createElement("div");
+    starsContainer.className = "easy-form-rating-stars";
+    for (let i = 1; i <= max; i++) {
+      const starWrapper = document.createElement("button");
+      starWrapper.type = "button";
+      const filled = currentValue >= i || half && currentValue >= i - 0.5;
+      starWrapper.className = filled ? "easy-form-rating-star easy-form-rating-star-filled" : "easy-form-rating-star";
+      starWrapper.innerHTML = STAR_SVG(filled);
+      starWrapper.setAttribute("aria-label", `${i} de ${max}`);
+      starWrapper.addEventListener("click", (e) => {
+        e.preventDefault();
+        const rect = e.target.closest("button")?.getBoundingClientRect();
+        let val = i;
+        if (half && rect) {
+          const mid = rect.left + rect.width / 2;
+          val = e.clientX < mid ? i - 0.5 : i;
+        }
+        this.onChange(val);
+        this.onBlur();
+        this.rerenderStars(container, max, val, half);
+        container.setAttribute("aria-valuenow", String(val));
+      });
+      starsContainer.appendChild(starWrapper);
+    }
+    container.appendChild(starsContainer);
+    container.addEventListener("keydown", (e) => {
+      const cur = Number(container.getAttribute("aria-valuenow")) || 0;
+      let newVal = cur;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        newVal = Math.min(max, half ? cur + 0.5 : cur + 1);
+        this.onChange(newVal);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        newVal = Math.max(0, half ? cur - 0.5 : cur - 1);
+        this.onChange(newVal);
+      }
+      if (newVal !== cur) {
+        this.rerenderStars(container, max, newVal, half);
+        container.setAttribute("aria-valuenow", String(newVal));
+      }
+    });
+    return this.createFieldContainer(container);
+  }
+  rerenderStars(container, max, value, half) {
+    const stars = container.querySelectorAll(".easy-form-rating-star");
+    stars.forEach((star, i) => {
+      const idx = i + 1;
+      const filled = value >= idx || half && value >= idx - 0.5;
+      star.className = filled ? "easy-form-rating-star easy-form-rating-star-filled" : "easy-form-rating-star";
+      star.innerHTML = STAR_SVG(filled);
+    });
+  }
+};
+
+// src/components/inputs/slider-input.ts
+var SliderInput = class extends BaseInput {
+  render() {
+    const sliderField = this.field;
+    const min = sliderField.min ?? 0;
+    const max = sliderField.max ?? 100;
+    const step = sliderField.step ?? 1;
+    const showValue = sliderField.showValue ?? false;
+    const input = document.createElement("input");
+    input.type = "range";
+    input.min = String(min);
+    input.max = String(max);
+    input.step = String(step);
+    input.value = this.value != null ? String(this.value) : String(min);
+    input.setAttribute("aria-valuemin", String(min));
+    input.setAttribute("aria-valuemax", String(max));
+    input.setAttribute("aria-valuenow", input.value);
+    this.applyCommonProps(input);
+    input.addEventListener("input", (e) => {
+      const target = e.target;
+      const val = step >= 1 ? parseInt(target.value, 10) : parseFloat(target.value);
+      this.onChange(isNaN(val) ? min : val);
+      if (valueSpan) {
+        valueSpan.textContent = target.value;
+      }
+      input.setAttribute("aria-valuenow", target.value);
+    });
+    input.addEventListener("change", () => {
+      this.onBlur();
+    });
+    let valueSpan = null;
+    if (showValue) {
+      valueSpan = document.createElement("span");
+      valueSpan.className = "easy-form-slider-value";
+      valueSpan.textContent = input.value;
+      const wrapper = document.createElement("div");
+      wrapper.className = "easy-form-slider-wrapper";
+      wrapper.appendChild(input);
+      wrapper.appendChild(valueSpan);
+      return this.createFieldContainer(wrapper);
+    }
+    return this.createFieldContainer(input);
+  }
+};
+
 // 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":
@@ -4219,6 +4953,14 @@ function createInput(field, value, error, onChange, onBlur) {
       return new DateInput(field, value, error, onChange, onBlur).render();
     case "file":
       return new FileInput(field, value, error, onChange, onBlur).render();
+    case "file-drop":
+      return new FileDropInput(field, value, error, onChange, onBlur).render();
+    case "map":
+      return new MapInput(field, value, error, onChange, onBlur).render();
+    case "rating":
+      return new RatingInput(field, value, error, onChange, onBlur).render();
+    case "slider":
+      return new SliderInput(field, value, error, onChange, onBlur).render();
     case "quantity":
       return new QuantityInput(field, value, error, onChange, onBlur).render();
     case "accordion-select":
@@ -4791,7 +5533,10 @@ var EasyForm = class extends BrowserHTMLElement {
       "max-attempts",
       "block-duration-minutes",
       "attempts-storage-key",
-      "submit-button"
+      "submit-button",
+      "label-position",
+      "show-completed-indicator",
+      "form-direction"
     ];
   }
   /**
@@ -5116,6 +5861,12 @@ var EasyForm = class extends BrowserHTMLElement {
       if (this.disabled || this.loading) {
         newFormElement.classList.add("easy-form-disabled");
       }
+      const directionAttr = this.getAttribute("form-direction");
+      const direction = schema.direction ?? (directionAttr === "vertical" || directionAttr === "horizontal" ? directionAttr : "vertical");
+      newFormElement.classList.add(`easy-form-direction-${direction}`);
+      const showCompletedAttr = this.getAttribute("show-completed-indicator");
+      const completedIndicator = schema.completedIndicator ?? (showCompletedAttr !== null && showCompletedAttr !== "false");
+      const completedPosition = typeof completedIndicator === "object" && completedIndicator?.position ? completedIndicator.position : "top";
       if (finalWizardState) {
         this.renderWizard(newFormElement, schema);
       } else {
@@ -5137,6 +5888,33 @@ var EasyForm = class extends BrowserHTMLElement {
           newFormElement.appendChild(submitWrapper);
         }
       }
+      let formWrapper = null;
+      if (completedIndicator) {
+        const { completed, total } = this.getCompletedRequiredProgress(schema);
+        const progressBar = document.createElement("div");
+        progressBar.className = "easy-form-completed-indicator";
+        progressBar.setAttribute("role", "progressbar");
+        progressBar.setAttribute("aria-valuenow", String(completed));
+        progressBar.setAttribute("aria-valuemin", "0");
+        progressBar.setAttribute("aria-valuemax", String(total));
+        progressBar.setAttribute("aria-label", `Campos obligatorios completados: ${completed} de ${total}`);
+        const track = document.createElement("div");
+        track.className = "easy-form-completed-track";
+        const fill = document.createElement("div");
+        fill.className = "easy-form-completed-fill";
+        fill.style.width = total > 0 ? `${completed / total * 100}%` : "0%";
+        track.appendChild(fill);
+        progressBar.appendChild(track);
+        formWrapper = document.createElement("div");
+        formWrapper.className = "easy-form-wrapper";
+        if (completedPosition === "top") {
+          formWrapper.appendChild(progressBar);
+          formWrapper.appendChild(newFormElement);
+        } else {
+          formWrapper.appendChild(newFormElement);
+          formWrapper.appendChild(progressBar);
+        }
+      }
       const oldForm = this.shadow.querySelector("form");
       if (oldForm && oldForm.parentNode === this.shadow && oldForm !== newFormElement) {
         try {
@@ -5145,7 +5923,9 @@ var EasyForm = class extends BrowserHTMLElement {
           console.warn("Error al eliminar formulario anterior:", e);
         }
       }
-      this.shadow.appendChild(newFormElement);
+      const oldWrapper = this.shadow.querySelector(".easy-form-wrapper");
+      if (oldWrapper) oldWrapper.remove();
+      this.shadow.appendChild(formWrapper || newFormElement);
       if (this.loading) {
         this.updateLoadingOverlay(newFormElement);
       }
@@ -5428,9 +6208,13 @@ var EasyForm = class extends BrowserHTMLElement {
     const errors = this.stateManager.getErrors(field.name);
     const error = errors.length > 0 ? errors[0] : void 0;
     const isFormDisabled = this.disabled || this.loading;
+    const labelPositionAttr = this.getAttribute("label-position");
+    const validLabelPositions = ["up", "down", "left", "right", "none"];
+    const effectiveLabelPosition = field.labelPosition ?? (labelPositionAttr && validLabelPositions.includes(labelPositionAttr) ? labelPositionAttr : "up");
     const fieldWithDependencies = {
       ...field,
-      disabled: isFormDisabled || !isEnabled || field.disabled
+      disabled: isFormDisabled || !isEnabled || field.disabled,
+      labelPosition: effectiveLabelPosition
     };
     const customComponent = getCustomComponent(field.type);
     if (customComponent) {
@@ -5469,7 +6253,9 @@ var EasyForm = class extends BrowserHTMLElement {
    */
   renderGroup(field) {
     const groupContainer = document.createElement("div");
-    groupContainer.className = "easy-form-group";
+    const groupField = field;
+    const dir = groupField.direction ?? "vertical";
+    groupContainer.className = `easy-form-group easy-form-direction-${dir}`;
     if (field.label) {
       const label = document.createElement("h3");
       label.className = "easy-form-group-label";
@@ -5600,6 +6386,49 @@ var EasyForm = class extends BrowserHTMLElement {
       onBlur: () => this.handleFieldBlur(field.name)
     });
   }
+  /**
+   * Obtiene el progreso de campos obligatorios completados
+   */
+  getCompletedRequiredProgress(schema) {
+    const extractFields = (fields2) => {
+      const result = [];
+      for (const f of fields2) {
+        if (f.type === "array" && "itemSchema" in f && f.itemSchema?.fields) {
+          const items = this.stateManager.getValue(f.name);
+          const count = Array.isArray(items) ? items.length : 0;
+          for (let i = 0; i < count; i++) {
+            for (const sf of f.itemSchema.fields) {
+              result.push({ ...sf, name: `${f.name}.${i}.${sf.name}` });
+            }
+          }
+        } else if ((f.type === "group" || f.type === "row") && "fields" in f && f.fields) {
+          result.push(...extractFields(f.fields));
+        } else {
+          result.push(f);
+        }
+      }
+      return result;
+    };
+    const fields = schema.steps ? this.stateManager.getCurrentStepFields() || [] : schema.fields || [];
+    const allFields = extractFields(fields);
+    const requiredFields = allFields.filter(
+      (f) => f.validations?.some((v) => v.type === "required")
+    );
+    const visibleRequired = requiredFields.filter(
+      (f) => this.stateManager.getFieldVisibility(f.name)
+    );
+    const total = visibleRequired.length;
+    const completed = visibleRequired.filter((f) => {
+      const errors = this.stateManager.getErrors(f.name);
+      if (errors.length > 0) return false;
+      const val = this.stateManager.getValue(f.name);
+      if (val === null || val === void 0) return false;
+      if (typeof val === "string" && val.trim() === "") return false;
+      if (Array.isArray(val) && val.length === 0 && f.type === "array") return false;
+      return true;
+    }).length;
+    return { completed, total };
+  }
   /**
    * Renderiza wizard
    */