builder-settings-types 0.0.214 → 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 +20 -20
  2. package/dist/builder-settings-types.es.js +256 -236
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +9 -2
  5. package/package.json +1 -1
package/dist/builder-settings-types.es.js CHANGED
@@ -42,7 +42,7 @@ function N(c) {
42
42
  }
43
43
  class p {
44
44
  constructor(t = {}) {
45
- this.props = t, this.id = t.id || M(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "";
45
+ this.props = t, this.id = t.id || M(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "", this.includeGetJson = t.includeGetJson !== void 0 ? t.includeGetJson : !0;
46
46
  }
47
47
  static SetUploadUrl(t) {
48
48
  window.DefaultUploadUrl = t, p.DefaultUploadUrl = t;
@@ -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
  }
@@ -392,24 +392,32 @@ const g = class g {
392
392
  show() {
393
393
  this.elementRef && (this.elementRef.style.display = "", this.isHidden = !1);
394
394
  }
395
- getValues(t, e = !1) {
395
+ getValues(t) {
396
396
  if (t === void 0) {
397
- const i = {};
398
- for (const s in this.settings)
399
- if (this.settings.hasOwnProperty(s)) {
400
- const n = this.settings[s];
401
- if (n instanceof g)
402
- i[s] = n.getValues(void 0, e);
403
- else if (e && typeof n.getJson == "function") {
404
- const a = n.getJson(!0), o = JSON.parse(a);
405
- Object.keys(o).length > 0 && (i[s] = n.value);
406
- } else
407
- i[s] = n.value;
397
+ const e = {};
398
+ for (const i in this.settings)
399
+ if (this.settings.hasOwnProperty(i)) {
400
+ const s = this.settings[i];
401
+ s instanceof g ? e[i] = s.getValues() : e[i] = s.value;
408
402
  }
409
- return i;
403
+ return e;
404
+ } else {
405
+ const e = this.settings[t];
406
+ return e ? e instanceof g ? e.getValues() : e.value : void 0;
407
+ }
408
+ }
409
+ getValuesForJson(t) {
410
+ if (t === void 0) {
411
+ const e = {};
412
+ for (const i in this.settings)
413
+ if (this.settings.hasOwnProperty(i)) {
414
+ const s = this.settings[i];
415
+ s instanceof g ? e[i] = s.getValuesForJson() : s.includeGetJson === !1 ? e[i] = null : e[i] = s.value;
416
+ }
417
+ return e;
410
418
  } else {
411
- const i = this.settings[t];
412
- return i ? i instanceof g ? i.getValues(void 0, e) : i.value : void 0;
419
+ const e = this.settings[t];
420
+ return e ? e instanceof g ? e.getValuesForJson() : e.includeGetJson === !1 ? null : e.value : void 0;
413
421
  }
414
422
  }
415
423
  getDefaultValues(t) {
@@ -494,23 +502,23 @@ const g = class g {
494
502
  </svg>
495
503
  `, r.title = this.description, n.appendChild(r);
496
504
  }
497
- const a = document.createElement("span");
498
- a.className = "setting-group-arrow", a.innerHTML = `
505
+ const o = document.createElement("span");
506
+ o.className = "setting-group-arrow", o.innerHTML = `
499
507
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
500
508
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
501
509
  </svg>
502
- `, this.isCollapsed && a.classList.add("rotated"), n.appendChild(a);
503
- const o = document.createElement("div");
504
- 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) {
505
513
  const r = document.createElement("div");
506
- 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);
507
515
  }
508
516
  const l = () => {
509
- 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(
510
518
  "aria-expanded",
511
519
  (!this.isCollapsed).toString()
512
520
  );
513
- const r = o.querySelector(
521
+ const r = a.querySelector(
514
522
  ".setting-group-description"
515
523
  ), d = n.querySelector(".info-marker");
516
524
  if (this.description)
@@ -522,14 +530,14 @@ const g = class g {
522
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"
523
531
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
524
532
  </svg>
525
- `, u.title = this.description, n.insertBefore(u, a);
533
+ `, u.title = this.description, n.insertBefore(u, o);
526
534
  }
527
535
  } else {
528
536
  if (!r) {
529
537
  const u = document.createElement("div");
530
- u.className = "setting-group-description", u.textContent = this.description, o.insertBefore(
538
+ u.className = "setting-group-description", u.textContent = this.description, a.insertBefore(
531
539
  u,
532
- o.firstChild
540
+ a.firstChild
533
541
  );
534
542
  }
535
543
  d && d.remove();
@@ -541,13 +549,13 @@ const g = class g {
541
549
  for (const r in this.settings)
542
550
  if (this.settings.hasOwnProperty(r)) {
543
551
  const d = this.settings[r];
544
- 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());
545
553
  }
546
554
  } else {
547
555
  const r = document.createElement("div");
548
- 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);
549
557
  }
550
- 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(() => {
551
559
  this.updateNestingStyles();
552
560
  }, 0), this.pendingBlurHandler && (this.setupBlurHandlers(), this.pendingBlurHandler = null), t;
553
561
  }
@@ -575,12 +583,8 @@ const g = class g {
575
583
  toggle() {
576
584
  this.isHidden ? this.show() : this.hide();
577
585
  }
578
- getJson(t = !1) {
579
- return JSON.stringify(
580
- this.getValues(void 0, t),
581
- null,
582
- 2
583
- );
586
+ getJson() {
587
+ return JSON.stringify(this.getValuesForJson(), null, 2);
584
588
  }
585
589
  setJson(t) {
586
590
  try {
@@ -588,10 +592,10 @@ const g = class g {
588
592
  let i = e;
589
593
  const s = Object.keys(this.settings), n = Object.keys(e);
590
594
  if (!s.some(
591
- (o) => n.includes(o)
595
+ (a) => n.includes(a)
592
596
  ) && n.length === 1) {
593
- const o = n[0];
594
- i = e[o];
597
+ const a = n[0];
598
+ i = e[a];
595
599
  }
596
600
  this.setValue(i);
597
601
  } catch (e) {
@@ -635,17 +639,17 @@ class ct extends f {
635
639
  s.textContent = this.title, i.appendChild(s);
636
640
  const n = document.createElement("div");
637
641
  n.className = "tabs-header", this.tabsContainer = n;
638
- const a = document.createElement("div");
639
- 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) => {
640
644
  const h = document.createElement("button");
641
- 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);
642
646
  const r = document.createElement("div");
643
- r.className = "tab-panel", this.contentContainers[o] = r;
644
- const d = this.settings[o];
645
- d && (d instanceof f && d.setNestingLevel(this.getNestingLevel() + 1), r.appendChild(d.draw())), a.appendChild(r), l === 0 && !this.activeTabId && (this.activeTabId = o);
646
- }), e.appendChild(i), e.appendChild(n), e.appendChild(a), !this.activeTabId) {
647
- const o = Object.keys(this.settings)[0];
648
- 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 || "";
649
653
  }
650
654
  return this.updateTabUI(), t;
651
655
  }
@@ -656,7 +660,7 @@ function T(c) {
656
660
  function dt(c) {
657
661
  return c;
658
662
  }
659
- class A extends p {
663
+ class B extends p {
660
664
  constructor(t = {}) {
661
665
  super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
662
666
  }
@@ -676,12 +680,12 @@ class A extends p {
676
680
  });
677
681
  }
678
682
  }
679
- 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>";
680
- 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 {
681
685
  constructor(t) {
682
686
  super({
683
687
  ...t,
684
- icon: t.icon || B,
688
+ icon: t.icon || A,
685
689
  title: t.title || "Color",
686
690
  default: t.default ? m.normalizeColorValue(t.default) : "#000000"
687
691
  }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.detectChange = t.detectChange;
@@ -696,11 +700,11 @@ class m extends A {
696
700
  const e = t.split(",").map((r) => parseInt(r.trim()));
697
701
  if (e.length !== 3 || e.some(isNaN))
698
702
  return console.warn(`Invalid RGB value "${t}", using default "#000000"`), "#000000";
699
- 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) => {
700
704
  const d = r.toString(16);
701
705
  return d.length === 1 ? "0" + d : d;
702
706
  };
703
- return `#${h(a)}${h(o)}${h(l)}`;
707
+ return `#${h(o)}${h(a)}${h(l)}`;
704
708
  }
705
709
  setValue(t) {
706
710
  if (t === void 0) {
@@ -744,10 +748,10 @@ class m extends A {
744
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;
745
749
  const n = document.createElement("div");
746
750
  n.className = "color-preview";
747
- const a = this.value || "#000000";
748
- n.style.backgroundColor = a;
749
- const o = document.createElement("input");
750
- 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) => {
751
755
  var r, d;
752
756
  let h = l.target.value.trim();
753
757
  if (this.textInputEl && i(this.textInputEl)) {
@@ -762,7 +766,7 @@ class m extends A {
762
766
  var d, u;
763
767
  const h = l.target.value, r = m.normalizeColorValue(h);
764
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;
765
- }), 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;
766
770
  }
767
771
  getElement() {
768
772
  return this.element;
@@ -818,8 +822,8 @@ class C extends p {
818
822
  }
819
823
  updateColorPreview() {
820
824
  if (!this.colorPreviewEl || !this.value) return;
821
- 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);
822
- 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})`;
823
827
  }
824
828
  handleColorChange(t) {
825
829
  const e = this.getOpacityPercent(), i = C.combineColorOpacity(t, e);
@@ -836,41 +840,41 @@ class C extends p {
836
840
  draw() {
837
841
  const t = document.createElement("div");
838
842
  if (t.className = "color-with-opacity-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
839
- const a = document.createElement("div");
840
- if (a.className = "icon-container", this.props.icon) {
841
- const o = document.createElement("span");
842
- 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);
843
847
  }
844
848
  if (this.props.title) {
845
- const o = document.createElement("span");
846
- 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);
847
851
  }
848
- t.appendChild(a);
852
+ t.appendChild(o);
849
853
  }
850
854
  const e = document.createElement("div");
851
- 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) => {
852
- const o = a.target;
853
- this.handleColorChange(o.value), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview();
854
- }), this.textInputEl.addEventListener("input", (a) => {
855
- const o = a.target;
856
- 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");
857
- }), this.textInputEl.addEventListener("blur", (a) => {
858
- const o = a.target;
859
- 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"));
860
864
  }), this.colorPreviewEl.addEventListener("click", () => {
861
- var a;
862
- (a = this.colorInputEl) == null || a.click();
865
+ var o;
866
+ (o = this.colorInputEl) == null || o.click();
863
867
  }), e.appendChild(this.colorInputEl), e.appendChild(this.colorPreviewEl), e.appendChild(this.textInputEl);
864
868
  const i = document.createElement("div");
865
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";
866
870
  const s = document.createElement("span");
867
- s.className = "color-with-opacity-opacity-suffix", s.textContent = "%", this.opacityInputEl.addEventListener("input", (a) => {
868
- 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);
869
873
  isNaN(l) || (this.handleOpacityChange(l), this.textInputEl && (this.textInputEl.value = this.value || "#000000FF"), this.updateColorPreview());
870
- }), this.opacityInputEl.addEventListener("blur", (a) => {
871
- const o = a.target;
872
- let l = parseFloat(o.value);
873
- 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();
874
878
  }), i.appendChild(this.opacityInputEl), i.appendChild(s);
875
879
  const n = document.createElement("div");
876
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;
@@ -883,8 +887,8 @@ class C extends p {
883
887
  }
884
888
  getRgbaValue() {
885
889
  if (!this.value) return "rgba(0, 0, 0, 1)";
886
- 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);
887
- 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})`;
888
892
  }
889
893
  getColorAndOpacity() {
890
894
  return {
@@ -905,20 +909,20 @@ class ut extends p {
905
909
  if (t.className = "html-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
906
910
  const n = document.createElement("div");
907
911
  if (n.className = "icon-container", this.props.icon) {
908
- const a = this.createIcon(this.props.icon);
909
- n.appendChild(a);
912
+ const o = this.createIcon(this.props.icon);
913
+ n.appendChild(o);
910
914
  }
911
915
  if (this.props.title) {
912
- const a = this.createLabel(this.props.title);
913
- n.appendChild(a);
916
+ const o = this.createLabel(this.props.title);
917
+ n.appendChild(o);
914
918
  }
915
919
  t.appendChild(n);
916
920
  }
917
921
  const e = document.createElement("textarea");
918
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);
919
923
  const i = (n) => {
920
- const o = n.target.value;
921
- 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);
922
926
  }, s = (n) => {
923
927
  this.onBlur && this.value !== void 0 && this.onBlur(this.value);
924
928
  };
@@ -948,12 +952,12 @@ class v extends p {
948
952
  const i = document.createElement("input");
949
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", () => {
950
954
  const s = this.props.minValue ?? Number.MIN_SAFE_INTEGER, n = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
951
- let a = Number(i.value);
952
- 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);
953
957
  }), i.addEventListener("blur", () => {
954
- var n, a;
958
+ var n, o;
955
959
  const s = this.validateValue(Number(i.value));
956
- 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);
957
961
  }), e.appendChild(i), this.props.suffix && this.props.suffix !== "none") {
958
962
  const s = document.createElement("span");
959
963
  s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s);
@@ -1036,12 +1040,12 @@ class y extends p {
1036
1040
  if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
1037
1041
  const n = document.createElement("div");
1038
1042
  if (n.className = "icon-container", this.props.icon) {
1039
- const a = this.createIcon(this.props.icon);
1040
- n.appendChild(a);
1043
+ const o = this.createIcon(this.props.icon);
1044
+ n.appendChild(o);
1041
1045
  }
1042
1046
  if (this.props.title) {
1043
- const a = this.createLabel(this.props.title);
1044
- n.appendChild(a);
1047
+ const o = this.createLabel(this.props.title);
1048
+ n.appendChild(o);
1045
1049
  }
1046
1050
  t.appendChild(n);
1047
1051
  } else {
@@ -1050,13 +1054,13 @@ class y extends p {
1050
1054
  }
1051
1055
  const e = document.createElement("div");
1052
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 = () => {
1053
- var n, a;
1054
- 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));
1055
1059
  }, t.appendChild(e), this.buttonEl = e;
1056
1060
  const i = document.createElement("ul");
1057
- i.classList.add("select-options"), this._options.forEach((n, a) => {
1058
- const o = this.createOption(n, a);
1059
- 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);
1060
1064
  }), document.body.appendChild(i);
1061
1065
  const s = document.createElement("div");
1062
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) => {
@@ -1064,8 +1068,8 @@ class y extends p {
1064
1068
  }).catch((n) => {
1065
1069
  console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
1066
1070
  })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (n) => {
1067
- var a, o;
1068
- 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());
1069
1073
  }, document.addEventListener("click", this.clickOutsideListener), this.resizeListener && window.removeEventListener("resize", this.resizeListener), this.resizeListener = () => {
1070
1074
  this.isOpen && this.checkDropdownPosition();
1071
1075
  }, window.addEventListener("resize", this.resizeListener), t;
@@ -1087,9 +1091,9 @@ class y extends p {
1087
1091
  }
1088
1092
  }
1089
1093
  selectOption(t, e, i) {
1090
- var n, a, o;
1094
+ var n, o, a;
1091
1095
  const s = this._options[e];
1092
- 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) => {
1093
1097
  r === e ? h.classList.add("selected") : h.classList.remove("selected");
1094
1098
  }));
