builder-settings-types 0.0.215 → 0.0.216

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/builder-settings-types.cjs.js +19 -19
  2. package/dist/builder-settings-types.es.js +221 -205
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +4 -0
  5. package/package.json +1 -1
package/dist/builder-settings-types.es.js CHANGED
@@ -67,23 +67,23 @@ class p {
67
67
  t = { ...this.props.inputProps, ...t };
68
68
  const e = document.createElement("div");
69
69
  if (e.className = t.wrapperClassName || "", t.title || t.icon) {
70
- const o = document.createElement("div");
71
- if (o.className = "icon-container", t.icon) {
70
+ const a = document.createElement("div");
71
+ if (a.className = "icon-container", t.icon) {
72
72
  const l = this.createIcon(t.icon, t.iconClassName);
73
- o.appendChild(l);
73
+ a.appendChild(l);
74
74
  }
75
75
  if (t.title) {
76
76
  const l = this.createLabel(t.title, t.labelClassName);
77
- o.appendChild(l);
77
+ a.appendChild(l);
78
78
  }
79
- e.appendChild(o);
79
+ e.appendChild(a);
80
80
  }
81
81
  const i = document.createElement("div");
82
82
  i.className = t.wrapperClassName || "";
83
83
  const s = document.createElement("input");
84
84
  this.inputEl = s, s.value = String(t.value || N(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "";
85
- const n = (o) => {
86
- const l = o.target;
85
+ const n = (a) => {
86
+ const l = a.target;
87
87
  let h = l.value;
88
88
  switch (t.inputType) {
89
89
  case "number":
@@ -108,10 +108,10 @@ class p {
108
108
  h = l.value;
109
109
  }
110
110
  this.value = h, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
111
- }, a = (o) => {
112
- o.target, this.onBlur && this.onBlur(this.value);
111
+ }, o = (a) => {
112
+ a.target, this.onBlur && this.onBlur(this.value);
113
113
  };
114
- return s.addEventListener("input", n), s.addEventListener("change", n), s.addEventListener("blur", a), t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
114
+ return s.addEventListener("input", n), s.addEventListener("change", n), s.addEventListener("blur", o), t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
115
115
  }
116
116
  createLabel(t, e) {
117
117
  const i = document.createElement("span");
@@ -280,20 +280,20 @@ const g = class g {
280
280
  return this.changeHandlers.clear(), w(this.settings, (i, s) => {
281
281
  var n;
282
282
  if (s instanceof g)
283
- s.setOnChange((a) => {
284
- const o = this.getValues();
285
- this.initialValues = o, t(o);
283
+ s.setOnChange((o) => {
284
+ const a = this.getValues();
285
+ this.initialValues = a, t(a);
286
286
  }), this.changeHandlers.add(() => t(this.getValues()));
287
287
  else if (s instanceof p) {
288
- const a = () => {
288
+ const o = () => {
289
289
  e();
290
290
  };
291
- this.changeHandlers.add(a), s.setOnChange(a);
291
+ this.changeHandlers.add(o), s.setOnChange(o);
292
292
  } else {
293
- const a = () => {
293
+ const o = () => {
294
294
  e();
295
295
  };
296
- this.changeHandlers.add(a), (n = s.setOnChange) == null || n.call(s, a);
296
+ this.changeHandlers.add(o), (n = s.setOnChange) == null || n.call(s, o);
297
297
  }
298
298
  }), this;
299
299
  }
@@ -379,10 +379,10 @@ const g = class g {
379
379
  ...Object.keys(t),
380
380
  ...Object.keys(e)
381
381
  ])).forEach((n) => {
382
- const a = t[n], o = e[n];
383
- JSON.stringify(a) !== JSON.stringify(o) && (i[n] = {
384
- from: a,
385
- to: o
382
+ const o = t[n], a = e[n];
383
+ JSON.stringify(o) !== JSON.stringify(a) && (i[n] = {
384
+ from: o,
385
+ to: a
386
386
  });
387
387
  }), i;
388
388
  }
@@ -502,23 +502,23 @@ const g = class g {
502
502
  </svg>
503
503
  `, r.title = this.description, n.appendChild(r);
504
504
  }
505
- const a = document.createElement("span");
506
- a.className = "setting-group-arrow", a.innerHTML = `
505
+ const o = document.createElement("span");
506
+ o.className = "setting-group-arrow", o.innerHTML = `
507
507
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
508
508
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
509
509
  </svg>
510
- `, this.isCollapsed && a.classList.add("rotated"), n.appendChild(a);
511
- const o = document.createElement("div");
512
- if (o.className = "setting-group-content", this.isCollapsed && (o.classList.add("collapsed"), e.classList.add("collapsed-view"), a.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && o.classList.add("main-content"), this.description && !this.isCollapsed) {
510
+ `, this.isCollapsed && o.classList.add("rotated"), n.appendChild(o);
511
+ const a = document.createElement("div");
512
+ if (a.className = "setting-group-content", this.isCollapsed && (a.classList.add("collapsed"), e.classList.add("collapsed-view"), o.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && a.classList.add("main-content"), this.description && !this.isCollapsed) {
513
513
  const r = document.createElement("div");
514
- r.className = "setting-group-description", r.textContent = this.description, o.appendChild(r);
514
+ r.className = "setting-group-description", r.textContent = this.description, a.appendChild(r);
515
515
  }
516
516
  const l = () => {
517
- this.isCollapsed = !this.isCollapsed, o.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), a.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
517
+ this.isCollapsed = !this.isCollapsed, a.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), o.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
518
518
  "aria-expanded",
519
519
  (!this.isCollapsed).toString()
520
520
  );
521
- const r = o.querySelector(
521
+ const r = a.querySelector(
522
522
  ".setting-group-description"
523
523
  ), d = n.querySelector(".info-marker");
524
524
  if (this.description)
@@ -530,14 +530,14 @@ const g = class g {
530
530
  <path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
531
531
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
532
532
  </svg>
533
- `, u.title = this.description, n.insertBefore(u, a);
533
+ `, u.title = this.description, n.insertBefore(u, o);
534
534
  }
535
535
  } else {
536
536
  if (!r) {
537
537
  const u = document.createElement("div");
538
- u.className = "setting-group-description", u.textContent = this.description, o.insertBefore(
538
+ u.className = "setting-group-description", u.textContent = this.description, a.insertBefore(
539
539
  u,
540
- o.firstChild
540
+ a.firstChild
541
541
  );
542
542
  }
543
543
  d && d.remove();
@@ -549,13 +549,13 @@ const g = class g {
549
549
  for (const r in this.settings)
550
550
  if (this.settings.hasOwnProperty(r)) {
551
551
  const d = this.settings[r];
552
- d instanceof g && d.setNestingLevel(this.nestingLevel + 1), o.appendChild(d.draw());
552
+ d instanceof g && d.setNestingLevel(this.nestingLevel + 1), a.appendChild(d.draw());
553
553
  }
554
554
  } else {
555
555
  const r = document.createElement("div");
556
- r.className = "setting-group-empty", r.textContent = "No settings in this group", o.appendChild(r);
556
+ r.className = "setting-group-empty", r.textContent = "No settings in this group", a.appendChild(r);
557
557
  }
558
- return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, H.trackElement(t), setTimeout(() => {
558
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, H.trackElement(t), setTimeout(() => {
559
559
  this.updateNestingStyles();
560
560
  }, 0), this.pendingBlurHandler && (this.setupBlurHandlers(), this.pendingBlurHandler = null), t;
561
561
  }
@@ -592,10 +592,10 @@ const g = class g {
592
592
  let i = e;
593
593
  const s = Object.keys(this.settings), n = Object.keys(e);
594
594
  if (!s.some(
595
- (o) => n.includes(o)
595
+ (a) => n.includes(a)
596
596
  ) && n.length === 1) {
597
- const o = n[0];
598
- i = e[o];
597
+ const a = n[0];
598
+ i = e[a];
599
599
  }
600
600
  this.setValue(i);
601
601
  } catch (e) {
@@ -639,17 +639,17 @@ class ct extends f {
639
639
  s.textContent = this.title, i.appendChild(s);
640
640
  const n = document.createElement("div");
641
641
  n.className = "tabs-header", this.tabsContainer = n;
642
- const a = document.createElement("div");
643
- if (a.className = "tab-content", this.contentContainers = {}, Object.keys(this.settings).forEach((o, l) => {
642
+ const o = document.createElement("div");
643
+ if (o.className = "tab-content", this.contentContainers = {}, Object.keys(this.settings).forEach((a, l) => {
644
644
  const h = document.createElement("button");
645
- h.className = "tab-button", h.type = "button", h.setAttribute("data-tab-id", o), h.textContent = o, h.addEventListener("click", () => this.switchToTab(o)), n.appendChild(h);
645
+ h.className = "tab-button", h.type = "button", h.setAttribute("data-tab-id", a), h.textContent = a, h.addEventListener("click", () => this.switchToTab(a)), n.appendChild(h);
646
646
  const r = document.createElement("div");
647
- r.className = "tab-panel", this.contentContainers[o] = r;
648
- const d = this.settings[o];
649
- d && (d instanceof f && d.setNestingLevel(this.getNestingLevel() + 1), r.appendChild(d.draw())), a.appendChild(r), l === 0 && !this.activeTabId && (this.activeTabId = o);
650
- }), e.appendChild(i), e.appendChild(n), e.appendChild(a), !this.activeTabId) {
651
- const o = Object.keys(this.settings)[0];
652
- this.activeTabId = o || "";
647
+ r.className = "tab-panel", this.contentContainers[a] = r;
648
+ const d = this.settings[a];
649
+ d && (d instanceof f && d.setNestingLevel(this.getNestingLevel() + 1), r.appendChild(d.draw())), o.appendChild(r), l === 0 && !this.activeTabId && (this.activeTabId = a);
650
+ }), e.appendChild(i), e.appendChild(n), e.appendChild(o), !this.activeTabId) {
651
+ const a = Object.keys(this.settings)[0];
652
+ this.activeTabId = a || "";
653
653
  }
654
654
  return this.updateTabUI(), t;
655
655
  }
@@ -660,7 +660,7 @@ function T(c) {
660
660
  function dt(c) {
661
661
  return c;
662
662
  }
663
- class A extends p {
663
+ class B extends p {
664
664
  constructor(t = {}) {
665
665
  super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
666
666
  }
@@ -680,12 +680,12 @@ class A extends p {
680
680
  });
681
681
  }
682
682
  }
683
- const B = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
684
- class m extends A {
683
+ const A = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
684
+ class m extends B {
685
685
  constructor(t) {
686
686
  super({
687
687
  ...t,
688
- icon: t.icon || B,
688
+ icon: t.icon || A,
689
689
  title: t.title || "Color",
690
690
  default: t.default ? m.normalizeColorValue(t.default) : "#000000"
691
691
  }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.detectChange = t.detectChange;
@@ -700,11 +700,11 @@ class m extends A {
700
700
  const e = t.split(",").map((r) => parseInt(r.trim()));
701
701
  if (e.length !== 3 || e.some(isNaN))
702
702
  return console.warn(`Invalid RGB value "${t}", using default "#000000"`), "#000000";
703
- const [i, s, n] = e, a = Math.max(0, Math.min(255, i)), o = Math.max(0, Math.min(255, s)), l = Math.max(0, Math.min(255, n)), h = (r) => {
703
+ const [i, s, n] = e, o = Math.max(0, Math.min(255, i)), a = Math.max(0, Math.min(255, s)), l = Math.max(0, Math.min(255, n)), h = (r) => {
704
704
  const d = r.toString(16);
705
705
  return d.length === 1 ? "0" + d : d;
706
706
  };
707
- return `#${h(a)}${h(o)}${h(l)}`;
707
+ return `#${h(o)}${h(a)}${h(l)}`;
708
708
  }
709
709
  setValue(t) {
710
710
  if (t === void 0) {
@@ -748,10 +748,10 @@ class m extends A {
748
748
  s.type = "color", s.className = "color-picker", s.value = this.value || "#000000", s.setAttribute("aria-label", "Choose color"), s.setAttribute("title", "Click to open color picker"), this.colorInputEl = s;
749
749
  const n = document.createElement("div");
750
750
  n.className = "color-preview";
751
- const a = this.value || "#000000";
752
- n.style.backgroundColor = a;
753
- const o = document.createElement("input");
754
- return o.type = "text", o.className = "color-text-input", o.value = this.value || "", o.placeholder = "#000000", o.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), o.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), o.setAttribute("aria-label", "Hex color value"), o.setAttribute("maxlength", "7"), this.textInputEl = o, this.textInputEl.addEventListener("input", (l) => {
751
+ const o = this.value || "#000000";
752
+ n.style.backgroundColor = o;
753
+ const a = document.createElement("input");
754
+ return a.type = "text", a.className = "color-text-input", a.value = this.value || "", a.placeholder = "#000000", a.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), a.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), a.setAttribute("aria-label", "Hex color value"), a.setAttribute("maxlength", "7"), this.textInputEl = a, this.textInputEl.addEventListener("input", (l) => {
755
755
  var r, d;
756
756
  let h = l.target.value.trim();
757
757
  if (this.textInputEl && i(this.textInputEl)) {
@@ -766,7 +766,7 @@ class m extends A {
766
766
  var d, u;
767
767
  const h = l.target.value, r = m.normalizeColorValue(h);
768
768
  this.value = r, (d = this.onChange) == null || d.call(this, r), (u = this.detectChange) == null || u.call(this, r), this.textInputEl && (this.textInputEl.value = r), n.style.backgroundColor = r;
769
- }), e.appendChild(s), e.appendChild(n), e.appendChild(o), t.appendChild(e), this.element = t, t;
769
+ }), e.appendChild(s), e.appendChild(n), e.appendChild(a), t.appendChild(e), this.element = t, t;
770
770
  }
771
771
  getElement() {
772
772
  return this.element;
@@ -822,8 +822,8 @@ class C extends p {
822
822
  }
823
823
  updateColorPreview() {
824
824
  if (!this.colorPreviewEl || !this.value) return;
825
- const t = this.getRgbColor(), e = this.getOpacityPercent() / 100, i = t.replace("#", ""), s = parseInt(i.substring(0, 2), 16), n = parseInt(i.substring(2, 4), 16), a = parseInt(i.substring(4, 6), 16);
826
- this.colorPreviewEl.style.backgroundColor = `rgba(${s}, ${n}, ${a}, ${e})`;
825
+ const t = this.getRgbColor(), e = this.getOpacityPercent() / 100, i = t.replace("#", ""), s = parseInt(i.substring(0, 2), 16), n = parseInt(i.substring(2, 4), 16), o = parseInt(i.substring(4, 6), 16);
826
+ this.colorPreviewEl.style.backgroundColor = `rgba(${s}, ${n}, ${o}, ${e})`;
827
827
  }
828
828
  handleColorChange(t) {
829
829
  const e = this.getOpacityPercent(), i = C.combineColorOpacity(t, e);
@@ -840,41 +840,41 @@ class C extends p {
840
840
  draw() {
841
841
  const t = document.createElement("div");
842
842
  if (t.className = "color-with-opacity-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
843
- const a = document.createElement("div");
844
- if (a.className = "icon-container", this.props.icon) {
845
- const o = document.createElement("span");
846
- o.className = "input-icon", o.innerHTML = this.props.icon, a.appendChild(o);
843
+ const o = document.createElement("div");
844
+ if (o.className = "icon-container", this.props.icon) {
845
+ const a = document.createElement("span");
846
+ a.className = "input-icon", a.innerHTML = this.props.icon, o.appendChild(a);
847
847
  }
848
848
  if (this.props.title) {
849
- const o = document.createElement("span");
850
- o.className = "input-label", o.textContent = this.props.title, a.appendChild(o);
849
+ const a = document.createElement("span");
850
+ a.className = "input-label", a.textContent = this.props.title, o.appendChild(a);
851
851
  }
852
- t.appendChild(a);
852
+ t.appendChild(o);
853
853
  }
854
854
  const e = document.createElement("div");
855
- e.className = "color-with-opacity-input-wrapper", this.colorInputEl = document.createElement("input"), this.colorInputEl.type = "color", this.colorInputEl.className = "color-with-opacity-picker", this.colorPreviewEl = document.createElement("div"), this.colorPreviewEl.className = "color-with-opacity-preview", this.textInputEl = document.createElement("input"), this.textInputEl.type = "text", this.textInputEl.className = "color-with-opacity-text-input", this.textInputEl.placeholder = "#000000FF", this.updateInputElements(), this.updateColorPreview(), this.colorInputEl.addEventListener("input", (a) => {
856
- const o = a.target;
857
- this.handleColorChange(o.value), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview();
858
- }), this.textInputEl.addEventListener("input", (a) => {
859
- const o = a.target;
860
- this.handleTextInput(o.value) ? (this.colorInputEl && (this.colorInputEl.value = this.getRgbColor()), this.updateColorPreview(), e.classList.remove("error")) : o.value.trim() === "" ? e.classList.remove("error") : e.classList.add("error");
861
- }), this.textInputEl.addEventListener("blur", (a) => {
862
- const o = a.target;
863
- o.value.trim() === "" && (o.value = this.value || "#000000FF", e.classList.remove("error"));
855
+ e.className = "color-with-opacity-input-wrapper", this.colorInputEl = document.createElement("input"), this.colorInputEl.type = "color", this.colorInputEl.className = "color-with-opacity-picker", this.colorPreviewEl = document.createElement("div"), this.colorPreviewEl.className = "color-with-opacity-preview", this.textInputEl = document.createElement("input"), this.textInputEl.type = "text", this.textInputEl.className = "color-with-opacity-text-input", this.textInputEl.placeholder = "#000000FF", this.updateInputElements(), this.updateColorPreview(), this.colorInputEl.addEventListener("input", (o) => {
856
+ const a = o.target;
857
+ this.handleColorChange(a.value), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview();
858
+ }), this.textInputEl.addEventListener("input", (o) => {
859
+ const a = o.target;
860
+ this.handleTextInput(a.value) ? (this.colorInputEl && (this.colorInputEl.value = this.getRgbColor()), this.updateColorPreview(), e.classList.remove("error")) : a.value.trim() === "" ? e.classList.remove("error") : e.classList.add("error");
861
+ }), this.textInputEl.addEventListener("blur", (o) => {
862
+ const a = o.target;
863
+ a.value.trim() === "" && (a.value = this.value || "#000000FF", e.classList.remove("error"));
864
864
  }), this.colorPreviewEl.addEventListener("click", () => {
865
- var a;
866
- (a = this.colorInputEl) == null || a.click();
865
+ var o;
866
+ (o = this.colorInputEl) == null || o.click();
867
867
  }), e.appendChild(this.colorInputEl), e.appendChild(this.colorPreviewEl), e.appendChild(this.textInputEl);
868
868
  const i = document.createElement("div");
869
869
  i.className = "color-with-opacity-opacity-wrapper", this.opacityInputEl = document.createElement("input"), this.opacityInputEl.type = "number", this.opacityInputEl.className = "color-with-opacity-opacity-input", this.opacityInputEl.value = this.getOpacityPercent().toString(), this.opacityInputEl.min = "0", this.opacityInputEl.max = "100", this.opacityInputEl.step = "1", this.opacityInputEl.placeholder = "100";
870
870
  const s = document.createElement("span");
871
- s.className = "color-with-opacity-opacity-suffix", s.textContent = "%", this.opacityInputEl.addEventListener("input", (a) => {
872
- const o = a.target, l = parseFloat(o.value);
871
+ s.className = "color-with-opacity-opacity-suffix", s.textContent = "%", this.opacityInputEl.addEventListener("input", (o) => {
872
+ const a = o.target, l = parseFloat(a.value);
873
873
  isNaN(l) || (this.handleOpacityChange(l), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview());
874
- }), this.opacityInputEl.addEventListener("blur", (a) => {
875
- const o = a.target;
876
- let l = parseFloat(o.value);
877
- isNaN(l) && (l = this.getOpacityPercent()), l = Math.max(0, Math.min(100, l)), o.value = l.toString(), this.handleOpacityChange(l), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview();
874
+ }), this.opacityInputEl.addEventListener("blur", (o) => {
875
+ const a = o.target;
876
+ let l = parseFloat(a.value);
877
+ isNaN(l) && (l = this.getOpacityPercent()), l = Math.max(0, Math.min(100, l)), a.value = l.toString(), this.handleOpacityChange(l), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview();
878
878
  }), i.appendChild(this.opacityInputEl), i.appendChild(s);
879
879
  const n = document.createElement("div");
880
880
  return n.className = "color-with-opacity-controls-wrapper", n.appendChild(e), n.appendChild(i), t.appendChild(n), this.element = t, this.updateInputElements(), this.updateColorPreview(), t;
@@ -887,8 +887,8 @@ class C extends p {
887
887
  }
888
888
  getRgbaValue() {
889
889
  if (!this.value) return "rgba(0, 0, 0, 1)";
890
- const t = this.getRgbColor(), e = this.getOpacityPercent() / 100, i = t.replace("#", ""), s = parseInt(i.substring(0, 2), 16), n = parseInt(i.substring(2, 4), 16), a = parseInt(i.substring(4, 6), 16);
891
- return `rgba(${s}, ${n}, ${a}, ${e})`;
890
+ const t = this.getRgbColor(), e = this.getOpacityPercent() / 100, i = t.replace("#", ""), s = parseInt(i.substring(0, 2), 16), n = parseInt(i.substring(2, 4), 16), o = parseInt(i.substring(4, 6), 16);
891
+ return `rgba(${s}, ${n}, ${o}, ${e})`;
892
892
  }
893
893
  getColorAndOpacity() {
894
894
  return {
@@ -909,20 +909,20 @@ class ut extends p {
909
909
  if (t.className = "html-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
910
910
  const n = document.createElement("div");
911
911
  if (n.className = "icon-container", this.props.icon) {
912
- const a = this.createIcon(this.props.icon);
913
- n.appendChild(a);
912
+ const o = this.createIcon(this.props.icon);
913
+ n.appendChild(o);
914
914
  }
915
915
  if (this.props.title) {
916
- const a = this.createLabel(this.props.title);
917
- n.appendChild(a);
916
+ const o = this.createLabel(this.props.title);
917
+ n.appendChild(o);
918
918
  }
919
919
  t.appendChild(n);
920
920
  }
921
921
  const e = document.createElement("textarea");
922
922
  this.textareaEl = e, e.value = this.value || "", e.placeholder = this.props.placeholder || "Paste your HTML here...", e.className = "html-setting-textarea " + (this.props.textareaClassName || ""), e.rows = this.props.rows || 6, this.props.maxLength !== void 0 && (e.maxLength = this.props.maxLength), this.props.className && e.classList.add(this.props.className);
923
923
  const i = (n) => {
924
- const o = n.target.value;
925
- this.value = o, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
924
+ const a = n.target.value;
925
+ this.value = a, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
926
926
  }, s = (n) => {
927
927
  this.onBlur && this.value !== void 0 && this.onBlur(this.value);
928
928
  };
@@ -952,12 +952,12 @@ class v extends p {
952
952
  const i = document.createElement("input");
953
953
  if (i.type = "number", i.className = "number-setting-input " + (this.props.inputClassName || ""), i.value = String(this.value ?? ""), i.placeholder = this.props.placeholder || "", this.props.minValue !== void 0 && (i.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (i.max = String(this.props.maxValue)), this.props.step !== void 0 && (i.step = String(this.props.step)), i.addEventListener("input", () => {
954
954
  const s = this.props.minValue ?? Number.MIN_SAFE_INTEGER, n = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
955
- let a = Number(i.value);
956
- a < s && (a = s), a > n && (a = n), String(a) !== i.value && (i.value = String(a)), this.setValue(a);
955
+ let o = Number(i.value);
956
+ o < s && (o = s), o > n && (o = n), String(o) !== i.value && (i.value = String(o)), this.setValue(o);
957
957
  }), i.addEventListener("blur", () => {
958
- var n, a;
958
+ var n, o;
959
959
  const s = this.validateValue(Number(i.value));
960
- s !== Number(i.value) && (i.value = String(s), this.setValue(s)), (a = (n = this.props).onBlur) == null || a.call(n);
960
+ s !== Number(i.value) && (i.value = String(s), this.setValue(s)), (o = (n = this.props).onBlur) == null || o.call(n);
961
961
  }), e.appendChild(i), this.props.suffix && this.props.suffix !== "none") {
962
962
  const s = document.createElement("span");
963
963
  s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s);
@@ -1040,12 +1040,12 @@ class y extends p {
1040
1040
  if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
1041
1041
  const n = document.createElement("div");
1042
1042
  if (n.className = "icon-container", this.props.icon) {
1043
- const a = this.createIcon(this.props.icon);
1044
- n.appendChild(a);
1043
+ const o = this.createIcon(this.props.icon);
1044
+ n.appendChild(o);
1045
1045
  }
1046
1046
  if (this.props.title) {
1047
- const a = this.createLabel(this.props.title);
1048
- n.appendChild(a);
1047
+ const o = this.createLabel(this.props.title);
1048
+ n.appendChild(o);
1049
1049
  }
1050
1050
  t.appendChild(n);
1051
1051
  } else {
@@ -1054,13 +1054,13 @@ class y extends p {
1054
1054
  }
1055
1055
  const e = document.createElement("div");
1056
1056
  e.classList.add("select-button"), this.isLoading ? e.classList.add("loading") : e.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : this.props.placeholder || "Select an option", e.onclick = () => {
1057
- var n, a;
1058
- this.isLoading || (this.isOpen = !this.isOpen, this.isOpen ? this.checkDropdownPosition() : this.cleanupDropdownPosition(), (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
1057
+ var n, o;
1058
+ this.isLoading || (this.isOpen = !this.isOpen, this.isOpen ? this.checkDropdownPosition() : this.cleanupDropdownPosition(), (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
1059
1059
  }, t.appendChild(e), this.buttonEl = e;
1060
1060
  const i = document.createElement("ul");
1061
- i.classList.add("select-options"), this._options.forEach((n, a) => {
1062
- const o = this.createOption(n, a);
1063
- o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
1061
+ i.classList.add("select-options"), this._options.forEach((n, o) => {
1062
+ const a = this.createOption(n, o);
1063
+ a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
1064
1064
  }), document.body.appendChild(i);
1065
1065
  const s = document.createElement("div");
1066
1066
  return s.classList.add("svg-container"), s.innerHTML = z, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
@@ -1068,8 +1068,8 @@ class y extends p {
1068
1068
  }).catch((n) => {
1069
1069
  console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
1070
1070
  })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (n) => {
1071
- var a, o;
1072
- this.isOpen && !t.contains(n.target) && (this.isOpen = !1, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.cleanupDropdownPosition());
1071
+ var o, a;
1072
+ this.isOpen && !t.contains(n.target) && (this.isOpen = !1, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.cleanupDropdownPosition());
1073
1073
  }, document.addEventListener("click", this.clickOutsideListener), this.resizeListener && window.removeEventListener("resize", this.resizeListener), this.resizeListener = () => {
1074
1074
  this.isOpen && this.checkDropdownPosition();
1075
1075
  }, window.addEventListener("resize", this.resizeListener), t;
@@ -1091,9 +1091,9 @@ class y extends p {
1091
1091
  }
1092
1092
  }
1093
1093
  selectOption(t, e, i) {
1094
- var n, a, o;
1094
+ var n, o, a;
1095
1095
  const s = this._options[e];
1096
- s && (this.value = s.value, (n = this.onChange) == null || n.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = s.name, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((h, r) => {
1096
+ s && (this.value = s.value, (n = this.onChange) == null || n.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = s.name, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((h, r) => {
1097
1097
  r === e ? h.classList.add("selected") : h.classList.remove("selected");
1098
1098
  }));
1099
1099
  }
@@ -1177,25 +1177,41 @@ class G extends p {
1177
1177
  `
1178
1178
  }
1179
1179
  ].forEach((n) => {
1180
- const a = document.createElement("button");
1181
- a.className = "align-option-button", a.innerHTML = n.icon, this.value === n.name && a.classList.add("selected"), a.addEventListener("click", () => {
1182
- var o;
1183
- i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), a.classList.add("selected"), this.value = n.name, (o = this.onChange) == null || o.call(this, this.value);
1184
- }), i.appendChild(a);
1180
+ const o = document.createElement("button");
1181
+ o.className = "align-option-button", o.innerHTML = n.icon, this.value === n.name && o.classList.add("selected"), o.addEventListener("click", () => {
1182
+ var a;
1183
+ i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), o.classList.add("selected"), this.value = n.name, (a = this.onChange) == null || a.call(this, this.value);
1184
+ }), i.appendChild(o);
1185
1185
  }), t.appendChild(i), t;
1186
1186
  }
1187
1187
  }
1188
1188
  class pt extends p {
1189
1189
  constructor(t) {
1190
- super(t), this.inputType = "button";
1190
+ super(t), this.inputType = "button", this.bgWithAlpha = "rgba(145, 158, 171, 0.08)";
1191
1191
  }
1192
1192
  draw() {
1193
1193
  const t = document.createElement("button");
1194
- t.className = "button-setting " + (this.props.className || ""), t.textContent = this.props.label, t.addEventListener("click", () => {
1195
- this.props.onClick && this.props.onClick();
1194
+ t.className = "button-setting " + (this.props.className || ""), t.textContent = this.props.label, t.style.borderColor = this.props.borderColor || "rgba(145, 158, 171, 0.32)";
1195
+ const e = this.props.backgroundColor || "rgba(0,0,0,0)", i = this.props.textColor || "black";
1196
+ t.style.backgroundColor = e, t.style.color = i;
1197
+ let s = e;
1198
+ const n = e.match(
1199
+ /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/i
1200
+ );
1201
+ if (n) {
1202
+ let a = +n[1], l = +n[2], h = +n[3], r = +n[4];
1203
+ r >= 1 ? (a = Math.round(a * 0.9), l = Math.round(l * 0.9), h = Math.round(h * 0.9)) : r = Math.min(1, r + 0.12), s = `rgba(${a},${l},${h},${r})`;
1204
+ }
1205
+ t.addEventListener("mouseenter", () => {
1206
+ console.log("hoverBg", s), t.style.setProperty("background-color", s, "important");
1207
+ }), t.addEventListener("mouseleave", () => {
1208
+ t.style.setProperty("background-color", e, "important");
1209
+ }), t.addEventListener("click", () => {
1210
+ var a, l;
1211
+ return (l = (a = this.props).onClick) == null ? void 0 : l.call(a);
1196
1212
  });
1197
- const e = document.createElement("div");
1198
- return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
1213
+ const o = document.createElement("div");
1214
+ return o.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), o.appendChild(t), o;
1199
1215
  }
1200
1216
  }
1201
1217
  class gt extends p {
@@ -1211,7 +1227,7 @@ class gt extends p {
1211
1227
  suffix: "px",
1212
1228
  minValue: this.minWidth,
1213
1229
  maxValue: this.maxWidth,
1214
- icon: j
1230
+ icon: P
1215
1231
  }), this.heightSetting = new v({
1216
1232
  title: "Height",
1217
1233
  default: this.value.height,
@@ -1288,8 +1304,8 @@ class gt extends p {
1288
1304
  return n.className = "dimension-lock-icon", n.setAttribute("type", "button"), n.setAttribute("aria-pressed", String(this.locked)), n.setAttribute(
1289
1305
  "aria-label",
1290
1306
  this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
1291
- ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (a) => {
1292
- a.preventDefault(), this.toggleLock(n);
1307
+ ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (o) => {
1308
+ o.preventDefault(), this.toggleLock(n);
1293
1309
  }, s.appendChild(n), t.appendChild(e), t.appendChild(s), t.appendChild(i), t;
1294
1310
  }
1295
1311
  isLocked() {
@@ -1312,7 +1328,7 @@ class gt extends p {
1312
1328
  }
1313
1329
  }
1314
1330
  }
1315
- const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1331
+ const P = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1316
1332
  <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
1317
1333
  </svg>`, W = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1318
1334
  <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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1320,7 +1336,7 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
1320
1336
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
1321
1337
  <path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
1322
1338
  </svg>
1323
- `, P = `
1339
+ `, j = `
1324
1340
  <svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
1325
1341
  <rect width="91" height="71" rx="4" fill="#F2F4F7"/>
1326
1342
  <path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1403,11 +1419,11 @@ class U extends p {
1403
1419
  <span class="upload-label">Replace</span>
1404
1420
  `);
1405
1421
  const n = () => {
1406
- this.hideLoading(), this.previewWrapper.classList.add("has-image"), this.previewEl.style.display = "block", this.previewEl.removeEventListener("load", n), this.previewEl.removeEventListener("error", a);
1407
- }, a = () => {
1408
- this.hideLoading(), this.showError("Failed to load image. Please try again."), this.previewWrapper.classList.remove("has-image"), this.previewEl.style.display = "none", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "block"), e && e.classList.add("no-image"), this.previewEl.removeEventListener("load", n), this.previewEl.removeEventListener("error", a);
1422
+ this.hideLoading(), this.previewWrapper.classList.add("has-image"), this.previewEl.style.display = "block", this.previewEl.removeEventListener("load", n), this.previewEl.removeEventListener("error", o);
1423
+ }, o = () => {
1424
+ this.hideLoading(), this.showError("Failed to load image. Please try again."), this.previewWrapper.classList.remove("has-image"), this.previewEl.style.display = "none", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "block"), e && e.classList.add("no-image"), this.previewEl.removeEventListener("load", n), this.previewEl.removeEventListener("error", o);
1409
1425
  };
1410
- this.previewEl.addEventListener("load", n), this.previewEl.addEventListener("error", a), this.previewEl.src = t;
1426
+ this.previewEl.addEventListener("load", n), this.previewEl.addEventListener("error", o), this.previewEl.src = t;
1411
1427
  } else
1412
1428
  this.hideLoading(), this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewEl.style.display = "none", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "block"), e && e.classList.add("no-image"), i && (i.innerHTML = `
1413
1429
  <span class="upload-icon">${b}</span>
@@ -1418,24 +1434,24 @@ class U extends p {
1418
1434
  const t = document.createElement("div");
1419
1435
  t.className = "upload-setting-wrapper", t.setAttribute("data-setting-id", this.id), t.addEventListener(
1420
1436
  "focusout",
1421
- (o) => {
1437
+ (a) => {
1422
1438
  var l;
1423
- o.relatedTarget && t.contains(o.relatedTarget) || (l = this.onBlur) == null || l.call(this, this.value ?? "");
1439
+ a.relatedTarget && t.contains(a.relatedTarget) || (l = this.onBlur) == null || l.call(this, this.value ?? "");
1424
1440
  },
1425
1441
  !0
1426
1442
  );
1427
1443
  const e = !!(this.props.title || this.props.icon);
1428
1444
  if (e || t.classList.add("no-label"), e) {
1429
- const o = document.createElement("div");
1430
- if (o.className = "icon-title-container", this.props.icon) {
1445
+ const a = document.createElement("div");
1446
+ if (a.className = "icon-title-container", this.props.icon) {
1431
1447
  const l = this.createIcon(this.props.icon);
1432
- o.appendChild(l);
1448
+ a.appendChild(l);
1433
1449
  }
1434
1450
  if (this.props.title) {
1435
1451
  const l = this.createLabel(this.props.title);
1436
- o.appendChild(l);
1452
+ a.appendChild(l);
1437
1453
  }
1438
- t.appendChild(o);
1454
+ t.appendChild(a);
1439
1455
  }
1440
1456
  this.errorContainer = document.createElement("div"), this.errorContainer.className = "error-message", this.errorContainer.style.display = "none", t.appendChild(this.errorContainer);
1441
1457
  const i = document.createElement("div");
@@ -1443,19 +1459,19 @@ class U extends p {
1443
1459
  const s = this.value && this.value !== "";
1444
1460
  s || i.classList.add("no-image");
1445
1461
  const n = document.createElement("div");
1446
- if (n.className = "preview-placeholder", n.innerHTML = P, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = _, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
1447
- const o = document.createElement("button");
1448
- o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML = D, this.previewWrapper.appendChild(o), o.onclick = (l) => {
1462
+ if (n.className = "preview-placeholder", n.innerHTML = j, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = _, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
1463
+ const a = document.createElement("button");
1464
+ a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = D, this.previewWrapper.appendChild(a), a.onclick = (l) => {
1449
1465
  var h;
1450
1466
  l.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, ""), this.hideError();
1451
1467
  };
1452
1468
  }
1453
1469
  this.previewWrapper.appendChild(this.previewEl);
1454
- const a = document.createElement("button");
1455
- return a.className = "upload-button", a.innerHTML = `
1470
+ const o = document.createElement("button");
1471
+ return o.className = "upload-button", o.innerHTML = `
1456
1472
  <span class="upload-icon">${b}</span>
1457
1473
  <span class="upload-label">Upload</span>
1458
- `, i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = () => {
1474
+ `, i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = () => {
1459
1475
  window.postMessage(
1460
1476
  {
1461
1477
  type: "OPEN_FILE_MANAGER_MODAL",
@@ -1539,44 +1555,44 @@ class vt extends p {
1539
1555
  e.classList.add("has-label");
1540
1556
  const n = document.createElement("div");
1541
1557
  n.className = "select-label", n.textContent = this.props.title, e.appendChild(n);
1542
- const a = document.createElement("span");
1543
- if (a.className = "select-value", this.isLoading)
1544
- a.textContent = this.props.loadingText || "Loading options...";
1558
+ const o = document.createElement("span");
1559
+ if (o.className = "select-value", this.isLoading)
1560
+ o.textContent = this.props.loadingText || "Loading options...";
1545
1561
  else {
1546
- const o = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null, l = o && typeof o.name == "string" ? o.name : "Select an option";
1547
- a.textContent = l;
1562
+ const a = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null, l = a && typeof a.name == "string" ? a.name : "Select an option";
1563
+ o.textContent = l;
1548
1564
  }
1549
- e.appendChild(a);
1565
+ e.appendChild(o);
1550
1566
  } else {
1551
1567
  const n = document.createElement("span");
1552
1568
  if (this.isLoading)
1553
1569
  n.textContent = this.props.loadingText || "Loading options...";
1554
1570
  else {
1555
- const a = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null, o = a && typeof a.name == "string" ? a.name : "Select an option";
1556
- n.textContent = o;
1571
+ const o = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null, a = o && typeof o.name == "string" ? o.name : "Select an option";
1572
+ n.textContent = a;
1557
1573
  }
1558
1574
  e.appendChild(n);
1559
1575
  }
1560
1576
  e.onclick = () => {
1561
- var n, a;
1562
- this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
1577
+ var n, o;
1578
+ this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
1563
1579
  }, t.appendChild(e), this.buttonEl = e;
1564
1580
  const i = document.createElement("ul");
1565
- i.classList.add("select-api-options"), this._options.forEach((n, a) => {
1566
- const o = this.createOption(n, a);
1567
- o.onclick = (l) => this.selectApiOption(l, a, e), i.appendChild(o);
1581
+ i.classList.add("select-api-options"), this._options.forEach((n, o) => {
1582
+ const a = this.createOption(n, o);
1583
+ a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
1568
1584
  }), t.appendChild(i);
1569
1585
  const s = document.createElement("div");
1570
1586
  return s.classList.add("svg-container"), s.innerHTML = Z, t.appendChild(s), s.onclick = () => {
1571
- var n, a;
1572
- this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
1587
+ var n, o;
1588
+ this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
1573
1589
  }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
1574
- const a = new Set(
1590
+ const o = new Set(
1575
1591
  this._options.map((l) => JSON.stringify(l.value))
1576
- ), o = n.filter(
1577
- (l) => !a.has(JSON.stringify(l.value))
1592
+ ), a = n.filter(
1593
+ (l) => !o.has(JSON.stringify(l.value))
1578
1594
  );
1579
- if (this._options.push(...o), this.isLoading = !1, this.hasInitializedOptions = !0, this.value !== void 0) {
1595
+ if (this._options.push(...a), this.isLoading = !1, this.hasInitializedOptions = !0, this.value !== void 0) {
1580
1596
  const l = this._options.findIndex(
1581
1597
  (h) => JSON.stringify(h.value) === JSON.stringify(this.value)
1582
1598
  );
@@ -1590,12 +1606,12 @@ class vt extends p {
1590
1606
  !0
1591
1607
  );
1592
1608
  })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
1593
- const a = new Set(
1609
+ const o = new Set(
1594
1610
  this._options.map((l) => JSON.stringify(l.value))
1595
- ), o = n.filter(
1596
- (l) => !a.has(JSON.stringify(l.value))
1611
+ ), a = n.filter(
1612
+ (l) => !o.has(JSON.stringify(l.value))
1597
1613
  );
1598
- if (this._options.push(...o), this.isLoading = !1, this.value !== void 0) {
1614
+ if (this._options.push(...a), this.isLoading = !1, this.value !== void 0) {
1599
1615
  const l = this._options.findIndex(
1600
1616
  (h) => JSON.stringify(h.value) === JSON.stringify(this.value)
1601
1617
  );
@@ -1617,16 +1633,16 @@ class vt extends p {
1617
1633
  var l, h, r, d;
1618
1634
  const s = t.target, n = s.querySelector(".select-api-radio") || ((l = s.closest(".select-api-option")) == null ? void 0 : l.querySelector(".select-api-radio"));
1619
1635
  n && (n.checked = !0), this.selectedOptionIndex = e;
1620
- const a = this._options[e].value;
1621
- this.value = a;
1622
- const o = i.querySelector(".select-value");
1623
- if (o)
1624
- o.textContent = this._options[e].name;
1636
+ const o = this._options[e].value;
1637
+ this.value = o;
1638
+ const a = i.querySelector(".select-value");
1639
+ if (a)
1640
+ a.textContent = this._options[e].name;
1625
1641
  else {
1626
1642
  const u = i.firstChild;
1627
1643
  u && u.tagName === "SPAN" && (u.textContent = this._options[e].name);
1628
1644
  }
1629
- this.isOpen = !1, (h = this.optionsListEl) == null || h.classList.remove("open"), (r = this.svgContainer) == null || r.classList.remove("open"), (d = this.onChange) == null || d.call(this, a), this.detectChangeCallback && this.detectChangeCallback(a);
1645
+ this.isOpen = !1, (h = this.optionsListEl) == null || h.classList.remove("open"), (r = this.svgContainer) == null || r.classList.remove("open"), (d = this.onChange) == null || d.call(this, o), this.detectChangeCallback && this.detectChangeCallback(o);
1630
1646
  }
1631
1647
  updateOptionsList() {
1632
1648
  !this.optionsListEl || !this.buttonEl || (this.optionsListEl.innerHTML = "", this._options.forEach((t, e) => {
@@ -1665,7 +1681,7 @@ class Ct extends p {
1665
1681
  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;
1666
1682
  }
1667
1683
  draw() {
1668
- var a, o;
1684
+ var o, a;
1669
1685
  const t = document.createElement("div");
1670
1686
  t.className = "toggle-setting-container", this.props.icon && t.classList.add("toggle-with-icon");
1671
1687
  const e = document.createElement("div");
@@ -1681,7 +1697,7 @@ class Ct extends p {
1681
1697
  const i = document.createElement("label");
1682
1698
  i.className = "toggle-switch";
1683
1699
  const s = document.createElement("input");
1684
- s.type = "checkbox", s.checked = ((o = (a = this.props.options) == null ? void 0 : a.find((l) => l.value === this.value)) == null ? void 0 : o.status) ?? !1, s.addEventListener("change", () => {
1700
+ s.type = "checkbox", s.checked = ((a = (o = this.props.options) == null ? void 0 : o.find((l) => l.value === this.value)) == null ? void 0 : a.status) ?? !1, s.addEventListener("change", () => {
1685
1701
  var h, r;
1686
1702
  const l = ((r = (h = this.props.options) == null ? void 0 : h.find((d) => d.status === s.checked)) == null ? void 0 : r.value) ?? "";
1687
1703
  this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
@@ -1721,27 +1737,27 @@ class wt extends p {
1721
1737
  i.className = "setting-label", i.setAttribute("for", this.id + "-input");
1722
1738
  const s = document.createElement("span");
1723
1739
  if (s.textContent = this.props.title ?? "Gap", i.appendChild(s), this.props.icon) {
1724
- const o = document.createElement("span");
1725
- o.className = "setting-icon", o.innerHTML = this.props.icon, i.insertBefore(o, s);
1740
+ const a = document.createElement("span");
1741
+ a.className = "setting-icon", a.innerHTML = this.props.icon, i.insertBefore(a, s);
1726
1742
  }
1727
1743
  const n = document.createElement("div");
1728
1744
  n.className = `setting-input-wrapper ${this.props.wrapperClassName || ""}`, n.classList.add("gap-setting-wrapper");
1729
- const a = document.createElement("div");
1730
- return a.className = "gap-inputs-container", this.props.rowGap && a.appendChild(this.createGapInput("row", "Row")), this.props.columnGap && a.appendChild(this.createGapInput("column", "Col")), n.appendChild(a), e.appendChild(i), e.appendChild(n), t.appendChild(e), t;
1745
+ const o = document.createElement("div");
1746
+ return o.className = "gap-inputs-container", this.props.rowGap && o.appendChild(this.createGapInput("row", "Row")), this.props.columnGap && o.appendChild(this.createGapInput("column", "Col")), n.appendChild(o), e.appendChild(i), e.appendChild(n), t.appendChild(e), t;
1731
1747
  }
1732
1748
  createGapInput(t, e) {
1733
1749
  const i = document.createElement("div");
1734
1750
  i.className = "gap-input-wrapper";
1735
1751
  const s = document.createElement("input");
1736
1752
  if (s.type = "number", s.className = `gap-input gap-${t}-input ${this.props.inputClassName || ""}`, s.id = `${this.id}-${t}-input`, s.min = String(this.props.minValue ?? 0), this.props.maxValue !== void 0 && (s.max = String(this.props.maxValue)), s.step = String(this.props.step ?? 1), s.value = String(this.inputValues[t] ?? this.value), s.title = e, s.addEventListener("input", (n) => {
1737
- const a = n.target;
1738
- let o = parseFloat(a.value);
1739
- o = this.validateValue(o), String(o) !== a.value && (a.value = String(o)), this.inputValues[t] = o, this.setValue(o);
1753
+ const o = n.target;
1754
+ let a = parseFloat(o.value);
1755
+ a = this.validateValue(a), String(a) !== o.value && (o.value = String(a)), this.inputValues[t] = a, this.setValue(a);
1740
1756
  }), s.addEventListener("blur", (n) => {
1741
1757
  var l, h;
1742
- const a = n.target;
1743
- let o = parseFloat(a.value);
1744
- o = this.validateValue(o), String(o) !== a.value && (a.value = String(o), this.inputValues[t] = o, this.setValue(o)), (h = (l = this.props).onBlur) == null || h.call(l);
1758
+ const o = n.target;
1759
+ let a = parseFloat(o.value);
1760
+ a = this.validateValue(a), String(a) !== o.value && (o.value = String(a), this.inputValues[t] = a, this.setValue(a)), (h = (l = this.props).onBlur) == null || h.call(l);
1745
1761
  }), i.appendChild(s), this.props.suffix && this.props.suffix !== "none") {
1746
1762
  const n = document.createElement("span");
1747
1763
  n.className = "gap-suffix", n.textContent = this.props.suffix, i.appendChild(n), s.style.paddingRight = "30px";
@@ -1849,15 +1865,15 @@ class bt extends p {
1849
1865
  s.classList.add("language-label"), s.textContent = t.toUpperCase();
1850
1866
  const n = document.createElement("div");
1851
1867
  n.classList.add("language-input-group");
1852
- const a = document.createElement("input");
1853
- a.type = "text", a.classList.add("language-input"), a.value = e || "", a.placeholder = this.props.placeholder || "Enter text...", a.addEventListener("input", (l) => {
1868
+ const o = document.createElement("input");
1869
+ o.type = "text", o.classList.add("language-input"), o.value = e || "", o.placeholder = this.props.placeholder || "Enter text...", o.addEventListener("input", (l) => {
1854
1870
  const h = l.target;
1855
1871
  this.updateLanguageValue(t, h.value);
1856
1872
  });
1857
- const o = document.createElement("button");
1858
- return o.type = "button", o.classList.add("delete-language-btn"), o.innerHTML = Y, o.title = `Delete ${t.toUpperCase()}`, o.addEventListener("click", () => {
1873
+ const a = document.createElement("button");
1874
+ return a.type = "button", a.classList.add("delete-language-btn"), a.innerHTML = Y, a.title = `Delete ${t.toUpperCase()}`, a.addEventListener("click", () => {
1859
1875
  this.removeLanguage(t);
1860
- }), n.appendChild(a), n.appendChild(o), i.appendChild(s), i.appendChild(n), i;
1876
+ }), n.appendChild(o), n.appendChild(a), i.appendChild(s), i.appendChild(n), i;
1861
1877
  }
1862
1878
  updateLanguageValue(t, e) {
1863
1879
  this.value || (this.value = {}), this.value[t] = e, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
@@ -1889,8 +1905,8 @@ class bt extends p {
1889
1905
  s.classList.add("add-language-select"), this.addLanguageSelect = s;
1890
1906
  const n = document.createElement("button");
1891
1907
  return n.type = "button", n.classList.add("add-language-btn"), n.innerHTML = `${tt} Add`, this.addButton = n, n.addEventListener("click", () => {
1892
- const a = s.value;
1893
- a && this.addLanguage(a);
1908
+ const o = s.value;
1909
+ o && this.addLanguage(o);
1894
1910
  }), i.appendChild(s), i.appendChild(n), t.appendChild(e), t.appendChild(i), t;
1895
1911
  }
1896
1912
  draw() {
@@ -1902,9 +1918,9 @@ class bt extends p {
1902
1918
  const e = document.createElement("div");
1903
1919
  e.classList.add("multi-language-content");
1904
1920
  const i = document.createElement("div");
1905
- i.classList.add("languages-container"), this.languagesContainer = i, this.value && Object.entries(this.value).forEach(([n, a]) => {
1906
- const o = this.createLanguageRow(n, a);
1907
- i.appendChild(o);
1921
+ i.classList.add("languages-container"), this.languagesContainer = i, this.value && Object.entries(this.value).forEach(([n, o]) => {
1922
+ const a = this.createLanguageRow(n, o);
1923
+ i.appendChild(a);
1908
1924
  }), e.appendChild(i);
1909
1925
  const s = this.createAddLanguageSection();
1910
1926
  return e.appendChild(s), t.appendChild(e), this.updateAddLanguageSelect(), this.container = t, t;
@@ -2058,8 +2074,8 @@ class Mt extends f {
2058
2074
  });
2059
2075
  }
2060
2076
  getCssCode() {
2061
- var a;
2062
- const t = this.settings.color.value ?? "#000000", e = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, n = ((a = this.settings.align) == null ? void 0 : a.value) ?? "left";
2077
+ var o;
2078
+ const t = this.settings.color.value ?? "#000000", e = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, n = ((o = this.settings.align) == null ? void 0 : o.value) ?? "left";
2063
2079
  return `
2064
2080
  color: ${t};
2065
2081
  font-family: ${e};
@@ -2077,11 +2093,11 @@ class E extends p {
2077
2093
  }), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
2078
2094
  }
2079
2095
  draw() {
2080
- const t = this.value === "auto" ? "text" : "number", e = (o) => {
2081
- this.value !== "auto" && (this.props.minValue !== void 0 && (o.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (o.max = String(this.props.maxValue)), this.props.className && o.classList.add(this.props.className), o.addEventListener("input", () => {
2096
+ const t = this.value === "auto" ? "text" : "number", e = (a) => {
2097
+ this.value !== "auto" && (this.props.minValue !== void 0 && (a.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (a.max = String(this.props.maxValue)), this.props.className && a.classList.add(this.props.className), a.addEventListener("input", () => {
2082
2098
  const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, h = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
2083
- let r = Number(o.value);
2084
- r < l && (r = l), r > h && (r = h), o.value = String(r);
2099
+ let r = Number(a.value);
2100
+ r < l && (r = l), r > h && (r = h), a.value = String(r);
2085
2101
  }));
2086
2102
  }, i = this.createInput({
2087
2103
  value: this.value,
@@ -2102,9 +2118,9 @@ class E extends p {
2102
2118
  s && (s.style.paddingRight = "35px");
2103
2119
  const n = document.createElement("span");
2104
2120
  n.className = "suffix-label", n.textContent = this.props.suffix, i.appendChild(n);
2105
- const a = i.querySelector("input");
2106
- return a && (a.oninput = (o) => {
2107
- const l = o.target.value.trim();
2121
+ const o = i.querySelector("input");
2122
+ return o && (o.oninput = (a) => {
2123
+ const l = a.target.value.trim();
2108
2124
  if (l.toLowerCase() === "auto")
2109
2125
  this.value = "auto";
2110
2126
  else {
@@ -2217,10 +2233,10 @@ class Vt extends f {
2217
2233
  draw() {
2218
2234
  const t = super.draw(), e = t.querySelector(".setting-group-content");
2219
2235
  if (!e) return t;
2220
- const i = Array.from(e.children), [s, n, a] = i;
2236
+ const i = Array.from(e.children), [s, n, o] = i;
2221
2237
  e.innerHTML = "", e.appendChild(s), e.appendChild(n);
2222
- const o = document.createElement("div");
2223
- return o.className = "bgset-or-label", o.textContent = "OR", e.appendChild(o), e.appendChild(a), t;
2238
+ const a = document.createElement("div");
2239
+ return a.className = "bgset-or-label", a.textContent = "OR", e.appendChild(a), e.appendChild(o), t;
2224
2240
  }
2225
2241
  /**
2226
2242
  * Helper method to generate CSS based on the current settings.
@@ -2266,7 +2282,7 @@ export {
2266
2282
  y as SelectSetting,
2267
2283
  p as Setting,
2268
2284
  f as SettingGroup,
2269
- A as StringSetting,
2285
+ B as StringSetting,
2270
2286
  ct as TabSettingGroup,
2271
2287
  ct as TabsSettingGroup,
2272
2288
  Ct as Toggle,