builder-settings-types 0.0.387 → 0.0.388

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

@@ -280,9 +280,9 @@ const pt = (c, t, e) => {
     o = p.left, a = p.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", h), document.body.style.userSelect = "none";
   }, r = (d) => {
     if (!i) return;
-    const p = d.clientX - s, u = d.clientY - n, C = window.innerWidth, g = window.innerHeight, m = t.offsetWidth, f = t.offsetHeight;
+    const p = d.clientX - s, u = d.clientY - n, C = window.innerWidth, m = window.innerHeight, g = t.offsetWidth, f = t.offsetHeight;
     let v = o + p, y = a + u;
-    v = Math.max(8, Math.min(C - m - 8, v)), y = Math.max(8, Math.min(g - f - 8, y)), t.style.left = `${v}px`, t.style.top = `${y}px`, e == null || e(v, y);
+    v = Math.max(8, Math.min(C - g - 8, v)), y = Math.max(8, Math.min(m - f - 8, y)), t.style.left = `${v}px`, t.style.top = `${y}px`, e == null || e(v, y);
   }, h = () => {
     i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", h), document.body.style.userSelect = "";
   };
@@ -652,8 +652,8 @@ const ut = (c, t) => {
       const u = Ut(d);
       if (p.title = u, p.setAttribute("aria-label", `Use color: ${u}`), d.includes("gradient(")) {
         p.style.backgroundImage = d, p.style.backgroundColor = "transparent";
-        const g = V(d);
-        g && g.stops && g.stops.length > 0 && (p.style.borderColor = g.stops[0].color);
+        const m = V(d);
+        m && m.stops && m.stops.length > 0 && (p.style.borderColor = m.stops[0].color);
       } else
         p.style.backgroundColor = d, p.style.borderColor = d;
       p.addEventListener("mouseenter", () => o(p, u)), p.addEventListener("mouseleave", () => {
@@ -771,22 +771,22 @@ class Zt {
       this.setColor(E), (L = this.onChange) == null || L.call(this, E, this.currentOpacity);
     }, this.recentScope);
     this.recentSectionRefresh = C.refresh;
-    const g = document.createElement("div");
-    g.className = "color-picker-format-section";
-    const m = document.createElement("select");
-    m.className = "color-picker-format-select", this.select = m;
+    const m = document.createElement("div");
+    m.className = "color-picker-format-section";
+    const g = document.createElement("select");
+    g.className = "color-picker-format-select", this.select = g;
     const f = document.createElement("option");
     f.value = "hex", f.textContent = "HEX";
     const v = document.createElement("option");
     v.value = "rgb", v.textContent = "RGB";
     const y = document.createElement("option");
-    y.value = "hsl", y.textContent = "HSL", m.appendChild(f), m.appendChild(v), m.appendChild(y);
+    y.value = "hsl", y.textContent = "HSL", g.appendChild(f), g.appendChild(v), g.appendChild(y);
     const b = document.createElement("input");
     b.type = "text", b.className = "color-picker-color-input", b.value = this.currentColor, this.input = b;
     const k = document.createElement("div");
     k.className = "color-picker-input-container";
     const x = document.createElement("button");
-    return x.className = "color-picker-copy-inside", x.textContent = "Copy", k.appendChild(b), k.appendChild(x), g.appendChild(m), g.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(C.container), t.appendChild(g), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, p, b, m, x, l), t;
+    return x.className = "color-picker-copy-inside", x.textContent = "Copy", k.appendChild(b), k.appendChild(x), m.appendChild(g), m.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(C.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, p, b, g, x, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
@@ -797,14 +797,14 @@ class Zt {
       var v;
       const p = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width)), C = Math.max(0, Math.min(1, (d.clientY - p.top) / p.height));
       this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${C * 100}%`;
-      const m = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, f = Z(m, u, 1 - C);
+      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, f = Z(g, u, 1 - C);
       this.currentColor = f, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, f, this.currentOpacity);
     }, r = (d) => {
       var v;
       const p = e.getBoundingClientRect();
       let u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width));
       this.hueMarker.style.left = `${u * 100}%`;
-      const C = u * 360, g = this.parsePercentage(this.colorMarker.style.left || "0%"), m = this.parsePercentage(this.colorMarker.style.top || "0%"), f = Z(C, g, 1 - m);
+      const C = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), f = Z(C, m, 1 - g);
       this.currentColor = f, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${C}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, f, this.currentOpacity);
     }, h = (d) => {
       var C;
@@ -908,8 +908,8 @@ class Zt {
     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}%`, (y = this.recentSectionRefresh) == null || y.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, d = window.innerHeight, p = 16;
     let u = r.right + 8, C = r.top;
-    const g = h - r.right, m = r.left;
-    g >= a + p ? u = r.right + 8 : m >= a + p ? u = r.left - a - 8 : u = Math.max(p, (h - a) / 2);
+    const m = h - r.right, g = r.left;
+    m >= a + p ? u = r.right + 8 : g >= a + p ? u = r.left - a - 8 : u = Math.max(p, (h - a) / 2);
     const f = d - r.bottom, v = r.top;
     f >= l + p ? C = r.bottom + 8 : v >= l + p ? C = r.top - l - 8 : f > v ? (C = r.bottom + 8, C + l > d - p && (C = d - l - p)) : (C = r.top - l - 8, C < p && (C = p)), this.element.style.left = `${u}px`, this.element.style.top = `${C}px`;
   }
