web-mojo 2.1.338 → 2.1.355

package/dist/chunks/{FormView-CWNpkr0M.js → FormView-C0vzlNsh.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CEW6rw8N.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-Br3Dja6P.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -5587,24 +5587,155 @@ class FieldStatusManager {
     this.timeouts = /* @__PURE__ */ new Map();
   }
   /**
-   * Find existing status container or create one
+   * Find existing status container or create one based on field type
    */
   findOrCreateStatusContainer() {
-    let container = this.fieldElement.parentElement.querySelector(".field-status");
+    let container = this.fieldElement.parentElement.querySelector(".field-status, .field-status-overlay, .field-status-full-overlay, .field-status-label-inline");
+    if (!container && this.getFieldType() === "toggle") {
+      const label = this.findToggleLabel();
+      if (label) {
+        container = label.querySelector(".field-status-label-inline");
+      }
+    }
     if (!container) {
-      container = document.createElement("div");
-      container.className = "field-status";
-      container.innerHTML = `
-        <div class="spinner-border spinner-border-sm text-primary d-none" data-status="saving" role="status">
+      container = this.createStatusContainer();
+    }
+    return container;
+  }
+  /**
+   * Create appropriate status container based on field type
+   */
+  createStatusContainer() {
+    const fieldType = this.getFieldType();
+    const placement = this.getPlacementStrategy(fieldType);
+    const container = document.createElement("div");
+    switch (placement) {
+      case "label-inline":
+        return this.createLabelInlineContainer(container);
+      case "input-overlay":
+        return this.createInputOverlayContainer(container);
+      case "full-overlay":
+        return this.createFullOverlayContainer(container);
+      default:
+        return this.createInputOverlayContainer(container);
+    }
+  }
+  /**
+   * Determine field type from element
+   */
+  getFieldType() {
+    const tagName = this.fieldElement.tagName.toLowerCase();
+    const type = this.fieldElement.type?.toLowerCase();
+    const classes = this.fieldElement.className;
+    if (type === "checkbox" || classes.includes("form-check-input") || classes.includes("form-switch")) {
+      return "toggle";
+    } else if (tagName === "select") {
+      return "select";
+    } else if (tagName === "textarea") {
+      return "textarea";
+    } else if (tagName === "input") {
+      return "input";
+    }
+    return "input";
+  }
+  /**
+   * Determine placement strategy for field type
+   */
+  getPlacementStrategy(fieldType) {
+    switch (fieldType) {
+      case "toggle":
+        return "label-inline";
+      // New inline label approach
+      case "textarea":
+        return "full-overlay";
+      case "input":
+      case "select":
+        return "input-overlay";
+      default:
+        return "input-overlay";
+    }
+  }
+  /**
+   * Create inline label status container (for toggles/checkboxes)
+   */
+  createLabelInlineContainer(container) {
+    container.className = "field-status-label-inline";
+    container.innerHTML = this.getStatusHTML();
+    const label = this.findToggleLabel();
+    if (label) {
+      label.appendChild(container);
+    } else {
+      this.fieldElement.parentElement.appendChild(container);
+    }
+    return container;
+  }
+  /**
+   * Find the label associated with this toggle field
+   */
+  findToggleLabel() {
+    if (this.fieldElement.id) {
+      const label2 = document.querySelector(`label[for="${this.fieldElement.id}"]`);
+      if (label2) return label2;
+    }
+    const label = this.fieldElement.parentElement.querySelector("label");
+    if (label) return label;
+    const parentLabel = this.fieldElement.closest("label");
+    if (parentLabel) return parentLabel;
+    return null;
+  }
+  /**
+   * Create input overlay container (for text inputs/selects)
+   */
+  createInputOverlayContainer(container) {
+    container.className = "field-status-overlay";
+    container.innerHTML = this.getStatusHTML();
+    const parent = this.fieldElement.parentElement;
+    if (getComputedStyle(parent).position === "static") {
+      parent.style.position = "relative";
+    }
+    parent.appendChild(container);
+    return container;
+  }
+  /**
+   * Create full overlay container (for textareas/large inputs)
+   */
+  createFullOverlayContainer(container) {
+    container.className = "field-status-full-overlay d-none";
+    container.innerHTML = `
+      <div class="saving-indicator">
+        <div class="spinner-border spinner-border-sm text-primary" role="status">
           <span class="visually-hidden">Saving...</span>
         </div>
-        <i class="bi bi-check-circle text-success d-none" data-status="saved"></i>
-        <i class="bi bi-exclamation-circle text-danger d-none" data-status="error"></i>
-      `;
-      this.fieldElement.parentElement.appendChild(container);
+        <span class="ms-2">Saving...</span>
+      </div>
+      <div class="success-indicator d-none">
+        <i class="bi bi-check-circle text-success"></i>
+        <span class="ms-2">Saved</span>
+      </div>
+      <div class="error-indicator d-none">
+        <i class="bi bi-exclamation-circle text-danger"></i>
+        <span class="ms-2">Error saving</span>
+      </div>
+    `;
+    const parent = this.fieldElement.parentElement;
+    if (getComputedStyle(parent).position === "static") {
+      parent.style.position = "relative";
     }
+    parent.appendChild(container);
     return container;
   }
+  /**
+   * Get standard status HTML for simple containers
+   */
+  getStatusHTML() {
+    return `
+      <div class="spinner-border spinner-border-sm text-primary d-none" data-status="saving" role="status">
+        <span class="visually-hidden">Saving...</span>
+      </div>
+      <i class="bi bi-check-circle text-success d-none" data-status="saved"></i>
+      <i class="bi bi-exclamation-circle text-danger d-none" data-status="error"></i>
+    `;
+  }
   /**
    * Show a status indicator
    * @param {string} type - Status type: 'saving', 'saved', 'error'
@@ -5612,6 +5743,16 @@ class FieldStatusManager {
    */
   showStatus(type, options = {}) {
     this.clearTimeout(type);
+    if (this.statusContainer.classList.contains("field-status-full-overlay")) {
+      this.showFullOverlayStatus(type, options);
+    } else {
+      this.showStandardStatus(type, options);
+    }
+  }
+  /**
+   * Show status for standard containers (right-side, input-overlay)
+   */
+  showStandardStatus(type, options = {}) {
     this.hideAllStatuses();
     const indicator = this.statusContainer.querySelector(`[data-status="${type}"]`);
     if (indicator) {
@@ -5627,6 +5768,38 @@ class FieldStatusManager {
       }
     }
   }
+  /**
+   * Show status for full overlay containers (textareas)
+   */
+  showFullOverlayStatus(type, options = {}) {
+    const indicators = this.statusContainer.querySelectorAll(".saving-indicator, .success-indicator, .error-indicator");
+    indicators.forEach((ind) => ind.classList.add("d-none"));
+    this.statusContainer.classList.remove("d-none");
+    let indicatorClass;
+    switch (type) {
+      case "saving":
+        indicatorClass = ".saving-indicator";
+        break;
+      case "saved":
+        indicatorClass = ".success-indicator";
+        this.setTimeout(type, () => this.hideStatus(type), 2500);
+        break;
+      case "error":
+        indicatorClass = ".error-indicator";
+        if (options.message) {
+          const errorSpan = this.statusContainer.querySelector(".error-indicator span");
+          if (errorSpan) errorSpan.textContent = options.message;
+        }
+        this.setTimeout(type, () => this.hideStatus(type), 6e3);
+        break;
+    }
+    if (indicatorClass) {
+      const indicator = this.statusContainer.querySelector(indicatorClass);
+      if (indicator) {
+        indicator.classList.remove("d-none");
+      }
+    }
+  }
   /**
    * Hide a specific status indicator
    * @param {string} type - Status type to hide
@@ -5692,4 +5865,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-CWNpkr0M.js.map
+//# sourceMappingURL=FormView-C0vzlNsh.js.map