1095
1099
  }
@@ -1128,7 +1132,7 @@ class y extends p {
1128
1132
  this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.parentNode && this.optionsListEl.parentNode.removeChild(this.optionsListEl), super.destroy();
1129
1133
  }
1130
1134
  }
1131
- class j extends p {
1135
+ class G extends p {
1132
1136
  constructor(t = {}) {
1133
1137
  super(t), this.inputType = "button", this.value || (this.value = "center");
1134
1138
  }
@@ -1173,25 +1177,41 @@ class j extends p {
1173
1177
  `
1174
1178
  }
1175
1179
  ].forEach((n) => {
1176
- const a = document.createElement("button");
1177
- a.className = "align-option-button", a.innerHTML = n.icon, this.value === n.name && a.classList.add("selected"), a.addEventListener("click", () => {
1178
- var o;
1179
- 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);
1180
- }), 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);
1181
1185
  }), t.appendChild(i), t;
1182
1186
  }
1183
1187
  }
1184
1188
  class pt extends p {
1185
1189
  constructor(t) {
1186
- super(t), this.inputType = "button";
1190
+ super(t), this.inputType = "button", this.bgWithAlpha = "rgba(145, 158, 171, 0.08)";
1187
1191
  }
1188
1192
  draw() {
1189
1193
  const t = document.createElement("button");
1190
- t.className = "button-setting " + (this.props.className || ""), t.textContent = this.props.label, t.addEventListener("click", () => {
1191
- 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);
1192
1212
  });
1193
- const e = document.createElement("div");
1194
- 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;
1195
1215
  }
1196
1216
  }
1197
1217
  class gt extends p {
@@ -1207,14 +1227,14 @@ class gt extends p {
1207
1227
  suffix: "px",
1208
1228
  minValue: this.minWidth,
1209
1229
  maxValue: this.maxWidth,
1210
- icon: W
1230
+ icon: P
1211
1231
  }), this.heightSetting = new v({
1212
1232
  title: "Height",
1213
1233
  default: this.value.height,
1214
1234
  suffix: "px",
1215
1235
  minValue: this.minHeight,
1216
1236
  maxValue: this.maxHeight,
1217
- icon: G
1237
+ icon: W
1218
1238
  }), this.widthSetting.setOnChange(this.handleWidthChange.bind(this)), this.heightSetting.setOnChange(this.handleHeightChange.bind(this));
1219
1239
  }
1220
1240
  handleWidthChange(t) {
@@ -1284,8 +1304,8 @@ class gt extends p {
1284
1304
  return n.className = "dimension-lock-icon", n.setAttribute("type", "button"), n.setAttribute("aria-pressed", String(this.locked)), n.setAttribute(
1285
1305
  "aria-label",
1286
1306
  this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
1287
- ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (a) => {
1288
- 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);
1289
1309
  }, s.appendChild(n), t.appendChild(e), t.appendChild(s), t.appendChild(i), t;
1290
1310
  }
1291
1311
  isLocked() {
@@ -1308,15 +1328,15 @@ class gt extends p {
1308
1328
  }
1309
1329
  }
1310
1330
  }
1311
- const W = `<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">
1312
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"/>
1313
- </svg>`, G = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1333
+ </svg>`, W = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1314
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"/>
1315
1335
  </svg>`, b = `
1316
1336
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
1317
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"/>
1318
1338
  </svg>
1319
- `, P = `
1339
+ `, j = `
1320
1340
  <svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
1321
1341
  <rect width="91" height="71" rx="4" fill="#F2F4F7"/>
1322
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"/>
@@ -1399,11 +1419,11 @@ class U extends p {
1399
1419
  <span class="upload-label">Replace</span>
1400
1420
  `);
1401
1421
  const n = () => {
1402
- this.hideLoading(), this.previewWrapper.classList.add("has-image"), this.previewEl.style.display = "block", this.previewEl.removeEventListener("load", n), this.previewEl.removeEventListener("error", a);
1403
- }, a = () => {
1404
- 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);
1405
1425
  };
1406
- 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;
1407
1427
  } else
1408
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 = `
1409
1429
  <span class="upload-icon">${b}</span>
@@ -1414,24 +1434,24 @@ class U extends p {
1414
1434
  const t = document.createElement("div");
1415
1435
  t.className = "upload-setting-wrapper", t.setAttribute("data-setting-id", this.id), t.addEventListener(
1416
1436
  "focusout",
1417
- (o) => {
1437
+ (a) => {
1418
1438
  var l;
1419
- 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 ?? "");
1420
1440
  },
1421
1441
  !0
1422
1442
  );
1423
1443
  const e = !!(this.props.title || this.props.icon);
1424
1444
  if (e || t.classList.add("no-label"), e) {
1425
- const o = document.createElement("div");
1426
- 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) {
1427
1447
  const l = this.createIcon(this.props.icon);
1428
- o.appendChild(l);
1448
+ a.appendChild(l);
1429
1449
  }
1430
1450
  if (this.props.title) {
1431
1451
  const l = this.createLabel(this.props.title);
1432
- o.appendChild(l);
1452
+ a.appendChild(l);
1433
1453
  }
1434
- t.appendChild(o);
1454
+ t.appendChild(a);
1435
1455
  }
1436
1456
  this.errorContainer = document.createElement("div"), this.errorContainer.className = "error-message", this.errorContainer.style.display = "none", t.appendChild(this.errorContainer);
1437
1457
  const i = document.createElement("div");
@@ -1439,19 +1459,19 @@ class U extends p {
1439
1459
  const s = this.value && this.value !== "";
1440
1460
  s || i.classList.add("no-image");
1441
1461
  const n = document.createElement("div");
1442
- 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) {
1443
- const o = document.createElement("button");
1444
- 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) => {
1445
1465
  var h;
1446
1466
  l.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, ""), this.hideError();
1447
1467
  };
1448
1468
  }
1449
1469
  this.previewWrapper.appendChild(this.previewEl);
1450
- const a = document.createElement("button");
1451
- return a.className = "upload-button", a.innerHTML = `
1470
+ const o = document.createElement("button");
1471
+ return o.className = "upload-button", o.innerHTML = `
1452
1472
  <span class="upload-icon">${b}</span>
1453
1473
  <span class="upload-label">Upload</span>
1454
- `, 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 = () => {
1455
1475
  window.postMessage(
1456
1476
  {
1457
1477
  type: "OPEN_FILE_MANAGER_MODAL",
@@ -1469,7 +1489,7 @@ class mt extends v {
1469
1489
  title: t.title || "Height",
1470
1490
  suffix: t.suffix || "px",
1471
1491
  minValue: t.minValue ?? 0,
1472
- icon: t.icon || q,
1492
+ icon: t.icon || J,
1473
1493
  default: t.default ?? 100
1474
1494
  }), this.inputType = "number", this.mobileValue = t.mobile;
1475
1495
  }
@@ -1480,7 +1500,7 @@ class mt extends v {
1480
1500
  this.mobileValue = t, t !== void 0 && this.setValue(t);
1481
1501
  }
1482
1502
  }
1483
- const q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1503
+ const J = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1484
1504
  <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1485
1505
  </svg>`;
1486
1506
  class ft extends v {
@@ -1490,7 +1510,7 @@ class ft extends v {
1490
1510
  title: t.title || "Width",
1491
1511
  suffix: t.suffix || "px",
1492
1512
  minValue: t.minValue ?? 0,
1493
- icon: t.icon || J,
1513
+ icon: t.icon || q,
1494
1514
  default: t.default ?? 100
1495
1515
  }), this.inputType = "number", this.mobileValue = t.mobile;
1496
1516
  }
@@ -1501,7 +1521,7 @@ class ft extends v {
1501
1521
  this.mobileValue = t, t !== void 0 && this.setValue(t);
1502
1522
  }
1503
1523
  }
