web-mojo 2.1.362 → 2.1.372

package/dist/chunks/{FormView-rtiwVHoR.js → FormView-ztYkGiQH.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-DYte9XVv.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-Cd8arpc1.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -286,11 +286,11 @@ class FormBuilder {
       buttongroup: `
         <div class="btn-group btn-group-{{size}}" role="group">
           {{#options}}
-          <button type="button" class="{{buttonClass}} {{#active}}active{{/active}}"
+          <button type="button" class="{{buttonClass}} {{#active}}active{{/active}} {{#action}}data-action='{{action}}'{{/action}}"
                   data-action="select-button-option"
                   data-field="{{fieldName}}"
                   data-value="{{value}}">
-            {{label}}
+            {{#icon}}<i class="{{icon}} me-1"></i> {{/icon}} {{label}}
           </button>
           {{/options}}
         </div>
@@ -306,6 +306,29 @@ 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="d-flex align-items-center gap-2">
+            <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}}}>
+            <button type="button" class="btn-sm text-muted border-0 bg-transparent p-1"
+                    data-action="clear-color" data-field="{{name}}"
+                    title="Clear color">
+              <i class="bi bi-x fs-5"></i>
+            </button>
+          </div>
+          {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
+          {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
+        </div>
       `
     };
   }
@@ -490,6 +513,7 @@ class FormBuilder {
   buildFieldHTML(field) {
     const { type, columns, class: fieldClass = "" } = field;
     let fieldHTML = "";
+    console.log("buildFieldHTML - Processing field type:", type, "for field:", field.name);
     switch (type) {
       case "text":
         fieldHTML = this.renderTextField(field);
@@ -1297,7 +1321,41 @@ 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
+    };
+    return Mustache.render(this.templates.color, context);
   }
   /**
    * Render range field
@@ -1791,6 +1849,7 @@ class FormBuilder {
       options: field.options.map((option) => ({
         value: option.value,
         label: option.label,
+        action: option.action,
         active: option.value === selectedValue,
         buttonClass: this.getButtonClass(option.value === selectedValue, field.variant)
       }))
@@ -4526,6 +4585,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
    */
@@ -5841,4 +5913,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-rtiwVHoR.js.map
+//# sourceMappingURL=FormView-ztYkGiQH.js.map