builder-settings-types 0.0.215 → 0.0.217

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 +18 -18
  2. package/dist/builder-settings-types.es.js +225 -207
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +7 -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");
@@ -239,7 +239,7 @@ function w(c, t) {
239
239
  const g = class g {
240
240
  constructor(t) {
241
241
  this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastChangeTime = 0, this.handleBlur = () => {
242
- }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.parentNestingLevel = 0, this.id = t.id || M(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.hideCondition = t.hideCondition, this.onBlur = t.onBlur, this.parentNestingLevel = t.parentNestingLevel ?? 0, this.nestingLevel = this.parentNestingLevel, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel();
242
+ }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.parentNestingLevel = 0, this.id = t.id || M(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.hideCondition = t.hideCondition, this.onBlur = t.onBlur, this.parentNestingLevel = t.parentNestingLevel ?? 0, this.nestingLevel = this.parentNestingLevel, this.includeGetJson = t.includeGetJson ?? !0, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel();
243
243
  }
244
244
  propagateNestingLevel() {
245
245
  const t = this.nestingLevel + 1;
@@ -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
  }
@@ -408,6 +408,8 @@ const g = class g {
408
408
  }
409
409
  getValuesForJson(t) {
410
410
  if (t === void 0) {
411
+ if (this.includeGetJson === !1)
412
+ return null;
411
413
  const e = {};
412
414
  for (const i in this.settings)
413
415
  if (this.settings.hasOwnProperty(i)) {
@@ -417,7 +419,7 @@ const g = class g {
417
419
  return e;
418
420
  } else {
419
421
  const e = this.settings[t];
420
- return e ? e instanceof g ? e.getValuesForJson() : e.includeGetJson === !1 ? null : e.value : void 0;
422
+ return e ? e instanceof g ? e.includeGetJson === !1 ? null : e.getValuesForJson() : e.includeGetJson === !1 ? null : e.value : void 0;
421
423
  }
422
424
  }
423
425
  getDefaultValues(t) {
@@ -502,23 +504,23 @@ const g = class g {
502
504
  </svg>
503
505
  `, r.title = this.description, n.appendChild(r);
504
506
  }
505
- const a = document.createElement("span");
506
- a.className = "setting-group-arrow", a.innerHTML = `
507
+ const o = document.createElement("span");
508
+ o.className = "setting-group-arrow", o.innerHTML = `
507
509
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
508
510
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
509
511
  </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) {
512
+ `, this.isCollapsed && o.classList.add("rotated"), n.appendChild(o);
513
+ const a = document.createElement("div");
514
+ 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
515
  const r = document.createElement("div");
514
- r.className = "setting-group-description", r.textContent = this.description, o.appendChild(r);
516
+ r.className = "setting-group-description", r.textContent = this.description, a.appendChild(r);
515
517
  }
516
518
  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(
519
+ 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
520
  "aria-expanded",
519
521
  (!this.isCollapsed).toString()
520
522
  );
521
- const r = o.querySelector(
523
+ const r = a.querySelector(
522
524
  ".setting-group-description"
523
525
  ), d = n.querySelector(".info-marker");
524
526
  if (this.description)
@@ -530,14 +532,14 @@ const g = class g {
530
532
  <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
533
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
532
534
  </svg>
533
- `, u.title = this.description, n.insertBefore(u, a);
535
+ `, u.title = this.description, n.insertBefore(u, o);
534
536
  }
535
537
  } else {
536
538
  if (!r) {
537
539
  const u = document.createElement("div");
538
- u.className = "setting-group-description", u.textContent = this.description, o.insertBefore(
540
+ u.className = "setting-group-description", u.textContent = this.description, a.insertBefore(
539
541
  u,
540
- o.firstChild
542
+ a.firstChild
541
543
  );
542
544
  }
543
545
  d && d.remove();
@@ -549,13 +551,13 @@ const g = class g {
549
551
  for (const r in this.settings)
550
552
  if (this.settings.hasOwnProperty(r)) {
551
553
  const d = this.settings[r];
552
- d instanceof g && d.setNestingLevel(this.nestingLevel + 1), o.appendChild(d.draw());
554
+ d instanceof g && d.setNestingLevel(this.nestingLevel + 1), a.appendChild(d.draw());
553
555
  }
554
556
  } else {
555
557
  const r = document.createElement("div");
556
- r.className = "setting-group-empty", r.textContent = "No settings in this group", o.appendChild(r);
558
+ r.className = "setting-group-empty", r.textContent = "No settings in this group", a.appendChild(r);
557
559
  }
558
- return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, H.trackElement(t), setTimeout(() => {
560
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, H.trackElement(t), setTimeout(() => {
559
561
  this.updateNestingStyles();
560
562
  }, 0), this.pendingBlurHandler && (this.setupBlurHandlers(), this.pendingBlurHandler = null), t;
561
563
  }
@@ -592,10 +594,10 @@ const g = class g {
592
594
  let i = e;
593
595
  const s = Object.keys(this.settings), n = Object.keys(e);
594
596
  if (!s.some(
595
- (o) => n.includes(o)
597
+ (a) => n.includes(a)
596
598
  ) && n.length === 1) {
597
- const o = n[0];
598
- i = e[o];
599
+ const a = n[0];
600
+ i = e[a];
599
601
  }
600
602
  this.setValue(i);
601
603
  } catch (e) {
@@ -639,17 +641,17 @@ class ct extends f {
639
641
  s.textContent = this.title, i.appendChild(s);
640
642
  const n = document.createElement("div");
641
643
  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) => {
644
+ const o = document.createElement("div");
645
+ if (o.className = "tab-content", this.contentContainers = {}, Object.keys(this.settings).forEach((a, l) => {
644
646
  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);
647
+ 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
648
  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 || "";
649
+ r.className = "tab-panel", this.contentContainers[a] = r;
650
+ const d = this.settings[a];
651
+ d && (d instanceof f && d.setNestingLevel(this.getNestingLevel() + 1), r.appendChild(d.draw())), o.appendChild(r), l === 0 && !this.activeTabId && (this.activeTabId = a);
652
+ }), e.appendChild(i), e.appendChild(n), e.appendChild(o), !this.activeTabId) {
653
+ const a = Object.keys(this.settings)[0];
654
+ this.activeTabId = a || "";
653
655
  }
654
656
  return this.updateTabUI(), t;
655
657
  }
@@ -660,7 +662,7 @@ function T(c) {
660
662
  function dt(c) {
661
663
  return c;
662
664
  }
663
- class A extends p {
665
+ class B extends p {
664
666
  constructor(t = {}) {
665
667
  super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
666
668
  }
@@ -680,12 +682,12 @@ class A extends p {
680
682
  });
681
683
  }
682
684
  }
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 {
685
+ 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>";
686
+ class m extends B {
685
687
  constructor(t) {
686
688
  super({
687
689
  ...t,
688
- icon: t.icon || B,
690
+ icon: t.icon || A,
689
691
  title: t.title || "Color",
690
692
  default: t.default ? m.normalizeColorValue(t.default) : "#000000"
691
693
  }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.detectChange = t.detectChange;
@@ -700,11 +702,11 @@ class m extends A {
700
702
  const e = t.split(",").map((r) => parseInt(r.trim()));
701
703
  if (e.length !== 3 || e.some(isNaN))
702
704
  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) => {
705
+ 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
706
  const d = r.toString(16);
705
707
  return d.length === 1 ? "0" + d : d;
706
708
  };
707
- return `#${h(a)}${h(o)}${h(l)}`;
709
+ return `#${h(o)}${h(a)}${h(l)}`;
708
710
  }
709
711
  setValue(t) {
710
712
  if (t === void 0) {
@@ -748,10 +750,10 @@ class m extends A {
748
750
  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
751
  const n = document.createElement("div");
750
752
  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) => {
753
+ const o = this.value || "#000000";
754
+ n.style.backgroundColor = o;
755
+ const a = document.createElement("input");
756
+ 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
757
  var r, d;
756
758
  let h = l.target.value.trim();
757
759
  if (this.textInputEl && i(this.textInputEl)) {
@@ -766,7 +768,7 @@ class m extends A {
766
768
  var d, u;
767
769
  const h = l.target.value, r = m.normalizeColorValue(h);
768
770
  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;
771
+ }), e.appendChild(s), e.appendChild(n), e.appendChild(a), t.appendChild(e), this.element = t, t;
770
772
  }
771
773
  getElement() {
772
774
  return this.element;
@@ -822,8 +824,8 @@ class C extends p {
822
824
  }
823
825
  updateColorPreview() {
824
826
  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})`;
827
+ 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);
828
+ this.colorPreviewEl.style.backgroundColor = `rgba(${s}, ${n}, ${o}, ${e})`;
827
829
  }
828
830
  handleColorChange(t) {
829
831
  const e = this.getOpacityPercent(), i = C.combineColorOpacity(t, e);
@@ -840,41 +842,41 @@ class C extends p {
840
842
  draw() {
841
843
  const t = document.createElement("div");
842
844
  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);
845
+ const o = document.createElement("div");
846
+ if (o.className = "icon-container", this.props.icon) {
847
+ const a = document.createElement("span");
848
+ a.className = "input-icon", a.innerHTML = this.props.icon, o.appendChild(a);
847
849
  }
848
850
  if (this.props.title) {
849
- const o = document.createElement("span");
850
- o.className = "input-label", o.textContent = this.props.title, a.appendChild(o);
851
+ const a = document.createElement("span");
852
+ a.className = "input-label", a.textContent = this.props.title, o.appendChild(a);
851
853
  }
852
- t.appendChild(a);
854
+ t.appendChild(o);
853
855
  }
854
856
  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"));
857
+ 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) => {
858
+ const a = o.target;
859
+ this.handleColorChange(a.value), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview();
860
+ }), this.textInputEl.addEventListener("input", (o) => {
861
+ const a = o.target;
862
+ 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");
863
+ }), this.textInputEl.addEventListener("blur", (o) => {
864
+ const a = o.target;
865
+ a.value.trim() === "" && (a.value = this.value || "#000000FF", e.classList.remove("error"));
864
866
  }), this.colorPreviewEl.addEventListener("click", () => {
865
- var a;
866
- (a = this.colorInputEl) == null || a.click();
867
+ var o;
868
+ (o = this.colorInputEl) == null || o.click();
867
869
  }), e.appendChild(this.colorInputEl), e.appendChild(this.colorPreviewEl), e.appendChild(this.textInputEl);
868
870
  const i = document.createElement("div");
869
871
  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
872
  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);
873
+ s.className = "color-with-opacity-opacity-suffix", s.textContent = "%", this.opacityInputEl.addEventListener("input", (o) => {
874
+ const a = o.target, l = parseFloat(a.value);
873
875
  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();
876
+ }), this.opacityInputEl.addEventListener("blur", (o) => {
877
+ const a = o.target;
878
+ let l = parseFloat(a.value);
879
+ 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
880
  }), i.appendChild(this.opacityInputEl), i.appendChild(s);
879
881
  const n = document.createElement("div");
880
882
  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 +889,8 @@ class C extends p {
887
889
  }
888
890
  getRgbaValue() {
889
891
  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})`;
892
+ 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);
893
+ return `rgba(${s}, ${n}, ${o}, ${e})`;
892
894
  }
893
895
  getColorAndOpacity() {
894
896
  return {
@@ -909,20 +911,20 @@ class ut extends p {
909
911
  if (t.className = "html-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
910
912
  const n = document.createElement("div");
911
913
  if (n.className = "icon-container", this.props.icon) {
912
- const a = this.createIcon(this.props.icon);
913
- n.appendChild(a);
914
+ const o = this.createIcon(this.props.icon);
915
+ n.appendChild(o);
914
916
  }
915
917
  if (this.props.title) {
916
- const a = this.createLabel(this.props.title);
917
- n.appendChild(a);
918
+ const o = this.createLabel(this.props.title);
919
+ n.appendChild(o);
918
920
  }
919
921
  t.appendChild(n);
920
922
  }
921
923
  const e = document.createElement("textarea");
922
924
  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
925
  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);
926
+ const a = n.target.value;
927
+ this.value = a, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
926
928
  }, s = (n) => {
927
929
  this.onBlur && this.value !== void 0 && this.onBlur(this.value);
928
930
  };
@@ -952,12 +954,12 @@ class v extends p {
952
954
  const i = document.createElement("input");
953
955
  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
956
  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);
957
+ let o = Number(i.value);
958
+ o < s && (o = s), o > n && (o = n), String(o) !== i.value && (i.value = String(o)), this.setValue(o);
957
959
  }), i.addEventListener("blur", () => {
958
- var n, a;
960
+ var n, o;
959
961
  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);
962
+ s !== Number(i.value) && (i.value = String(s), this.setValue(s)), (o = (n = this.props).onBlur) == null || o.call(n);
961
963
  }), e.appendChild(i), this.props.suffix && this.props.suffix !== "none") {
962
964
  const s = document.createElement("span");
963
965
  s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s);
@@ -1040,12 +1042,12 @@ class y extends p {
1040
1042
  if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
1041
1043
  const n = document.createElement("div");
1042
1044
  if (n.className = "icon-container", this.props.icon) {
1043
- const a = this.createIcon(this.props.icon);
1044
- n.appendChild(a);
1045
+ const o = this.createIcon(this.props.icon);
1046
+ n.appendChild(o);
1045
1047
  }
1046
1048
  if (this.props.title) {
1047
- const a = this.createLabel(this.props.title);
1048
- n.appendChild(a);
1049
+ const o = this.createLabel(this.props.title);
1050
+ n.appendChild(o);
1049
1051
  }
1050
1052
  t.appendChild(n);
1051
1053
  } else {
@@ -1054,13 +1056,13 @@ class y extends p {
1054
1056
  }
1055
1057
  const e = document.createElement("div");
1056
1058
  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));
1059
+ var n, o;
1060
+ 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
1061
  }, t.appendChild(e), this.buttonEl = e;
1060
1062
  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);
1063
+ i.classList.add("select-options"), this._options.forEach((n, o) => {
1064
+ const a = this.createOption(n, o);
1065
+ a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
1064
1066
  }), document.body.appendChild(i);
1065
1067
  const s = document.createElement("div");
1066
1068
  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 +1070,8 @@ class y extends p {
1068
1070
  }).catch((n) => {
1069
1071
  console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
1070
1072
  })), 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());
1073
+ var o, a;
1074
+ 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
1075
  }, document.addEventListener("click", this.clickOutsideListener), this.resizeListener && window.removeEventListener("resize", this.resizeListener), this.resizeListener = () => {
1074
1076
  this.isOpen && this.checkDropdownPosition();
1075
1077
  }, window.addEventListener("resize", this.resizeListener), t;
@@ -1091,9 +1093,9 @@ class y extends p {
1091
1093
  }
1092
1094
  }
1093
1095
  selectOption(t, e, i) {
1094
- var n, a, o;
1096
+ var n, o, a;
1095
1097
  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) => {
1098
+ 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
1099
  r === e ? h.classList.add("selected") : h.classList.remove("selected");
1098
1100
  }));
