jedison 1.12.0 → 1.12.2

package/dist/esm/jedison.js

@@ -2817,7 +2817,12 @@ class InstanceMultiple extends Instance {
       this.activeInstance.setValue(value, false, initiator);
     }
     this.activeInstance.children.forEach((child) => child.register());
-    this.setValue(this.activeInstance.getValueRaw(), true, initiator);
+    const newValue = this.activeInstance.getValueRaw();
+    const valueWillChange = different(this.value, newValue);
+    this.setValue(newValue, true, initiator);
+    if (!valueWillChange) {
+      this.emit("change", initiator);
+    }
   }
   onSetValue() {
     if (different(this.activeInstance.getValueRaw(), this.value)) {
@@ -3370,6 +3375,7 @@ class EditorRadios extends EditorBoolean {
       titles: getSchemaXOption(this.instance.schema, "enumTitles") || ["false", "true"],
       id: this.getIdFromPath(this.instance.path),
       titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass"),
       inline: getSchemaXOption(this.instance.schema, "format") === "radios-inline",
       info: this.getInfo()
     });
@@ -3442,6 +3448,7 @@ class EditorBooleanCheckbox extends EditorBoolean {
       description: this.getDescription(),
       id: this.getIdFromPath(this.instance.path),
       titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass"),
       info: this.getInfo()
     });
   }
@@ -4091,7 +4098,8 @@ class EditorObject extends Editor {
       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"),
-      isAccordion: false
+      isAccordion: false,
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass")
     };
   }
   build() {
@@ -4595,7 +4603,8 @@ class EditorArray extends Editor {
       arrayDeleteAllContent: getSchemaXOption(this.instance.schema, "arrayDeleteAllContent") ?? this.instance.jedison.translator.translate("arrayDeleteAll"),
       arrayFooterDeleteAll: getSchemaXOption(this.instance.schema, "arrayFooterDeleteAll") ?? this.instance.jedison.getOption("arrayFooterDeleteAll"),
       arrayFooterDeleteAllContent: getSchemaXOption(this.instance.schema, "arrayFooterDeleteAllContent") ?? this.instance.jedison.translator.translate("arrayDeleteAll"),
-      collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle")
+      collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle"),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass")
     });
     this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
   }
