jedison 1.11.2 → 1.12.0

package/dist/esm/jedison.js

@@ -3270,7 +3270,8 @@ const glyphicons = {
   close: "glyphicon glyphicon-remove",
   edit: "glyphicon glyphicon-pencil",
   save: "glyphicon glyphicon-floppy-disk",
-  copy: "glyphicon glyphicon-copy"
+  copy: "glyphicon glyphicon-copy",
+  switcher: "glyphicon glyphicon-chevron-down"
 };
 const bootstrapIcons = {
   properties: "bi bi-card-list",
@@ -3285,7 +3286,8 @@ const bootstrapIcons = {
   close: "bi bi-x",
   edit: "bi bi-pencil",
   save: "bi bi-floppy",
-  copy: "bi bi-clipboard"
+  copy: "bi bi-clipboard",
+  switcher: "bi bi-chevron-down"
 };
 const fontAwesome3 = {
   properties: "icon-list",
@@ -3300,7 +3302,8 @@ const fontAwesome3 = {
   close: "icon-remove",
   edit: "icon-pencil",
   save: "icon-save",
-  copy: "icon-copy"
+  copy: "icon-copy",
+  switcher: "icon-chevron-down"
 };
 const fontAwesome4 = {
   properties: "fa fa-list",
@@ -3315,7 +3318,8 @@ const fontAwesome4 = {
   close: "fa fa-times",
   edit: "fa fa-pencil",
   save: "fa fa-floppy-o",
-  copy: "fa fa-clipboard"
+  copy: "fa fa-clipboard",
+  switcher: "fa fa-chevron-down"
 };
 const fontAwesome5 = {
   properties: "fas fa-list",
@@ -3330,7 +3334,8 @@ const fontAwesome5 = {
   close: "fas fa-times",
   edit: "fas fa-pencil-alt",
   save: "fas fa-save",
-  copy: "fas fa-clipboard"
+  copy: "fas fa-clipboard",
+  switcher: "fas fa-chevron-down"
 };
 const fontAwesome6 = {
   properties: "fa-solid fa-list",
@@ -3345,7 +3350,8 @@ const fontAwesome6 = {
   close: "fa-solid fa-xmark",
   edit: "fa-solid fa-pencil",
   save: "fa-solid fa-floppy-disk",
-  copy: "fa-solid fa-clipboard"
+  copy: "fa-solid fa-clipboard",
+  switcher: "fa-solid fa-chevron-down"
 };
 class EditorBoolean extends Editor {
   sanitize(value) {
@@ -4052,8 +4058,7 @@ class EditorObject extends Editor {
   static resolves(schema) {
     return getSchemaType(schema) === "object";
   }
-  build() {
-    this.propertyActivators = {};
+  getObjectControlConfig() {
     let addProperty = true;
     const additionalProperties2 = getSchemaAdditionalProperties(this.instance.schema);
     if (isSet(additionalProperties2) && additionalProperties2 === false) {
@@ -4071,7 +4076,7 @@ class EditorObject extends Editor {
     if (isSet(schemaEnablePropertiesToggle)) {
       enablePropertiesToggle = schemaEnablePropertiesToggle;
     }
-    this.control = this.theme.getObjectControl({
+    return {
       title: this.getTitle(),
       description: this.getDescription(),
       titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
@@ -4085,8 +4090,13 @@ class EditorObject extends Editor {
       editJsonData: getSchemaXOption(this.instance.schema, "editJsonData") ?? this.instance.jedison.getOption("editJsonData"),
       propertiesToggleContent: getSchemaXOption(this.instance.schema, "propertiesToggleContent") ?? this.instance.jedison.translator.translate("propertiesToggle"),
       collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle"),
-      addPropertyContent: getSchemaXOption(this.instance.schema, "addPropertyContent") ?? this.instance.jedison.translator.translate("objectAddProperty")
-    });
+      addPropertyContent: getSchemaXOption(this.instance.schema, "addPropertyContent") ?? this.instance.jedison.translator.translate("objectAddProperty"),
+      isAccordion: false
+    };
+  }
+  build() {
+    this.propertyActivators = {};
+    this.control = this.theme.getObjectControl(this.getObjectControlConfig());
     this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
   }
   announcePropertyAdded(propertyName, child) {
@@ -4531,6 +4541,32 @@ class EditorObjectNav extends EditorObject {
     });
   }
 }
+class EditorObjectAccordion extends EditorObject {
+  static resolves(schema) {
+    return getSchemaType(schema) === "object" && getSchemaXOption(schema, "format") === "accordion";
+  }
+  getObjectControlConfig() {
+    return { ...super.getObjectControlConfig(), isAccordionProperties: true };
+  }
+  refreshEditors() {
+    this.control.childrenSlot.replaceChildren();
+    const accordionId = this.control.childrenSlot.id;
+    this.instance.children.forEach((child) => {
+      if (!child.isActive) return;
+      const schemaTitle = getSchemaTitle(child.schema);
+      const title = isSet(schemaTitle) ? schemaTitle : child.getKey();
+      const id = this.getIdFromPath(child.path);
+      const accordionItem = this.theme.getAccordionItem({ title, id, accordionId });
+      accordionItem.body.appendChild(child.ui.control.container);
+      this.control.childrenSlot.appendChild(accordionItem.container);
+      if (this.disabled || this.instance.isReadOnly()) {
+        child.ui.disable();
+      } else {
+        child.ui.enable();
+      }
+    });
+  }
+}
 class EditorArray extends Editor {
   static resolves(schema) {
     return getSchemaType(schema) === "array";
@@ -5470,6 +5506,15 @@ class EditorMultiple extends Editor {
         });
       });
     }
+    if (this.switcherInput === "modal") {
+      this.control.switcher.optionButtons.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          const index2 = Number(btn.dataset.switcherValue);
+          this.control.switcher.dialog.close();
+          this.instance.switchInstance(index2, void 0, "user");
+        });
+      });
+    }
   }
   refreshUI() {
     this.refreshDisabledState();
@@ -5486,6 +5531,14 @@ class EditorMultiple extends Editor {
         this.control.header.appendChild(this.control.switcher.container);
       }
     }
+    if (this.switcherInput === "modal") {
+      const childControl = this.instance.activeInstance.ui.control;
+      const titleEl = childControl.legendText || childControl.label;
+      if (titleEl) {
+        titleEl.after(this.control.switcher.container);
+        this.control.header.style.display = "none";
+      }
+    }
     if (this.switcherInput === "select") {
       this.control.switcher.input.value = this.instance.index;
     }
@@ -5495,6 +5548,12 @@ class EditorMultiple extends Editor {
         radio.checked = radioIndex === this.instance.index;
       });
     }
+    if (this.switcherInput === "modal") {
+      this.control.switcher.triggerText.textContent = this.instance.switcherOptionsLabels[this.instance.index];
+      this.control.switcher.optionButtons.forEach((btn, index2) => {
+        this.theme.setSwitcherOptionActive(btn, index2 === this.instance.index);
+      });
+    }
     if (this.disabled || this.instance.isReadOnly()) {
       this.instance.activeInstance.ui.disable();
     } else {
@@ -5995,6 +6054,48 @@ class EditorArrayCheckboxes extends Editor {
     }
     return getSchemaEnum(this.instance.schema.items) || [];
   }
+  isSortable() {
+    return window.Sortable && isSet(getSchemaXOption(this.instance.schema, "sortable"));
+  }
+  addDragHandles() {
+    if (!this.isSortable()) return;
+    this.control.checkboxControls.forEach((checkboxControl, index2) => {
+      if (checkboxControl.classList.contains("jedi-checkbox-control")) return;
+      const wrapper = document.createElement("div");
+      wrapper.classList.add("jedi-checkbox-control");
+      wrapper.style.display = "flex";
+      wrapper.style.alignItems = "baseline";
+      const dragBtn = this.theme.getDragItemBtn({
+        content: this.instance.jedison.translator.translate("arrayDrag")
+      });
+      checkboxControl.parentNode.insertBefore(wrapper, checkboxControl);
+      wrapper.appendChild(dragBtn);
+      wrapper.appendChild(checkboxControl);
+      this.control.checkboxControls[index2] = wrapper;
+    });
+  }
+  refreshSortable() {
+    if (this.isSortable()) {
+      if (this.sortable) {
+        this.sortable.destroy();
+      }
+      this.sortable = window.Sortable.create(this.control.fieldset, {
+        animation: 150,
+        handle: ".jedi-array-drag",
+        draggable: ".jedi-checkbox-control",
+        disabled: this.disabled || this.readOnly,
+        onEnd: () => {
+          const sorted = Array.from(this.control.fieldset.querySelectorAll(".jedi-checkbox-control"));
+          this.control.checkboxControls = sorted;
+          this.control.checkboxes = sorted.map((cc) => cc.querySelector('input[type="checkbox"]'));
+          this.control.labels = sorted.map((cc) => cc.querySelector("label"));
+          this.control.labelTexts = sorted.map((cc) => cc.querySelector("label span"));
+          const newValue = this.control.checkboxes.filter((cb) => cb.checked).map((cb) => cb.value);
+          this.instance.setValue(newValue, true, "user");
+        }
+      });
+    }
+  }
   build() {
     const values = this.getEnumSourceValues();
     const schemaItems = this.instance.schema.items || {};
@@ -6009,6 +6110,7 @@ class EditorArrayCheckboxes extends Editor {
       inline: getSchemaXOption(this.instance.schema, "format") === "checkboxes-inline",
       info: this.getInfo()
     });
+    this.addDragHandles();
   }
   refreshOptions() {
     const values = this.getEnumSourceValues();
@@ -6047,6 +6149,7 @@ class EditorArrayCheckboxes extends Editor {
       this.control.checkboxControls.push(checkboxControl);
       this.control.fieldset.insertBefore(checkboxControl, this.control.description);
     });