1099
1101
  }
@@ -1177,25 +1179,41 @@ class G extends p {
1177
1179
  `
1178
1180
  }
1179
1181
  ].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);
1182
+ const o = document.createElement("button");
1183
+ o.className = "align-option-button", o.innerHTML = n.icon, this.value === n.name && o.classList.add("selected"), o.addEventListener("click", () => {
1184
+ var a;
1185
+ 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);
1186
+ }), i.appendChild(o);
1185
1187
  }), t.appendChild(i), t;
1186
1188
  }
1187
1189
  }
1188
1190
  class pt extends p {
1189
1191
  constructor(t) {
1190
- super(t), this.inputType = "button";
1192
+ super(t), this.inputType = "button", this.bgWithAlpha = "rgba(145, 158, 171, 0.08)";
1191
1193
  }
1192
1194
  draw() {
1193
1195
  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();
1196
+ t.className = "button-setting " + (this.props.className || ""), t.textContent = this.props.label, t.style.borderColor = this.props.borderColor || "rgba(145, 158, 171, 0.32)";
1197
+ const e = this.props.backgroundColor || "rgba(0,0,0,0)", i = this.props.textColor || "black";
1198
+ t.style.backgroundColor = e, t.style.color = i;
1199
+ let s = e;
1200
+ const n = e.match(
1201
+ /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/i
1202
+ );
1203
+ if (n) {
1204
+ let a = +n[1], l = +n[2], h = +n[3], r = +n[4];
1205
+ 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})`;
1206
+ }
1207
+ t.addEventListener("mouseenter", () => {
1208
+ console.log("hoverBg", s), t.style.setProperty("background-color", s, "important");
1209
+ }), t.addEventListener("mouseleave", () => {
1210
+ t.style.setProperty("background-color", e, "important");
1211
+ }), t.addEventListener("click", () => {
1212
+ var a, l;
1213
+ return (l = (a = this.props).onClick) == null ? void 0 : l.call(a);
1196
1214
  });