1504
- const J = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1524
+ const q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1505
1525
  <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="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1506
1526
  </svg>`, Z = `
1507
1527
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
@@ -1535,44 +1555,44 @@ class vt extends p {
1535
1555
  e.classList.add("has-label");
1536
1556
  const n = document.createElement("div");
1537
1557
  n.className = "select-label", n.textContent = this.props.title, e.appendChild(n);
1538
- const a = document.createElement("span");
1539
- if (a.className = "select-value", this.isLoading)
1540
- 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...";
1541
1561
  else {
1542
- 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";
1543
- 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;
1544
1564
  }
1545
- e.appendChild(a);
1565
+ e.appendChild(o);
1546
1566
  } else {
1547
1567
  const n = document.createElement("span");
1548
1568
  if (this.isLoading)
1549
1569
  n.textContent = this.props.loadingText || "Loading options...";
1550
1570
  else {
1551
- 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";
1552
- 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;
1553
1573
  }
1554
1574
  e.appendChild(n);
1555
1575
  }
1556
1576
  e.onclick = () => {
1557
- var n, a;
1558
- 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));
1559
1579
  }, t.appendChild(e), this.buttonEl = e;
1560
1580
  const i = document.createElement("ul");
1561
- i.classList.add("select-api-options"), this._options.forEach((n, a) => {
1562
- const o = this.createOption(n, a);
1563
- 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);
1564
1584
  }), t.appendChild(i);
