builder-settings-types 0.0.94 → 0.0.96

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 +26 -26
  2. package/dist/builder-settings-types.es.js +345 -243
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +26 -2
  5. package/package.json +34 -34
package/dist/builder-settings-types.es.js CHANGED
@@ -1,20 +1,20 @@
1
- const B = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
- let I = (c = 21) => {
3
- let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
4
- for (; c--; )
5
- t += B[e[c] & 63];
1
+ const R = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
+ let I = (r = 21) => {
3
+ let t = "", e = crypto.getRandomValues(new Uint8Array(r |= 0));
4
+ for (; r--; )
5
+ t += R[e[r] & 63];
6
6
  return t;
7
7
  };
8
- function R(c, t) {
9
- for (const e in c)
10
- if (c.hasOwnProperty(e)) {
11
- const i = c[e];
8
+ function B(r, t) {
9
+ for (const e in r)
10
+ if (r.hasOwnProperty(e)) {
11
+ const i = r[e];
12
12
  t(e, i);
13
13
  }
14
14
  }
15
15
  const x = class x {
16
16
  constructor(t) {
17
- this.elementRef = null, this.isHidden = !1, this.custom = !1, this.id = t.id || I(), 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, Object.assign(this, t.settings);
17
+ this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.id = t.id || I(), 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, Object.assign(this, t.settings), this.initialValues = this.getValues();
18
18
  }
19
19
  static hide() {
20
20
  this.hiddenElements.forEach((t) => {
@@ -27,14 +27,43 @@ const x = class x {
27
27
  });
28
28
  }
29
29
  setOnChange(t) {
30
- return this.onChange = t, R(this.settings, (e, i) => {
31
- i.setOnChange((n) => {
32
- t(n), this.updateVisibility();
30
+ return this.onChange = t, B(this.settings, (e, i) => {
31
+ i.setOnChange((s) => {
32
+ t(s), this.updateVisibility();
33
33
  });
34
34
  }), this;
35
35
  }
36
36
  setOnBlur(t) {
37
- return this.onBlur = t, this;
37
+ return this.onBlur = t, this.elementRef && this.elementRef.addEventListener(
38
+ "blur",
39
+ (e) => {
40
+ var i;
41
+ if (!((i = this.elementRef) != null && i.contains(e.relatedTarget))) {
42
+ const s = this.getValues();
43
+ this.calculateChanges(
44
+ this.initialValues,
45
+ s
46
+ ), t(), this.updateVisibility(), this.initialValues = s;
47
+ }
48
+ },
49
+ !0
50
+ ), this;
51
+ }
52
+ calculateChanges(t, e) {
53
+ const i = {};
54
+ for (const s in e)
55
+ if (e.hasOwnProperty(s))
56
+ if (typeof e[s] == "object" && e[s] !== null) {
57
+ const n = this.calculateChanges(
58
+ t[s] || {},
59
+ e[s]
60
+ );
61
+ Object.keys(n).length > 0 && (i[s] = n);
62
+ } else t[s] !== e[s] && (i[s] = {
63
+ from: t[s],
64
+ to: e[s]
65
+ });
66
+ return i;
38
67
  }
39
68
  hide() {
40
69
  this.elementRef && (this.elementRef.style.display = "none", this.isHidden = !0);
@@ -47,8 +76,8 @@ const x = class x {
47
76
  const e = {};
48
77
  for (const i in this.settings)
49
78
  if (this.settings.hasOwnProperty(i)) {
50
- const n = this.settings[i];
51
- n instanceof x ? e[i] = n.getValues() : e[i] = n.value;
79
+ const s = this.settings[i];
80
+ s instanceof x ? e[i] = s.getValues() : e[i] = s.value;
52
81
  }
53
82
  return e;
54
83
  } else {
@@ -70,24 +99,24 @@ const x = class x {
70
99
  h.className = "group-icon", h.innerHTML = this.icon, i.appendChild(h);
71
100
  }
72
101
  this.custom && t.classList.add("custom_class");
73
- const n = document.createElement("h3");
74
- n.textContent = this.title, i.appendChild(n);
75
- const s = document.createElement("div");
76
- if (s.className = "actions-section", this.description && this.isCollapsed) {
102
+ const s = document.createElement("h3");
103
+ s.textContent = this.title, i.appendChild(s);
104
+ const n = document.createElement("div");
105
+ if (n.className = "actions-section", this.description && this.isCollapsed) {
77
106
  const h = document.createElement("span");
78
107
  h.className = "info-marker", h.innerHTML = `
79
108
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
80
109
  <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"
81
110
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
82
111
  </svg>
83
- `, h.title = this.description, s.appendChild(h);
112
+ `, h.title = this.description, n.appendChild(h);
84
113
  }
85
114
  const a = document.createElement("span");
86
115
  a.className = "setting-group-arrow", a.innerHTML = `
87
116
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
88
117
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
89
118
  </svg>
90
- `, this.isCollapsed && a.classList.add("rotated"), s.appendChild(a);
119
+ `, this.isCollapsed && a.classList.add("rotated"), n.appendChild(a);
91
120
  const o = document.createElement("div");
92
121
  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) {
93
122
  const h = document.createElement("div");
@@ -100,7 +129,7 @@ const x = class x {
100
129
  );
101
130
  const h = o.querySelector(
102
131
  ".setting-group-description"
103
- ), u = s.querySelector(".info-marker");
132
+ ), u = n.querySelector(".info-marker");
104
133
  if (this.description)
105
134
  if (this.isCollapsed) {
106
135
  if (h && h.remove(), !u) {
@@ -110,7 +139,7 @@ const x = class x {
110
139
  <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"
111
140
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
112
141
  </svg>
113
- `, p.title = this.description, s.insertBefore(p, a);
142
+ `, p.title = this.description, n.insertBefore(p, a);
114
143
  }
115
144
  } else {
116
145
  if (!h) {
@@ -135,9 +164,7 @@ const x = class x {
135
164
  const h = document.createElement("div");
136
165
  h.className = "setting-group-empty", h.textContent = "No settings in this group", o.appendChild(h);
137
166
  }
138
- return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(o), this.elementRef = t, this.onBlur && t.addEventListener("mouseleave", () => {
139
- this.onBlur && this.onBlur();
140
- }), t;
167
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, t;
141
168
  }
142
169
  collapse() {
143
170
  if (!this.elementRef || this.isCollapsed) return;
@@ -165,9 +192,9 @@ const x = class x {
165
192
  }
166
193
  };
167
194
  x.hiddenElements = /* @__PURE__ */ new Set();
168
- let v = x;
169
- function W(c) {
170
- switch (c) {
195
+ let f = x;
196
+ function W(r) {
197
+ switch (r) {
171
198
  case "number":
172
199
  return 0;
173
200
  case "text":
@@ -184,7 +211,7 @@ function W(c) {
184
211
  return "";
185
212
  }
186
213
  }
187
- class C {
214
+ class m {
188
215
  constructor(t = {}) {
189
216
  this.props = t, this.id = t.id || I(), this.value = this.props.default, this.title = t.title || "";
190
217
  }
@@ -214,9 +241,9 @@ class C {
214
241
  }
215
242
  const i = document.createElement("div");
216
243
  i.className = t.wrapperClassName || "";
217
- const n = document.createElement("input");
218
- this.inputEl = n, n.value = String(t.value || W(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "";
219
- const s = (a) => {
244
+ const s = document.createElement("input");
245
+ this.inputEl = s, s.value = String(t.value || W(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "";
246
+ const n = (a) => {
220
247
  const o = a.target;
221
248
  let l = o.value;
222
249
  switch (t.inputType) {
@@ -243,7 +270,7 @@ class C {
243
270
  }
244
271
  this.value = l, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
245
272
  };
246
- return n.addEventListener("input", s), n.addEventListener("change", s), t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
273
+ return s.addEventListener("input", n), s.addEventListener("change", n), t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
247
274
  }
248
275
  createLabel(t, e) {
249
276
  const i = document.createElement("span");
@@ -254,7 +281,7 @@ class C {
254
281
  return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
255
282
  }
256
283
  }
257
- class H extends C {
284
+ class H extends m {
258
285
  constructor(t = {}) {
259
286
  super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
260
287
  }
@@ -274,43 +301,43 @@ class H extends C {
274
301
  });
275
302
  }
276
303
  }
277
- const O = "<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>";
304
+ const N = "<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>";
278
305
  class S extends H {
279
306
  constructor(t) {
280
307
  super({
281
308
  ...t,
282
- icon: t.icon || O,
309
+ icon: t.icon || N,
283
310
  title: t.title || "Color"
284
311
  }), this.inputType = "color", this.detectChange = t.detectChange;
285
312
  }
286
313
  hexToRgb(t) {
287
314
  t = t.replace("#", "");
288
- const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
289
- return `${e}, ${i}, ${n}`;
315
+ const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), s = parseInt(t.substring(4, 6), 16);
316
+ return `${e}, ${i}, ${s}`;
290
317
  }
291
318
  rgbToHex(t) {
292
- const [e, i, n] = t.split(",").map((a) => parseInt(a.trim()));
293
- if (isNaN(e) || isNaN(i) || isNaN(n)) return "#000000";
294
- const s = (a) => {
319
+ const [e, i, s] = t.split(",").map((a) => parseInt(a.trim()));
320
+ if (isNaN(e) || isNaN(i) || isNaN(s)) return "#000000";
321
+ const n = (a) => {
295
322
  const o = a.toString(16);
296
323
  return o.length === 1 ? "0" + o : o;
297
324
  };
298
- return `#${s(e)}${s(i)}${s(n)}`;
325
+ return `#${n(e)}${n(i)}${n(s)}`;
299
326
  }
300
327
  draw() {
301
328
  const t = document.createElement("div");
302
329
  t.className = "color-setting-wrapper";
303
330
  const e = document.createElement("div");
304
331
  e.className = "icon-container";
305
- const i = this.createIcon(this.props.icon || O), n = this.createLabel(this.title || "Color");
306
- e.appendChild(i), e.appendChild(n);
307
- const s = document.createElement("div");
308
- s.className = "color-input-wrapper";
332
+ const i = this.createIcon(this.props.icon || N), s = this.createLabel(this.title || "Color");
333
+ e.appendChild(i), e.appendChild(s);
334
+ const n = document.createElement("div");
335
+ n.className = "color-input-wrapper";
309
336
  const a = (p) => {
310
- const g = p.value.split(",").map((N) => parseInt(N.trim()));
337
+ const g = p.value.split(",").map((O) => parseInt(O.trim()));
311
338
  if (g.length !== 3 || g.some(isNaN))
312
339
  return p.style.border = "1px solid red", !1;
313
- const [d, m, f] = g, L = d >= 0 && d <= 255 && m >= 0 && m <= 255 && f >= 0 && f <= 255;
340
+ const [d, C, v] = g, L = d >= 0 && d <= 255 && C >= 0 && C <= 255 && v >= 0 && v <= 255;
314
341
  return p.style.border = L ? "" : "1px solid red", L;
315
342
  }, o = document.createElement("div");
316
343
  o.className = "color-preview", o.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
@@ -318,36 +345,36 @@ class S extends H {
318
345
  value: this.value,
319
346
  inputType: "text",
320
347
  inputClassName: "color-text-input"
321
- }), r = l.querySelector("input"), h = this.createInput({
348
+ }), c = l.querySelector("input"), h = this.createInput({
322
349
  value: this.value ? this.rgbToHex(this.value) : "",
323
350
  inputType: this.inputType,
324
351
  inputClassName: "color-picker"
325
352
  }), u = h.querySelector("input");
326
- return r.oninput = (p) => {
353
+ return c.oninput = (p) => {
327
354
  var d;
328
355
  let g = p.target.value.trim();
329
- a(r) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
356
+ a(c) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
330
357
  }, u.oninput = (p) => {
331
- var m, f;
358
+ var C, v;
332
359
  const g = p.target.value, d = this.hexToRgb(g);
333
- this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), r.value = d, o.style.backgroundColor = `rgb(${d})`;
360
+ this.value = d, (C = this.onChange) == null || C.call(this, d), (v = this.detectChange) == null || v.call(this, d), c.value = d, o.style.backgroundColor = `rgb(${d})`;
334
361
  }, u.onchange = (p) => {
335
- var m, f;
362
+ var C, v;
336
363
  const g = p.target.value, d = this.hexToRgb(g);
337
- this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), r.value = d, o.style.backgroundColor = `rgb(${d})`;
338
- }, s.appendChild(o), s.appendChild(h), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (r.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
364
+ this.value = d, (C = this.onChange) == null || C.call(this, d), (v = this.detectChange) == null || v.call(this, d), c.value = d, o.style.backgroundColor = `rgb(${d})`;
365
+ }, n.appendChild(o), n.appendChild(h), n.appendChild(l), t.appendChild(e), t.appendChild(n), this.value && (c.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
339
366
  }
340
367
  }
341
- class w extends C {
368
+ class w extends m {
342
369
  constructor(t = {}) {
343
370
  super(t), this.inputType = "number";
344
371
  }
345
372
  draw() {
346
- const t = (s) => {
347
- this.props.minValue !== void 0 && (s.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (s.max = String(this.props.maxValue)), this.props.className && s.classList.add(this.props.className), s.addEventListener("input", () => {
373
+ const t = (n) => {
374
+ this.props.minValue !== void 0 && (n.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (n.max = String(this.props.maxValue)), this.props.className && n.classList.add(this.props.className), n.addEventListener("input", () => {
348
375
  const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
349
- let l = Number(s.value);
350
- l < a && (l = a), l > o && (l = o), s.value = String(l);
376
+ let l = Number(n.value);
377
+ l < a && (l = a), l > o && (l = o), n.value = String(l);
351
378
  });
352
379
  }, e = this.createInput({
353
380
  value: this.value,
@@ -365,8 +392,8 @@ class w extends C {
365
392
  "input.number-setting-input"
366
393
  );
367
394
  i && (i.style.paddingRight = "35px");
368
- const n = document.createElement("span");
369
- return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
395
+ const s = document.createElement("span");
396
+ return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
370
397
  }
371
398
  }
372
399
  class M extends w {
@@ -393,7 +420,7 @@ const A = `
393
420
  <polyline points="6 9 12 15 18 9"></polyline>
394
421
  </svg>
395
422
  `;
396
- class T extends C {
423
+ class T extends m {
397
424
  constructor(t = {}) {
398
425
  if (super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.clickOutsideListener = null, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
399
426
  const e = this._options.findIndex((i) => i.value === this.value);
@@ -407,45 +434,45 @@ class T extends C {
407
434
  draw() {
408
435
  const t = document.createElement("div");
409
436
  if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
410
- const s = document.createElement("div");
411
- if (s.className = "icon-container", this.props.icon) {
437
+ const n = document.createElement("div");
438
+ if (n.className = "icon-container", this.props.icon) {
412
439
  const a = this.createIcon(this.props.icon);
413
- s.appendChild(a);
440
+ n.appendChild(a);
414
441
  }
415
442
  if (this.props.title) {
416
443
  const a = this.createLabel(this.props.title);
417
- s.appendChild(a);
444
+ n.appendChild(a);
418
445
  }
419
- t.appendChild(s);
446
+ t.appendChild(n);
420
447
  } else {
421
- const s = document.createElement("div");
422
- t.appendChild(s);
448
+ const n = document.createElement("div");
449
+ t.appendChild(n);
423
450
  }
424
451
  const e = document.createElement("div");
425
452
  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 = () => {
426
- var s, a;
427
- this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
453
+ var n, a;
454
+ 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));
428
455
  }, t.appendChild(e), this.buttonEl = e;
429
456
  const i = document.createElement("ul");
430
- i.classList.add("select-options"), this._options.forEach((s, a) => {
431
- const o = this.createOption(s, a);
457
+ i.classList.add("select-options"), this._options.forEach((n, a) => {
458
+ const o = this.createOption(n, a);
432
459
  o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
433
460
  }), t.appendChild(i);
434
- const n = document.createElement("div");
435
- return n.classList.add("svg-container"), n.innerHTML = $, t.appendChild(n), this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
436
- this._options.push(...s), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
437
- }).catch((s) => {
438
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
439
- })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (s) => {
461
+ const s = document.createElement("div");
462
+ return s.classList.add("svg-container"), s.innerHTML = $, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
463
+ this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
464
+ }).catch((n) => {
465
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
466
+ })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (n) => {
440
467
  var a, o;
441
- this.isOpen && !t.contains(s.target) && (this.isOpen = !1, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"));
468
+ 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"));
442
469
  }, document.addEventListener("click", this.clickOutsideListener), t;
443
470
  }
444
471
  selectOption(t, e, i) {
445
- var s, a, o;
446
- const n = this._options[e];
447
- n && (this.value = n.value, (s = this.onChange) == null || s.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = n.name, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((r, h) => {
448
- h === e ? r.classList.add("selected") : r.classList.remove("selected");
472
+ var n, a, o;
473
+ const s = this._options[e];
474
+ 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.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((c, h) => {
475
+ h === e ? c.classList.add("selected") : c.classList.remove("selected");
449
476
  }));
450
477
  }
451
478
  updateOptionsList() {
@@ -457,8 +484,8 @@ class T extends C {
457
484
  }
458
485
  this._options.forEach((t, e) => {
459
486
  const i = this.createOption(t, e);
460
- i.onclick = (n) => {
461
- this.buttonEl && this.selectOption(n, e, this.buttonEl);
487
+ i.onclick = (s) => {
488
+ this.buttonEl && this.selectOption(s, e, this.buttonEl);
462
489
  }, this.optionsListEl.appendChild(i);
463
490
  });
464
491
  }
@@ -477,7 +504,7 @@ class T extends C {
477
504
  this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), super.destroy();
478
505
  }
479
506
  }
480
- class _ extends C {
507
+ class _ extends m {
481
508
  constructor(t = {}) {
482
509
  super(t), this.inputType = "button", this.value || (this.value = "center");
483
510
  }
@@ -521,16 +548,16 @@ class _ extends C {
521
548
  </svg>
522
549
  `
523
550
  }
524
- ].forEach((s) => {
551
+ ].forEach((n) => {
525
552
  const a = document.createElement("button");
526
- a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
553
+ a.className = "align-option-button", a.innerHTML = n.icon, this.value === n.name && a.classList.add("selected"), a.addEventListener("click", () => {
527
554
  var o;
528
- i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (o = this.onChange) == null || o.call(this, this.value);
555
+ 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);
529
556
  }), i.appendChild(a);
530
557
  }), t.appendChild(i), t;
531
558
  }
532
559
  }
533
- class nt extends C {
560
+ class nt extends m {
534
561
  constructor(t) {
535
562
  super(t), this.inputType = "button";
536
563
  }
@@ -543,7 +570,7 @@ class nt extends C {
543
570
  return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
544
571
  }
545
572
  }
546
- class at extends C {
573
+ class at extends m {
547
574
  constructor(t = {}) {
548
575
  super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
549
576
  const e = t.width || 100, i = t.height || 100;
@@ -556,14 +583,14 @@ class at extends C {
556
583
  suffix: "px",
557
584
  minValue: this.minWidth,
558
585
  maxValue: this.maxWidth,
559
- icon: j
586
+ icon: G
560
587
  }), this.heightSetting = new w({
561
588
  title: "Height",
562
589
  default: this.value.height,
563
590
  suffix: "px",
564
591
  minValue: this.minHeight,
565
592
  maxValue: this.maxHeight,
566
- icon: G
593
+ icon: j
567
594
  }), this.widthSetting.setOnChange(this.handleWidthChange.bind(this)), this.heightSetting.setOnChange(this.handleHeightChange.bind(this));
568
595
  }
569
596
  handleWidthChange(t) {
@@ -590,8 +617,8 @@ class at extends C {
590
617
  }
591
618
  toggleLock(t) {
592
619
  if (this.locked = !this.locked, this.locked && this.value) {
593
- const { width: i, height: n } = this.value;
594
- n > 0 && (this.aspectRatio = i / n);
620
+ const { width: i, height: s } = this.value;
621
+ s > 0 && (this.aspectRatio = i / s);
595
622
  }
596
623
  t.innerHTML = this.getLockSVG(this.locked), t.setAttribute("aria-pressed", String(this.locked)), t.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio";
597
624
  const e = t.closest(".dimension-setting-container");
@@ -625,15 +652,15 @@ class at extends C {
625
652
  draw() {
626
653
  const t = document.createElement("div");
627
654
  t.className = "dimension-setting-container", this.locked && t.classList.add("aspect-locked");
628
- const e = this.widthSetting.draw(), i = this.heightSetting.draw(), n = document.createElement("div");
629
- n.className = "dimension-bracket";
630
- const s = document.createElement("button");
631
- return s.className = "dimension-lock-icon", s.setAttribute("type", "button"), s.setAttribute("aria-pressed", String(this.locked)), s.setAttribute(
655
+ const e = this.widthSetting.draw(), i = this.heightSetting.draw(), s = document.createElement("div");
656
+ s.className = "dimension-bracket";
657
+ const n = document.createElement("button");
658
+ return n.className = "dimension-lock-icon", n.setAttribute("type", "button"), n.setAttribute("aria-pressed", String(this.locked)), n.setAttribute(
632
659
  "aria-label",
633
660
  this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
634
- ), s.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", s.innerHTML = this.getLockSVG(this.locked), s.onclick = (a) => {
635
- a.preventDefault(), this.toggleLock(s);
636
- }, n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
661
+ ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (a) => {
662
+ a.preventDefault(), this.toggleLock(n);
663
+ }, s.appendChild(n), t.appendChild(e), t.appendChild(s), t.appendChild(i), t;
637
664
  }
638
665
  isLocked() {
639
666
  return this.locked;
@@ -641,8 +668,8 @@ class at extends C {
641
668
  setLocked(t) {
642
669
  if (this.locked !== t) {
643
670
  if (this.locked = t, this.locked && this.value) {
644
- const { width: i, height: n } = this.value;
645
- n > 0 && (this.aspectRatio = i / n);
671
+ const { width: i, height: s } = this.value;
672
+ s > 0 && (this.aspectRatio = i / s);
646
673
  }
647
674
  const e = document.querySelector(
648
675
  ".dimension-setting-container .dimension-lock-icon"
@@ -655,9 +682,9 @@ class at extends C {
655
682
  }
656
683
  }
657
684
  }
658
- const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
685
+ const G = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
659
686
  <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"/>
660
- </svg>`, G = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
687
+ </svg>`, j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
661
688
  <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"/>
662
689
  </svg>`, y = `
663
690
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
@@ -673,19 +700,19 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
673
700
  <path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
674
701
  </svg>
675
702
  `;
676
- class F extends C {
703
+ class F extends m {
677
704
  constructor(t = {}) {
678
705
  super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
679
706
  }
680
707
  updatePreviewState(t = null) {
681
708
  if (!this.previewWrapper || !this.previewEl || !this.emptyStateEl) return;
682
- const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), n = e == null ? void 0 : e.querySelector(
709
+ const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), s = e == null ? void 0 : e.querySelector(
683
710
  ".preview-placeholder"
684
711
  );
685
- t && t !== "" ? (this.previewWrapper.classList.add("has-image"), this.previewEl.src = t, this.previewWrapper.style.display = "block", n && n instanceof HTMLElement && (n.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
712
+ t && t !== "" ? (this.previewWrapper.classList.add("has-image"), this.previewEl.src = t, this.previewWrapper.style.display = "block", s && s instanceof HTMLElement && (s.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
686
713
  <span class="upload-icon">${y}</span>
687
714
  <span class="upload-label">Replace</span>
688
- `)) : (this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewWrapper.style.display = "none", n && n instanceof HTMLElement && (n.style.display = "none"), i && (i.innerHTML = `
715
+ `)) : (this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "none"), i && (i.innerHTML = `
689
716
  <span class="upload-icon">${y}</span>
690
717
  <span class="upload-label">Upload</span>
691
718
  `));
@@ -695,23 +722,23 @@ class F extends C {
695
722
  t.className = "upload-setting-wrapper";
696
723
  const e = !!(this.props.title || this.props.icon);
697
724
  if (e || t.classList.add("no-label"), e) {
698
- const r = document.createElement("div");
699
- if (r.className = "icon-title-container", this.props.icon) {
725
+ const c = document.createElement("div");
726
+ if (c.className = "icon-title-container", this.props.icon) {
700
727
  const h = this.createIcon(this.props.icon);
701
- r.appendChild(h);
728
+ c.appendChild(h);
702
729
  }
703
730
  if (this.props.title) {
704
731
  const h = this.createLabel(this.props.title);
705
- r.appendChild(h);
732
+ c.appendChild(h);
706
733
  }
707
- t.appendChild(r);
734
+ t.appendChild(c);
708
735
  }
709
736
  const i = document.createElement("div");
710
737
  i.className = "preview-button-container";
711
- const n = this.value && this.value !== "";
712
- n || i.classList.add("no-image");
713
- const s = document.createElement("div");
714
- s.className = "preview-placeholder", s.innerHTML = V, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = V, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
738
+ const s = this.value && this.value !== "";
739
+ s || i.classList.add("no-image");
740
+ const n = document.createElement("div");
741
+ n.className = "preview-placeholder", n.innerHTML = V, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = V, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
715
742
  const a = document.createElement("button");
716
743
  a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = q, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(a);
717
744
  const o = document.createElement("button");
@@ -720,24 +747,24 @@ class F extends C {
720
747
  <span class="upload-label">Upload</span>
721
748
  `;
722
749
  const l = document.createElement("input");
723
- return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), t.appendChild(l), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = (r) => {
750
+ return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), t.appendChild(l), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = (c) => {
724
751
  var h;
725
- r.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, "");
752
+ c.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, "");
726
753
  }, o.onclick = () => {
727
754
  l.click();
728
755
  }, l.onchange = async () => {
729
756
  var h, u, p;
730
- const r = (h = l.files) == null ? void 0 : h[0];
731
- if (r)
757
+ const c = (h = l.files) == null ? void 0 : h[0];
758
+ if (c)
732
759
  try {
733
760
  o.classList.add("loading"), o.disabled = !0;
734
761
  const g = new FormData(), d = this.props.formFieldName || "file";
735
- g.append(d, r, r.name);
736
- const m = this.props.uploadUrl;
737
- if (!m)
762
+ g.append(d, c, c.name);
763
+ const C = this.props.uploadUrl;
764
+ if (!C)
738
765
  throw new Error("No uploadUrl provided to UploadSetting.");
739
- const f = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(m, {
740
- method: f,
766
+ const v = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(C, {
767
+ method: v,
741
768
  body: g,
742
769
  headers: L
743
770
  })).json();
@@ -757,7 +784,7 @@ class F extends C {
757
784
  }, t;
758
785
  }
759
786
  }
760
- class ot extends C {
787
+ class ot extends m {
761
788
  constructor(t = {}) {
762
789
  super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
763
790
  title: "Height",
@@ -778,7 +805,7 @@ class ot extends C {
778
805
  const z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
779
806
  <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"/>
780
807
  </svg>`;
781
- class lt extends C {
808
+ class lt extends m {
782
809
  constructor(t = {}) {
783
810
  super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
784
811
  title: "Width",
@@ -803,7 +830,7 @@ const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
803
830
  <polyline points="6 9 12 15 18 9"></polyline>
804
831
  </svg>
805
832
  `;
806
- class ht extends C {
833
+ class ht extends m {
807
834
  constructor(t = {}) {
808
835
  super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.hasInitializedOptions = !1, this.initializeOptions(t), t.default !== void 0 && (this.value = t.default, this.selectedOptionIndex = this._options.findIndex(
809
836
  (e) => JSON.stringify(e.value) === JSON.stringify(t.default)
@@ -817,8 +844,8 @@ class ht extends C {
817
844
  createOption(t, e) {
818
845
  const i = document.createElement("li");
819
846
  i.classList.add("select-api-option"), i.textContent = t.name, i.dataset.index = String(e);
820
- const n = document.createElement("input");
821
- return n.type = "radio", n.classList.add("select-api-radio"), n.name = "select-api-radio-group", i.appendChild(n), this.selectedOptionIndex === e && (n.checked = !0), i;
847
+ const s = document.createElement("input");
848
+ return s.type = "radio", s.classList.add("select-api-radio"), s.name = "select-api-radio-group", i.appendChild(s), this.selectedOptionIndex === e && (s.checked = !0), i;
822
849
  }
823
850
  draw() {
824
851
  const t = document.createElement("div");
@@ -826,51 +853,51 @@ class ht extends C {
826
853
  const e = document.createElement("div");
827
854
  if (e.classList.add("select-api-button"), this.props.title) {
828
855
  e.classList.add("has-label");
829
- const s = document.createElement("div");
830
- s.className = "select-label", s.textContent = this.props.title, e.appendChild(s);
856
+ const n = document.createElement("div");
857
+ n.className = "select-label", n.textContent = this.props.title, e.appendChild(n);
831
858
  const a = document.createElement("span");
832
859
  a.className = "select-value", this.isLoading ? a.textContent = this.props.loadingText || "Loading options..." : a.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(a);
833
860
  } else {
834
- const s = document.createElement("span");
835
- this.isLoading ? s.textContent = this.props.loadingText || "Loading options..." : s.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(s);
861
+ const n = document.createElement("span");
862
+ this.isLoading ? n.textContent = this.props.loadingText || "Loading options..." : n.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(n);
836
863
  }
837
864
  e.onclick = () => {
838
- var s, a;
839
- this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
865
+ var n, a;
866
+ 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));
840
867
  }, t.appendChild(e), this.buttonEl = e;
841
868
  const i = document.createElement("ul");
842
- i.classList.add("select-api-options"), this._options.forEach((s, a) => {
843
- const o = this.createOption(s, a);
869
+ i.classList.add("select-api-options"), this._options.forEach((n, a) => {
870
+ const o = this.createOption(n, a);
844
871
  o.onclick = (l) => this.selectApiOption(l, a, e), i.appendChild(o);
845
872
  }), t.appendChild(i);
846
- const n = document.createElement("div");
847
- return n.classList.add("svg-container"), n.innerHTML = D, t.appendChild(n), n.onclick = () => {
848
- var s, a;
849
- this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
850
- }, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
851
- this._options.push(...s), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
873
+ const s = document.createElement("div");
874
+ return s.classList.add("svg-container"), s.innerHTML = D, t.appendChild(s), s.onclick = () => {
875
+ var n, a;
876
+ 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));
877
+ }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
878
+ this._options.push(...n), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
852
879
  (a) => JSON.stringify(a.value) === JSON.stringify(this.value)
853
880
  )), this.updateOptionsList(), this.updateButtonText();
854
- }).catch((s) => {
855
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
856
- })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
857
- const a = new Set(this._options.map((l) => JSON.stringify(l.value))), o = s.filter((l) => !a.has(JSON.stringify(l.value)));
881
+ }).catch((n) => {
882
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
883
+ })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
884
+ const a = new Set(this._options.map((l) => JSON.stringify(l.value))), o = n.filter((l) => !a.has(JSON.stringify(l.value)));
858
885
  this._options.push(...o), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
859
886
  (l) => JSON.stringify(l.value) === JSON.stringify(this.value)
860
887
  )), this.updateOptionsList(), this.updateButtonText();
861
- }).catch((s) => {
862
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
888
+ }).catch((n) => {
889
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
863
890
  })), t;
864
891
  }
865
892
  selectApiOption(t, e, i) {
866
- var s, a;
867
- const n = this._options[e];
868
- if (n) {
869
- const o = n.value;
870
- this.value = o, this.onChange && this.onChange(o), this.detectChangeCallback && this.detectChangeCallback(o), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (s = this.optionsListEl) == null || s.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
893
+ var n, a;
894
+ const s = this._options[e];
895
+ if (s) {
896
+ const o = s.value;
897
+ this.value = o, this.onChange && this.onChange(o), this.detectChangeCallback && this.detectChangeCallback(o), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (n = this.optionsListEl) == null || n.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
871
898
  ".select-api-radio"
872
- ).forEach((r, h) => {
873
- r.checked = h === e;
899
+ ).forEach((c, h) => {
900
+ c.checked = h === e;
874
901
  });
875
902
  }
876
903
  }
@@ -883,23 +910,23 @@ class ht extends C {
883
910
  }
884
911
  this._options.forEach((t, e) => {
885
912
  const i = this.createOption(t, e);
886
- this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (n) => {
887
- this.buttonEl && this.selectApiOption(n, e, this.buttonEl);
888
- }, i.tabIndex = 0, i.addEventListener("keydown", (n) => {
889
- (n.key === "Enter" || n.key === " ") && (n.preventDefault(), this.buttonEl && this.selectApiOption(n, e, this.buttonEl));
913
+ this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (s) => {
914
+ this.buttonEl && this.selectApiOption(s, e, this.buttonEl);
915
+ }, i.tabIndex = 0, i.addEventListener("keydown", (s) => {
916
+ (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.buttonEl && this.selectApiOption(s, e, this.buttonEl));
890
917
  }), this.optionsListEl.appendChild(i);
891
918
  });
892
919
  }
893
920
  }
894
921
  updateButtonText(t) {
895
922
  if (!this.buttonEl) return;
896
- const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), n = this.buttonEl.querySelector(".select-label");
923
+ const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), s = this.buttonEl.querySelector(".select-label");
897
924
  if (this.isLoading) {
898
925
  this.buttonEl.classList.add("loading");
899
926
  const a = this.props.loadingText || "Loading options...";
900
927
  if (e)
901
928
  e.textContent = a;
902
- else if (i && this.props.title && !n) {
929
+ else if (i && this.props.title && !s) {
903
930
  this.buttonEl.innerHTML = "";
904
931
  const o = document.createElement("div");
905
932
  o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
@@ -910,23 +937,23 @@ class ht extends C {
910
937
  return;
911
938
  }
912
939
  this.buttonEl.classList.remove("loading", "error");
913
- let s;
914
- if (t ? ((t.includes("Failed") || t.includes("Error")) && this.buttonEl.classList.add("error"), s = t) : this.selectedOptionIndex !== null && this._options[this.selectedOptionIndex] ? s = this._options[this.selectedOptionIndex].name : s = "Select an option", e)
915
- e.textContent = s;
916
- else if (i && this.props.title && !n) {
940
+ let n;
941
+ if (t ? ((t.includes("Failed") || t.includes("Error")) && this.buttonEl.classList.add("error"), n = t) : this.selectedOptionIndex !== null && this._options[this.selectedOptionIndex] ? n = this._options[this.selectedOptionIndex].name : n = "Select an option", e)
942
+ e.textContent = n;
943
+ else if (i && this.props.title && !s) {
917
944
  this.buttonEl.innerHTML = "";
918
945
  const a = document.createElement("div");
919
946
  a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
920
947
  const o = document.createElement("span");
921
- o.className = "select-value", o.textContent = s, this.buttonEl.appendChild(o);
948
+ o.className = "select-value", o.textContent = n, this.buttonEl.appendChild(o);
922
949
  } else
923
- this.buttonEl.textContent = s;
950
+ this.buttonEl.textContent = n;
924
951
  }
925
952
  setDetectChange(t) {
926
953
  this.detectChangeCallback = t;
927
954
  }
928
955
  }
929
- class rt extends C {
956
+ class rt extends m {
930
957
  constructor(t) {
931
958
  super(t), this.inputType = "text", this.value = t.default ?? !1;
932
959
  }
@@ -945,18 +972,18 @@ class rt extends C {
945
972
  t.appendChild(e);
946
973
  const i = document.createElement("label");
947
974
  i.className = "toggle-switch";
948
- const n = document.createElement("input");
949
- n.type = "checkbox", n.checked = this.value ?? !1, n.addEventListener("change", () => {
950
- this.value = n.checked, this.onChange && this.onChange(this.value);
975
+ const s = document.createElement("input");
976
+ s.type = "checkbox", s.checked = this.value ?? !1, s.addEventListener("change", () => {
977
+ this.value = s.checked, this.onChange && this.onChange(this.value);
951
978
  });
952
- const s = document.createElement("span");
953
- return s.className = "toggle-slider", i.appendChild(n), i.appendChild(s), t.appendChild(i), t;
979
+ const n = document.createElement("span");
980
+ return n.className = "toggle-slider", i.appendChild(s), i.appendChild(n), t.appendChild(i), t;
954
981
  }
955
982
  }
956
983
  const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
957
984
  <path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
958
985
  </svg>`;
959
- class ct extends C {
986
+ class ct extends m {
960
987
  constructor(t = {}) {
961
988
  super(t), this.inputType = "number", this.inputValues = {};
962
989
  }
@@ -990,18 +1017,18 @@ class ct extends C {
990
1017
  createGapInput(t, e) {
991
1018
  const i = document.createElement("div");
992
1019
  i.classList.add("gap-input-wrapper");
993
- const n = document.createElement("div");
994
- n.classList.add("gap-label-container");
995
1020
  const s = document.createElement("div");
996
- s.classList.add("gap-setting-icon"), s.innerHTML = this.props.icon || Z, n.appendChild(s);
1021
+ s.classList.add("gap-label-container");
1022
+ const n = document.createElement("div");
1023
+ n.classList.add("gap-setting-icon"), n.innerHTML = this.props.icon || Z, s.appendChild(n);
997
1024
  const a = document.createElement("label");
998
- a.classList.add("gap-input-label"), a.textContent = t, n.appendChild(a), i.appendChild(n);
1025
+ a.classList.add("gap-input-label"), a.textContent = t, s.appendChild(a), i.appendChild(s);
999
1026
  const o = (u) => {
1000
1027
  this.props.minValue !== void 0 && (u.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (u.max = String(this.props.maxValue)), this.props.className && u.classList.add(this.props.className), u.addEventListener("input", () => {
1001
- var m;
1028
+ var C;
1002
1029
  const p = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
1003
1030
  let d = Number(u.value);
1004
- d < p && (d = p), d > g && (d = g), u.value = String(d), this.value = d, this.inputValues[t] = d, console.log(`Gap Setting (${t}): ${d}${this.props.suffix || ""}`), (m = this.onChange) == null || m.call(this, d);
1031
+ d < p && (d = p), d > g && (d = g), u.value = String(d), this.value = d, this.inputValues[t] = d, console.log(`Gap Setting (${t}): ${d}${this.props.suffix || ""}`), (C = this.onChange) == null || C.call(this, d);
1005
1032
  });
1006
1033
  }, l = this.createInput({
1007
1034
  value: e,
@@ -1013,52 +1040,127 @@ class ct extends C {
1013
1040
  if (!this.props.suffix || this.props.suffix === "none")
1014
1041
  return i.appendChild(l), i;
1015
1042
  l.classList.add("suffix-wrapper");
1016
- const r = l.querySelector("input.gap-setting-input");
1017
- r && (r.style.paddingRight = "35px");
1043
+ const c = l.querySelector("input.gap-setting-input");
1044
+ c && (c.style.paddingRight = "35px");
1018
1045
  const h = document.createElement("span");
1019
1046
  return h.className = "suffix-label", h.textContent = this.props.suffix, l.appendChild(h), i.appendChild(l), i;
1020
1047
  }
1021
1048
  }
1022
- class dt extends C {
1049
+ class dt extends m {
1023
1050
  constructor(t) {
1024
1051
  var e;
1025
1052
  if (!t.tabs)
1026
1053
  throw new Error("Tabs array is required for TabsSettings");
1027
- super(t), this.inputType = "tabs", this.tabs = [], this.activeTabId = "", this.tabsContainer = null, this.contentContainer = null, this.previousTabId = "", this.tabs = t.tabs, this.activeTabId = t.activeTabId || ((e = this.tabs[0]) == null ? void 0 : e.id) || "", this.previousTabId = this.activeTabId, t.onChange && this.setOnChange(t.onChange);
1054
+ super(t), this.inputType = "tabs", this.tabs = [], this.activeTabId = "", this.tabsContainer = null, this.contentContainer = null, this.previousTabId = "", this.tabValues = /* @__PURE__ */ new Map(), this.settingGroups = /* @__PURE__ */ new Map(), this.tabs = t.tabs, this.activeTabId = t.activeTabId || ((e = this.tabs[0]) == null ? void 0 : e.id) || "", this.previousTabId = this.activeTabId, this.onStateChangeCallback = t.onStateChange, this.tabs.forEach((i) => {
1055
+ if (i.custom)
1056
+ this.tabValues.set(i.id, i.settings);
1057
+ else {
1058
+ const s = new f({
1059
+ title: i.title || i.label,
1060
+ collapsed: i.collapsed,
1061
+ settings: i.settings,
1062
+ description: i.description,
1063
+ icon: i.icon,
1064
+ main: i.main,
1065
+ custom: i.custom,
1066
+ hideCondition: i.hideCondition,
1067
+ onBlur: i.onBlur
1068
+ });
1069
+ this.settingGroups.set(i.id, s), this.tabValues.set(i.id, s.getValues());
1070
+ }
1071
+ }), t.onChange && this.setOnChange(t.onChange);
1028
1072
  }
1029
1073
  draw() {
1030
1074
  const t = document.createElement("div");
1031
1075
  t.classList.add("tabs-settings-container"), this.props.className && t.classList.add(this.props.className);
1032
1076
  const e = document.createElement("div");
1033
- e.classList.add("tabs-header"), this.tabsContainer = e, this.tabs.forEach((n) => {
1034
- const s = document.createElement("button");
1035
- s.classList.add("tab-button"), n.id === this.activeTabId && s.classList.add("active"), s.textContent = n.label, s.onclick = () => this.handleTabClick(n.id), e.appendChild(s);
1077
+ e.classList.add("tabs-header"), this.tabsContainer = e, this.tabs.forEach((s) => {
1078
+ const n = document.createElement("button");
1079
+ n.classList.add("tab-button"), s.id === this.activeTabId && n.classList.add("active"), n.textContent = s.label, n.onclick = () => this.handleTabClick(s.id), e.appendChild(n);
1036
1080
  }), t.appendChild(e);
1037
1081
  const i = document.createElement("div");
1038
- return i.classList.add("tab-content"), this.contentContainer = i, this.tabs.forEach((n) => {
1039
- const s = document.createElement("div");
1040
- s.classList.add("tab-panel"), n.id === this.activeTabId && s.classList.add("active"), n.content instanceof v ? s.appendChild(n.content.draw()) : s.appendChild(n.content), i.appendChild(s);
1082
+ return i.classList.add("tab-content"), this.contentContainer = i, this.tabs.forEach((s) => {
1083
+ const n = document.createElement("div");
1084
+ if (n.classList.add("tab-panel"), s.id === this.activeTabId && n.classList.add("active"), s.custom)
1085
+ Object.entries(s.settings).forEach(([a, o]) => {
1086
+ if (o instanceof m)
1087
+ n.appendChild(o.draw()), o.setOnChange(() => {
1088
+ this.updateTabValues(s.id), this.handleTabChange(s.id);
1089
+ });
1090
+ else if (o instanceof f) {
1091
+ const l = o.draw();
1092
+ n.appendChild(l), this.addChangeListeners(o, s.id);
1093
+ }
1094
+ });
1095
+ else {
1096
+ const a = this.settingGroups.get(s.id);
1097
+ if (a) {
1098
+ const o = a.draw();
1099
+ n.appendChild(o), this.addChangeListeners(a, s.id);
1100
+ }
1101
+ }
1102
+ i.appendChild(n);
1041
1103
  }), t.appendChild(i), t;
1042
1104
  }
1105
+ addChangeListeners(t, e) {
1106
+ const i = t.settings;
1107
+ Object.values(i).forEach((s) => {
1108
+ s instanceof f ? this.addChangeListeners(s, e) : s.setOnChange(() => {
1109
+ this.updateTabValues(e), this.handleTabChange(e);
1110
+ });
1111
+ });
1112
+ }
1113
+ updateTabValues(t) {
1114
+ const e = this.tabs.find((i) => i.id === t);
1115
+ if (e)
1116
+ if (e.custom) {
1117
+ const i = {};
1118
+ Object.entries(e.settings).forEach(([s, n]) => {
1119
+ n instanceof m ? i[s] = n.value : n instanceof f && (i[s] = n.getValues());
1120
+ }), this.tabValues.set(t, i);
1121
+ } else {
1122
+ const i = this.settingGroups.get(t);
1123
+ i && this.tabValues.set(t, i.getValues());
1124
+ }
1125
+ }
1126
+ handleTabChange(t) {
1127
+ var i, s;
1128
+ const e = this.tabValues.get(t) || {};
1129
+ (i = this.onStateChangeCallback) == null || i.call(this, t, e), (s = this.onChangeCallback) == null || s.call(this, {
1130
+ tabId: t,
1131
+ contentValues: e,
1132
+ previousTabId: this.previousTabId
1133
+ });
1134
+ }
1043
1135
  handleTabClick(t) {
1044
- var i, n;
1136
+ var i;
1045
1137
  if (t === this.activeTabId) return;
1046
1138
  this.previousTabId = this.activeTabId, this.activeTabId = t;
1047
1139
  const e = (i = this.tabsContainer) == null ? void 0 : i.querySelectorAll(".tab-button");
1048
1140
  if (e == null || e.forEach((s) => {
1049
- var a;
1050
- s instanceof HTMLElement && s.classList.toggle("active", s.textContent === ((a = this.tabs.find((o) => o.id === t)) == null ? void 0 : a.label));
1141
+ var n;
1142
+ s instanceof HTMLElement && s.classList.toggle(
1143
+ "active",
1144
+ s.textContent === ((n = this.tabs.find((a) => a.id === t)) == null ? void 0 : n.label)
1145
+ );
1051
1146
  }), this.contentContainer) {
1052
- const s = this.contentContainer.querySelectorAll(".tab-panel"), a = this.tabs.findIndex((l) => l.id === this.previousTabId), o = this.tabs.findIndex((l) => l.id === t);
1053
- s.forEach((l, r) => {
1054
- l instanceof HTMLElement && (r === o ? (l.classList.add("active"), l.classList.remove("slide-left", "slide-right")) : r === a ? (l.classList.remove("active"), l.classList.add(o > a ? "slide-left" : "slide-right")) : l.classList.remove("active", "slide-left", "slide-right"));
1147
+ const s = this.contentContainer.querySelectorAll(".tab-panel"), n = this.tabs.findIndex(
1148
+ (o) => o.id === this.previousTabId
1149
+ ), a = this.tabs.findIndex((o) => o.id === t);
1150
+ s.forEach((o, l) => {
1151
+ o instanceof HTMLElement && (l === a ? (o.classList.add("active"), o.classList.remove("slide-left", "slide-right")) : l === n ? (o.classList.remove("active"), o.classList.add(
1152
+ a > n ? "slide-left" : "slide-right"
1153
+ )) : o.classList.remove("active", "slide-left", "slide-right"));
1055
1154
  });
1056
1155
  }
1057
- (n = this.onChangeCallback) == null || n.call(this, t);
1156
+ this.handleTabChange(t);
1058
1157
  }
1059
1158
  setOnChange(t) {
1060
1159
  return this.onChangeCallback = t, this;
1061
1160
  }
1161
+ setOnStateChange(t) {
1162
+ return this.onStateChangeCallback = t, this;
1163
+ }
1062
1164
  }
1063
1165
  const J = `
1064
1166
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
@@ -1069,7 +1171,7 @@ const J = `
1069
1171
  <path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1070
1172
  </svg>
1071
1173
  `;
1072
- class pt extends v {
1174
+ class pt extends f {
1073
1175
  constructor(t) {
1074
1176
  super({
1075
1177
  title: "Border",
@@ -1103,10 +1205,10 @@ class pt extends v {
1103
1205
  * Optional helper to generate CSS from the current settings.
1104
1206
  */
1105
1207
  getCssCode() {
1106
- const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.radius.value ?? 0, n = this.settings.size.value ?? 0;
1208
+ const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.radius.value ?? 0, s = this.settings.size.value ?? 0;
1107
1209
  return `
1108
1210
  border-color: ${t};
1109
- border-width: ${n}px;
1211
+ border-width: ${s}px;
1110
1212
  border-radius: ${i}px;
1111
1213
  opacity: ${e / 100};
1112
1214
  `;
@@ -1125,7 +1227,7 @@ const X = `
1125
1227
  <path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1126
1228
  </svg>
1127
1229
  `;
1128
- class ut extends v {
1230
+ class ut extends f {
1129
1231
  constructor(t = {}) {
1130
1232
  super({
1131
1233
  title: t.title || "Typography",
@@ -1176,18 +1278,18 @@ class ut extends v {
1176
1278
  });
1177
1279
  }
1178
1280
  getCssCode() {
1179
- const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", n = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, a = this.settings.align.value ?? "left";
1281
+ const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", s = this.settings.fontWeight.value ?? "bold", n = this.settings.fontSize.value ?? 12, a = this.settings.align.value ?? "left";
1180
1282
  return `
1181
1283
  color: ${t};
1182
1284
  opacity: ${e / 100};
1183
1285
  font-family: ${i};
1184
- font-weight: ${n};
1185
- font-size: ${s}px;
1286
+ font-weight: ${s};
1287
+ font-size: ${n}px;
1186
1288
  text-align: ${a};
1187
1289
  `;
1188
1290
  }
1189
1291
  }
1190
- class k extends C {
1292
+ class k extends m {
1191
1293
  constructor(t) {
1192
1294
  super({
1193
1295
  ...t,
@@ -1197,9 +1299,9 @@ class k extends C {
1197
1299
  draw() {
1198
1300
  const t = this.value === "auto" ? "text" : "number", e = (o) => {
1199
1301
  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", () => {
1200
- const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, r = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
1302
+ const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, c = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
1201
1303
  let h = Number(o.value);
1202
- h < l && (h = l), h > r && (h = r), o.value = String(h);
1304
+ h < l && (h = l), h > c && (h = c), o.value = String(h);
1203
1305
  }));
1204
1306
  }, i = this.createInput({
1205
1307
  value: this.value,
@@ -1214,26 +1316,26 @@ class k extends C {
1214
1316
  if (!this.props.suffix || this.props.suffix === "none")
1215
1317
  return i;
1216
1318
  i.classList.add("suffix-wrapper");
1217
- const n = i.querySelector(
1319
+ const s = i.querySelector(
1218
1320
  "input.number-setting-input"
1219
1321
  );
1220
- n && (n.style.paddingRight = "35px");
1221
- const s = document.createElement("span");
1222
- s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
1322
+ s && (s.style.paddingRight = "35px");
1323
+ const n = document.createElement("span");
1324
+ n.className = "suffix-label", n.textContent = this.props.suffix, i.appendChild(n);
1223
1325
  const a = i.querySelector("input");
1224
1326
  return a && (a.oninput = (o) => {
1225
1327
  const l = o.target.value.trim();
1226
1328
  if (l.toLowerCase() === "auto")
1227
1329
  this.value = "auto";
1228
1330
  else {
1229
- const r = Number(l);
1230
- isNaN(r) || (this.value = r);
1331
+ const c = Number(l);
1332
+ isNaN(c) || (this.value = c);
1231
1333
  }
1232
1334
  this.onChange && this.onChange(this.value);
1233
1335
  }), i;
1234
1336
  }
1235
1337
  }
1236
- class gt extends v {
1338
+ class gt extends f {
1237
1339
  constructor(t) {
1238
1340
  super({
1239
1341
  title: "Margins",
@@ -1268,12 +1370,12 @@ class gt extends v {
1268
1370
  });
1269
1371
  }
1270
1372
  getCssCode() {
1271
- const t = typeof this.settings.marginTop.value == "number" ? `${this.settings.marginTop.value}px` : this.settings.marginTop.value, e = typeof this.settings.marginRight.value == "number" ? `${this.settings.marginRight.value}px` : this.settings.marginRight.value, i = typeof this.settings.marginBottom.value == "number" ? `${this.settings.marginBottom.value}px` : this.settings.marginBottom.value, n = typeof this.settings.marginLeft.value == "number" ? `${this.settings.marginLeft.value}px` : this.settings.marginLeft.value;
1373
+ const t = typeof this.settings.marginTop.value == "number" ? `${this.settings.marginTop.value}px` : this.settings.marginTop.value, e = typeof this.settings.marginRight.value == "number" ? `${this.settings.marginRight.value}px` : this.settings.marginRight.value, i = typeof this.settings.marginBottom.value == "number" ? `${this.settings.marginBottom.value}px` : this.settings.marginBottom.value, s = typeof this.settings.marginLeft.value == "number" ? `${this.settings.marginLeft.value}px` : this.settings.marginLeft.value;
1272
1374
  return `
1273
1375
  margin-top: ${t};
1274
1376
  margin-right: ${e};
1275
1377
  margin-bottom: ${i};
1276
- margin-left: ${n};
1378
+ margin-left: ${s};
1277
1379
  `;
1278
1380
  }
1279
1381
  }
@@ -1286,7 +1388,7 @@ const K = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
1286
1388
  </svg>`, it = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1287
1389
  <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1288
1390
  </svg>`;
1289
- class st extends v {
1391
+ class st extends f {
1290
1392
  constructor(t, e, i) {
1291
1393
  super({
1292
1394
  title: `Tab ${t + 1}`,
@@ -1309,10 +1411,10 @@ class st extends v {
1309
1411
  e && e.parentElement && e.parentElement.removeChild(e);
1310
1412
  const i = t.querySelector(".setting-group-title");
1311
1413
  if (i) {
1312
- const n = document.createElement("div");
1313
- n.className = "tab-delete-container";
1314
- const s = document.createElement("button");
1315
- s.className = "tab-delete-button", s.innerHTML = `
1414
+ const s = document.createElement("div");
1415
+ s.className = "tab-delete-container";
1416
+ const n = document.createElement("button");
1417
+ n.className = "tab-delete-button", n.innerHTML = `
1316
1418
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
1317
1419
  <polyline points="3 6 5 6 21 6"></polyline>
1318
1420
  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
@@ -1320,17 +1422,17 @@ class st extends v {
1320
1422
  <path d="M14 11v6"></path>
1321
1423
  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
1322
1424
  </svg>
1323
- `, s.onclick = () => {
1425
+ `, n.onclick = () => {
1324
1426
  var o;
1325
1427
  return (o = this.onDeleteCallback) == null ? void 0 : o.call(this);
1326
- }, n.appendChild(s);
1428
+ }, s.appendChild(n);
1327
1429
  const a = i.querySelector("h3");
1328
- a ? a.insertAdjacentElement("afterend", n) : i.appendChild(n);
1430
+ a ? a.insertAdjacentElement("afterend", s) : i.appendChild(s);
1329
1431
  }
1330
1432
  return t;
1331
1433
  }
1332
1434
  }
1333
- class mt extends v {
1435
+ class mt extends f {
1334
1436
  // Store the rendered element
1335
1437
  constructor(t) {
1336
1438
  super({
@@ -1399,7 +1501,7 @@ class mt extends v {
1399
1501
  }));
1400
1502
  }
1401
1503
  }
1402
- class Ct extends v {
1504
+ class Ct extends f {
1403
1505
  /**
1404
1506
  * Constructs a new BackgroundSettingSet.
1405
1507
  *
@@ -1452,8 +1554,8 @@ class Ct extends v {
1452
1554
  draw() {
1453
1555
  const t = super.draw(), e = t.querySelector(".setting-group-content");
1454
1556
  if (!e) return t;
1455
- const i = Array.from(e.children), [n, s, a, o] = i;
1456
- e.innerHTML = "", e.appendChild(n), e.appendChild(s);
1557
+ const i = Array.from(e.children), [s, n, a, o] = i;
1558
+ e.innerHTML = "", e.appendChild(s), e.appendChild(n);
1457
1559
  const l = document.createElement("div");
1458
1560
  return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(a), e.appendChild(o), t;
1459
1561
  }
@@ -1461,7 +1563,7 @@ class Ct extends v {
1461
1563
  * Helper method to generate CSS based on the current settings.
1462
1564
  */
1463
1565
  getCssCode() {
1464
- const t = this.settings.backgroundImage.value || "", e = this.settings.opacity.value ?? 100, i = this.settings.backgroundColor.value || "0, 0, 30", n = this.settings.opacityBG.value ?? 100;
1566
+ const t = this.settings.backgroundImage.value || "", e = this.settings.opacity.value ?? 100, i = this.settings.backgroundColor.value || "0, 0, 30", s = this.settings.opacityBG.value ?? 100;
1465
1567
  return t ? `
1466
1568
  background-image: url("${t}");
1467
1569
  background-size: cover;
@@ -1469,7 +1571,7 @@ class Ct extends v {
1469
1571
  opacity: ${e / 100};
1470
1572
  ` : `
1471
1573
  background-color: ${i};
1472
- opacity: ${n / 100};
1574
+ opacity: ${s / 100};
1473
1575
  `;
1474
1576
  }
1475
1577
  }
@@ -1488,13 +1590,13 @@ export {
1488
1590
  M as OpacitySetting,
1489
1591
  ht as SelectApiSettings,
1490
1592
  T as SelectSetting,
1491
- C as Setting,
1492
- v as SettingGroup,
1593
+ m as Setting,
1594
+ f as SettingGroup,
1493
1595
  H as StringSetting,
1494
1596
  mt as TabsContainerGroup,
1495
1597
  dt as TabsSettings,
1496
1598
  rt as Toggle,
1497
1599
  F as UploadSetting,
1498
1600
  lt as WidthSetting,
1499
- R as iterateSettings
1601
+ B as iterateSettings
1500
1602
  };