1197
- const e = document.createElement("div");
1198
- return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
1215
+ const o = document.createElement("div");
1216
+ return o.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), o.appendChild(t), o;
1199
1217
  }
1200
1218
  }
1201
1219
  class gt extends p {
@@ -1211,14 +1229,14 @@ class gt extends p {
1211
1229
  suffix: "px",
1212
1230
  minValue: this.minWidth,
1213
1231
  maxValue: this.maxWidth,
1214
- icon: j
1232
+ icon: W
1215
1233
  }), this.heightSetting = new v({
1216
1234
  title: "Height",
1217
1235
  default: this.value.height,
1218
1236
  suffix: "px",
1219
1237
  minValue: this.minHeight,
1220
1238
  maxValue: this.maxHeight,
1221
- icon: W
1239
+ icon: j
1222
1240
  }), this.widthSetting.setOnChange(this.handleWidthChange.bind(this)), this.heightSetting.setOnChange(this.handleHeightChange.bind(this));
1223
1241
  }
1224
1242
  handleWidthChange(t) {
@@ -1288,8 +1306,8 @@ class gt extends p {
1288
1306
  return n.className = "dimension-lock-icon", n.setAttribute("type", "button"), n.setAttribute("aria-pressed", String(this.locked)), n.setAttribute(
1289
1307
  "aria-label",
1290
1308
  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);
1309
+ ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (o) => {
1310
+ o.preventDefault(), this.toggleLock(n);
1293
1311
  }, s.appendChild(n), t.appendChild(e), t.appendChild(s), t.appendChild(i), t;
1294
1312
  }
1295
1313
  isLocked() {
@@ -1312,9 +1330,9 @@ class gt extends p {
1312
1330
  }
1313
1331
  }
1314
1332
  }