@@ -974,10 +974,10 @@ class Jt {
     u.className = "color-picker-format-select", this.select = u;
     const C = document.createElement("option");
     C.value = "hex", C.textContent = "HEX";
-    const g = document.createElement("option");
-    g.value = "rgb", g.textContent = "RGB";
     const m = document.createElement("option");
-    m.value = "hsl", m.textContent = "HSL", u.appendChild(C), u.appendChild(g), u.appendChild(m);
+    m.value = "rgb", m.textContent = "RGB";
+    const g = document.createElement("option");
+    g.value = "hsl", g.textContent = "HSL", u.appendChild(C), u.appendChild(m), u.appendChild(g);
     const f = document.createElement("input");
     f.type = "text", f.className = "color-picker-color-input", this.input = f;
     const v = document.createElement("div");
@@ -987,36 +987,36 @@ class Jt {
   }
   bind(t, e, i, s, n, o, a) {
     const l = (p, u) => {
-      const C = u || t.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width)), m = Math.max(0, Math.min(1, (p.clientY - C.top) / C.height));
-      this.colorMarker.style.left = `${g * 100}%`, this.colorMarker.style.top = `${m * 100}%`;
-      const v = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, y = Z(v, g, 1 - m);
+      const C = u || t.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width)), g = Math.max(0, Math.min(1, (p.clientY - C.top) / C.height));
+      this.colorMarker.style.left = `${m * 100}%`, this.colorMarker.style.top = `${g * 100}%`;
+      const v = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, y = Z(v, m, 1 - g);
       this.currentColor = y, this.syncInput(), this.updateOpacityBg(), this.queueChange();
     }, r = (p, u) => {
-      const C = u || e.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
-      this.hueMarker.style.left = `${g * 100}%`;
-      const m = g * 360, f = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = Z(m, f, 1 - v);
+      const C = u || e.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
+      this.hueMarker.style.left = `${m * 100}%`;
+      const g = m * 360, f = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = Z(g, f, 1 - v);
       this.currentColor = y, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
-         linear-gradient(to right, #fff, hsl(${m}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
+         linear-gradient(to right, #fff, hsl(${g}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
     }, h = (p, u) => {
-      const C = u || i.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
-      this.opacityMarker.style.left = `${g * 100}%`, this.currentOpacity = this.clampOpacity(g * 100), this.queueChange();
+      const C = u || i.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - C.left) / C.width));
+      this.opacityMarker.style.left = `${m * 100}%`, this.currentOpacity = this.clampOpacity(m * 100), this.queueChange();
     }, d = (p, u, C) => {
       p.preventDefault(), this.isDragging = !0, this.cachedRect = C.getBoundingClientRect(), u(p, this.cachedRect);
-      let g = null, m;
+      let m = null, g;
       const f = () => {
         this.dragRafId === void 0 && (this.dragRafId = window.requestAnimationFrame(() => {
-          this.dragRafId = void 0, g && this.cachedRect && u(g, this.cachedRect);
+          this.dragRafId = void 0, m && this.cachedRect && u(m, this.cachedRect);
         }));
       }, v = () => {
-        this.isDragging && (this.isDragging = !1, this.dragRafId !== void 0 && (cancelAnimationFrame(this.dragRafId), this.dragRafId = void 0), this.cachedRect = void 0, g = null, this.flushChange(), document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", v), window.removeEventListener("blur", v), this.applyPendingExternal());
+        this.isDragging && (this.isDragging = !1, this.dragRafId !== void 0 && (cancelAnimationFrame(this.dragRafId), this.dragRafId = void 0), this.cachedRect = void 0, m = null, this.flushChange(), document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", v), window.removeEventListener("blur", v), this.applyPendingExternal());
       };
-      m = (y) => {
+      g = (y) => {
         if (!y.buttons) {
           v();
           return;
         }
-        g = y, f();
-      }, document.addEventListener("mousemove", m), document.addEventListener("mouseup", v), window.addEventListener("blur", v);
+        m = y, f();
+      }, document.addEventListener("mousemove", g), document.addEventListener("mouseup", v), window.addEventListener("blur", v);
     };
     t.addEventListener("mousedown", (p) => {
       d(p, l, t);
@@ -1432,21 +1432,21 @@ const P = class P extends w {
       let p = {};
       try {
         p = w.GlobalVariables || {};
-      } catch (m) {
-        console.warn("Could not access Setting.GlobalVariables", m);
+      } catch (g) {
+        console.warn("Could not access Setting.GlobalVariables", g);
       }
       if (!p || Object.keys(p).length === 0) {
-        const m = document.createElement("div");
-        m.textContent = "No global colors defined", m.style.fontSize = "12px", m.style.color = "#666", m.style.padding = "8px", d.appendChild(m);
+        const g = document.createElement("div");
+        g.textContent = "No global colors defined", g.style.fontSize = "12px", g.style.color = "#666", g.style.padding = "8px", d.appendChild(g);
         return;
       }
       const u = w.GlobalVariableGroups || [
         { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
         { title: "Text Color", keys: ["text-dark", "text-light"] }
       ], C = this.globalSearchQuery.toLowerCase();
-      let g;
-      this.globalLayoutMode === "list" ? (g = document.createElement("div"), g.className = "global-colors-list") : (g = document.createElement("div"), g.className = "global-colors-grid"), d.appendChild(g), u.forEach((m) => {
-        const f = Object.entries(p).filter(([v]) => !m.keys.includes(v) && m.title !== "Global Colors" ? !1 : m.keys.includes(v) && v.toLowerCase().includes(C));
+      let m;
+      this.globalLayoutMode === "list" ? (m = document.createElement("div"), m.className = "global-colors-list") : (m = document.createElement("div"), m.className = "global-colors-grid"), d.appendChild(m), u.forEach((g) => {
+        const f = Object.entries(p).filter(([v]) => !g.keys.includes(v) && g.title !== "Global Colors" ? !1 : g.keys.includes(v) && v.toLowerCase().includes(C));
         f.length !== 0 && f.forEach(([v, y]) => {
           if (this.globalLayoutMode === "list") {
             const b = document.createElement("div");
@@ -1460,7 +1460,7 @@ const P = class P extends w {
               S.preventDefault();
               const G = `var(--${v})`;
               this.setValue(G), this.pendingSolidColor = G, i(d);
-            }), g.appendChild(b);
+            }), m.appendChild(b);
           } else {
             const b = document.createElement("div");
             b.className = "global-color-circle";
@@ -1469,7 +1469,7 @@ const P = class P extends w {
               E.preventDefault();
               const L = `var(--${v})`;
               this.setValue(L), this.pendingSolidColor = L, i(d);
-            }), g.appendChild(b);
+            }), m.appendChild(b);
           }
         });
       });
@@ -1527,35 +1527,35 @@ const P = class P extends w {
       const C = document.createElement("button");
       C.type = "button", C.className = "gradient-flip-btn", C.innerHTML = zt, d.addEventListener("change", () => {
         this.clearGlobalBindingForCustomChange(), this.switchType(d.value === "radial" ? "radial" : "linear", !0), e && this.updateDegreeVisibility(e);
-      }), e.addEventListener("focus", (g) => {
-        const m = g.target;
-        m.value = m.value.replace(/[^0-9-]/g, ""), setTimeout(() => m.select(), 0);
-      }), e.addEventListener("input", (g) => {
+      }), e.addEventListener("focus", (m) => {
+        const g = m.target;
+        g.value = g.value.replace(/[^0-9-]/g, ""), setTimeout(() => g.select(), 0);
+      }), e.addEventListener("input", (m) => {
         this.clearGlobalBindingForCustomChange();
-        const m = parseInt(g.target.value);
-        !Number.isNaN(m) && this.value && (this.value.angle = Math.max(0, Math.min(360, m)), this.debouncedPreviewUpdate());
-      }), e.addEventListener("blur", (g) => {
+        const g = parseInt(m.target.value);
+        !Number.isNaN(g) && this.value && (this.value.angle = Math.max(0, Math.min(360, g)), this.debouncedPreviewUpdate());
+      }), e.addEventListener("blur", (m) => {
         var v;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
-        const m = g.target;
-        let f = parseInt(m.value);
-        Number.isNaN(f) && (f = ((v = this.value) == null ? void 0 : v.angle) ?? 0), f = Math.max(0, Math.min(360, f)), this.value && (this.value.angle = f), m.value = `${f}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+        const g = m.target;
+        let f = parseInt(g.value);
+        Number.isNaN(f) && (f = ((v = this.value) == null ? void 0 : v.angle) ?? 0), f = Math.max(0, Math.min(360, f)), this.value && (this.value.angle = f), g.value = `${f}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       }), C.addEventListener("click", () => {
-        this.clearGlobalBindingForCustomChange(), !(!this.value || !this.value.stops) && (this.value.stops.forEach((g) => {
-          g.position = 100 - g.position;
-        }), this.value.stops.sort((g, m) => g.position - m.position), this.updateGradientPreview(i), this.createHandles(s, i), this.updateStopsList(l), this.updateUI(), this.triggerChange());
+        this.clearGlobalBindingForCustomChange(), !(!this.value || !this.value.stops) && (this.value.stops.forEach((m) => {
+          m.position = 100 - m.position;
+        }), this.value.stops.sort((m, g) => m.position - g.position), this.updateGradientPreview(i), this.createHandles(s, i), this.updateStopsList(l), this.updateUI(), this.triggerChange());
       }), h.appendChild(d), h.appendChild(e), h.appendChild(C), t.appendChild(h), this.updateDegreeVisibility(e);
     }
     const i = document.createElement("div");
     i.className = "gradient-preview", this.updateGradientPreview(i);
     const s = document.createElement("div");
     s.className = "gradient-handles", i.appendChild(s), t.appendChild(i), this.createHandles(s, i), i.addEventListener("click", (h) => {
-      var g;
+      var m;
       const d = h.target;
       if (d.classList.contains("gstop-handle") || d.classList.contains("gstop-chip"))
         return;
       const p = i.getBoundingClientRect(), C = (h.clientX - p.left) / p.width * 100;
-      this.clearGlobalBindingForCustomChange(), this.addStopAtPosition(C), this.updateStopsList(), this.updateGradientPreview(i), this.createHandles(s, i), this.updateUI(), ((g = document.activeElement) == null ? void 0 : g.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange();
+      this.clearGlobalBindingForCustomChange(), this.addStopAtPosition(C), this.updateStopsList(), this.updateGradientPreview(i), this.createHandles(s, i), this.updateUI(), ((m = document.activeElement) == null ? void 0 : m.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange();
     });
     const n = document.createElement("div");
     n.className = "gradient-stops-header";
@@ -1603,25 +1603,25 @@ const P = class P extends w {
       const a = this.resolveGlobalVarColor(i.color);
       o.style.backgroundColor = a, n.appendChild(o);
       let l = !1, r = !1, h = 0, d = 0;
-      const p = (g) => {
-        l = !0, r = !1, h = g.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", u), document.addEventListener("mouseup", C), g.preventDefault(), g.stopPropagation();
-      }, u = (g) => {
+      const p = (m) => {
+        l = !0, r = !1, h = m.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", u), document.addEventListener("mouseup", C), m.preventDefault(), m.stopPropagation();
+      }, u = (m) => {
         if (!l || !this.value) return;
-        const m = g.clientX - h;
-        if (Math.abs(m) > 3 && (r = !0), r) {
+        const g = m.clientX - h;
+        if (Math.abs(g) > 3 && (r = !0), r) {
           this.clearGlobalBindingForCustomChange();
           const f = e.getBoundingClientRect();
-          let v = d + m / f.width * 100;
+          let v = d + g / f.width * 100;
           v = Math.max(0, Math.min(100, v)), this.value.stops[s].position = Math.round(v), n.style.left = `${v}%`, this.updateGradientPreview();
         }
-      }, C = (g) => {
-        var m;
+      }, C = (m) => {
+        var g;
         if (l)
           if (l = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", C), r)
             this.value && (this.value.stops.sort((f, v) => f.position - v.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
           else {
-            g.stopPropagation();
-            const f = (m = this.value) == null ? void 0 : m.stops[s];
+            m.stopPropagation();
+            const f = (g = this.value) == null ? void 0 : g.stops[s];
             f && setTimeout(() => {
               const v = this.getSharedStopColorPicker();
               v.getIsOpen() && v.close(!1), this.colorPickerStopIndex = s, v.setOnChange((b, k) => {
@@ -1656,16 +1656,16 @@ const P = class P extends w {
       u.type = "button", u.className = "gstop-color-copy", u.textContent = "Copy", r.appendChild(d), r.appendChild(p), r.appendChild(u);
       const C = document.createElement("button");
       C.type = "button", C.className = "gstop-del", C.innerHTML = Wt, C.disabled = (((k = (b = this.value) == null ? void 0 : b.stops) == null ? void 0 : k.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(C), e.appendChild(o);
-      const g = document.createElement("span");
-      g.className = "gstop-opacity-label", g.textContent = "Opacity";
-      const m = document.createElement("div");
-      m.className = "gstop-opacity-group";
+      const m = document.createElement("span");
+      m.className = "gstop-opacity-label", m.textContent = "Opacity";
+      const g = document.createElement("div");
+      g.className = "gstop-opacity-group";
       const f = document.createElement("input");
       f.type = "range", f.className = "gstop-opacity-slider", f.min = "0", f.max = "100", f.value = String(s.opacity ?? 100);
       const v = N(h);
       f.style.setProperty("--slider-color", `rgb(${v.r}, ${v.g}, ${v.b})`), f.style.setProperty("--slider-color-transparent", `rgba(${v.r}, ${v.g}, ${v.b}, 0)`);
       const y = document.createElement("span");
-      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, m.appendChild(f), m.appendChild(y), p.addEventListener("click", (x) => {
+      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, g.appendChild(f), g.appendChild(y), p.addEventListener("click", (x) => {
         x.preventDefault(), x.stopPropagation();
         const E = this.getSharedStopColorPicker();
         E.getIsOpen() && E.close(!1), this.colorPickerStopIndex = n, E.setOnChange((S, G) => {
@@ -2448,8 +2448,8 @@ const ot = class ot {
         p.stopPropagation(), p.preventDefault();
         const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), C = this.addItemCfg.createItem(u);
         if (ft(C)) {
-          const g = `${this.addItemCfg.keyPrefix}${u}`;
-          this.addSetting(g, C);
+          const m = `${this.addItemCfg.keyPrefix}${u}`;
+          this.addSetting(m, C);
         }
       }), a.appendChild(h);
     }
@@ -2632,16 +2632,16 @@ class H extends Kt {
   draw() {
     const t = document.createElement("div");
     if (t.className = "color-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
-      const g = document.createElement("div");
-      if (g.className = "icon-container", this.props.icon) {
-        const m = document.createElement("span");
-        m.className = "input-icon", m.innerHTML = this.props.icon, g.appendChild(m);
+      const m = document.createElement("div");
+      if (m.className = "icon-container", this.props.icon) {
+        const g = document.createElement("span");
+        g.className = "input-icon", g.innerHTML = this.props.icon, m.appendChild(g);
       }
       if (this.props.title) {
-        const m = document.createElement("span");
-        m.className = "input-label", m.textContent = this.props.title, g.appendChild(m);
+        const g = document.createElement("span");
+        g.className = "input-label", g.textContent = this.props.title, m.appendChild(g);
       }
-      t.appendChild(g);
+      t.appendChild(m);
     }
     const e = document.createElement("div");
     e.className = "color-input-wrapper";
@@ -2659,41 +2659,41 @@ class H extends Kt {
       try {
         if (console.log("ColorSetting: renderGlobalOptions called"), a.innerHTML = "", !w) {
           console.error("ColorSetting: Setting class is undefined");
-          const m = document.createElement("div");
-          m.textContent = "Error: System error (Setting undefined)", a.appendChild(m);
+          const g = document.createElement("div");
+          g.textContent = "Error: System error (Setting undefined)", a.appendChild(g);
           return;
         }
-        const g = w.GlobalVariables || {};
-        if (console.log("ColorSetting: GlobalVariables:", g), !g || Object.keys(g).length === 0) {
-          const m = document.createElement("div");
-          m.textContent = "No global colors defined", m.style.gridColumn = "1 / -1", m.style.fontSize = "12px", m.style.color = "#666", a.appendChild(m);
+        const m = w.GlobalVariables || {};
+        if (console.log("ColorSetting: GlobalVariables:", m), !m || Object.keys(m).length === 0) {
+          const g = document.createElement("div");
+          g.textContent = "No global colors defined", g.style.gridColumn = "1 / -1", g.style.fontSize = "12px", g.style.color = "#666", a.appendChild(g);
           return;
         }
-        Object.entries(g).forEach(([m, f]) => {
+        Object.entries(m).forEach(([g, f]) => {
           const v = document.createElement("button");
-          v.className = "global-color-btn", v.title = m, v.style.width = "30px", v.style.height = "30px", v.style.borderRadius = "50%", v.style.border = "1px solid #ddd", v.style.backgroundColor = f, v.style.cursor = "pointer", this.value === `var(--${m})` && (v.style.border = "2px solid #2196f3"), v.addEventListener("click", (y) => {
+          v.className = "global-color-btn", v.title = g, v.style.width = "30px", v.style.height = "30px", v.style.borderRadius = "50%", v.style.border = "1px solid #ddd", v.style.backgroundColor = f, v.style.cursor = "pointer", this.value === `var(--${g})` && (v.style.border = "2px solid #2196f3"), v.addEventListener("click", (y) => {
             var k, x;
             y.preventDefault();
-            const b = `var(--${m})`;
+            const b = `var(--${g})`;
             this.value = b, (k = this.onChange) == null || k.call(this, b), (x = this.detectChange) == null || x.call(this, b), Array.from(a.children).forEach((E) => {
               E.style.border = "1px solid #ddd";
             }), v.style.border = "2px solid #2196f3", d.style.backgroundColor = f;
           }), a.appendChild(v);
         });
-      } catch (g) {
-        console.error("ColorSetting: Error in renderGlobalOptions", g), a.innerHTML = "Error loading global options";
+      } catch (m) {
+        console.error("ColorSetting: Error in renderGlobalOptions", m), a.innerHTML = "Error loading global options";
       }
     };
-    l(), s.addEventListener("click", (g) => {
-      g.preventDefault(), s.classList.add("active"), n.classList.remove("active"), o.style.display = "flex", a.style.display = "none", this.value && this.value.startsWith("var(--");
-    }), n.addEventListener("click", (g) => {
-      g.preventDefault(), n.classList.add("active"), s.classList.remove("active"), o.style.display = "none", a.style.display = "grid", l();
+    l(), s.addEventListener("click", (m) => {
+      m.preventDefault(), s.classList.add("active"), n.classList.remove("active"), o.style.display = "flex", a.style.display = "none", this.value && this.value.startsWith("var(--");
+    }), n.addEventListener("click", (m) => {
+      m.preventDefault(), n.classList.add("active"), s.classList.remove("active"), o.style.display = "none", a.style.display = "grid", l();
     }), this.value && this.value.startsWith("var(--") ? n.click() : s.click();
-    const r = (g) => {
-      const m = g.value.trim();
-      if (!m)
+    const r = (m) => {
+      const g = m.value.trim();
+      if (!g)
         return e.classList.remove("error"), !0;
-      const v = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(m);
+      const v = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(g);
       return v ? e.classList.remove("error") : e.classList.add("error"), v;
     }, h = document.createElement("input");
     h.type = "color", h.className = "color-picker", h.value = this.value && !this.value.startsWith("var(--") ? this.value : "#000000", h.setAttribute("aria-label", "Choose color"), h.setAttribute("title", "Click to open color picker"), this.getDataPropsPath() && h.setAttribute("data-test-id", this.getDataPropsPath()), this.colorInputEl = h;
@@ -2701,38 +2701,38 @@ class H extends Kt {
     d.className = "color-preview";
     let p = this.value || "#000000";
     if (p.startsWith("var(--")) {
-      const g = p.replace("var(--", "").replace(")", "");
-      p = (w.GlobalVariables || {})[g] || "#000000";
+      const m = p.replace("var(--", "").replace(")", "");
+      p = (w.GlobalVariables || {})[m] || "#000000";
     }
     d.style.backgroundColor = p;
     const u = document.createElement("input");
     u.type = "text", u.className = "color-text-input", u.value = this.value || "", u.placeholder = "#000000", u.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), u.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), u.setAttribute("aria-label", "Hex color value"), u.setAttribute("maxlength", "7"), this.getDataPropsPath() && u.setAttribute("data-test-id", `${this.getDataPropsPath()}_text`), this.textInputEl = u;
-    const C = (g) => {
+    const C = (m) => {
       var f, v;
-      let m = g.trim();
-      if (m && !m.startsWith("#") && !m.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(m) && (m = "#" + m, this.textInputEl && (this.textInputEl.value = m)), this.textInputEl && r(this.textInputEl)) {
-        const y = H.normalizeColorValue(m);
+      let g = m.trim();
+      if (g && !g.startsWith("#") && !g.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(g) && (g = "#" + g, this.textInputEl && (this.textInputEl.value = g)), this.textInputEl && r(this.textInputEl)) {
+        const y = H.normalizeColorValue(g);
         this.value = y, (f = this.onChange) == null || f.call(this, y), (v = this.detectChange) == null || v.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), d.style.backgroundColor = y;
       }
     };
-    return this.textInputEl.addEventListener("input", (g) => {
-      const m = g.target.value;
-      C(m);
-    }), this.textInputEl.addEventListener("paste", (g) => {
+    return this.textInputEl.addEventListener("input", (m) => {
+      const g = m.target.value;
+      C(g);
+    }), this.textInputEl.addEventListener("paste", (m) => {
       var f;
-      g.preventDefault();
-      const m = ((f = g.clipboardData) == null ? void 0 : f.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = m.trim(), C(m));
-    }), this.textInputEl.addEventListener("keydown", (g) => {
-      var m, f, v;
-      g.key === "Enter" && (g.preventDefault(), C(((m = this.textInputEl) == null ? void 0 : m.value) || ""), (f = this.textInputEl) == null || f.blur()), g.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (v = this.textInputEl) == null || v.blur(), e.classList.remove("error"));
-    }), this.colorInputEl.addEventListener("input", (g) => {
+      m.preventDefault();
+      const g = ((f = m.clipboardData) == null ? void 0 : f.getData("text")) || "";
+      this.textInputEl && (this.textInputEl.value = g.trim(), C(g));
+    }), this.textInputEl.addEventListener("keydown", (m) => {
+      var g, f, v;
+      m.key === "Enter" && (m.preventDefault(), C(((g = this.textInputEl) == null ? void 0 : g.value) || ""), (f = this.textInputEl) == null || f.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (v = this.textInputEl) == null || v.blur(), e.classList.remove("error"));
+    }), this.colorInputEl.addEventListener("input", (m) => {
       var v, y;
-      const m = g.target.value, f = H.normalizeColorValue(m);
+      const g = m.target.value, f = H.normalizeColorValue(g);
       this.value = f, (v = this.onChange) == null || v.call(this, f), (y = this.detectChange) == null || y.call(this, f), this.textInputEl && (this.textInputEl.value = f), d.style.backgroundColor = f, e.classList.remove("error");
-    }), this.colorInputEl.addEventListener("change", (g) => {
+    }), this.colorInputEl.addEventListener("change", (m) => {
       var v, y;
-      const m = g.target.value, f = H.normalizeColorValue(m);
+      const g = m.target.value, f = H.normalizeColorValue(g);
       this.value = f, (v = this.onChange) == null || v.call(this, f), (y = this.detectChange) == null || y.call(this, f), this.textInputEl && (this.textInputEl.value = f), d.style.backgroundColor = f;
     }), o.appendChild(h), o.appendChild(d), o.appendChild(u), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
   }
@@ -4149,20 +4149,20 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
         this.props.prizeMap
       );
       u.appendChild(C), r.appendChild(h), r.appendChild(u), t.appendChild(r);
-      const g = We(
+      const m = We(
         this.hasAllMarkers(),
         () => this.handleClearAllMarkers(),
         () => {
           this.triggerChange(), this.closePopover(!0);
         }
       );
-      t.appendChild(g);
-      const m = h.querySelector(
+      t.appendChild(m);
+      const g = h.querySelector(
         ".image-map-container"
       ), f = u.querySelector(
         ".simple-prize-list"
       );
-      m && (m.scrollTop = s), f && (f.scrollTop = n), this.updateCursorTooltipContent();
+      g && (g.scrollTop = s), f && (f.scrollTop = n), this.updateCursorTooltipContent();
     } else {
       const l = Be({
         uploadMethod: this.props.upload || "file-manager",
@@ -4745,7 +4745,7 @@ class yi extends w {
   constructor(t) {
     super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), this.popup = null;
     const e = window;
-    e.textElementListeners || (e.textElementListeners = /* @__PURE__ */ new Map()), window.test = window.test || [], test.push(this), t.default ? this.value = t.default : this.value || (this.value = {});
+    e.textElementListeners || (e.textElementListeners = /* @__PURE__ */ new Map()), window.test = window.test || [], test.push(this), t.default ? this.value = t.default : this.value || (this.value = {}), this.value.$id = this.$id = dt();
     const i = w.HasExplicitCurrentLanguage(), s = i ? w.CurrentLanguage() : "", n = w.DefaultLanguage;
     this.defaultLanguage = i && s && t.languages.includes(s) ? s : n && t.languages.includes(n) ? n : t.languages[0];
     const o = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
@@ -4780,8 +4780,8 @@ class yi extends w {
     const h = "...";
     let d = 0, p = e.length, u = 0;
     for (; d <= p; ) {
-      const g = Math.floor((d + p) / 2), m = e.slice(0, g).trimEnd() + h;
-      this.measureTextWidth(m, i) <= l ? (u = g, d = g + 1) : p = g - 1;
+      const m = Math.floor((d + p) / 2), g = e.slice(0, m).trimEnd() + h;
+      this.measureTextWidth(g, i) <= l ? (u = m, d = m + 1) : p = m - 1;
     }
     const C = e.slice(0, u).trimEnd() + h;
     t.placeholder = C;
@@ -4945,7 +4945,6 @@ class yi extends w {
     this.popup && (document.body.removeChild(this.popup), this.popup = null);
   }
   draw() {
-    var l, r;
     const t = document.createElement("div");
     t.classList.add("simple-multi-language-wrapper");
     const e = document.createElement("div");
@@ -4976,36 +4975,32 @@ class yi extends w {
       s.style.color = "#000";
     }), s.addEventListener("mouseleave", () => {
       s.style.color = "#666";
-    }), s.addEventListener("click", (h) => {
-      h.preventDefault(), this.showPopup();
+    }), s.addEventListener("click", (l) => {
+      l.preventDefault(), this.showPopup();
     });
-    const n = window.textElementListeners;
-    if ((l = this.value) != null && l.$id && !n.has((r = this.value) == null ? void 0 : r.$id)) {
-      const h = (d) => {
-        var C, g;
-        const { type: p, data: u } = d.data || {};
-        p === "TEXT_ELEMENT_CLICKED" && u.$id && (console.log((C = this.value) == null ? void 0 : C.$id), (u == null ? void 0 : u.$id) === ((g = this.value) == null ? void 0 : g.$id) && this.showPopup());
-      };
-      window.addEventListener("message", h), n.set(this.id, h);
-    }
-    e.appendChild(i), e.appendChild(s), t.appendChild(e);
+    const n = (l) => {
+      var d, p;
+      const { type: r, data: h } = l.data || {};
+      r === "TEXT_ELEMENT_CLICKED" && h.$id && (console.log((d = this.value) == null ? void 0 : d.$id), (h == null ? void 0 : h.$id) === ((p = this.value) == null ? void 0 : p.$id) && this.showPopup());
+    };
+    window.addEventListener("message", n), e.appendChild(i), e.appendChild(s), t.appendChild(e);
     const o = document.createElement("div");
-    o.classList.add("simple-multi-language-content"), t.appendChild(o), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = w.onLanguageChange((h) => {
-      h && this.props.languages.includes(h) && (this.defaultLanguage = h), this.container && this.renderContent(this.container);
+    o.classList.add("simple-multi-language-content"), t.appendChild(o), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = w.onLanguageChange((l) => {
+      l && this.props.languages.includes(l) && (this.defaultLanguage = l), this.container && this.renderContent(this.container);
     });
     const a = () => {
       if (!this.container) return;
       this.container.querySelectorAll(
         ".simple-language-textarea"
-      ).forEach((d) => {
-        const p = d.getAttribute("data-full-placeholder") || "";
-        p && this.adaptPlaceholderToSingleLine(d, p);
+      ).forEach((r) => {
+        const h = r.getAttribute("data-full-placeholder") || "";
+        h && this.adaptPlaceholderToSingleLine(r, h);
       });
     };
     return window.addEventListener("resize", a), t;
   }
   setValue(t) {
-    super.setValue(t), this.value.$id || (this.value.$id = t.$id || dt()), this.container && this.props.languages.forEach((e) => {
+    super.setValue(t), this.container && this.props.languages.forEach((e) => {
       var i;
       if (this.props.multiImg) {
         const s = this.uploadSettings.get(e);

package/dist/settings/multi-language-settings/multiLanguageSettings.d.ts

@@ -16,6 +16,7 @@ export declare class MultiLanguageSetting extends Setting<MultiLanguageValue, Mu
     private uploadSettings;
     private languageChangeUnsubscribe?;
     private popup;
+    $id: any;
     private capitalizeFirstLetter;
     private textMeasureCanvas?;
     private measureTextWidth;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "builder-settings-types",
   "description": "builder settings",
-  "version": "0.0.387",
+  "version": "0.0.388",
   "type": "module",
   "main": "dist/builder-settings-types.cjs.js",
   "module": "dist/builder-settings-types.es.js",