+    this.addDragHandles();
     this.addEventListeners();
     this.refreshUI();
   }
@@ -6081,6 +6184,7 @@ class EditorArrayCheckboxes extends Editor {
     this.control.checkboxes.forEach((checkbox) => {
       checkbox.checked = value.includes(checkbox.value);
     });
+    this.refreshSortable();
   }
   setAriaInvalid(invalid) {
     this.control.checkboxes.forEach((checkbox) => {
@@ -6257,6 +6361,69 @@ class EditorStringAce extends EditorString {
     }
   }
 }
+class EditorStringFilepond extends EditorString {
+  static resolves(schema) {
+    const format2 = getSchemaXOption(schema, "format");
+    return isSet(format2) && format2 === "filepond" && window.FilePond && getSchemaType(schema) === "string";
+  }
+  build() {
+    this.control = this.theme.getInputControl({
+      title: this.getTitle(),
+      description: this.getDescription(),
+      type: "file",
+      id: this.getIdFromPath(this.instance.path),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass"),
+      titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      info: this.getInfo()
+    });
+    try {
+      const schemaFilepond = getSchemaXOption(this.instance.schema, "filepond") ?? {};
+      const settingsKey = schemaFilepond["x-settings"];
+      const settings = settingsKey && this.instance.jedison.getOption("settings")[settingsKey] ? this.instance.jedison.getOption("settings")[settingsKey] : {};
+      const filepondOptions = { ...schemaFilepond, ...settings };
+      this.hasServer = !!filepondOptions.server;
+      this.filepond = window.FilePond.create(this.control.input, filepondOptions);
+      this.filepond.on("processfile", (error, file) => {
+        if (error) return;
+        const serverIds = this.filepond.getFiles().filter((f) => f.serverId).map((f) => f.serverId);
+        this.instance.setValue(serverIds.join(", "), true, "user");
+      });
+      this.filepond.on("addfile", (error) => {
+        if (error || this.hasServer) return;
+        const names = this.filepond.getFiles().map((f) => f.filename).join(", ");
+        this.instance.setValue(names, true, "user");
+      });
+      this.filepond.on("processfilerevert", () => {
+        const serverIds = this.filepond.getFiles().filter((f) => f.serverId).map((f) => f.serverId);
+        this.instance.setValue(serverIds.join(", "), true, "user");
+      });
+      this.filepond.on("removefile", () => {
+        const remaining = this.filepond.getFiles();
+        if (this.hasServer) {
+          const serverIds = remaining.filter((f) => f.serverId).map((f) => f.serverId);
+          this.instance.setValue(serverIds.join(", "), true, "user");
+        } else {
+          this.instance.setValue(remaining.map((f) => f.filename).join(", "), true, "user");
+        }
+      });
+    } catch (e) {
+      console.error("FilePond is not available or not loaded correctly.", e);
+    }
+  }
+  addEventListeners() {
+  }
+  refreshUI() {
+    if (!this.filepond) return;
+    this.refreshTemplates();
+    this.filepond.setOptions({ disabled: this.disabled || this.readOnly });
+  }
+  destroy() {
+    if (this.filepond) {
+      this.filepond.destroy();
+    }
+    super.destroy();
+  }
+}
 class UiResolver {
   constructor(options) {
     this.customEditors = options.customEditors ?? [];
@@ -6281,6 +6448,7 @@ class UiResolver {
       EditorStringFlatpickr,
       EditorStringIMask,
       EditorStringAce,
+      EditorStringFilepond,
       EditorStringInput,
       EditorNumberIMask,
       EditorNumberRaty,
@@ -6291,6 +6459,7 @@ class UiResolver {
       EditorObjectGrid,
       EditorObjectCategories,
       EditorObjectNav,
+      EditorObjectAccordion,
       EditorObject,
       EditorArrayChoices,
       EditorArrayCheckboxes,
@@ -7570,31 +7739,27 @@ class Theme {
         }
       });
     }
-    let collapsed = config.startCollapsed;
-    if (collapsed) {
-      toggle.setAttribute("aria-expanded", "false");
-    } else {
-      toggle.setAttribute("aria-expanded", "true");
-    }
     toggle.style.transition = "transform 0.1s ease";
-    if (collapsed) {
-      toggle.style.transform = "rotate(90deg)";
+    if (config.startCollapsed) {
+      toggle.classList.add("collapsed");
     }
-    toggle.addEventListener("click", () => {
-      if (collapsed) {
-        toggle.style.transform = "rotate(0deg)";
-      } else {
-        toggle.style.transform = "rotate(90deg)";
-      }
-      collapsed = !collapsed;
-    });
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      toggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+      toggle.style.transform = collapsed ? "rotate(90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    if (this.useToggleEvents) {
+      toggle.addEventListener("click", () => toggle.classList.toggle("collapsed"));
+    }
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
     return toggle;
   }
   /**
    * Container for properties editing elements like property activators
    */
   getPropertiesSlot(config) {
-    const html = document.createElement("dialog");
+    const html = this.getDialog();
     html.classList.add("jedi-properties-slot");
     html.setAttribute("id", config.id);
     html.addEventListener("click", (event) => {
@@ -7605,7 +7770,7 @@ class Theme {
     return html;
   }
   getQuickAddPropertySlot(config) {
-    const html = document.createElement("dialog");
+    const html = this.getDialog();
     html.classList.add("jedi-quick-add-property-slot");
     html.setAttribute("id", config.id);
     html.addEventListener("click", (event) => {
@@ -7619,7 +7784,7 @@ class Theme {
    * Container for properties editing elements like property activators
    */
   getJsonData(config) {
-    const dialog = document.createElement("dialog");
+    const dialog = this.getDialog();
     dialog.classList.add("jedi-json-data");
     dialog.setAttribute("id", config.id);
     dialog.addEventListener("click", (event) => {
@@ -7881,18 +8046,28 @@ class Theme {
     container.appendChild(info);
     return { container, info };
   }
+  /**
+   * Creates a base native <dialog> element with shared styling
+   */
+  getDialog() {
+    const dialog = document.createElement("dialog");
+    dialog.classList.add("jedi-modal-dialog");
+    dialog.style.border = "1px solid #6c757d";
+    dialog.style.borderRadius = "4px";
+    dialog.style.minWidth = "200px";
+    return dialog;
+  }
   /**
    * Dialog or modal that contains extra information about the control
    */
   infoAsModal(info, id, config = {}) {
-    const dialog = document.createElement("dialog");
+    const dialog = this.getDialog();
     const title = document.createElement("div");
     const content = document.createElement("div");
     const closeBtn = this.getButton({
       content: "Close",
       icon: "close"
     });
-    dialog.classList.add("jedi-modal-dialog");
     dialog.setAttribute("id", id + "-modal");
     title.classList.add("jedi-modal-title");
     if (isString(config.title)) {
@@ -7968,6 +8143,9 @@ class Theme {
     const ariaLive = this.getPropertiesAriaLive();
     const messages = this.getMessagesSlot();
     const childrenSlot = this.getChildrenSlot();
+    if (config.isAccordion || config.isAccordionProperties) {
+      childrenSlot.id = "accordion-" + config.id;
+    }
     const propertiesActivators = this.getPropertiesActivators();
     const info = this.getInfo(config.info);
     const description = this.getDescription({
@@ -8089,6 +8267,57 @@ class Theme {
       switcherSlot
     };
   }
+  /**
+   * Returns an accordion item wrapping a child editor.
+   * Used by EditorObjectAccordionProperties to wrap each property.
+   */
+  getAccordionItem(config) {
+    const container = document.createElement("div");
+    container.classList.add("jedi-accordion-item");
+    const header = document.createElement("div");
+    header.classList.add("jedi-accordion-header");
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.classList.add("jedi-accordion-toggle", "collapsed");
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.style.display = "inline-block";
+    chevron.style.transition = "transform 0.1s ease";
+    chevron.style.marginRight = "0.5em";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.classList.add("jedi-accordion-collapse");
+    collapse.style.display = "none";
+    const body = document.createElement("div");
+    body.classList.add("jedi-accordion-body");
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(0deg)" : "rotate(-180deg)";
+    };
+    syncState();
+    if (this.useToggleEvents) {
+      toggle.addEventListener("click", () => {
+        if (collapse.style.display === "none") {
+          collapse.style.display = "block";
+        } else {
+          collapse.style.display = "none";
+        }
+        toggle.classList.toggle("collapsed");
+      });
+    }
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
+    header.appendChild(toggle);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   /**
    * Array control is a card containing multiple editors.
    * Items can bve added, deleted or moved up or down.
@@ -8240,7 +8469,7 @@ class Theme {
     const messages = this.getMessagesSlot();
     const childrenSlot = this.getChildrenSlot();
     const randomId = generateRandomID(5);
-    const knownSwitchers = ["select", "radios", "radios-inline"];
+    const knownSwitchers = ["select", "radios", "radios-inline", "modal"];
     const switcherType = knownSwitchers.includes(config.switcher) ? config.switcher : "select";
     let switcher;
     if (switcherType === "select") {
@@ -8268,6 +8497,14 @@ class Theme {
         noSpacing: true
       });
     }
+    if (switcherType === "modal") {
+      switcher = this.getSwitcherModal({
+        values: config.switcherOptionValues,
+        titles: config.switcherOptionsLabels,
+        id: config.id + "-switcher-" + randomId,
+        readOnly: config.readOnly
+      });
+    }
     switcher.container.classList.add("jedi-switcher");
     container.appendChild(header);
     container.appendChild(body);
@@ -8361,7 +8598,8 @@ class Theme {
     const { label, labelText } = this.getLabel({
       for: config.id,
       text: config.title,
-      visuallyHidden: config.titleHidden
+      visuallyHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     const description = this.getDescription({
       content: config.description,
@@ -8724,6 +8962,62 @@ class Theme {
   getSwitcherRadios(config) {
     return this.getRadiosControl(config);
   }
+  /**
+   * Compact badge-button trigger that opens a modal to switch between multiple editors options
+   */
+  getSwitcherModal(config) {
+    const container = document.createElement("span");
+    const trigger = document.createElement("span");
+    const dialog = this.getDialog();
+    const dialogBody = document.createElement("div");
+    const optionButtons = [];
+    const triggerText = document.createElement("span");
+    const triggerIcon = document.createElement("i");
+    container.classList.add("jedi-switcher-modal");
+    trigger.classList.add("jedi-switcher-modal-trigger");
+    trigger.setAttribute("role", "button");
+    trigger.setAttribute("tabindex", "0");
+    trigger.setAttribute("aria-haspopup", "dialog");
+    trigger.setAttribute("aria-label", "Switch type");
+    trigger.appendChild(triggerText);
+    if (this.icons && this.icons.switcher) {
+      this.addIconClass(triggerIcon, this.icons.switcher);
+      trigger.appendChild(document.createTextNode(" "));
+      trigger.appendChild(triggerIcon);
+    }
+    dialogBody.classList.add("jedi-modal-content");
+    config.values.forEach((value, index2) => {
+      const btn = document.createElement("button");
+      btn.setAttribute("type", "button");
+      btn.setAttribute("aria-label", `Select: ${config.titles[index2]}`);
+      btn.textContent = config.titles[index2];
+      btn.dataset.switcherValue = value;
+      btn.classList.add("jedi-switcher-option-btn");
+      optionButtons.push(btn);
+      dialogBody.appendChild(btn);
+    });
+    trigger.addEventListener("click", () => {
+      dialog.showModal();
+    });
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        dialog.showModal();
+      }
+    });
+    dialog.addEventListener("click", (event) => {
+      if (event.target === dialog) {
+        dialog.close();
+      }
+    });
+    container.appendChild(trigger);
+    container.appendChild(dialog);
+    dialog.appendChild(dialogBody);
+    return { container, trigger, triggerText, dialog, dialogBody, optionButtons };
+  }
+  setSwitcherOptionActive(btn, active) {
+    btn.classList.toggle("jedi-switcher-option-active", active);
+  }
   /**
    * Another type of error message container used for more complex editors like
    * object, array and multiple editors
@@ -8935,6 +9229,74 @@ class ThemeBootstrap3 extends Theme {
     }
     return collapse;
   }
+  getObjectControl(config) {
+    const control = super.getObjectControl(config);
+    if (config.isAccordion) {
+      const { childrenSlot } = control;
+      childrenSlot.classList.add("panel-group");
+      const accordionId = childrenSlot.id;
+      const originalAppendChild = childrenSlot.appendChild.bind(childrenSlot);
+      childrenSlot.appendChild = (child) => {
+        const collapse = child.querySelector(".collapse");
+        if (collapse) {
+          collapse.classList.remove("in");
+          collapse.classList.add("panel-collapse");
+        }
+        const collapseToggle = child.querySelector(".jedi-collapse-toggle");
+        if (collapseToggle) {
+          collapseToggle.setAttribute("data-parent", "#" + accordionId);
+        }
+        return originalAppendChild(child);
+      };
+    }
+    if (config.isAccordionProperties) {
+      control.childrenSlot.classList.add("panel-group");
+    }
+    return control;
+  }
+  getAccordionItem(config) {
+    const collapseId = config.id + "-acc-collapse";
+    const container = document.createElement("div");
+    container.classList.add("panel", "panel-default");
+    const header = document.createElement("div");
+    header.classList.add("panel-heading", "collapsed");
+    header.setAttribute("data-toggle", "collapse");
+    header.setAttribute("data-parent", "#" + config.accordionId);
+    header.setAttribute("href", "#" + collapseId);
+    header.style.cursor = "pointer";
+    const title = document.createElement("h4");
+    title.classList.add("panel-title");
+    const toggle = document.createElement("a");
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.style.display = "inline-block";
+    chevron.style.transition = "transform 0.1s ease";
+    chevron.style.marginRight = "0.5em";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.id = collapseId;
+    collapse.classList.add("panel-collapse", "collapse");
+    const syncState = () => {
+      const collapsed = header.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    new MutationObserver(syncState).observe(header, { attributes: true, attributeFilter: ["class"] });
+    const body = document.createElement("div");
+    body.classList.add("panel-body", "p-0");
+    title.appendChild(toggle);
+    header.appendChild(title);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   getJsonData(config) {
     const jsonData = super.getJsonData(config);
     jsonData.control.classList.add("form-group");
@@ -9136,6 +9498,26 @@ class ThemeBootstrap3 extends Theme {
     super.adaptForTableSelectControl(control, td);
     control.container.classList.remove("form-group");
   }
+  getSwitcherSelect(config) {
+    const control = super.getSwitcherSelect(config);
+    control.input.classList.add("input-sm");
+    return control;
+  }
+  getSwitcherModal(config) {
+    const control = super.getSwitcherModal(config);
+    control.container.style.marginLeft = "4px";
+    control.trigger.classList.add("label", "label-default");
+    control.dialogBody.classList.add("btn-group-vertical");
+    control.optionButtons.forEach((btn) => {
+      btn.classList.add("btn", "btn-default");
+    });
+    return control;
+  }
+  setSwitcherOptionActive(btn, active) {
+    super.setSwitcherOptionActive(btn, active);
+    btn.classList.toggle("btn-primary", active);
+    btn.classList.toggle("btn-default", !active);
+  }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
   }
@@ -9302,6 +9684,69 @@ class ThemeBootstrap4 extends Theme {
     }
     return collapse;
   }
+  getObjectControl(config) {
+    const control = super.getObjectControl(config);
+    if (config.isAccordion) {
+      const { childrenSlot } = control;
+      const accordionId = childrenSlot.id;
+      const originalAppendChild = childrenSlot.appendChild.bind(childrenSlot);
+      childrenSlot.appendChild = (child) => {
+        const collapse = child.querySelector(".collapse");
+        if (collapse) {
+          collapse.classList.remove("show");
+          collapse.setAttribute("data-parent", "#" + accordionId);
+        }
+        return originalAppendChild(child);
+      };
+    }
+    if (config.isAccordionProperties) {
+      control.childrenSlot.classList.add("accordion", "pb-3");
+    }
+    return control;
+  }
+  getAccordionItem(config) {
+    const collapseId = config.id + "-acc-collapse";
+    const container = document.createElement("div");
+    container.classList.add("card", "mb-0");
+    const header = document.createElement("div");
+    header.classList.add("card-header", "p-0");
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.classList.add("btn", "btn-link", "w-100", "text-left");
+    toggle.setAttribute("data-toggle", "collapse");
+    toggle.setAttribute("data-target", "#" + collapseId);
+    toggle.setAttribute("data-parent", "#" + config.accordionId);
+    toggle.classList.add("collapsed");
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.style.display = "inline-block";
+    chevron.style.transition = "transform 0.1s ease";
+    chevron.style.marginRight = "0.5em";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.id = collapseId;
+    collapse.classList.add("collapse");
+    collapse.setAttribute("data-parent", "#" + config.accordionId);
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
+    const body = document.createElement("div");
+    body.classList.add("card-body", "pb-0");
+    header.appendChild(toggle);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   getJsonData(config) {
     const jsonData = super.getJsonData(config);
     jsonData.control.classList.add("form-group");
@@ -9514,6 +9959,26 @@ class ThemeBootstrap4 extends Theme {
     super.adaptForTableSelectControl(control, td);
     control.container.classList.remove("form-group");
   }
+  getSwitcherSelect(config) {
+    const control = super.getSwitcherSelect(config);
+    control.input.classList.add("form-control-sm");
+    return control;
+  }
+  getSwitcherModal(config) {
+    const control = super.getSwitcherModal(config);
+    control.container.classList.add("ml-1");
+    control.trigger.classList.add("badge", "badge-secondary");
+    control.dialogBody.classList.add("btn-group", "btn-group-vertical", "w-100");
+    control.optionButtons.forEach((btn) => {
+      btn.classList.add("btn", "btn-secondary");
+    });
+    return control;
+  }
+  setSwitcherOptionActive(btn, active) {
+    super.setSwitcherOptionActive(btn, active);
+    btn.classList.toggle("btn-primary", active);
+    btn.classList.toggle("btn-secondary", !active);
+  }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
     control.container.classList.remove("mb-3");
@@ -9688,6 +10153,75 @@ class ThemeBootstrap5 extends Theme {
     }
     return collapse;
   }
+  getObjectControl(config) {
+    const control = super.getObjectControl(config);
+    if (config.isAccordion) {
+      const { childrenSlot } = control;
+      const accordionId = childrenSlot.id;
+      const originalAppendChild = childrenSlot.appendChild.bind(childrenSlot);
+      childrenSlot.appendChild = (child) => {
+        const collapse = child.querySelector(".collapse");
+        if (collapse) {
+          collapse.classList.remove("show");
+          collapse.setAttribute("data-bs-parent", "#" + accordionId);
+        }
+        return originalAppendChild(child);
+      };
+    }
+    if (config.isAccordionProperties) {
+      control.childrenSlot.classList.add("accordion", "pb-3");
+    }
+    return control;
+  }
+  getAccordionItem(config) {
+    const collapseId = config.id + "-acc-collapse";
+    const container = document.createElement("div");
+    container.classList.add("accordion-item");
+    const header = document.createElement("h2");
+    header.classList.add("accordion-header");
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.classList.add("accordion-button", "collapsed");
+    toggle.setAttribute("data-bs-toggle", "collapse");
+    toggle.setAttribute("data-bs-target", "#" + collapseId);
+    toggle.setAttribute("data-bs-parent", "#" + config.accordionId);
+    toggle.classList.add("jedi-accordion-button");
+    if (!document.getElementById("jedi-accordion-button-style")) {
+      const style = document.createElement("style");
+      style.id = "jedi-accordion-button-style";
+      style.textContent = ".jedi-accordion-button::after { display: none !important; }";
+      document.head.appendChild(style);
+    }
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.style.display = "inline-block";
+    chevron.style.transition = "transform 0.1s ease";
+    chevron.style.marginRight = "0.5em";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.id = collapseId;
+    collapse.classList.add("accordion-collapse", "collapse");
+    collapse.setAttribute("data-bs-parent", "#" + config.accordionId);
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
+    const body = document.createElement("div");
+    body.classList.add("accordion-body", "pb-3");
+    header.appendChild(toggle);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   getJsonData(config) {
     const jsonData = super.getJsonData(config);
     jsonData.control.classList.add("mb-3");
@@ -9898,6 +10432,26 @@ class ThemeBootstrap5 extends Theme {
     super.adaptForTableSelectControl(control, td);
     control.container.classList.remove("mb-3");
   }
+  getSwitcherSelect(config) {
+    const control = super.getSwitcherSelect(config);
+    control.input.classList.add("form-select-sm");
+    return control;
+  }
+  getSwitcherModal(config) {
+    const control = super.getSwitcherModal(config);
+    control.container.classList.add("ms-1");
+    control.trigger.classList.add("badge", "bg-secondary");
+    control.dialogBody.classList.add("btn-group", "btn-group-vertical", "w-100");
+    control.optionButtons.forEach((btn) => {
+      btn.classList.add("btn", "btn-secondary");
+    });
+    return control;
+  }
+  setSwitcherOptionActive(btn, active) {
+    super.setSwitcherOptionActive(btn, active);
+    btn.classList.toggle("btn-primary", active);
+    btn.classList.toggle("btn-secondary", !active);
+  }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
     control.container.classList.remove("mb-3");
@@ -10066,6 +10620,7 @@ const index = {
   EditorObjectGrid,
   EditorObjectCategories,
   EditorObjectNav,
+  EditorObjectAccordion,
   EditorObject,
   EditorArrayChoices,
   EditorArrayNav,