1315
- const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1333
+ const W = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1316
1334
  <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
- </svg>`, W = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1335
+ </svg>`, j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1318
1336
  <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"/>
1319
1337
  </svg>`, b = `
1320
1338
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
@@ -1403,11 +1421,11 @@ class U extends p {
1403
1421
  <span class="upload-label">Replace</span>
1404
1422
  `);
1405
1423
  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);
1424
+ this.hideLoading(), this.previewWrapper.classList.add("has-image"), this.previewEl.style.display = "block", this.previewEl.removeEventListener("load", n), this.previewEl.removeEventListener("error", o);
1425
+ }, o = () => {
1426
+ 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
1427
  };
1410
- this.previewEl.addEventListener("load", n), this.previewEl.addEventListener("error", a), this.previewEl.src = t;
1428
+ this.previewEl.addEventListener("load", n), this.previewEl.addEventListener("error", o), this.previewEl.src = t;
1411
1429
  } else
1412
1430
  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
1431
  <span class="upload-icon">${b}</span>
@@ -1418,24 +1436,24 @@ class U extends p {
1418
1436
  const t = document.createElement("div");
1419
1437
  t.className = "upload-setting-wrapper", t.setAttribute("data-setting-id", this.id), t.addEventListener(
1420
1438
  "focusout",
1421
- (o) => {
1439
+ (a) => {
1422
1440
  var l;
1423
- o.relatedTarget && t.contains(o.relatedTarget) || (l = this.onBlur) == null || l.call(this, this.value ?? "");
1441
+ a.relatedTarget && t.contains(a.relatedTarget) || (l = this.onBlur) == null || l.call(this, this.value ?? "");
1424
1442
  },
1425
1443
  !0
1426
1444
  );
1427
1445
  const e = !!(this.props.title || this.props.icon);
1428
1446
  if (e || t.classList.add("no-label"), e) {
1429
- const o = document.createElement("div");
1430
- if (o.className = "icon-title-container", this.props.icon) {
1447
+ const a = document.createElement("div");
1448
+ if (a.className = "icon-title-container", this.props.icon) {
1431
1449
  const l = this.createIcon(this.props.icon);
1432
- o.appendChild(l);
1450
+ a.appendChild(l);
1433
1451
  }
1434
1452
  if (this.props.title) {
1435
1453
  const l = this.createLabel(this.props.title);
1436
- o.appendChild(l);
1454
+ a.appendChild(l);
1437
1455
  }
1438
- t.appendChild(o);
1456
+ t.appendChild(a);
1439
1457
  }
1440
1458
  this.errorContainer = document.createElement("div"), this.errorContainer.className = "error-message", this.errorContainer.style.display = "none", t.appendChild(this.errorContainer);
1441
1459
  const i = document.createElement("div");
@@ -1444,18 +1462,18 @@ class U extends p {
1444
1462
  s || i.classList.add("no-image");
1445
1463
  const n = document.createElement("div");
1446
1464
  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) => {
1465
+ const a = document.createElement("button");
1466
+ a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = D, this.previewWrapper.appendChild(a), a.onclick = (l) => {
1449
1467
  var h;
1450
1468
  l.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, ""), this.hideError();
1451
1469
  };
1452
1470
  }
1453
1471
  this.previewWrapper.appendChild(this.previewEl);
1454
- const a = document.createElement("button");
1455
- return a.className = "upload-button", a.innerHTML = `
1472
+ const o = document.createElement("button");
1473
+ return o.className = "upload-button", o.innerHTML = `
1456
1474
  <span class="upload-icon">${b}</span>
1457
1475
  <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 = () => {
1476
+ `, i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = () => {
1459
1477
  window.postMessage(
1460
1478
  {
1461
1479
  type: "OPEN_FILE_MANAGER_MODAL",
@@ -1539,44 +1557,44 @@ class vt extends p {
1539
1557
  e.classList.add("has-label");
1540
1558
  const n = document.createElement("div");
1541
1559
  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...";
1560
+ const o = document.createElement("span");
1561
+ if (o.className = "select-value", this.isLoading)
1562
+ o.textContent = this.props.loadingText || "Loading options...";
1545
1563
  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;
1564
+ 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";
1565
+ o.textContent = l;
1548
1566
  }
1549
- e.appendChild(a);
1567
+ e.appendChild(o);
1550
1568
  } else {
1551
1569
  const n = document.createElement("span");
1552
1570
  if (this.isLoading)
1553
1571
  n.textContent = this.props.loadingText || "Loading options...";
1554
1572
  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;
1573
+ 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";
1574
+ n.textContent = a;
1557
1575
  }
1558
1576
  e.appendChild(n);
1559
1577
  }
1560
1578
  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));
