web-mojo 2.1.355 → 2.1.363

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

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-Br3Dja6P.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CBz7WZw_.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -306,6 +306,31 @@ class FormBuilder {
             {{/fields}}
           </div>
         </div>
+      `,
+      color: `
+        <div class="mojo-form-control">
+          {{#label}}
+          <label for="{{fieldId}}" class="{{labelClass}}">
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+          </label>
+          {{/label}}
+          <div class="input-group">
+            <input type="color" id="{{fieldId}}" name="{{name}}"
+                   class="{{inputClass}}{{#error}} is-invalid{{/error}}"
+                   value="{{fieldValue}}" 
+                   {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
+                   {{#readonly}}readonly{{/readonly}} data-change-action="validate-field" {{{attrs}}}>
+            {{#hasValue}}
+            <button type="button" class="btn btn-outline-secondary" 
+                    data-action="clear-color" data-field="{{name}}" 
+                    title="Clear color">
+              <i class="bi bi-x"></i>
+            </button>
+            {{/hasValue}}
+          </div>
+          {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
+          {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
+        </div>
       `
     };
   }
@@ -1297,7 +1322,42 @@ class FormBuilder {
    * @returns {string} Field HTML
    */
   renderColorField(field) {
-    return this.renderInputField(field, "color");
+    const {
+      name,
+      label,
+      value = "",
+      placeholder = "",
+      required = false,
+      disabled = false,
+      readonly = false,
+      class: fieldClass = "",
+      attributes = {},
+      help = field.helpText || field.help || ""
+    } = field;
+    const inputClass = `${this.options.inputClass} ${fieldClass}`.trim();
+    const error = this.errors[name];
+    const fieldValue = this.getFieldValue(name) ?? value;
+    const attrs = Object.entries(attributes).map(([key, val]) => `${key}="${this.escapeHtml(val)}"`).join(" ");
+    const fieldId = this.getFieldId(name);
+    const context = {
+      labelClass: this.options.labelClass,
+      inputClass,
+      helpClass: this.options.helpClass,
+      errorClass: this.options.errorClass,
+      fieldId,
+      name,
+      fieldValue: this.escapeHtml(fieldValue),
+      label: label ? this.escapeHtml(label) : null,
+      placeholder: placeholder ? this.escapeHtml(placeholder) : null,
+      help: help ? this.escapeHtml(help) : null,
+      error: error ? this.escapeHtml(error) : null,
+      required,
+      disabled,
+      readonly,
+      attrs,
+      hasValue: fieldValue && fieldValue !== ""
+    };
+    return Mustache.render(this.templates.color, context);
   }
   /**
    * Render range field
@@ -4526,6 +4586,19 @@ class FormView extends View {
     this.emit("change", { field: fieldName, value: null, form: this });
     await this.updateField(fieldName);
   }
+  /**
+   * Handle clear color action
+   */
+  async onActionClearColor(event, element) {
+    const fieldName = element.getAttribute("data-field");
+    if (!fieldName) return;
+    const colorInput = this.element.querySelector(`input[name="${fieldName}"]`);
+    if (colorInput) {
+      colorInput.value = "";
+      this.handleFieldChange(fieldName, "");
+      await this.updateField(fieldName);
+    }
+  }
   /**
    * Handle button group selection
    */
@@ -5590,9 +5663,9 @@ class FieldStatusManager {
    * Find existing status container or create one based on field type
    */
   findOrCreateStatusContainer() {
-    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();
+    let container = this.fieldElement.parentElement.querySelector(".field-status-label-inline");
+    if (!container) {
+      const label = this.findFieldLabel();
       if (label) {
         container = label.querySelector(".field-status-label-inline");
       }
@@ -5607,18 +5680,9 @@ class FieldStatusManager {
    */
   createStatusContainer() {
     const fieldType = this.getFieldType();
-    const placement = this.getPlacementStrategy(fieldType);
+    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);
-    }
+    return this.createLabelInlineContainer(container);
   }
   /**
    * Determine field type from element
@@ -5642,26 +5706,15 @@ class FieldStatusManager {
    * 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";
-    }
+    return "label-inline";
   }
   /**
-   * Create inline label status container (for toggles/checkboxes)
+   * Create inline label status container (for all input types)
    */
   createLabelInlineContainer(container) {
     container.className = "field-status-label-inline";
     container.innerHTML = this.getStatusHTML();
-    const label = this.findToggleLabel();
+    const label = this.findFieldLabel();
     if (label) {
       label.appendChild(container);
     } else {
@@ -5670,9 +5723,9 @@ class FieldStatusManager {
     return container;
   }
   /**
-   * Find the label associated with this toggle field
+   * Find the label associated with any field type
    */
-  findToggleLabel() {
+  findFieldLabel() {
     if (this.fieldElement.id) {
       const label2 = document.querySelector(`label[for="${this.fieldElement.id}"]`);
       if (label2) return label2;
@@ -5743,11 +5796,7 @@ 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);
-    }
+    this.showStandardStatus(type, options);
   }
   /**
    * Show status for standard containers (right-side, input-overlay)
@@ -5865,4 +5914,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-C0vzlNsh.js.map
+//# sourceMappingURL=FormView-DGibmo-j.js.map