@@ -5517,6 +5526,7 @@ class EditorMultiple extends Editor {
     }
   }
   refreshUI() {
+    var _a;
     this.refreshDisabledState();
     this.control.childrenSlot.innerHTML = "";
     this.control.childrenSlot.appendChild(this.instance.activeInstance.ui.control.container);
@@ -5533,9 +5543,15 @@ class EditorMultiple extends Editor {
     }
     if (this.switcherInput === "modal") {
       const childControl = this.instance.activeInstance.ui.control;
+      const infoContainer = childControl.infoContainer;
       const titleEl = childControl.legendText || childControl.label;
-      if (titleEl) {
-        titleEl.after(this.control.switcher.container);
+      if (infoContainer) {
+        infoContainer.after(this.control.switcher.container);
+        this.control.header.style.display = "none";
+      } else if (titleEl) {
+        const infoEl = (_a = childControl.info) == null ? void 0 : _a.container;
+        const anchor = infoEl && infoEl.parentNode ? infoEl : titleEl;
+        anchor.after(this.control.switcher.container);
         this.control.header.style.display = "none";
       }
     }
@@ -7466,6 +7482,7 @@ class Theme {
     const right = document.createElement("div");
     const legend = document.createElement("legend");
     const legendText = document.createElement("label");
+    const icon = document.createElement("i");
     const infoContainer = document.createElement("span");
     const dummyInput = document.createElement("input");
     const legendLabelId = "legend-label-" + config.id;
@@ -7481,6 +7498,11 @@ class Theme {
     legendText.classList.add("jedi-legend");
     legendText.setAttribute("id", legendLabelId);
     legendText.innerHTML = config.content;
+    if (config.titleIconClass) {
+      this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
+    }
+    legendText.style.marginRight = "4px";
     infoContainer.classList.add("jedi-editor-info-container");
     infoContainer.setAttribute("for", dummyInputId);
     dummyInput.setAttribute("aria-hidden", "true");
@@ -7492,6 +7514,9 @@ class Theme {
     }
     legend.appendChild(left);
     legend.appendChild(right);
+    if (config.titleIconClass) {
+      left.appendChild(icon);
+    }
     left.appendChild(legendText);
     left.appendChild(infoContainer);
     legendText.appendChild(dummyInput);
@@ -7515,6 +7540,7 @@ class Theme {
     const legendLabelId = "legend-label-" + config.id;
     const legend = document.createElement("legend");
     const legendText = document.createElement("label");
+    const icon = document.createElement("i");
     const dummyInput = document.createElement("input");
     legend.classList.add("jedi-editor-legend");
     legend.style.fontSize = "inherit";
@@ -7523,13 +7549,19 @@ class Theme {
     legendText.classList.add("jedi-label");
     legendText.innerHTML = config.content;
     legendText.setAttribute("id", legendLabelId);
+    legendText.style.marginRight = "4px";
     dummyInput.setAttribute("aria-hidden", "true");
     dummyInput.setAttribute("type", "hidden");
     dummyInput.setAttribute("disabled", "");
     this.visuallyHidden(dummyInput);
+    if (config.titleIconClass) {
+      this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
+      legend.appendChild(icon);
+    }
     legend.appendChild(legendText);
     legendText.appendChild(dummyInput);
-    return { legend, legendText };
+    return { legend, legendText, icon };
   }
   /**
    * Represents a caption for the content of its parent fieldset
@@ -7547,10 +7579,12 @@ class Theme {
     }
     if (config.titleIconClass) {
       this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
     }
     if (config.titleIconClass) {
       label.appendChild(icon);
     }
+    labelText.style.marginRight = "4px";
     label.appendChild(labelText);
     return { label, labelText, icon };
   }
@@ -7568,13 +7602,17 @@ class Theme {
     labelText.innerHTML = config.content;
     if (config.titleIconClass) {
       this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
     }
     dummyInput.setAttribute("aria-hidden", "true");
     dummyInput.setAttribute("type", "hidden");
     dummyInput.setAttribute("disabled", "");
     dummyInput.setAttribute("id", config.for);
     this.visuallyHidden(dummyInput);
-    label.appendChild(icon);
+    if (config.titleIconClass) {
+      label.appendChild(icon);
+    }
+    labelText.style.marginRight = "4px";
     label.appendChild(labelText);
     label.appendChild(dummyInput);
     return { label, labelText, icon, dummyInput };
@@ -8027,7 +8065,6 @@ class Theme {
     container.style.display = "inline-block";
     info.setAttribute("href", "#");
     info.classList.add("jedi-info-button");
-    info.style.marginLeft = "4px";
     if (isObject(config.attributes)) {
       for (const [key, value] of Object.entries(config.attributes)) {
         info.setAttribute(key, value);
@@ -8121,13 +8158,13 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(placeholder);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, placeholder, label, labelText, description, messages, actions };
+    return { container, placeholder, label, info, labelText, description, messages, actions };
   }
   /**
    * Object control is a card containing multiple editors.
@@ -8196,7 +8233,8 @@ class Theme {
     const { legend, infoContainer, legendText, right } = this.getLegend({
       content: config.title,
       id: config.id,
-      titleHidden: config.titleHidden
+      titleHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
@@ -8213,7 +8251,9 @@ class Theme {
     }
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      infoContainer.appendChild(info.container);
+      while (info.container.firstChild) {
+        infoContainer.appendChild(info.container.firstChild);
+      }
     }
     fieldset.appendChild(collapse);
     collapse.appendChild(body);
@@ -8346,7 +8386,8 @@ class Theme {
     const { legend, legendText, infoContainer, right } = this.getLegend({
       content: config.title,
       id: config.id,
-      titleHidden: config.titleHidden
+      titleHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     const description = this.getDescription({
       content: config.description
@@ -8375,7 +8416,9 @@ class Theme {
     }
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      infoContainer.appendChild(info.container);
+      while (info.container.firstChild) {
+        infoContainer.appendChild(info.container.firstChild);
+      }
     }
     fieldset.appendChild(collapse);
     collapse.appendChild(body);
@@ -8430,6 +8473,7 @@ class Theme {
       jsonData,
       legend,
       legendText,
+      infoContainer,
       switcherSlot,
       footerAddBtn,
       deleteAllBtn,
@@ -8575,13 +8619,13 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(br);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, label, labelText, description, messages, actions };
+    return { container, label, info, labelText, description, messages, actions };
   }
   /**
    * A Textarea
@@ -8617,13 +8661,13 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(input);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, input, label, labelText, description, messages, actions };
+    return { container, input, label, info, labelText, description, messages, actions };
   }
   adaptForTableTextareaControl(control) {
     this.visuallyHidden(control.label);
@@ -8665,7 +8709,7 @@ class Theme {
       this.infoAsModal(info, config.id, config.info);
     }
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(input);
     container.appendChild(description);
@@ -8699,7 +8743,8 @@ class Theme {
     const { legend, legendText } = this.getRadioLegend({
       content: config.title,
       id: config.id,
-      for: config.id
+      for: config.id,
+      titleIconClass: config.titleIconClass
     });
     const messages = this.getMessagesSlot({
       id: messagesId
@@ -8743,7 +8788,7 @@ class Theme {
     container.appendChild(fieldset);
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      legendText.appendChild(info.container);
+      legendText.after(info.container);
     }
     radioControls.forEach((radioControl, index2) => {
       fieldset.appendChild(radioControls[index2]);
@@ -8787,7 +8832,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,
@@ -8808,7 +8854,7 @@ class Theme {
     formGroup.appendChild(input);
     formGroup.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      formGroup.appendChild(info.container);
     }
     formGroup.appendChild(description);
     formGroup.appendChild(messages);
@@ -8828,7 +8874,8 @@ class Theme {
     const { legend, legendText } = this.getRadioLegend({
       content: config.title,
       id: config.id,
-      for: config.id
+      for: config.id,
+      titleIconClass: config.titleIconClass
     });
     const messages = this.getMessagesSlot({
       id: messagesId
@@ -8871,7 +8918,7 @@ class Theme {
     container.appendChild(fieldset);
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      legendText.appendChild(info.container);
+      legendText.after(info.container);
     }
     checkboxControls.forEach((checkboxControl, index2) => {
       fieldset.appendChild(checkboxControls[index2]);
@@ -8913,7 +8960,8 @@ class Theme {
     const { label, labelText } = this.getLabel({
       for: config.id,
       text: config.title,
-      visuallyHidden: config.titleHidden
+      visuallyHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     const messages = this.getMessagesSlot({
       id: messagesId
@@ -8938,7 +8986,7 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(input);
     container.appendChild(description);
@@ -9316,13 +9364,14 @@ class ThemeBootstrap3 extends Theme {
   }
   getLegend(config) {
     const superLegend = super.getLegend(config);
-    const { legend } = superLegend;
+    const { legend, infoContainer } = superLegend;
     legend.classList.add("panel-heading");
     legend.classList.add("pull-left");
     legend.style.margin = "0";
     legend.style.display = "flex";
     legend.style.justifyContent = "space-between";
     legend.style.alignItems = "center";
+    infoContainer.style.marginRight = "4px";
     return superLegend;
   }
   getRadioLegend(config) {
@@ -9334,11 +9383,12 @@ class ThemeBootstrap3 extends Theme {
     return superRadioLegend;
   }
   getLabel(config) {
-    const labelObj = super.getLabel(config);
-    if (labelObj.icon.classList) {
-      labelObj.icon.style.marginRight = "5px";
-    }
-    return labelObj;
+    return super.getLabel(config);
+  }
+  getInfo(config = {}) {
+    const info = super.getInfo(config);
+    info.container.style.marginRight = "4px";
+    return info;
   }
   getCard() {
     const card = super.getCard();
@@ -9505,11 +9555,11 @@ class ThemeBootstrap3 extends Theme {
   }
   getSwitcherModal(config) {
     const control = super.getSwitcherModal(config);
-    control.container.style.marginLeft = "4px";
-    control.trigger.classList.add("label", "label-default");
+    control.trigger.classList.add("label", "label-primary");
     control.dialogBody.classList.add("btn-group-vertical");
+    control.dialogBody.style.width = "100%";
     control.optionButtons.forEach((btn) => {
-      btn.classList.add("btn", "btn-default");
+      btn.classList.add("btn", "btn-default", "btn-block");
     });
     return control;
   }
@@ -9570,7 +9620,7 @@ class ThemeBootstrap3 extends Theme {
     tab.link.style.display = "flex";
     tab.link.style.alignItems = "center";
     tab.arrayActions.style.flexShrink = "0";
-    tab.arrayActions.style.whiteSpace = "nowrap";
+    tab.arrayActions.classList.add("text-nowrap");
     tab.text.style.flex = "1";
     tab.text.style.marginLeft = "5px";
     tab.text.style.marginRight = "5px";
@@ -9579,7 +9629,7 @@ class ThemeBootstrap3 extends Theme {
       if (warning) {
         tab.text.removeChild(warning);
         warning.style.flexShrink = "0";
-        warning.style.whiteSpace = "nowrap";
+        warning.classList.add("text-nowrap");
         tab.link.appendChild(warning);
       }
     }
@@ -9724,9 +9774,8 @@ class ThemeBootstrap4 extends Theme {
     } else {
       chevron.textContent = "▾";
     }
-    chevron.style.display = "inline-block";
+    chevron.classList.add("d-inline-block", "mr-2");
     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");
@@ -9766,21 +9815,23 @@ class ThemeBootstrap4 extends Theme {
   }
   getLegend(config) {
     const superLegend = super.getLegend(config);
-    const { legend } = superLegend;
+    const { legend, infoContainer } = superLegend;
     legend.classList.add("card-header");
     legend.classList.add("d-flex");
     legend.classList.add("justify-content-between");
     legend.classList.add("align-items-center");
     legend.classList.add("float-left");
     legend.classList.add("py-2");
+    infoContainer.classList.add("mr-1");
     return superLegend;
   }
   getLabel(config) {
-    const labelObj = super.getLabel(config);
-    if (labelObj.icon.classList) {
-      labelObj.icon.classList.add("mr-1");
-    }
-    return labelObj;
+    return super.getLabel(config);
+  }
+  getInfo(config = {}) {
+    const info = super.getInfo(config);
+    info.container.classList.add("mr-1");
+    return info;
   }
   getCard() {
     const card = super.getCard();
@@ -9898,7 +9949,7 @@ class ThemeBootstrap4 extends Theme {
     super.adaptForTableRadiosControl(control, td);
     control.container.classList.remove("form-group");
     control.fieldset.classList.remove("card");
-    control.fieldset.style.marginBottom = "0";
+    control.fieldset.classList.add("mb-0");
   }
   getCheckboxesControl(config) {
     const control = super.getCheckboxesControl(config);
@@ -9966,18 +10017,17 @@ class ThemeBootstrap4 extends Theme {
   }
   getSwitcherModal(config) {
     const control = super.getSwitcherModal(config);
-    control.container.classList.add("ml-1");
-    control.trigger.classList.add("badge", "badge-secondary");
+    control.trigger.classList.add("badge", "badge-primary");
     control.dialogBody.classList.add("btn-group", "btn-group-vertical", "w-100");
     control.optionButtons.forEach((btn) => {
-      btn.classList.add("btn", "btn-secondary");
+      btn.classList.add("btn", "btn-light");
     });
     return control;
   }
   setSwitcherOptionActive(btn, active) {
     super.setSwitcherOptionActive(btn, active);
     btn.classList.toggle("btn-primary", active);
-    btn.classList.toggle("btn-secondary", !active);
+    btn.classList.toggle("btn-light", !active);
   }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
@@ -10097,7 +10147,6 @@ class ThemeBootstrap4 extends Theme {
     closeBtn.setAttribute("always-enabled", "");
     info.info.setAttribute("data-toggle", "modal");
     info.info.setAttribute("data-target", "#" + modalId);
-    info.container.classList.add("ml-1");
     modal.classList.add("modal");
     modal.classList.add("fade");
     modalDialog.classList.add("modal-dialog");
@@ -10199,9 +10248,8 @@ class ThemeBootstrap5 extends Theme {
     } else {
       chevron.textContent = "▾";
     }
-    chevron.style.display = "inline-block";
+    chevron.classList.add("d-inline-block", "me-2");
     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");
@@ -10241,24 +10289,28 @@ class ThemeBootstrap5 extends Theme {
   }
   getLegend(config) {
     const superLegend = super.getLegend(config);
-    const { legend } = superLegend;
+    const { legend, infoContainer } = superLegend;
     legend.classList.add("card-header");
     legend.classList.add("d-flex");
     legend.classList.add("justify-content-between");
     legend.classList.add("align-items-center");
     legend.classList.add("py-2");
+    infoContainer.classList.add("me-1");
     return superLegend;
   }
   styleLegendWarning(span) {
-    span.classList.add("ms-1");
+    span.classList.add("me-1");
   }
   getLabel(config) {
     const labelObj = super.getLabel(config);
-    if (labelObj.icon.classList) {
-      labelObj.icon.classList.add("me-1");
-    }
+    labelObj.label.classList.add("mb-1");
     return labelObj;
   }
+  getInfo(config = {}) {
+    const info = super.getInfo(config);
+    info.container.classList.add("me-1");
+    return info;
+  }
   getCard() {
     const card = super.getCard();
     card.classList.add("card");
@@ -10378,7 +10430,7 @@ class ThemeBootstrap5 extends Theme {
     super.adaptForTableRadiosControl(control, td);
     control.container.classList.remove("mb-3");
     control.fieldset.classList.remove("card");
-    control.fieldset.style.marginBottom = "0";
+    control.fieldset.classList.add("mb-0");
   }
   getCheckboxesControl(config) {
     const control = super.getCheckboxesControl(config);
@@ -10439,18 +10491,17 @@ class ThemeBootstrap5 extends Theme {
   }
   getSwitcherModal(config) {
     const control = super.getSwitcherModal(config);
-    control.container.classList.add("ms-1");
-    control.trigger.classList.add("badge", "bg-secondary");
+    control.trigger.classList.add("badge", "bg-primary");
     control.dialogBody.classList.add("btn-group", "btn-group-vertical", "w-100");
     control.optionButtons.forEach((btn) => {
-      btn.classList.add("btn", "btn-secondary");
+      btn.classList.add("btn", "btn-light");
     });
     return control;
   }
   setSwitcherOptionActive(btn, active) {
     super.setSwitcherOptionActive(btn, active);
     btn.classList.toggle("btn-primary", active);
-    btn.classList.toggle("btn-secondary", !active);
+    btn.classList.toggle("btn-light", !active);
   }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
@@ -10567,7 +10618,6 @@ class ThemeBootstrap5 extends Theme {
     closeBtn.setAttribute("always-enabled", "");
     info.info.setAttribute("data-bs-toggle", "modal");
     info.info.setAttribute("data-bs-target", "#" + modalId);
-    info.container.classList.add("ms-1");
     modal.classList.add("modal");
     modal.classList.add("fade");
     modalDialog.classList.add("modal-dialog");