1579
+ var n, o;
1580
+ 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
1581
  }, t.appendChild(e), this.buttonEl = e;
1564
1582
  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);
1583
+ i.classList.add("select-api-options"), this._options.forEach((n, o) => {
1584
+ const a = this.createOption(n, o);
1585
+ a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
1568
1586
  }), t.appendChild(i);
1569
1587
  const s = document.createElement("div");
1570
1588
  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));
1589
+ var n, o;
1590
+ 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
1591
  }, 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(
1592
+ const o = new Set(
1575
1593
  this._options.map((l) => JSON.stringify(l.value))
1576
- ), o = n.filter(
1577
- (l) => !a.has(JSON.stringify(l.value))
1594
+ ), a = n.filter(
1595
+ (l) => !o.has(JSON.stringify(l.value))
1578
1596
  );
1579
- if (this._options.push(...o), this.isLoading = !1, this.hasInitializedOptions = !0, this.value !== void 0) {
1597
+ if (this._options.push(...a), this.isLoading = !1, this.hasInitializedOptions = !0, this.value !== void 0) {
1580
1598
  const l = this._options.findIndex(
1581
1599
  (h) => JSON.stringify(h.value) === JSON.stringify(this.value)
1582
1600
  );
@@ -1590,12 +1608,12 @@ class vt extends p {
1590
1608
  !0
1591
1609
  );
1592
1610
  })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
1593
- const a = new Set(
1611
+ const o = new Set(
1594
1612
  this._options.map((l) => JSON.stringify(l.value))
1595
- ), o = n.filter(
1596
- (l) => !a.has(JSON.stringify(l.value))
1613
+ ), a = n.filter(
1614
+ (l) => !o.has(JSON.stringify(l.value))
1597
1615
  );
1598
- if (this._options.push(...o), this.isLoading = !1, this.value !== void 0) {
1616
+ if (this._options.push(...a), this.isLoading = !1, this.value !== void 0) {
1599
1617
  const l = this._options.findIndex(
1600
1618
  (h) => JSON.stringify(h.value) === JSON.stringify(this.value)
1601
1619
  );
@@ -1617,16 +1635,16 @@ class vt extends p {
1617
1635
  var l, h, r, d;
1618
1636
  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
1637
  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;
1638
+ const o = this._options[e].value;
1639
+ this.value = o;
1640
+ const a = i.querySelector(".select-value");
1641
+ if (a)
1642
+ a.textContent = this._options[e].name;
1625
1643
  else {
1626
1644
  const u = i.firstChild;
1627
1645
  u && u.tagName === "SPAN" && (u.textContent = this._options[e].name);
1628
1646
  }
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);
1647
+ 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
1648
  }
1631
1649
  updateOptionsList() {
1632
1650
  !this.optionsListEl || !this.buttonEl || (this.optionsListEl.innerHTML = "", this._options.forEach((t, e) => {
@@ -1665,7 +1683,7 @@ class Ct extends p {
1665
1683
  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
1684
  }
1667
1685
  draw() {
1668
- var a, o;
1686
+ var o, a;
1669
1687
  const t = document.createElement("div");
1670
1688
  t.className = "toggle-setting-container", this.props.icon && t.classList.add("toggle-with-icon");
1671
1689
  const e = document.createElement("div");
@@ -1681,7 +1699,7 @@ class Ct extends p {
1681
1699
  const i = document.createElement("label");
1682
1700
  i.className = "toggle-switch";
1683
1701
  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", () => {
1702
+ 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
1703
  var h, r;
1686
1704
  const l = ((r = (h = this.props.options) == null ? void 0 : h.find((d) => d.status === s.checked)) == null ? void 0 : r.value) ?? "";
1687
1705
  this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
@@ -1721,27 +1739,27 @@ class wt extends p {
1721
1739
  i.className = "setting-label", i.setAttribute("for", this.id + "-input");
1722
1740
  const s = document.createElement("span");
1723
1741
  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);
1742
+ const a = document.createElement("span");
1743
+ a.className = "setting-icon", a.innerHTML = this.props.icon, i.insertBefore(a, s);
1726
1744
  }
1727
1745
  const n = document.createElement("div");
1728
1746
  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;
1747
+ const o = document.createElement("div");
1748
+ 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
1749
  }
1732
1750
  createGapInput(t, e) {
1733
1751
  const i = document.createElement("div");
1734
1752
  i.className = "gap-input-wrapper";
1735
1753
  const s = document.createElement("input");
1736
1754
  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);
1755
+ const o = n.target;
1756
+ let a = parseFloat(o.value);
1757
+ a = this.validateValue(a), String(a) !== o.value && (o.value = String(a)), this.inputValues[t] = a, this.setValue(a);
1740
1758
  }), s.addEventListener("blur", (n) => {
1741
1759
  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);
1760
+ const o = n.target;
1761
+ let a = parseFloat(o.value);
1762
+ 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
1763
  }), i.appendChild(s), this.props.suffix && this.props.suffix !== "none") {
1746
1764
  const n = document.createElement("span");
1747
1765
  n.className = "gap-suffix", n.textContent = this.props.suffix, i.appendChild(n), s.style.paddingRight = "30px";
@@ -1849,15 +1867,15 @@ class bt extends p {
1849
1867
  s.classList.add("language-label"), s.textContent = t.toUpperCase();
1850
1868
  const n = document.createElement("div");
1851
1869
  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) => {
1870
+ const o = document.createElement("input");
1871
+ o.type = "text", o.classList.add("language-input"), o.value = e || "", o.placeholder = this.props.placeholder || "Enter text...", o.addEventListener("input", (l) => {
1854
1872
  const h = l.target;
1855
1873
  this.updateLanguageValue(t, h.value);
1856
1874
  });
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", () => {
1875
+ const a = document.createElement("button");
1876
+ return a.type = "button", a.classList.add("delete-language-btn"), a.innerHTML = Y, a.title = `Delete ${t.toUpperCase()}`, a.addEventListener("click", () => {
1859
1877
  this.removeLanguage(t);
1860
- }), n.appendChild(a), n.appendChild(o), i.appendChild(s), i.appendChild(n), i;
1878
+ }), n.appendChild(o), n.appendChild(a), i.appendChild(s), i.appendChild(n), i;
1861
1879
  }
1862
1880
  updateLanguageValue(t, e) {
1863
1881
  this.value || (this.value = {}), this.value[t] = e, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
@@ -1889,8 +1907,8 @@ class bt extends p {
1889
1907
  s.classList.add("add-language-select"), this.addLanguageSelect = s;
1890
1908
  const n = document.createElement("button");
1891
1909
  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);
1910
+ const o = s.value;
1911
+ o && this.addLanguage(o);
1894
1912
  }), i.appendChild(s), i.appendChild(n), t.appendChild(e), t.appendChild(i), t;
1895
1913
  }