1565
1585
  const s = document.createElement("div");
1566
1586
  return s.classList.add("svg-container"), s.innerHTML = Z, t.appendChild(s), s.onclick = () => {
1567
- var n, a;
1568
- 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));
1569
1589
  }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
1570
- const a = new Set(
1590
+ const o = new Set(
1571
1591
  this._options.map((l) => JSON.stringify(l.value))
1572
- ), o = n.filter(
1573
- (l) => !a.has(JSON.stringify(l.value))
1592
+ ), a = n.filter(
1593
+ (l) => !o.has(JSON.stringify(l.value))
1574
1594
  );
1575
- 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) {
1576
1596
  const l = this._options.findIndex(
1577
1597
  (h) => JSON.stringify(h.value) === JSON.stringify(this.value)
1578
1598
  );
@@ -1586,12 +1606,12 @@ class vt extends p {
1586
1606
  !0
1587
1607
  );
1588
1608
  })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
1589
- const a = new Set(
1609
+ const o = new Set(
1590
1610
  this._options.map((l) => JSON.stringify(l.value))
1591
- ), o = n.filter(
1592
- (l) => !a.has(JSON.stringify(l.value))
1611
+ ), a = n.filter(
1612
+ (l) => !o.has(JSON.stringify(l.value))
1593
1613
  );
1594
- 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) {
1595
1615
  const l = this._options.findIndex(
1596
1616
  (h) => JSON.stringify(h.value) === JSON.stringify(this.value)
1597
1617
  );
@@ -1613,16 +1633,16 @@ class vt extends p {
1613
1633
  var l, h, r, d;
1614
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"));
1615
1635
  n && (n.checked = !0), this.selectedOptionIndex = e;
1616
- const a = this._options[e].value;
1617
- this.value = a;
1618
- const o = i.querySelector(".select-value");
1619
- if (o)
1620
- 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;
1621
1641
  else {
1622
1642
  const u = i.firstChild;
1623
1643
  u && u.tagName === "SPAN" && (u.textContent = this._options[e].name);
1624
1644
  }
1625
- 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);
1626
1646
  }
