builder-settings-types 0.0.378 → 0.0.379

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

@@ -280,9 +280,9 @@ const dt = (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, f = window.innerWidth, m = window.innerHeight, g = t.offsetWidth, C = 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(f - g - 8, v)), y = Math.max(8, Math.min(m - C - 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 = "";
   };
@@ -766,27 +766,27 @@ class Zt {
     p.className = "color-picker-opacity", this.opacitySlider = p;
     const u = document.createElement("div");
     u.className = "color-picker-opacity-marker", this.opacityMarker = u, p.appendChild(u), r.appendChild(h), r.appendChild(p), a.appendChild(l), a.appendChild(r);
-    const f = pt((E) => {
+    const C = pt((E) => {
       var L;
       this.setColor(E), (L = this.onChange) == null || L.call(this, E, this.currentOpacity);
     }, this.recentScope);
-    this.recentSectionRefresh = f.refresh;
+    this.recentSectionRefresh = C.refresh;
     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 C = document.createElement("option");
-    C.value = "hex", C.textContent = "HEX";
+    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", g.appendChild(C), g.appendChild(v), g.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), m.appendChild(g), m.appendChild(k), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(f.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, p, b, g, 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");
@@ -795,37 +795,37 @@ class Zt {
   bind(t, e, i, s, n, o, a) {
     const l = (d) => {
       var v;
-      const p = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width)), f = Math.max(0, Math.min(1, (d.clientY - p.top) / p.height));
-      this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, C = Z(g, u, 1 - f);
-      this.currentColor = C, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, C, this.currentOpacity);
+      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 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 f = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), C = Z(f, m, 1 - g);
-      this.currentColor = C, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${f}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (v = this.onChange) == null || v.call(this, C, this.currentOpacity);
+      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 f;
+      var C;
       const p = i.getBoundingClientRect(), u = Math.max(0, Math.min(1, (d.clientX - p.left) / p.width));
-      this.opacityMarker.style.left = `${u * 100}%`, this.currentOpacity = Math.round(u * 100), (f = this.onChange) == null || f.call(this, this.currentColor, this.currentOpacity);
+      this.opacityMarker.style.left = `${u * 100}%`, this.currentOpacity = Math.round(u * 100), (C = this.onChange) == null || C.call(this, this.currentColor, this.currentOpacity);
     };
     t.addEventListener("mousedown", (d) => {
       d.preventDefault(), l(d);
-      const p = (f) => l(f), u = () => {
+      const p = (C) => l(C), u = () => {
         document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
     }), e.addEventListener("mousedown", (d) => {
       d.preventDefault(), r(d);
-      const p = (f) => r(f), u = () => {
+      const p = (C) => r(C), u = () => {
         document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
     }), i.addEventListener("mousedown", (d) => {
       d.preventDefault(), h(d);
-      const p = (f) => h(f), u = () => {
+      const p = (C) => h(C), u = () => {
         document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", p), document.addEventListener("mouseup", u);
@@ -907,11 +907,11 @@ class Zt {
     const { h: s, s: n, v: o } = q(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}%`, (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, f = r.top;
+    let u = r.right + 8, C = r.top;
     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 C = d - r.bottom, v = r.top;
-    C >= l + p ? f = r.bottom + 8 : v >= l + p ? f = r.top - l - 8 : C > v ? (f = r.bottom + 8, f + l > d - p && (f = d - l - p)) : (f = r.top - l - 8, f < p && (f = p)), this.element.style.left = `${u}px`, this.element.style.top = `${f}px`;
+    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`;
   }
   close(t) {
     var e;
@@ -972,38 +972,38 @@ class Jt {
     p.className = "color-picker-format-section embedded";
     const u = document.createElement("select");
     u.className = "color-picker-format-select", this.select = u;
-    const f = document.createElement("option");
-    f.value = "hex", f.textContent = "HEX";
+    const C = document.createElement("option");
+    C.value = "hex", C.textContent = "HEX";
     const m = document.createElement("option");
     m.value = "rgb", m.textContent = "RGB";
     const g = document.createElement("option");
-    g.value = "hsl", g.textContent = "HSL", u.appendChild(f), u.appendChild(m), u.appendChild(g);
-    const C = document.createElement("input");
-    C.type = "text", C.className = "color-picker-color-input", this.input = C;
+    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");
     v.className = "color-picker-input-container";
     const y = document.createElement("button");
-    return y.className = "color-picker-copy-inside", y.textContent = "Copy", v.appendChild(C), v.appendChild(y), p.appendChild(u), p.appendChild(v), t.appendChild(e), t.appendChild(s), t.appendChild(p), t.appendChild(d.container), this.bind(e, a, r, C, u, y, n), t;
+    return y.className = "color-picker-copy-inside", y.textContent = "Copy", v.appendChild(f), v.appendChild(y), p.appendChild(u), p.appendChild(v), t.appendChild(e), t.appendChild(s), t.appendChild(p), t.appendChild(d.container), this.bind(e, a, r, f, u, y, n), t;
   }
   bind(t, e, i, s, n, o, a) {
     const l = (p, u) => {
-      const f = u || t.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - f.left) / f.width)), g = Math.max(0, Math.min(1, (p.clientY - f.top) / f.height));
+      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 f = u || e.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - f.left) / f.width));
+      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, C = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), y = Z(g, C, 1 - v);
+      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(${g}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
     }, h = (p, u) => {
-      const f = u || i.getBoundingClientRect(), m = Math.max(0, Math.min(1, (p.clientX - f.left) / f.width));
+      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, f) => {
-      p.preventDefault(), this.isDragging = !0, this.cachedRect = f.getBoundingClientRect(), u(p, this.cachedRect);
+    }, d = (p, u, C) => {
+      p.preventDefault(), this.isDragging = !0, this.cachedRect = C.getBoundingClientRect(), u(p, this.cachedRect);
       let m = null, g;
-      const C = () => {
+      const f = () => {
         this.dragRafId === void 0 && (this.dragRafId = window.requestAnimationFrame(() => {
           this.dragRafId = void 0, m && this.cachedRect && u(m, this.cachedRect);
         }));
@@ -1015,7 +1015,7 @@ class Jt {
           v();
           return;
         }
-        m = y, C();
+        m = y, f();
       }, document.addEventListener("mousemove", g), document.addEventListener("mouseup", v), window.addEventListener("blur", v);
     };
     t.addEventListener("mousedown", (p) => {
@@ -1443,11 +1443,11 @@ const P = class P extends w {
       const u = w.GlobalVariableGroups || [
         { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
         { title: "Text Color", keys: ["text-dark", "text-light"] }
-      ], f = this.globalSearchQuery.toLowerCase();
+      ], C = this.globalSearchQuery.toLowerCase();
       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 C = Object.entries(p).filter(([v]) => !g.keys.includes(v) && g.title !== "Global Colors" ? !1 : g.keys.includes(v) && v.toLowerCase().includes(f));
-        C.length !== 0 && C.forEach(([v, y]) => {
+        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");
             b.className = "global-color-row";
@@ -1524,8 +1524,8 @@ const P = class P extends w {
       p.value = "linear", p.textContent = "Linear";
       const u = document.createElement("option");
       u.value = "radial", u.textContent = "Radial", d.appendChild(p), d.appendChild(u), d.value = this.value.type === "radial" ? "radial" : "linear", e = document.createElement("input"), e.type = "text", e.inputMode = "numeric", e.className = "gradient-degree-input", e.value = `${this.value.angle ?? 90}°`, e.style.width = "75px", e.style.textAlign = "center", (!this.value.angle || this.value.stops.length < 2) && (this.value.angle = 90, e.value = "90°");
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gradient-flip-btn", f.innerHTML = zt, d.addEventListener("change", () => {
+      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", (m) => {
         const g = m.target;
@@ -1538,13 +1538,13 @@ const P = class P extends w {
         var v;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
         const g = m.target;
-        let C = parseInt(g.value);
-        Number.isNaN(C) && (C = ((v = this.value) == null ? void 0 : v.angle) ?? 0), C = Math.max(0, Math.min(360, C)), this.value && (this.value.angle = C), g.value = `${C}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
-      }), f.addEventListener("click", () => {
+        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((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(f), t.appendChild(h), this.updateDegreeVisibility(e);
+      }), 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);
@@ -1554,8 +1554,8 @@ const P = class P extends w {
       const d = h.target;
       if (d.classList.contains("gstop-handle") || d.classList.contains("gstop-chip"))
         return;
-      const p = i.getBoundingClientRect(), f = (h.clientX - p.left) / p.width * 100;
-      this.clearGlobalBindingForCustomChange(), this.addStopAtPosition(f), 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 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(), ((m = document.activeElement) == null ? void 0 : m.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange();
     });
     const n = document.createElement("div");
     n.className = "gradient-stops-header";
@@ -1604,31 +1604,31 @@ const P = class P extends w {
       o.style.backgroundColor = a, n.appendChild(o);
       let l = !1, r = !1, h = 0, d = 0;
       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", f), m.preventDefault(), m.stopPropagation();
+        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 g = m.clientX - h;
         if (Math.abs(g) > 3 && (r = !0), r) {
           this.clearGlobalBindingForCustomChange();
-          const C = e.getBoundingClientRect();
-          let v = d + g / C.width * 100;
+          const f = e.getBoundingClientRect();
+          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();
         }
-      }, f = (m) => {
+      }, C = (m) => {
         var g;
         if (l)
-          if (l = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", f), r)
-            this.value && (this.value.stops.sort((C, v) => C.position - v.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
+          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 {
             m.stopPropagation();
-            const C = (g = this.value) == null ? void 0 : g.stops[s];
-            C && setTimeout(() => {
+            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) => {
                 this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = b, k !== void 0 && (this.value.stops[s].opacity = k), o.style.backgroundColor = b, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
               });
-              const y = this.resolveGlobalVarColor(C.color);
-              v.open(y, o, C.opacity ?? 100);
+              const y = this.resolveGlobalVarColor(f.color);
+              v.open(y, o, f.opacity ?? 100);
             }, 0);
           }
       };
@@ -1654,24 +1654,24 @@ const P = class P extends w {
       p.type = "text", p.className = "gstop-color-input", p.value = h.replace("#", "").toUpperCase();
       const u = document.createElement("button");
       u.type = "button", u.className = "gstop-color-copy", u.textContent = "Copy", r.appendChild(d), r.appendChild(p), r.appendChild(u);
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gstop-del", f.innerHTML = Wt, f.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(f), e.appendChild(o);
+      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 m = document.createElement("span");
       m.className = "gstop-opacity-label", m.textContent = "Opacity";
       const g = document.createElement("div");
       g.className = "gstop-opacity-group";
-      const C = document.createElement("input");
-      C.type = "range", C.className = "gstop-opacity-slider", C.min = "0", C.max = "100", C.value = String(s.opacity ?? 100);
+      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);
-      C.style.setProperty("--slider-color", `rgb(${v.r}, ${v.g}, ${v.b})`), C.style.setProperty("--slider-color-transparent", `rgba(${v.r}, ${v.g}, ${v.b}, 0)`);
+      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}%`, g.appendChild(C), g.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) => {
-          this.clearGlobalBindingForCustomChange(), p.value = S.replace("#", "").toUpperCase(), d.style.backgroundColor = S, this.value.stops[n].color = S, G !== void 0 && (this.value.stops[n].opacity = G, C.value = String(G), y.textContent = `${G}%`);
+          this.clearGlobalBindingForCustomChange(), p.value = S.replace("#", "").toUpperCase(), d.style.backgroundColor = S, this.value.stops[n].color = S, G !== void 0 && (this.value.stops[n].opacity = G, f.value = String(G), y.textContent = `${G}%`);
           const W = N(S);
-          C.style.setProperty("--slider-color", `rgb(${W.r}, ${W.g}, ${W.b})`), C.style.setProperty("--slider-color-transparent", `rgba(${W.r}, ${W.g}, ${W.b}, 0)`), this.updateGradientPreview(), this.createHandles(
+          f.style.setProperty("--slider-color", `rgb(${W.r}, ${W.g}, ${W.b})`), f.style.setProperty("--slider-color-transparent", `rgba(${W.r}, ${W.g}, ${W.b}, 0)`), this.updateGradientPreview(), this.createHandles(
             this.popoverEl.querySelector(".gradient-handles"),
             this.popoverEl.querySelector(".gradient-preview")
           ), this.updateUI(), this.triggerChange();
@@ -1684,7 +1684,7 @@ const P = class P extends w {
         if (/^#[0-9A-Fa-f]{6}$/.test(E)) {
           this.value.stops[n].color = E, d.style.backgroundColor = E;
           const L = N(E);
-          C.style.setProperty("--slider-color", `rgb(${L.r}, ${L.g}, ${L.b})`), C.style.setProperty("--slider-color-transparent", `rgba(${L.r}, ${L.g}, ${L.b}, 0)`), this.debouncedPreviewUpdate();
+          f.style.setProperty("--slider-color", `rgb(${L.r}, ${L.g}, ${L.b})`), f.style.setProperty("--slider-color-transparent", `rgba(${L.r}, ${L.g}, ${L.b}, 0)`), this.debouncedPreviewUpdate();
         }
       }), p.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
@@ -1717,17 +1717,17 @@ const P = class P extends w {
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateStopsList(), this.updateUI(), this.triggerChange();
-      }), f.addEventListener("click", () => {
+      }), C.addEventListener("click", () => {
         var x, E;
         (this.value.stops.length || 0) <= 2 || ((x = this.sharedStopColorPicker) != null && x.getIsOpen() && this.colorPickerStopIndex === n ? (this.sharedStopColorPicker.close(!1), this.colorPickerStopIndex = null) : this.colorPickerStopIndex !== null && this.colorPickerStopIndex > n && this.colorPickerStopIndex--, this.clearGlobalBindingForCustomChange(), this.value.stops.splice(n, 1), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateStopsList(), this.updateGradientPreview(), this.updateUI(), ((E = document.activeElement) == null ? void 0 : E.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange());
-      }), C.addEventListener("input", () => {
+      }), f.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const x = parseInt(C.value, 10);
+        const x = parseInt(f.value, 10);
         this.value.stops[n].opacity = Math.max(0, Math.min(100, x)), y.textContent = `${this.value.stops[n].opacity}%`, this.debouncedPreviewUpdate();
-      }), C.addEventListener("change", () => {
+      }), f.addEventListener("change", () => {
         this.clearGlobalBindingForCustomChange(), this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       });
     }));
@@ -1755,8 +1755,8 @@ const P = class P extends w {
     if (s === n || s.position === n.position)
       o = s.color, a = s.opacity ?? 100;
     else {
-      const r = (e - s.position) / (n.position - s.position), h = N(s.color), d = N(n.color), p = Math.round(h.r + (d.r - h.r) * r), u = Math.round(h.g + (d.g - h.g) * r), f = Math.round(h.b + (d.b - h.b) * r);
-      o = `#${p.toString(16).padStart(2, "0")}${u.toString(16).padStart(2, "0")}${f.toString(16).padStart(2, "0")}`.toUpperCase(), a = Math.round((s.opacity ?? 100) + ((n.opacity ?? 100) - (s.opacity ?? 100)) * r);
+      const r = (e - s.position) / (n.position - s.position), h = N(s.color), d = N(n.color), p = Math.round(h.r + (d.r - h.r) * r), u = Math.round(h.g + (d.g - h.g) * r), C = Math.round(h.b + (d.b - h.b) * r);
+      o = `#${p.toString(16).padStart(2, "0")}${u.toString(16).padStart(2, "0")}${C.toString(16).padStart(2, "0")}`.toUpperCase(), a = Math.round((s.opacity ?? 100) + ((n.opacity ?? 100) - (s.opacity ?? 100)) * r);
     }
     const l = {
       position: Math.round(e),
@@ -1795,8 +1795,8 @@ const P = class P extends w {
         let l = e.right + 8, r = e.top;
         const h = s - e.right, d = e.left, p = i + o;
         h < p && d > h + 100 && (l = e.left - i - 8);
-        const u = n - e.bottom, f = e.top;
-        f >= a + o ? r = e.top - a - 8 : u >= a + o ? r = e.bottom + 8 : f > u ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
+        const u = n - e.bottom, C = e.top;
+        C >= a + o ? r = e.top - a - 8 : u >= a + o ? r = e.bottom + 8 : C > u ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
       });
     }
   }
@@ -1988,8 +1988,8 @@ const ot = class ot {
           M(h) ? h.setValue(
             u
           ) : R(h) ? (p = h.setValue) == null || p.call(h, u) : h.setValue && h.setValue(u);
-        } catch (f) {
-          console.warn(`Could not preserve value for setting ${r}:`, f);
+        } catch (C) {
+          console.warn(`Could not preserve value for setting ${r}:`, C);
         }
       }
     }), this.settings = t, this.propagateNestingLevel(), this.propagateDataPropsPath();
@@ -2446,10 +2446,10 @@ const ot = class ot {
     </svg>`;
       h.innerHTML = `${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, h.addEventListener("click", (p) => {
         p.stopPropagation(), p.preventDefault();
-        const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), f = this.addItemCfg.createItem(u);
-        if (vt(f)) {
+        const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), C = this.addItemCfg.createItem(u);
+        if (vt(C)) {
           const m = `${this.addItemCfg.keyPrefix}${u}`;
-          this.addSetting(m, f);
+          this.addSetting(m, C);
         }
       }), a.appendChild(h);
     }
@@ -2669,15 +2669,15 @@ class H extends Kt {
           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(m).forEach(([g, C]) => {
+        Object.entries(m).forEach(([g, f]) => {
           const v = document.createElement("button");
-          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 = C, v.style.cursor = "pointer", this.value === `var(--${g})` && (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(--${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 = C;
+            }), v.style.border = "2px solid #2196f3", d.style.backgroundColor = f;
           }), a.appendChild(v);
         });
       } catch (m) {
@@ -2707,33 +2707,33 @@ class H extends Kt {
     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 f = (m) => {
-      var C, v;
+    const C = (m) => {
+      var f, v;
       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, (C = this.onChange) == null || C.call(this, y), (v = this.detectChange) == null || v.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), d.style.backgroundColor = y;
+        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", (m) => {
       const g = m.target.value;
-      f(g);
+      C(g);
     }), this.textInputEl.addEventListener("paste", (m) => {
-      var C;
+      var f;
       m.preventDefault();
-      const g = ((C = m.clipboardData) == null ? void 0 : C.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = g.trim(), f(g));
+      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, C, v;
-      m.key === "Enter" && (m.preventDefault(), f(((g = this.textInputEl) == null ? void 0 : g.value) || ""), (C = this.textInputEl) == null || C.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (v = this.textInputEl) == null || v.blur(), e.classList.remove("error"));
+      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 g = m.target.value, C = H.normalizeColorValue(g);
-      this.value = C, (v = this.onChange) == null || v.call(this, C), (y = this.detectChange) == null || y.call(this, C), this.textInputEl && (this.textInputEl.value = C), d.style.backgroundColor = C, e.classList.remove("error");
+      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", (m) => {
       var v, y;
-      const g = m.target.value, C = H.normalizeColorValue(g);
-      this.value = C, (v = this.onChange) == null || v.call(this, C), (y = this.detectChange) == null || y.call(this, C), this.textInputEl && (this.textInputEl.value = C), d.style.backgroundColor = C;
+      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;
   }
   getElement() {
@@ -4143,12 +4143,12 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
       this.imageElement = p, h.appendChild(d);
       const u = document.createElement("div");
       u.className = "prize-list-section";
-      const f = He(
+      const C = He(
         this.value.markers,
         this.props.maxMarkers || F,
         this.props.prizeMap
       );
-      u.appendChild(f), r.appendChild(h), r.appendChild(u), t.appendChild(r);
+      u.appendChild(C), r.appendChild(h), r.appendChild(u), t.appendChild(r);
       const m = We(
         this.hasAllMarkers(),
         () => this.handleClearAllMarkers(),
@@ -4159,10 +4159,10 @@ const je = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
       t.appendChild(m);
       const g = h.querySelector(
         ".image-map-container"
-      ), C = u.querySelector(
+      ), f = u.querySelector(
         ".simple-prize-list"
       );
-      g && (g.scrollTop = s), C && (C.scrollTop = n), this.updateCursorTooltipContent();
+      g && (g.scrollTop = s), f && (f.scrollTop = n), this.updateCursorTooltipContent();
     } else {
       const l = Be({
         uploadMethod: this.props.upload || "file-manager",
@@ -4781,8 +4781,8 @@ class yi extends w {
       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 f = e.slice(0, u).trimEnd() + h;
-    t.placeholder = f;
+    const C = e.slice(0, u).trimEnd() + h;
+    t.placeholder = C;
   }
   autosizeTextarea(t, e = 3) {
     t.style.height = "auto";
@@ -4943,7 +4943,6 @@ class yi extends w {
     this.popup && (document.body.removeChild(this.popup), this.popup = null);
   }
   draw() {
-    var h;
     const t = document.createElement("div");
     t.classList.add("simple-multi-language-wrapper");
     const e = document.createElement("div");
@@ -4974,49 +4973,50 @@ class yi extends w {
       s.style.color = "#000";
     }), s.addEventListener("mouseleave", () => {
       s.style.color = "#666";
-    });
-    const n = window;
-    n.textElementListeners || (n.textElementListeners = /* @__PURE__ */ new Map());
-    const o = (h = this.value) == null ? void 0 : h.$id, a = window.textElementListeners;
-    if (o && !a.has(o)) {
-      const d = (p) => {
-        const { type: u, data: f } = p.data || {};
-        u === "TEXT_ELEMENT_CLICKED" && (f == null ? void 0 : f.$id) === o && this.showPopup();
-      };
-      window.addEventListener("message", d), a.set(o, d);
-    }
-    s.addEventListener("click", (d) => {
-      d.preventDefault(), this.showPopup();
+    }), s.addEventListener("click", (a) => {
+      a.preventDefault(), this.showPopup();
     }), e.appendChild(i), e.appendChild(s), t.appendChild(e);
-    const l = document.createElement("div");
-    l.classList.add("simple-multi-language-content"), t.appendChild(l), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = w.onLanguageChange((d) => {
-      d && this.props.languages.includes(d) && (this.defaultLanguage = d), this.container && this.renderContent(this.container);
+    const n = document.createElement("div");
+    n.classList.add("simple-multi-language-content"), t.appendChild(n), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = w.onLanguageChange((a) => {
+      a && this.props.languages.includes(a) && (this.defaultLanguage = a), this.container && this.renderContent(this.container);
     });
-    const r = () => {
+    const o = () => {
       if (!this.container) return;
       this.container.querySelectorAll(
         ".simple-language-textarea"
-      ).forEach((p) => {
-        const u = p.getAttribute("data-full-placeholder") || "";
-        u && this.adaptPlaceholderToSingleLine(p, u);
+      ).forEach((l) => {
+        const r = l.getAttribute("data-full-placeholder") || "";
+        r && this.adaptPlaceholderToSingleLine(l, r);
       });
     };
-    return window.addEventListener("resize", r), t;
+    return window.addEventListener("resize", o), t;
   }
   setValue(t) {
-    super.setValue(t), this.value.$id = t.$id || this.id, this.container && this.props.languages.forEach((e) => {
-      var i;
+    var n;
+    super.setValue(t), this.value.$id = t.$id;
+    const e = window;
+    e.textElementListeners || (e.textElementListeners = /* @__PURE__ */ new Map());
+    const i = (n = this.value) == null ? void 0 : n.$id, s = window.textElementListeners;
+    if (i && !s.has(i)) {
+      const o = (a) => {
+        const { type: l, data: r } = a.data || {};
+        l === "TEXT_ELEMENT_CLICKED" && (r == null ? void 0 : r.$id) === i && this.showPopup();
+      };
+      window.addEventListener("message", o), s.set(i, o);
+    }
+    this.container && this.props.languages.forEach((o) => {
+      var a;
       if (this.props.multiImg) {
-        const s = this.uploadSettings.get(e);
-        s && s.setValue((t == null ? void 0 : t[e]) || "");
+        const l = this.uploadSettings.get(o);
+        l && l.setValue((t == null ? void 0 : t[o]) || "");
       } else {
-        const s = (i = this.container) == null ? void 0 : i.querySelector(
-          `#textarea-${e}`
+        const l = (a = this.container) == null ? void 0 : a.querySelector(
+          `#textarea-${o}`
         );
-        if (s) {
-          s.value = (t == null ? void 0 : t[e]) || "", this.autosizeTextarea(s, 3);
-          const n = s.getAttribute("data-full-placeholder") || "";
-          n && this.adaptPlaceholderToSingleLine(s, n);
+        if (l) {
+          l.value = (t == null ? void 0 : t[o]) || "", this.autosizeTextarea(l, 3);
+          const r = l.getAttribute("data-full-placeholder") || "";
+          r && this.adaptPlaceholderToSingleLine(l, r);
         }
       }
     });

package/package.json

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