1896
1914
  draw() {
@@ -1902,9 +1920,9 @@ class bt extends p {
1902
1920
  const e = document.createElement("div");
1903
1921
  e.classList.add("multi-language-content");
1904
1922
  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);
1923
+ i.classList.add("languages-container"), this.languagesContainer = i, this.value && Object.entries(this.value).forEach(([n, o]) => {
1924
+ const a = this.createLanguageRow(n, o);
1925
+ i.appendChild(a);
1908
1926
  }), e.appendChild(i);
1909
1927
  const s = this.createAddLanguageSection();
1910
1928
  return e.appendChild(s), t.appendChild(e), this.updateAddLanguageSelect(), this.container = t, t;
@@ -2058,8 +2076,8 @@ class Mt extends f {
2058
2076
  });
2059
2077
  }
2060
2078
  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";
2079
+ var o;
2080
+ 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
2081
  return `
2064
2082
  color: ${t};
2065
2083
  font-family: ${e};
@@ -2077,11 +2095,11 @@ class E extends p {
2077
2095
  }), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
2078
2096
  }
2079
2097
  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", () => {
2098
+ const t = this.value === "auto" ? "text" : "number", e = (a) => {
2099
+ 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
2100
  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);
2101
+ let r = Number(a.value);
2102
+ r < l && (r = l), r > h && (r = h), a.value = String(r);
2085
2103
  }));
2086
2104
  }, i = this.createInput({
2087
2105
  value: this.value,
@@ -2102,9 +2120,9 @@ class E extends p {
2102
2120
  s && (s.style.paddingRight = "35px");
2103
2121
  const n = document.createElement("span");
2104
2122
  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();
2123
+ const o = i.querySelector("input");
2124
+ return o && (o.oninput = (a) => {
2125
+ const l = a.target.value.trim();
2108
2126
  if (l.toLowerCase() === "auto")
2109
2127
  this.value = "auto";
2110
2128
  else {
@@ -2217,10 +2235,10 @@ class Vt extends f {
2217
2235
  draw() {
2218
2236
  const t = super.draw(), e = t.querySelector(".setting-group-content");
2219
2237
  if (!e) return t;
2220
- const i = Array.from(e.children), [s, n, a] = i;
2238
+ const i = Array.from(e.children), [s, n, o] = i;
2221
2239
  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;
2240
+ const a = document.createElement("div");
2241
+ return a.className = "bgset-or-label", a.textContent = "OR", e.appendChild(a), e.appendChild(o), t;
2224
2242
  }
2225
2243
  /**
2226
2244
  * Helper method to generate CSS based on the current settings.
@@ -2266,7 +2284,7 @@ export {
2266
2284
  y as SelectSetting,
2267
2285
  p as Setting,
2268
2286
  f as SettingGroup,
2269
- A as StringSetting,
2287
+ B as StringSetting,
2270
2288
  ct as TabSettingGroup,
2271
2289
  ct as TabsSettingGroup,
2272
2290
  Ct as Toggle,