1627
1647
  updateOptionsList() {
1628
1648
  !this.optionsListEl || !this.buttonEl || (this.optionsListEl.innerHTML = "", this._options.forEach((t, e) => {
@@ -1661,7 +1681,7 @@ class Ct extends p {
1661
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;
1662
1682
  }
1663
1683
  draw() {
1664
- var a, o;
1684
+ var o, a;
1665
1685
  const t = document.createElement("div");
1666
1686
  t.className = "toggle-setting-container", this.props.icon && t.classList.add("toggle-with-icon");
1667
1687
  const e = document.createElement("div");
@@ -1677,7 +1697,7 @@ class Ct extends p {
1677
1697
  const i = document.createElement("label");
1678
1698
  i.className = "toggle-switch";
1679
1699
  const s = document.createElement("input");
1680
- 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", () => {
1681
1701
  var h, r;
1682
1702
  const l = ((r = (h = this.props.options) == null ? void 0 : h.find((d) => d.status === s.checked)) == null ? void 0 : r.value) ?? "";
1683
1703
  this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
@@ -1717,27 +1737,27 @@ class wt extends p {
1717
1737
  i.className = "setting-label", i.setAttribute("for", this.id + "-input");
1718
1738
  const s = document.createElement("span");
1719
1739
  if (s.textContent = this.props.title ?? "Gap", i.appendChild(s), this.props.icon) {
1720
- const o = document.createElement("span");
1721
- 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);
1722
1742
  }
1723
1743
  const n = document.createElement("div");
1724
1744
  n.className = `setting-input-wrapper ${this.props.wrapperClassName || ""}`, n.classList.add("gap-setting-wrapper");
1725
- const a = document.createElement("div");
1726
- 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;
1727
1747
  }
1728
1748
  createGapInput(t, e) {
1729
1749
  const i = document.createElement("div");
1730
1750
  i.className = "gap-input-wrapper";
1731
1751
  const s = document.createElement("input");
1732
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) => {
1733
- const a = n.target;
1734
- let o = parseFloat(a.value);
1735
- 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);
1736
1756
  }), s.addEventListener("blur", (n) => {
1737
1757
  var l, h;
1738
- const a = n.target;
1739
- let o = parseFloat(a.value);
1740
- 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);
1741
1761
  }), i.appendChild(s), this.props.suffix && this.props.suffix !== "none") {
1742
1762
  const n = document.createElement("span");
1743
1763
  n.className = "gap-suffix", n.textContent = this.props.suffix, i.appendChild(n), s.style.paddingRight = "30px";
@@ -1845,15 +1865,15 @@ class bt extends p {
1845
1865
  s.classList.add("language-label"), s.textContent = t.toUpperCase();
1846
1866
  const n = document.createElement("div");
1847
1867
  n.classList.add("language-input-group");
1848
- const a = document.createElement("input");
1849
- 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) => {
1850
1870
  const h = l.target;
1851
1871
  this.updateLanguageValue(t, h.value);
1852
1872
  });
1853
- const o = document.createElement("button");
1854
- 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", () => {
1855
1875
  this.removeLanguage(t);
1856
- }), 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;
1857
1877
  }
