web-mojo 2.2.8 → 2.2.10

package/dist/chunks/{FormView-CwYt4vH3.js → FormView-B_90L1RY.js}

@@ -2168,50 +2168,38 @@ class FormBuilder {
       name,
       label,
       value = "",
-      placeholder = "Select or type...",
-      options = [],
       required = false,
       disabled = false,
-      readonly = false,
-      allowCustom = true,
-      showDescription = true,
-      minChars = 0,
-      maxSuggestions = 10,
+      maxHeight = 300,
       help = field.helpText || field.help || ""
     } = field;
-    const fieldId = this.getFieldId(name);
+    const placeholder = field.placeholder || field.placeHolder || "Type or select...";
+    const allowCustom = field.allowCustom !== false;
+    this.getFieldId(name);
     const error = this.errors[name];
-    const fieldValue = this.getFieldValue(name) ?? value;
+    const fieldValue = field.value ?? this.getFieldValue(name) ?? value;
     return `
       <div class="mojo-form-control">
-        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
-        <div class="combo-input-placeholder"
+        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        <div class="combobox-placeholder"
              data-field-name="${name}"
-             data-field-type="combo"
+             data-field-type="combobox"
              data-field-config='${JSON.stringify({
       name,
       value: fieldValue,
       placeholder,
-      options,
+      maxHeight,
       allowCustom,
-      showDescription,
-      minChars,
-      maxSuggestions,
       disabled,
-      readonly,
       required
     })}'>
-          <input type="text"
-                 id="${fieldId}"
-                 name="${name}_display"
-                 class="${this.options.inputClass}${error ? " is-invalid" : ""}"
-                 placeholder="${this.escapeHtml(placeholder)}"
+          <input type="text" 
+                 class="form-control${error ? " is-invalid" : ""}"
                  value="${this.escapeHtml(fieldValue)}"
+                 placeholder="${this.escapeHtml(placeholder)}"
                  ${disabled ? "disabled" : ""}
-                 ${readonly ? "readonly" : ""}
                  ${required ? "required" : ""}>
-          <input type="hidden" name="${name}" value="${this.escapeHtml(fieldValue)}">
-          <small class="form-text text-muted">This will be enhanced with ComboInput component</small>
+          <small class="form-text text-muted">This will be enhanced with ComboBox component</small>
         </div>
         ${help ? `<div class="${this.options.helpClass}">${this.escapeHtml(help)}</div>` : ""}
         ${error ? `<div class="${this.options.errorClass}">${this.escapeHtml(error)}</div>` : ""}
@@ -6134,6 +6122,240 @@ class ComboInput extends View {
     return new ComboInput(options);
   }
 }
+class ComboBox extends View {
+  constructor(options = {}) {
+    super(options);
+    this.name = options.name || "combo";
+    this.placeholder = options.placeholder || options.placeHolder || "Type or select...";
+    this.value = options.value || "";
+    this.options = options.options || [];
+    this.allowCustom = options.allowCustom !== false;
+    this.disabled = options.disabled || false;
+    this.required = options.required || false;
+    this.maxHeight = options.maxHeight || 300;
+    this.filteredOptions = [...this.options];
+    this.highlightedIndex = -1;
+    this.isOpen = false;
+    this.template = `
+      <div class="combobox-container">
+        <div class="input-group">
+          <input type="text" 
+                 class="form-control combobox-input" 
+                 placeholder="{{placeholder}}"
+                 value="{{value}}"
+                 {{#disabled}}disabled{{/disabled}}
+                 {{#required}}required{{/required}}
+                 data-action="combobox-input"
+                 autocomplete="off">
+          <button class="btn btn-outline-secondary combobox-toggle" 
+                  type="button"
+                  data-action="combobox-toggle"
+                  {{#disabled}}disabled{{/disabled}}>
+            <i class="bi bi-chevron-down"></i>
+          </button>
+        </div>
+        <div class="dropdown-menu combobox-dropdown" 
+             style="max-height: {{maxHeight}}px; overflow-y: auto; width: 100%;">
+          <div data-region="dropdown-items"></div>
+          {{^allowCustom}}
+          <div class="combobox-no-match dropdown-item text-muted" style="display: none;">
+            No matches found
+          </div>
+          {{/allowCustom}}
+        </div>
+      </div>
+    `;
+    this.itemTemplate = `
+      {{#items}}
+      <button type="button" 
+              class="dropdown-item combobox-item {{#highlighted}}active{{/highlighted}}"
+              data-action="select-item"
+              data-value="{{value}}"
+              data-index="{{index}}">
+        {{label}}
+      </button>
+      {{/items}}
+    `;
+  }
+  async onInit() {
+    await super.onInit();
+  }
+  async onAfterRender() {
+    await super.onAfterRender();
+    this.input = this.element.querySelector(".combobox-input");
+    this.dropdown = this.element.querySelector(".combobox-dropdown");
+    this.dropdownItems = this.element.querySelector('[data-region="dropdown-items"]');
+    this.noMatchDiv = this.element.querySelector(".combobox-no-match");
+    if (this.value && this.input) {
+      const option = this.options.find((opt) => opt.value === this.value);
+      if (option) {
+        this.input.value = option.label || option.value;
+      } else if (this.allowCustom) {
+        this.input.value = this.value;
+      }
+    }
+    this.renderItems();
+    this.setupEventListeners();
+  }
+  setupEventListeners() {
+    this.input.addEventListener("focus", () => this.openDropdown());
+    this.input.addEventListener("input", (e) => this.handleInput(e));
+    this.input.addEventListener("keydown", (e) => this.handleKeydown(e));
+    document.addEventListener("click", (e) => {
+      if (!this.element.contains(e.target)) {
+        this.closeDropdown();
+      }
+    });
+  }
+  handleInput(event) {
+    const searchText = event.target.value.toLowerCase();
+    this.filteredOptions = this.options.filter((opt) => {
+      const label = opt.label || opt.value;
+      return label.toLowerCase().includes(searchText);
+    });
+    this.highlightedIndex = -1;
+    this.renderItems();
+    this.openDropdown();
+    if (!this.allowCustom && this.noMatchDiv) {
+      this.noMatchDiv.style.display = this.filteredOptions.length === 0 ? "block" : "none";
+    }
+    this.value = event.target.value;
+    this.emit("change", { value: this.value });
+  }
+  handleKeydown(event) {
+    if (!this.isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      this.openDropdown();
+      event.preventDefault();
+      return;
+    }
+    if (!this.isOpen) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredOptions.length - 1);
+        this.renderItems();
+        this.scrollToHighlighted();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);
+        this.renderItems();
+        this.scrollToHighlighted();
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.highlightedIndex >= 0) {
+          this.selectItem(this.filteredOptions[this.highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.closeDropdown();
+        break;
+      case "Tab":
+        this.closeDropdown();
+        break;
+    }
+  }
+  scrollToHighlighted() {
+    if (this.highlightedIndex < 0) return;
+    const items = this.dropdownItems.querySelectorAll(".combobox-item");
+    const highlightedItem = items[this.highlightedIndex];
+    if (highlightedItem) {
+      highlightedItem.scrollIntoView({ block: "nearest" });
+    }
+  }
+  openDropdown() {
+    if (this.disabled || this.isOpen) return;
+    this.isOpen = true;
+    this.dropdown.classList.add("show");
+    if (this.input.value === "") {
+      this.filteredOptions = [...this.options];
+      this.renderItems();
+    }
+  }
+  closeDropdown() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.dropdown.classList.remove("show");
+    this.highlightedIndex = -1;
+    if (!this.allowCustom) {
+      const validOption = this.options.find(
+        (opt) => opt.value === this.input.value || opt.label === this.input.value
+      );
+      if (!validOption && this.input.value !== "") {
+        this.input.value = this.value;
+      }
+    }
+  }
+  selectItem(option) {
+    const value = option.value;
+    const label = option.label || option.value;
+    this.input.value = label;
+    this.value = value;
+    this.closeDropdown();
+    this.filteredOptions = [...this.options];
+    this.highlightedIndex = -1;
+    this.emit("change", { value: this.value, label });
+  }
+  renderItems() {
+    const items = this.filteredOptions.map((opt, index) => ({
+      value: opt.value,
+      label: opt.label || opt.value,
+      index,
+      highlighted: index === this.highlightedIndex
+    }));
+    const html = Mustache.render(this.itemTemplate, { items });
+    this.dropdownItems.innerHTML = html;
+  }
+  // Action handlers
+  async onActionComboboxInput(event, element) {
+  }
+  async onActionComboboxToggle(event, element) {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.input.focus();
+      this.openDropdown();
+    }
+  }
+  async onActionSelectItem(event, element) {
+    const value = element.getAttribute("data-value");
+    const option = this.options.find((opt) => opt.value === value);
+    if (option) {
+      this.selectItem(option);
+    }
+  }
+  // Form integration methods
+  getValue() {
+    return this.value;
+  }
+  setValue(value) {
+    this.value = value;
+    if (!this.input) {
+      return;
+    }
+    const option = this.options.find((opt) => opt.value === value);
+    if (option) {
+      this.input.value = option.label || option.value;
+    } else if (this.allowCustom) {
+      this.input.value = value;
+    }
+  }
+  setFormValue(value) {
+    this.setValue(value);
+  }
+  getTemplateData() {
+    return {
+      placeholder: this.placeholder,
+      value: this.input ? this.input.value : this.value,
+      disabled: this.disabled,
+      required: this.required,
+      maxHeight: this.maxHeight,
+      allowCustom: this.allowCustom
+    };
+  }
+}
 class FormView extends View {
   constructor(options = {}) {
     const {
@@ -6291,6 +6513,7 @@ class FormView extends View {
     this.initializeCustomComponents();
     this.initializeTagInputs();
     this.initializeMultiSelectDropdowns();
+    this.initializeComboBoxes();
     this.initializeCollectionSelects();
     this.initializeCollectionMultiSelects();
     this.initializeDatePickers();
@@ -6455,6 +6678,41 @@ class FormView extends View {
       }
     });
   }
+  /**
+   * Initialize ComboBox components (autocomplete dropdowns)
+   */
+  initializeComboBoxes() {
+    const comboboxPlaceholders = this.element.querySelectorAll('[data-field-type="combobox"]');
+    comboboxPlaceholders.forEach((placeholder) => {
+      try {
+        const fieldName = placeholder.getAttribute("data-field-name");
+        const configData = placeholder.getAttribute("data-field-config");
+        const config = JSON.parse(configData);
+        const fieldConfig = this.getFormFieldConfig(fieldName);
+        if (!fieldConfig) {
+          return;
+        }
+        const combobox = new ComboBox({
+          ...config,
+          options: fieldConfig.options || [],
+          placeholder: fieldConfig.placeholder || config.placeholder || "Type or select...",
+          containerId: null
+          // We'll mount directly
+        });
+        let value = config.value ?? MOJOUtils.getContextData(this.data, fieldName);
+        if (value) {
+          combobox.setFormValue(value);
+        }
+        combobox.render(true, placeholder);
+        this.customComponents.set(fieldName, combobox);
+        combobox.on("change", (data) => {
+          this.handleFieldChange(fieldName, data.value);
+        });
+      } catch (error) {
+        console.error("ComboBox initialization failed:", error);
+      }
+    });
+  }
   /**
    * Initialize CollectionSelect components
    */
@@ -8291,4 +8549,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-CwYt4vH3.js.map
+//# sourceMappingURL=FormView-B_90L1RY.js.map