builder-settings-types 0.0.301 → 0.0.303

package/dist/builder-settings-types.es.js

@@ -142,15 +142,15 @@ function Ct(c) {
       return "";
   }
 }
-class b {
+class w {
   constructor(t = {}) {
     this.props = t, this.dataPropsPath = "", this.id = t.id || lt(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "", this.includeGetJson = t.includeGetJson !== void 0 ? t.includeGetJson : !0;
   }
   static SetUploadUrl(t) {
-    globalThis.DefaultUploadUrl = t, b.DefaultUploadUrl = t;
+    globalThis.DefaultUploadUrl = t, w.DefaultUploadUrl = t;
   }
   static SetDefaultLanguage(t) {
-    globalThis.DefaultLanguage = t, b.DefaultLanguage = t;
+    globalThis.DefaultLanguage = t, w.DefaultLanguage = t;
   }
   destroy() {
     throw new Error("Method not implemented.");
@@ -233,14 +233,14 @@ class b {
     return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
   }
 }
-function D(c) {
-  return c instanceof b;
+function O(c) {
+  return c instanceof w;
 }
-function w(c) {
+function b(c) {
   return c instanceof T;
 }
 function st(c) {
-  return D(c) || w(c);
+  return O(c) || b(c);
 }
 function W(c, t) {
   for (const e in c)
@@ -257,7 +257,7 @@ const K = class K {
   propagateNestingLevel() {
     const t = this.nestingLevel + 1;
     W(this.settings, (e, i) => {
-      w(i) && (i.nestingLevel = t, i.propagateNestingLevel());
+      b(i) && (i.nestingLevel = t, i.propagateNestingLevel());
     });
   }
   getNestingLevel() {
@@ -275,7 +275,7 @@ const K = class K {
   propagateDataPropsPath() {
     W(this.settings, (t, e) => {
       const i = String(t), s = this.dataPropsPath ? `${this.dataPropsPath}_${i}` : i;
-      (w(e) || D(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
+      (b(e) || O(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
     });
   }
   updateNestingStyles() {
@@ -284,7 +284,7 @@ const K = class K {
   forceChildUIRefresh() {
     Object.entries(this.settings).forEach(([t, e]) => {
       try {
-        if (w(e)) {
+        if (b(e)) {
           const i = e.getValues();
           e.setValue(i);
         } else if (typeof e.setValue == "function") {
@@ -308,14 +308,22 @@ const K = class K {
       );
       if (n) {
         const o = Array.from(
-          n.querySelectorAll(".setting-group, .setting")
+          n.querySelectorAll(
+            ".setting-group, .setting, [data-setting-id]"
+          )
         );
         for (const a of o) {
-          const l = a.id;
+          const l = a.id, r = a.getAttribute(
+            "data-setting-id"
+          );
           if (l && "id" in e && typeof e.id == "string" && l.includes(e.id)) {
             a.remove();
             break;
           }
+          if (r && "id" in e && typeof e.id == "string" && r === e.id) {
+            a.remove();
+            break;
+          }
         }
       }
     }
@@ -326,6 +334,31 @@ const K = class K {
   updateVisibility() {
     this.elementRef;
   }
+  updateSettings(t) {
+    var o;
+    const e = new Set(Object.keys(this.settings)), i = Object.keys(t), s = {};
+    i.forEach((a) => {
+      const l = this.settings[a];
+      l && (b(l) ? s[a] = l.getValues() : O(l) ? s[a] = l.value : typeof l.getValues == "function" ? s[a] = l.getValues() : l.value !== void 0 && (s[a] = l.value));
+    }), e.forEach((a) => {
+      i.includes(a) || this.removeSetting(a);
+    }), i.forEach((a) => {
+      var h;
+      const l = t[a], r = this.settings[a];
+      if (r !== l && (r && this.removeSetting(a), this.addSetting(a, l), a in s)) {
+        const p = s[a];
+        try {
+          b(l) ? l.setValue(
+            p
+          ) : O(l) ? (h = l.setValue) == null || h.call(l, p) : l.setValue && l.setValue(p);
+        } catch (d) {
+          console.warn(`Could not preserve value for setting ${a}:`, d);
+        }
+      }
+    }), this.settings = t, this.propagateNestingLevel(), this.propagateDataPropsPath();
+    const n = this.getValues();
+    this.initialValues = n, (o = this.onChange) == null || o.call(this, n);
+  }
   clone() {
     const t = {};
     W(this.settings, (s, n) => {
@@ -355,7 +388,7 @@ const K = class K {
   setMobileValues(t) {
     !t || typeof t != "object" || (Object.entries(t).forEach(([e, i]) => {
       const s = this.settings[e];
-      s && (w(s) || D(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
+      s && (b(s) || O(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
     }), this.setValue(t), this.onChange && this.onChange(this.getValues()));
   }
   getMobileValues(t) {
@@ -364,7 +397,7 @@ const K = class K {
       for (const i in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, i)) {
           const s = this.settings[i];
-          if (w(s))
+          if (b(s))
             e[i] = s.getMobileValues();
           else {
             const n = s;
@@ -375,7 +408,7 @@ const K = class K {
     } else {
       const e = this.settings[t];
       if (!e) return;
-      if (w(e)) return e.getMobileValues();
+      if (b(e)) return e.getMobileValues();
       const i = e;
       return i.mobileValue !== void 0 ? i.mobileValue : i.value;
     }
@@ -393,12 +426,12 @@ const K = class K {
     };
     return this.changeHandlers.clear(), W(this.settings, (i, s) => {
       var n;
-      if (w(s))
+      if (b(s))
         s.setOnChange(() => {
           const o = this.getValues();
           this.initialValues = o, t(o);
         }), this.changeHandlers.add(() => t(this.getValues()));
-      else if (D(s)) {
+      else if (O(s)) {
         const o = () => e();
         this.changeHandlers.add(o), s.setOnChange(o);
       } else {
@@ -424,7 +457,7 @@ const K = class K {
           st(l) && (this.addSetting(i, l), n = l);
         }
       }
-      n && (w(n) || D(n)) && typeof n.setValue == "function" && n.setValue(s);
+      n && (b(n) || O(n)) && typeof n.setValue == "function" && n.setValue(s);
     }), setTimeout(() => {
       this.forceChildUIRefresh();
     }, 0);
@@ -438,7 +471,7 @@ const K = class K {
       const s = this.getValues();
       this.initialValues = s, (n = this.onChange) == null || n.call(this, s), this.updateVisibility();
     };
-    w(t) ? t.setOnChange(() => e()) : D(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
+    b(t) ? t.setOnChange(() => e()) : O(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
   }
   addSetting(t, e) {
     var s, n;
@@ -447,7 +480,7 @@ const K = class K {
         ".setting-group-content"
       );
       if (o) {
-        w(e) && typeof e.setNestingLevel == "function" && e.setNestingLevel(this.nestingLevel + 1);
+        b(e) && typeof e.setNestingLevel == "function" && e.setNestingLevel(this.nestingLevel + 1);
         const a = e.draw(), l = this.deleteItemCfg ?? this.addItemCfg;
         if (l) {
           const p = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
@@ -637,7 +670,7 @@ const K = class K {
       for (const i in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, i)) {
           const s = this.settings[i];
-          if (w(s))
+          if (b(s))
             e[i] = s.getValues();
           else {
             const n = s;
@@ -648,7 +681,7 @@ const K = class K {
     } else {
       const e = this.settings[t];
       if (!e) return;
-      if (w(e)) return e.getValues();
+      if (b(e)) return e.getValues();
       const i = e;
       return i.getValue ? i.getValue() : i.value;
     }
@@ -661,7 +694,7 @@ const K = class K {
       for (const s in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, s)) {
           const n = this.settings[s];
-          if (w(n)) {
+          if (b(n)) {
             const o = n.getValuesForJson();
             o !== null && (i[s] = o);
           } else {
@@ -673,7 +706,7 @@ const K = class K {
     } else {
       const i = this.settings[t];
       if (!i) return;
-      if (w(i))
+      if (b(i))
         return i.includeGetJson === !1 ? null : i.getValuesForJson();
       {
         const s = i;
@@ -687,7 +720,7 @@ const K = class K {
       for (const i in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, i)) {
           const s = this.settings[i];
-          if (w(s))
+          if (b(s))
             e[i] = s.getDefaultValues();
           else {
             const n = s;
@@ -698,7 +731,7 @@ const K = class K {
     } else {
       const e = this.settings[t];
       if (!e) return;
-      if (w(e)) return e.getDefaultValues();
+      if (b(e)) return e.getDefaultValues();
       const i = e;
       return i.default !== void 0 ? i.default : i.value;
     }
@@ -737,9 +770,9 @@ const K = class K {
       for (const h in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, h)) {
           const p = this.settings[h];
-          w(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.nestingLevel + 1);
+          b(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.nestingLevel + 1);
           const d = p.draw();
-          w(p) && p.deleteItemCfg && this.addDeleteButtonToElement(
+          b(p) && p.deleteItemCfg && this.addDeleteButtonToElement(
             d,
             h,
             p
@@ -855,7 +888,7 @@ class yt extends T {
       const h = document.createElement("div");
       h.className = "tab-panel", this.contentContainers[a] = h;
       const p = this.settings[a];
-      p && (w(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.getNestingLevel() + 1), h.appendChild(
+      p && (b(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.getNestingLevel() + 1), h.appendChild(
         p.draw()
       )), o.appendChild(h), l === 0 && !this.activeTabId && (this.activeTabId = a);
     }), e.appendChild(i), e.appendChild(n), e.appendChild(o), !this.activeTabId) {
@@ -871,7 +904,7 @@ function Et(c) {
 function ae(c) {
   return c;
 }
-class bt extends b {
+class bt extends w {
   constructor(t = {}) {
     super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
   }
@@ -1001,7 +1034,7 @@ const xt = `
   <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
   <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
 </svg>`;
-class R extends b {
+class R extends w {
   constructor(t = {}) {
     super({
       ...t,
@@ -1123,7 +1156,7 @@ class R extends b {
     };
   }
 }
-class le extends b {
+class le extends w {
   constructor(t = {}) {
     super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
   }
@@ -1155,7 +1188,7 @@ class le extends b {
     return e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("blur", s), t.appendChild(e), t;
   }
 }
-class S extends b {
+class S extends w {
   constructor(t) {
     super(t), this.inputType = "number", this.inputElement = null, this.mobileValue = t.mobile, this.validateProps(), this.value = this.validateValue(this.value);
   }
@@ -1245,7 +1278,7 @@ const Mt = `
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-class tt extends b {
+class tt extends w {
   constructor(t = {}) {
     if (super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.clickOutsideListener = null, this.resizeListener = null, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
       const e = this._options.findIndex((i) => i.value === this.value);
@@ -1352,7 +1385,7 @@ class tt extends b {
     this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.parentNode && this.optionsListEl.parentNode.removeChild(this.optionsListEl), super.destroy();
   }
 }
-class St extends b {
+class St extends w {
   constructor(t = {}) {
     super(t), this.inputType = "button", this.value || (this.value = "center");
   }
@@ -1408,7 +1441,7 @@ class St extends b {
     }), t.appendChild(i), t;
   }
 }
-class re extends b {
+class re extends w {
   constructor(t) {
     super(t), this.inputType = "button", this.bgWithAlpha = "rgba(145, 158, 171, 0.08)";
   }
@@ -1437,7 +1470,7 @@ class re extends b {
     return o.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), o.appendChild(t), o;
   }
 }
-class ce extends b {
+class ce extends w {
   constructor(t = {}) {
     super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
     const e = t.width || 0, i = t.height || 0;
@@ -1568,7 +1601,7 @@ const It = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
   <path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Pt = `
+`, Ot = `
 <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
   <!-- Top dot -->
   <circle cx="14.5" cy="3" r="1.5" fill="#02CC59" opacity="1"/>
@@ -1588,7 +1621,7 @@ const It = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
   <circle cx="6.7" cy="6.7" r="1.5" fill="#02CC59" opacity="0.3"/>
 </svg>
 `;
-class rt extends b {
+class rt extends w {
   constructor(t = {}) {
     super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, this.errorContainer = null, this.messageListener = null, this.loadingSpinner = null, this.props.delete === void 0 && (this.props.delete = !0), this.props.maxFileSizeMB === void 0 && (this.props.maxFileSizeMB = 5), !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl), this.setupMessageListener();
   }
@@ -1685,7 +1718,7 @@ class rt extends b {
     const s = this.value && this.value !== "";
     s || i.classList.add("no-image");
     const n = document.createElement("div");
-    if (n.className = "preview-placeholder", n.innerHTML = Vt, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = Pt, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
+    if (n.className = "preview-placeholder", n.innerHTML = Vt, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = Ot, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
       const a = document.createElement("button");
       a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = Tt, this.previewWrapper.appendChild(a), a.onclick = (l) => {
         var r;
@@ -1715,7 +1748,7 @@ class he extends S {
       title: t.title || "Height",
       suffix: t.suffix || "px",
       minValue: t.minValue ?? 0,
-      icon: t.icon || Ot,
+      icon: t.icon || Pt,
       default: t.default ?? 100
     }), this.inputType = "number", this.mobileValue = t.mobile;
   }
@@ -1726,7 +1759,7 @@ class he extends S {
     this.mobileValue = t, t !== void 0 && this.setValue(t);
   }
 }
-const Ot = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+const Pt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 class pe extends S {
@@ -1754,7 +1787,7 @@ const Ht = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-class de extends b {
+class de extends w {
   constructor(t = {}) {
     if (super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.hasInitializedOptions = !1, this.selectedOptionIndex = null, t.default !== void 0 && (this.value = t.default), this.initializeOptions(t), !t.getOptionsAsync && this.value !== void 0) {
       const e = this._options.findIndex(
@@ -1856,19 +1889,11 @@ class de extends b {
     return JSON.stringify(t ? {} : { value: this.value }, null, 2);
   }
   selectApiOption(t, e, i) {
-    var l, r, h, p;
-    const s = t.target, n = s.querySelector(".select-api-radio") || ((l = s.closest(".select-api-option")) == null ? void 0 : l.querySelector(".select-api-radio"));
-    n && (n.checked = !0), this.selectedOptionIndex = e;
+    var a, l, r;
+    const s = t.target, n = s.querySelector(".select-api-radio") || ((a = s.closest(".select-api-option")) == null ? void 0 : a.querySelector(".select-api-radio"));
+    n && (n.checked = !0);
     const o = this._options[e].value;
-    this.value = o;
-    const a = i.querySelector(".select-value");
-    if (a)
-      a.textContent = this._options[e].name;
-    else {
-      const d = i.firstChild;
-      d && d.tagName === "SPAN" && (d.textContent = this._options[e].name);
-    }
-    this.isOpen = !1, (r = this.optionsListEl) == null || r.classList.remove("open"), (h = this.svgContainer) == null || h.classList.remove("open"), (p = this.onChange) == null || p.call(this, o), this.detectChangeCallback && this.detectChangeCallback(o);
+    this.setValue(o), this.isOpen = !1, (l = this.optionsListEl) == null || l.classList.remove("open"), (r = this.svgContainer) == null || r.classList.remove("open");
   }
   updateOptionsList() {
     !this.optionsListEl || !this.buttonEl || (this.optionsListEl.innerHTML = "", this._options.forEach((t, e) => {
@@ -1892,16 +1917,26 @@ class de extends b {
         i.textContent = t || n, this.buttonEl.classList.remove("error"), this.buttonEl.removeAttribute("disabled"), this.svgContainer && (this.svgContainer.style.display = "");
       }
   }
+  update(t = !1) {
+    var e;
+    if (this.selectedOptionIndex = this.value !== void 0 ? this._options.findIndex(
+      (i) => JSON.stringify(i.value) === JSON.stringify(this.value)
+    ) : null, this.updateOptionsList(), this.updateButtonText(), t && this.value !== void 0) {
+      (e = this.onChange) == null || e.call(this, this.value);
+      const i = this.props.detectChange || this.detectChangeCallback;
+      i == null || i(this.value);
+    }
+  }
   setDetectChange(t) {
-    this.detectChangeCallback = t;
+    this.detectChangeCallback = t, this.props.detectChange = t;
   }
   setValue(t) {
-    this.value = t, this.selectedOptionIndex = this._options.findIndex(
+    super.setValue(t), this.selectedOptionIndex = this._options.findIndex(
       (e) => JSON.stringify(e.value) === JSON.stringify(t)
-    ), this.updateButtonText();
+    ), this.updateButtonText(), this.updateOptionsList(), this.detectChangeCallback && this.detectChangeCallback !== this.props.detectChange && this.detectChangeCallback(t);
   }
 }
-class ue extends b {
+class ue extends w {
   constructor(t) {
     var e, i;
     super(t), this.inputType = "text", this.value = t.default ?? ((i = (e = t.options) == null ? void 0 : e[0]) == null ? void 0 : i.value) ?? "", this.detectChangeCallback = t.detectChange;
@@ -1954,7 +1989,7 @@ class ue extends b {
 const At = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class ge extends b {
+class ge extends w {
   // Store mobile value
   constructor(t = {}) {
     t.rowGap = t.rowGap ?? !0, t.columnGap = t.columnGap ?? !0, t.title = t.title ?? "Gap", t.icon = t.icon ?? At, t.suffix = t.suffix ?? "px", t.minValue = t.minValue ?? 0, super(t), this.inputType = "number", this.inputValues = {}, this.mobileValue = t.mobile, this.value = this.validateValue(t.default ?? 0), t.rowGap && (this.inputValues.row = this.value), t.columnGap && (this.inputValues.column = this.value);
@@ -2041,9 +2076,9 @@ class fe extends S {
     }), this.inputType = "number";
   }
 }
-class ve extends b {
+class ve extends w {
   constructor(t) {
-    super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), t.default ? this.value = { ...t.default } : this.value || (this.value = {}), this.defaultLanguage = t.languages.includes(b.DefaultLanguage) ? b.DefaultLanguage : t.languages[0];
+    super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), t.default ? this.value = { ...t.default } : this.value || (this.value = {}), this.defaultLanguage = t.languages.includes(w.DefaultLanguage) ? w.DefaultLanguage : t.languages[0];
     const e = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
     t.languages.forEach((i) => {
       var s, n;
@@ -2188,7 +2223,7 @@ class ve extends b {
     });
   }
 }
-class Ce extends b {
+class Ce extends w {
   constructor(t = {}) {
     super(t), this.inputType = "select";
     const e = [
@@ -2231,7 +2266,7 @@ const ct = (c, t, e) => {
     i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", h), document.body.style.userSelect = "";
   };
   c.addEventListener("mousedown", l);
-}, A = (c) => {
+}, B = (c) => {
   if (!c) return null;
   let t = c.trim();
   return !t.startsWith("#") || (t = t.slice(1), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), !/^[0-9a-fA-F]{6}$/.test(t)) ? null : `#${t.toUpperCase()}`;
@@ -2242,7 +2277,7 @@ const ct = (c, t, e) => {
     g: parseInt(e.slice(2, 4), 16),
     b: parseInt(e.slice(4, 6), 16)
   };
-}, H = (c) => {
+}, $ = (c) => {
   const { r: t, g: e, b: i } = k(c), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
   let h = 0;
   r !== 0 && (a === s ? h = (n - o) / r % 6 : a === n ? h = (o - s) / r + 2 : h = (s - n) / r + 4), h < 0 && (h += 6);
@@ -2299,7 +2334,7 @@ const ct = (c, t, e) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  const i = A(c);
+  const i = B(c);
   if (i) {
     const { r: s, g: n, b: o } = k(i);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
@@ -2336,7 +2371,7 @@ const ct = (c, t, e) => {
   /^[a-zA-Z]+$/
 ].some((e) => e.test(c.trim())), Ut = (c) => {
   if (typeof document > "u")
-    return pt(c) || !!A(c);
+    return pt(c) || !!B(c);
   const t = document.createElement("div");
   return t.style.color = c, t.style.color !== "";
 }, dt = (c) => {
@@ -2375,7 +2410,7 @@ const ct = (c, t, e) => {
       opacity: Math.round(l * 100)
     };
   }
-  return { color: A(t) || t, position: 0, opacity: 100 };
+  return { color: B(t) || t, position: 0, opacity: 100 };
 }, nt = (c) => {
   const t = [];
   let e = "", i = 0;
@@ -2422,7 +2457,7 @@ const ct = (c, t, e) => {
     const l = dt(n);
     l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
   }), t;
-}, $ = (c) => {
+}, A = (c) => {
   const t = c.stops && c.stops.length ? c.stops : [{ color: "#000000", position: 0, opacity: 100 }];
   return {
     type: c.type && ["linear", "radial", "solid"].includes(c.type) ? c.type : "linear",
@@ -2437,7 +2472,7 @@ const ct = (c, t, e) => {
   const t = c.replace(/;$/, "").trim();
   if (Ut(t)) {
     const s = dt(t);
-    return $({ type: "solid", angle: 0, stops: [s] });
+    return A({ type: "solid", angle: 0, stops: [s] });
   }
   const e = ot(t, "linear-gradient");
   if (e) {
@@ -2458,12 +2493,12 @@ const ct = (c, t, e) => {
       "to top left": 315
     }[a] ?? 90, o = s.slice(1));
     const l = at(o);
-    return l.length ? $({ type: "linear", angle: n, stops: l }) : null;
+    return l.length ? A({ type: "linear", angle: n, stops: l }) : null;
   }
   const i = ot(t, "radial-gradient");
   if (i) {
     const s = nt(i), n = s[0] && !Gt(s[0]) ? s.slice(1) : s, o = at(n);
-    return o.length ? $({ type: "radial", angle: 0, stops: o }) : null;
+    return o.length ? A({ type: "radial", angle: 0, stops: o }) : null;
   }
   return null;
 }, N = (c) => {
@@ -2500,7 +2535,7 @@ const ct = (c, t, e) => {
   static normalizeList(t) {
     const e = /* @__PURE__ */ new Set(), i = [];
     return t.forEach((s) => {
-      let n = A(s);
+      let n = B(s);
       n || P(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
     }), i.slice(0, this.MAX_COLORS);
   }
@@ -2544,7 +2579,7 @@ const ct = (c, t, e) => {
   }
   static addColor(t, e) {
     if (!t) return;
-    let i = A(t), s = "solid";
+    let i = B(t), s = "solid";
     if (i)
       s = "solid";
     else {
@@ -2557,7 +2592,7 @@ const ct = (c, t, e) => {
   }
 };
 z.STORAGE_KEY = "settingsLib_recentColors", z.MAX_COLORS = 12, z.colors = null;
-let B = z;
+let D = z;
 const et = (c, t) => {
   const e = document.createElement("div");
   e.className = "color-picker-recent-section";
@@ -2569,7 +2604,7 @@ const et = (c, t) => {
   n.className = "color-picker-recent-placeholder", n.textContent = "No recent colors yet", e.appendChild(i), e.appendChild(s), e.appendChild(n);
   const o = () => {
     s.innerHTML = "";
-    const a = B.getColors(t);
+    const a = D.getColors(t);
     if (a.length === 0) {
       s.style.display = "none", n.style.display = "block";
       return;
@@ -2601,7 +2636,7 @@ const et = (c, t) => {
   const t = P(c);
   if (t)
     return _(t);
-  const e = A(c);
+  const e = B(c);
   if (e) {
     const i = k(e);
     return `${e} (RGB: ${i.r}, ${i.g}, ${i.b})`;
@@ -2688,10 +2723,10 @@ class Jt {
     L.value = "hsl", L.textContent = "HSL", g.appendChild(C), g.appendChild(y), g.appendChild(L);
     const I = document.createElement("input");
     I.type = "text", I.className = "color-picker-color-input", I.value = this.currentColor, this.input = I;
-    const O = document.createElement("div");
-    O.className = "color-picker-input-container";
+    const H = document.createElement("div");
+    H.className = "color-picker-input-container";
     const v = document.createElement("button");
-    return v.className = "color-picker-copy-inside", v.textContent = "Copy", O.appendChild(I), O.appendChild(v), f.appendChild(g), f.appendChild(O), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(m.container), t.appendChild(f), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, d, I, g, v, l), t;
+    return v.className = "color-picker-copy-inside", v.textContent = "Copy", H.appendChild(I), H.appendChild(v), f.appendChild(g), f.appendChild(H), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(m.container), t.appendChild(f), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, d, I, g, v, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
@@ -2763,11 +2798,11 @@ class Jt {
   setColor(t) {
     var o;
     this.currentColor = t;
-    const { h: e, s: i, v: s } = H(t), n = e >= 360 ? e % 360 : e;
+    const { h: e, s: i, v: s } = $(t), n = e >= 360 ? e % 360 : e;
     this.hueMarker.style.left = `${n / 360 * 100}%`, this.colorMarker.style.left = `${i * 100}%`, this.colorMarker.style.top = `${(1 - s) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${n}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (o = this.onChange) == null || o.call(this, t, this.currentOpacity);
   }
   syncInput() {
-    const t = this.select.value, { h: e, s: i, v: s } = H(this.currentColor);
+    const t = this.select.value, { h: e, s: i, v: s } = $(this.currentColor);
     if (t === "hex") this.input.value = this.currentColor;
     else if (t === "rgb") {
       const { r: n, g: o, b: a } = k(this.currentColor);
@@ -2808,7 +2843,7 @@ class Jt {
   open(t, e, i) {
     var L;
     this.currentColor = t, this.currentOpacity = i ?? 100, this.syncInput();
-    const { h: s, s: n, v: o } = H(t);
+    const { h: s, s: n, v: o } = $(t);
     this.hueMarker.style.left = `${s / 360 * 100}%`, this.colorMarker.style.left = `${n * 100}%`, this.colorMarker.style.top = `${(1 - o) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${s}, 100%, 50%))`, this.updateOpacityBg(), this.opacityMarker.style.left = `${this.currentOpacity}%`, (L = this.recentSectionRefresh) == null || L.call(this), this.isOpen = !0, this.backdrop.style.display = "block", this.backdrop.parentElement || document.body.appendChild(this.backdrop), this.element.style.display = "block", this.element.style.position = "fixed", this.element.style.zIndex = "10002", this.element.style.left = "-9999px", this.element.style.top = "0px", this.element.parentElement || document.body.appendChild(this.element);
     const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), h = window.innerWidth, p = window.innerHeight, d = 16;
     let u = r.right + 8, m = r.top;
@@ -2819,7 +2854,7 @@ class Jt {
   }
   close(t) {
     var e;
-    this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.onChange && this.recentScope === "solid" && (B.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
+    this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.onChange && this.recentScope === "solid" && (D.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
   }
   getElement() {
     return this.element;
@@ -2887,7 +2922,7 @@ class Xt {
     );
     const t = this.container.querySelector(
       ".color-picker-copy-inside"
-    ), { h: e, s: i, v: s } = H(this.currentColor);
+    ), { h: e, s: i, v: s } = $(this.currentColor);
     this.hueMarker.style.left = `${e / 360 * 100}%`, this.colorMarker.style.left = `${i * 100}%`, this.colorMarker.style.top = `${(1 - s) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${e}, 100%, 50%))`, this.opacityMarker.style.left = `${this.currentOpacity}%`, this.updateOpacityBackground(this.opacitySlider), this.updateColorInput(this.formatSelect, this.colorInput), this.setupColorAreaEvents(), this.setupHueSliderEvents(), this.setupOpacitySliderEvents(), this.setupFormatEvents(t);
   }
   scheduleInputUpdate() {
@@ -2912,7 +2947,7 @@ class Xt {
         e.value = `rgb(${s.r}, ${s.g}, ${s.b})`;
         break;
       case "hsl":
-        const { h: n, s: o, v: a } = H(this.currentColor), l = a * (1 - o / 2), r = l === 0 || l === 1 ? 0 : (a - l) / Math.min(l, 1 - l);
+        const { h: n, s: o, v: a } = $(this.currentColor), l = a * (1 - o / 2), r = l === 0 || l === 1 ? 0 : (a - l) / Math.min(l, 1 - l);
         e.value = `hsl(${Math.round(n)}, ${Math.round(
           r * 100
         )}%, ${Math.round(l * 100)}%)`;
@@ -2924,7 +2959,7 @@ class Xt {
   }
   commitRecentColor() {
     var t;
-    B.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this);
+    D.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this);
   }
   setupColorAreaEvents() {
     const t = (e) => {
@@ -3011,7 +3046,7 @@ class Xt {
   }
   parseHexInput(t) {
     const e = t.startsWith("#") ? t : `#${t}`;
-    return A(e);
+    return B(e);
   }
   parseRgbInput(t) {
     const e = t.match(
@@ -3046,7 +3081,7 @@ class Xt {
     return s || null;
   }
   updatePickerVisualState() {
-    const { h: t, s: e, v: i } = H(this.currentColor);
+    const { h: t, s: e, v: i } = $(this.currentColor);
     this.hueMarker.style.left = `${t / 360 * 100}%`, this.colorMarker.style.left = `${e * 100}%`, this.colorMarker.style.top = `${(1 - i) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${t}, 100%, 50%))`, this.updateOpacityBackground(this.opacitySlider);
   }
   triggerChange() {
@@ -3057,11 +3092,11 @@ class Xt {
   }
   updateColor(t, e) {
     this.currentColor = t, this.currentOpacity = e;
-    const { h: i, s, v: n } = H(t), o = i >= 360 ? i % 360 : i;
+    const { h: i, s, v: n } = $(t), o = i >= 360 ? i % 360 : i;
     this.hueMarker.style.left = `${o / 360 * 100}%`, this.colorMarker.style.left = `${s * 100}%`, this.colorMarker.style.top = `${(1 - n) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${o}, 100%, 50%))`, this.opacityMarker.style.left = `${e}%`, this.updateOpacityBackground(this.opacitySlider), this.updateColorInput(this.formatSelect, this.colorInput);
   }
 }
-const V = class V extends b {
+const V = class V extends w {
   constructor(t = {}) {
     const e = typeof t.default == "string" ? void 0 : t.default;
     super({
@@ -3103,9 +3138,9 @@ const V = class V extends b {
     if (typeof t == "string") {
       const i = P(t);
       if (i)
-        return $(i);
+        return A(i);
     }
-    return $(t && typeof t == "object" ? t : {
+    return A(t && typeof t == "object" ? t : {
       type: "linear",
       angle: 90,
       stops: [
@@ -3117,7 +3152,7 @@ const V = class V extends b {
   setValue(t) {
     var i, s;
     let e = null;
-    typeof t == "string" ? e = P(t) : t && typeof t == "object" && (e = $(t)), e || (e = this.defaultValue()), this.value = e, this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), (i = this.onChange) == null || i.call(this, this.value), (s = this.detectChange) == null || s.call(this, this.value), this.pendingSolidColor = null;
+    typeof t == "string" ? e = P(t) : t && typeof t == "object" && (e = A(t)), e || (e = this.defaultValue()), this.value = e, this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), (i = this.onChange) == null || i.call(this, this.value), (s = this.detectChange) == null || s.call(this, this.value), this.pendingSolidColor = null;
   }
   updateUI() {
     if (this.previewEl && this.value)
@@ -3334,7 +3369,7 @@ const V = class V extends b {
     var i;
     const e = t || ((i = this.popoverEl) == null ? void 0 : i.querySelector(".gradient-stops"));
     !e || !this.value || this.value.type === "solid" || !this.value.stops || (e.innerHTML = "", this.value.stops.forEach((s, n) => {
-      var I, O;
+      var I, H;
       const o = document.createElement("div");
       o.className = "gstop-row";
       const a = document.createElement("div");
@@ -3350,7 +3385,7 @@ const V = class V extends b {
       const d = document.createElement("button");
       d.type = "button", d.className = "gstop-color-copy", d.textContent = "Copy", r.appendChild(h), r.appendChild(p), r.appendChild(d);
       const u = document.createElement("button");
-      u.type = "button", u.className = "gstop-del", u.innerHTML = _t, u.disabled = (((O = (I = this.value) == null ? void 0 : I.stops) == null ? void 0 : O.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(u), e.appendChild(o);
+      u.type = "button", u.className = "gstop-del", u.innerHTML = _t, u.disabled = (((H = (I = this.value) == null ? void 0 : I.stops) == null ? void 0 : H.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(u), e.appendChild(o);
       const m = document.createElement("span");
       m.className = "gstop-opacity-label", m.textContent = "Opacity";
       const f = document.createElement("div");
@@ -3501,13 +3536,13 @@ const V = class V extends b {
     if (!(!this.popoverEl || !this.isPopoverOpen)) {
       if (this.isPopoverOpen = !1, this.popoverPosition = null, this.backdropEl && (this.backdropEl.style.display = "none"), this.popoverEl.style.display = "none", document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), this.commitPendingSolidColor(), this.value && this.value.type !== "solid") {
         const e = N(this.value);
-        B.addColor(e, "gradient"), (t = this.recentGradientRefresh) == null || t.call(this);
+        D.addColor(e, "gradient"), (t = this.recentGradientRefresh) == null || t.call(this);
       }
       this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), V.openInstance === this && (V.openInstance = null);
     }
   }
   commitPendingSolidColor() {
-    this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : B.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
+    this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : D.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
   }
   handlePaste(t) {
     var i;
@@ -3688,7 +3723,7 @@ class Ee extends T {
 			`;
   }
 }
-class j extends b {
+class j extends w {
   constructor(t) {
     super({
       ...t,
@@ -3847,7 +3882,7 @@ export {
   kt as OpacitySetting,
   de as SelectApiSettings,
   tt as SelectSetting,
-  b as Setting,
+  w as Setting,
   T as SettingGroup,
   bt as StringSetting,
   yt as TabSettingGroup,
@@ -3858,8 +3893,8 @@ export {
   ae as asSettingGroupWithSettings,
   Et as createSettingGroup,
   oe as createTabSettingGroup,
-  D as isSetting,
+  O as isSetting,
   st as isSettingChild,
-  w as isSettingGroup,
+  b as isSettingGroup,
   W as iterateSettings
 };