1858
1878
  updateLanguageValue(t, e) {
1859
1879
  this.value || (this.value = {}), this.value[t] = e, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
@@ -1885,8 +1905,8 @@ class bt extends p {
1885
1905
  s.classList.add("add-language-select"), this.addLanguageSelect = s;
1886
1906
  const n = document.createElement("button");
1887
1907
  return n.type = "button", n.classList.add("add-language-btn"), n.innerHTML = `${tt} Add`, this.addButton = n, n.addEventListener("click", () => {
1888
- const a = s.value;
1889
- a && this.addLanguage(a);
1908
+ const o = s.value;
1909
+ o && this.addLanguage(o);
1890
1910
  }), i.appendChild(s), i.appendChild(n), t.appendChild(e), t.appendChild(i), t;
1891
1911
  }
1892
1912
  draw() {
@@ -1898,9 +1918,9 @@ class bt extends p {
1898
1918
  const e = document.createElement("div");
1899
1919
  e.classList.add("multi-language-content");
1900
1920
  const i = document.createElement("div");
1901
- i.classList.add("languages-container"), this.languagesContainer = i, this.value && Object.entries(this.value).forEach(([n, a]) => {
1902
- const o = this.createLanguageRow(n, a);
1903
- 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);
1904
1924
  }), e.appendChild(i);
1905
1925
  const s = this.createAddLanguageSection();
1906
1926
  return e.appendChild(s), t.appendChild(e), this.updateAddLanguageSelect(), this.container = t, t;
@@ -2045,7 +2065,7 @@ class Mt extends f {
2045
2065
  };
2046
2066
  return e ? {
2047
2067
  ...s,
2048
- align: new j({
2068
+ align: new G({
2049
2069
  title: "Align",
2050
2070
  default: i.alignDefault ?? "center"
2051
2071
  })
@@ -2054,8 +2074,8 @@ class Mt extends f {
2054
2074
  });
2055
2075
  }
2056
2076
  getCssCode() {
2057
- var a;
2058
- 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";
2059
2079
  return `
2060
2080
  color: ${t};
2061
2081
  font-family: ${e};
@@ -2073,11 +2093,11 @@ class E extends p {
2073
2093
  }), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
2074
2094
  }
2075
2095
  draw() {
2076
- const t = this.value === "auto" ? "text" : "number", e = (o) => {
2077
- 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", () => {
2078
2098
  const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, h = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
2079
- let r = Number(o.value);
2080
- 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);
2081
2101
  }));
2082
2102
  }, i = this.createInput({
2083
2103
  value: this.value,
@@ -2098,9 +2118,9 @@ class E extends p {
2098
2118
  s && (s.style.paddingRight = "35px");
2099
2119
  const n = document.createElement("span");
2100
2120
  n.className = "suffix-label", n.textContent = this.props.suffix, i.appendChild(n);
2101
- const a = i.querySelector("input");
2102
- return a && (a.oninput = (o) => {
2103
- 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();
2104
2124
  if (l.toLowerCase() === "auto")
2105
2125
  this.value = "auto";
2106
2126
  else {
@@ -2213,10 +2233,10 @@ class Vt extends f {
2213
2233
  draw() {
2214
2234
  const t = super.draw(), e = t.querySelector(".setting-group-content");
2215
2235
  if (!e) return t;
2216
- const i = Array.from(e.children), [s, n, a] = i;
2236
+ const i = Array.from(e.children), [s, n, o] = i;
2217
2237
  e.innerHTML = "", e.appendChild(s), e.appendChild(n);
2218
- const o = document.createElement("div");
2219
- 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;
2220
2240
  }
2221
2241
  /**
2222
2242
  * Helper method to generate CSS based on the current settings.
@@ -2240,7 +2260,7 @@ function St(c) {
2240
2260
  return c instanceof p;
2241
2261
  }
2242
2262
  export {
2243
- j as AlignSetting,
2263
+ G as AlignSetting,
2244
2264
  xt as AnimationSetting,
2245
2265
  Vt as BackgroundSettingSet,
2246
2266
  yt as BorderSettingSet,
@@ -2262,7 +2282,7 @@ export {
2262
2282
  y as SelectSetting,
2263
2283
  p as Setting,
2264
2284
  f as SettingGroup,
2265
- A as StringSetting,
2285
+ B as StringSetting,
2266
2286
  ct as TabSettingGroup,
2267
2287
  ct as TabsSettingGroup,
2268
2288
  Ct as Toggle,