builder-settings-types 0.0.94 → 0.0.95

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 (4) hide show
  1. package/dist/builder-settings-types.cjs.js +26 -26
  2. package/dist/builder-settings-types.es.js +205 -186
  3. package/dist/index.d.ts +2 -0
  4. package/package.json +1 -1
package/dist/builder-settings-types.es.js CHANGED
@@ -1,20 +1,20 @@
1
1
  const B = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
- let I = (c = 21) => {
2
+ let R = (c = 21) => {
3
3
  let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
4
4
  for (; c--; )
5
5
  t += B[e[c] & 63];
6
6
  return t;
7
7
  };
8
- function R(c, t) {
8
+ function O(c, t) {
9
9
  for (const e in c)
10
10
  if (c.hasOwnProperty(e)) {
11
11
  const i = c[e];
12
12
  t(e, i);
13
13
  }
14
14
  }
15
- const x = class x {
15
+ const b = class b {
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 || R(), 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,35 @@ 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, O(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("mouseleave", () => {
38
+ const e = this.getValues();
39
+ this.calculateChanges(this.initialValues, e), t(), this.updateVisibility(), this.initialValues = e;
40
+ }), O(this.settings, (e, i) => {
41
+ i instanceof b && i.setOnBlur(() => {
42
+ const s = this.getValues();
43
+ t(), this.updateVisibility(), this.initialValues = s;
44
+ });
45
+ }), this;
46
+ }
47
+ calculateChanges(t, e) {
48
+ const i = {};
49
+ for (const s in e)
50
+ if (e.hasOwnProperty(s))
51
+ if (typeof e[s] == "object" && e[s] !== null) {
52
+ const n = this.calculateChanges(t[s] || {}, e[s]);
53
+ Object.keys(n).length > 0 && (i[s] = n);
54
+ } else t[s] !== e[s] && (i[s] = {
55
+ from: t[s],
56
+ to: e[s]
57
+ });
58
+ return i;
38
59
  }
39
60
  hide() {
40
61
  this.elementRef && (this.elementRef.style.display = "none", this.isHidden = !0);
@@ -47,18 +68,18 @@ const x = class x {
47
68
  const e = {};
48
69
  for (const i in this.settings)
49
70
  if (this.settings.hasOwnProperty(i)) {
50
- const n = this.settings[i];
51
- n instanceof x ? e[i] = n.getValues() : e[i] = n.value;
71
+ const s = this.settings[i];
72
+ s instanceof b ? e[i] = s.getValues() : e[i] = s.value;
52
73
  }
53
74
  return e;
54
75
  } else {
55
76
  const e = this.settings[t];
56
- return e ? e instanceof x ? e.getValues() : e.value : void 0;
77
+ return e ? e instanceof b ? e.getValues() : e.value : void 0;
57
78
  }
58
79
  }
59
80
  draw() {
60
81
  const t = document.createElement("div");
61
- t.className = "setting-group", t.id = `setting-group-${this.id}`, x.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
82
+ t.className = "setting-group", t.id = `setting-group-${this.id}`, b.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
62
83
  const e = document.createElement("div");
63
84
  e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
64
85
  "aria-expanded",
@@ -70,24 +91,24 @@ const x = class x {
70
91
  h.className = "group-icon", h.innerHTML = this.icon, i.appendChild(h);
71
92
  }
72
93
  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) {
94
+ const s = document.createElement("h3");
95
+ s.textContent = this.title, i.appendChild(s);
96
+ const n = document.createElement("div");
97
+ if (n.className = "actions-section", this.description && this.isCollapsed) {
77
98
  const h = document.createElement("span");
78
99
  h.className = "info-marker", h.innerHTML = `
79
100
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
80
101
  <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
102
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
82
103
  </svg>
83
- `, h.title = this.description, s.appendChild(h);
104
+ `, h.title = this.description, n.appendChild(h);
84
105
  }
85
106
  const a = document.createElement("span");
86
107
  a.className = "setting-group-arrow", a.innerHTML = `
87
108
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
88
109
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
89
110
  </svg>
90
- `, this.isCollapsed && a.classList.add("rotated"), s.appendChild(a);
111
+ `, this.isCollapsed && a.classList.add("rotated"), n.appendChild(a);
91
112
  const o = document.createElement("div");
92
113
  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
114
  const h = document.createElement("div");
@@ -100,7 +121,7 @@ const x = class x {
100
121
  );
101
122
  const h = o.querySelector(
102
123
  ".setting-group-description"
103
- ), u = s.querySelector(".info-marker");
124
+ ), u = n.querySelector(".info-marker");
104
125
  if (this.description)
105
126
  if (this.isCollapsed) {
106
127
  if (h && h.remove(), !u) {
@@ -110,7 +131,7 @@ const x = class x {
110
131
  <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
132
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
112
133
  </svg>
113
- `, p.title = this.description, s.insertBefore(p, a);
134
+ `, p.title = this.description, n.insertBefore(p, a);
114
135
  }
115
136
  } else {
116
137
  if (!h) {
@@ -135,9 +156,7 @@ const x = class x {
135
156
  const h = document.createElement("div");
136
157
  h.className = "setting-group-empty", h.textContent = "No settings in this group", o.appendChild(h);
137
158
  }
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;
159
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, t;
141
160
  }
142
161
  collapse() {
143
162
  if (!this.elementRef || this.isCollapsed) return;
@@ -164,8 +183,8 @@ const x = class x {
164
183
  this.isHidden ? this.show() : this.hide();
165
184
  }
166
185
  };
167
- x.hiddenElements = /* @__PURE__ */ new Set();
168
- let v = x;
186
+ b.hiddenElements = /* @__PURE__ */ new Set();
187
+ let v = b;
169
188
  function W(c) {
170
189
  switch (c) {
171
190
  case "number":
@@ -186,7 +205,7 @@ function W(c) {
186
205
  }
187
206
  class C {
188
207
  constructor(t = {}) {
189
- this.props = t, this.id = t.id || I(), this.value = this.props.default, this.title = t.title || "";
208
+ this.props = t, this.id = t.id || R(), this.value = this.props.default, this.title = t.title || "";
190
209
  }
191
210
  destroy() {
192
211
  throw new Error("Method not implemented.");
@@ -214,9 +233,9 @@ class C {
214
233
  }
215
234
  const i = document.createElement("div");
216
235
  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) => {
236
+ const s = document.createElement("input");
237
+ this.inputEl = s, s.value = String(t.value || W(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "";
238
+ const n = (a) => {
220
239
  const o = a.target;
221
240
  let l = o.value;
222
241
  switch (t.inputType) {
@@ -243,7 +262,7 @@ class C {
243
262
  }
244
263
  this.value = l, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
245
264
  };
246
- return n.addEventListener("input", s), n.addEventListener("change", s), t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
265
+ return s.addEventListener("input", n), s.addEventListener("change", n), t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
247
266
  }
248
267
  createLabel(t, e) {
249
268
  const i = document.createElement("span");
@@ -274,38 +293,38 @@ class H extends C {
274
293
  });
275
294
  }
276
295
  }
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>";
296
+ const T = "<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
297
  class S extends H {
279
298
  constructor(t) {
280
299
  super({
281
300
  ...t,
282
- icon: t.icon || O,
301
+ icon: t.icon || T,
283
302
  title: t.title || "Color"
284
303
  }), this.inputType = "color", this.detectChange = t.detectChange;
285
304
  }
286
305
  hexToRgb(t) {
287
306
  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}`;
307
+ const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), s = parseInt(t.substring(4, 6), 16);
308
+ return `${e}, ${i}, ${s}`;
290
309
  }
291
310
  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) => {
311
+ const [e, i, s] = t.split(",").map((a) => parseInt(a.trim()));
312
+ if (isNaN(e) || isNaN(i) || isNaN(s)) return "#000000";
313
+ const n = (a) => {
295
314
  const o = a.toString(16);
296
315
  return o.length === 1 ? "0" + o : o;
297
316
  };
298
- return `#${s(e)}${s(i)}${s(n)}`;
317
+ return `#${n(e)}${n(i)}${n(s)}`;
299
318
  }
300
319
  draw() {
301
320
  const t = document.createElement("div");
302
321
  t.className = "color-setting-wrapper";
303
322
  const e = document.createElement("div");
304
323
  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";
324
+ const i = this.createIcon(this.props.icon || T), s = this.createLabel(this.title || "Color");
325
+ e.appendChild(i), e.appendChild(s);
326
+ const n = document.createElement("div");
327
+ n.className = "color-input-wrapper";
309
328
  const a = (p) => {
310
329
  const g = p.value.split(",").map((N) => parseInt(N.trim()));
311
330
  if (g.length !== 3 || g.some(isNaN))
@@ -335,7 +354,7 @@ class S extends H {
335
354
  var m, f;
336
355
  const g = p.target.value, d = this.hexToRgb(g);
337
356
  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;
357
+ }, n.appendChild(o), n.appendChild(h), n.appendChild(l), t.appendChild(e), t.appendChild(n), this.value && (r.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
339
358
  }
340
359
  }
341
360
  class w extends C {
@@ -343,11 +362,11 @@ class w extends C {
343
362
  super(t), this.inputType = "number";
344
363
  }
345
364
  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", () => {
365
+ const t = (n) => {
366
+ 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
367
  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);
368
+ let l = Number(n.value);
369
+ l < a && (l = a), l > o && (l = o), n.value = String(l);
351
370
  });
352
371
  }, e = this.createInput({
353
372
  value: this.value,
@@ -365,8 +384,8 @@ class w extends C {
365
384
  "input.number-setting-input"
366
385
  );
367
386
  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;
387
+ const s = document.createElement("span");
388
+ return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
370
389
  }
371
390
  }
372
391
  class M extends w {
@@ -393,7 +412,7 @@ const A = `
393
412
  <polyline points="6 9 12 15 18 9"></polyline>
394
413
  </svg>
395
414
  `;
396
- class T extends C {
415
+ class V extends C {
397
416
  constructor(t = {}) {
398
417
  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
418
  const e = this._options.findIndex((i) => i.value === this.value);
@@ -407,44 +426,44 @@ class T extends C {
407
426
  draw() {
408
427
  const t = document.createElement("div");
409
428
  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) {
429
+ const n = document.createElement("div");
430
+ if (n.className = "icon-container", this.props.icon) {
412
431
  const a = this.createIcon(this.props.icon);
413
- s.appendChild(a);
432
+ n.appendChild(a);
414
433
  }
415
434
  if (this.props.title) {
416
435
  const a = this.createLabel(this.props.title);
417
- s.appendChild(a);
436
+ n.appendChild(a);
418
437
  }
419
- t.appendChild(s);
438
+ t.appendChild(n);
420
439
  } else {
421
- const s = document.createElement("div");
422
- t.appendChild(s);
440
+ const n = document.createElement("div");
441
+ t.appendChild(n);
423
442
  }
424
443
  const e = document.createElement("div");
425
444
  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));
445
+ var n, a;
446
+ 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
447
  }, t.appendChild(e), this.buttonEl = e;
429
448
  const i = document.createElement("ul");
430
- i.classList.add("select-options"), this._options.forEach((s, a) => {
431
- const o = this.createOption(s, a);
449
+ i.classList.add("select-options"), this._options.forEach((n, a) => {
450
+ const o = this.createOption(n, a);
432
451
  o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
433
452
  }), 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) => {
453
+ const s = document.createElement("div");
454
+ 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) => {
455
+ this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
456
+ }).catch((n) => {
457
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
458
+ })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (n) => {
440
459
  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"));
460
+ 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
461
  }, document.addEventListener("click", this.clickOutsideListener), t;
443
462
  }
444
463
  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) => {
464
+ var n, a, o;
465
+ const s = this._options[e];
466
+ 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((r, h) => {
448
467
  h === e ? r.classList.add("selected") : r.classList.remove("selected");
449
468
  }));
450
469
  }
@@ -457,8 +476,8 @@ class T extends C {
457
476
  }
458
477
  this._options.forEach((t, e) => {
459
478
  const i = this.createOption(t, e);
460
- i.onclick = (n) => {
461
- this.buttonEl && this.selectOption(n, e, this.buttonEl);
479
+ i.onclick = (s) => {
480
+ this.buttonEl && this.selectOption(s, e, this.buttonEl);
462
481
  }, this.optionsListEl.appendChild(i);
463
482
  });
464
483
  }
@@ -521,11 +540,11 @@ class _ extends C {
521
540
  </svg>
522
541
  `
523
542
  }
524
- ].forEach((s) => {
543
+ ].forEach((n) => {
525
544
  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", () => {
545
+ a.className = "align-option-button", a.innerHTML = n.icon, this.value === n.name && a.classList.add("selected"), a.addEventListener("click", () => {
527
546
  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);
547
+ 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
548
  }), i.appendChild(a);
530
549
  }), t.appendChild(i), t;
531
550
  }
@@ -590,8 +609,8 @@ class at extends C {
590
609
  }
591
610
  toggleLock(t) {
592
611
  if (this.locked = !this.locked, this.locked && this.value) {
593
- const { width: i, height: n } = this.value;
594
- n > 0 && (this.aspectRatio = i / n);
612
+ const { width: i, height: s } = this.value;
613
+ s > 0 && (this.aspectRatio = i / s);
595
614
  }
596
615
  t.innerHTML = this.getLockSVG(this.locked), t.setAttribute("aria-pressed", String(this.locked)), t.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio";
597
616
  const e = t.closest(".dimension-setting-container");
@@ -625,15 +644,15 @@ class at extends C {
625
644
  draw() {
626
645
  const t = document.createElement("div");
627
646
  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(
647
+ const e = this.widthSetting.draw(), i = this.heightSetting.draw(), s = document.createElement("div");
648
+ s.className = "dimension-bracket";
649
+ const n = document.createElement("button");
650
+ return n.className = "dimension-lock-icon", n.setAttribute("type", "button"), n.setAttribute("aria-pressed", String(this.locked)), n.setAttribute(
632
651
  "aria-label",
633
652
  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;
653
+ ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (a) => {
654
+ a.preventDefault(), this.toggleLock(n);
655
+ }, s.appendChild(n), t.appendChild(e), t.appendChild(s), t.appendChild(i), t;
637
656
  }
638
657
  isLocked() {
639
658
  return this.locked;
@@ -641,8 +660,8 @@ class at extends C {
641
660
  setLocked(t) {
642
661
  if (this.locked !== t) {
643
662
  if (this.locked = t, this.locked && this.value) {
644
- const { width: i, height: n } = this.value;
645
- n > 0 && (this.aspectRatio = i / n);
663
+ const { width: i, height: s } = this.value;
664
+ s > 0 && (this.aspectRatio = i / s);
646
665
  }
647
666
  const e = document.querySelector(
648
667
  ".dimension-setting-container .dimension-lock-icon"
@@ -663,7 +682,7 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
663
682
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
664
683
  <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"/>
665
684
  </svg>
666
- `, V = `
685
+ `, I = `
667
686
  <svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
668
687
  <rect width="91" height="71" rx="4" fill="#F2F4F7"/>
669
688
  <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"/>
@@ -679,13 +698,13 @@ class F extends C {
679
698
  }
680
699
  updatePreviewState(t = null) {
681
700
  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(
701
+ const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), s = e == null ? void 0 : e.querySelector(
683
702
  ".preview-placeholder"
684
703
  );
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 = `
704
+ 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
705
  <span class="upload-icon">${y}</span>
687
706
  <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 = `
707
+ `)) : (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
708
  <span class="upload-icon">${y}</span>
690
709
  <span class="upload-label">Upload</span>
691
710
  `));
@@ -708,10 +727,10 @@ class F extends C {
708
727
  }
709
728
  const i = document.createElement("div");
710
729
  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";
730
+ const s = this.value && this.value !== "";
731
+ s || i.classList.add("no-image");
732
+ const n = document.createElement("div");
733
+ n.className = "preview-placeholder", n.innerHTML = I, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = I, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
715
734
  const a = document.createElement("button");
716
735
  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
736
  const o = document.createElement("button");
@@ -720,7 +739,7 @@ class F extends C {
720
739
  <span class="upload-label">Upload</span>
721
740
  `;
722
741
  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) => {
742
+ 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 = (r) => {
724
743
  var h;
725
744
  r.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, "");
726
745
  }, o.onclick = () => {
@@ -741,14 +760,14 @@ class F extends C {
741
760
  body: g,
742
761
  headers: L
743
762
  })).json();
744
- let b;
763
+ let x;
745
764
  if (this.props.parseResponse)
746
- b = this.props.parseResponse(E);
747
- else if (b = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !b)
765
+ x = this.props.parseResponse(E);
766
+ else if (x = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !x)
748
767
  throw new Error(
749
768
  "No URL found in response. Provide a parseResponse if needed."
750
769
  );
751
- this.value = b, this.updatePreviewState(b), (p = this.onChange) == null || p.call(this, b);
770
+ this.value = x, this.updatePreviewState(x), (p = this.onChange) == null || p.call(this, x);
752
771
  } catch (g) {
753
772
  console.error("Error uploading file:", g), this.updatePreviewState(null);
754
773
  } finally {
@@ -817,8 +836,8 @@ class ht extends C {
817
836
  createOption(t, e) {
818
837
  const i = document.createElement("li");
819
838
  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;
839
+ const s = document.createElement("input");
840
+ 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
841
  }
823
842
  draw() {
824
843
  const t = document.createElement("div");
@@ -826,48 +845,48 @@ class ht extends C {
826
845
  const e = document.createElement("div");
827
846
  if (e.classList.add("select-api-button"), this.props.title) {
828
847
  e.classList.add("has-label");
829
- const s = document.createElement("div");
830
- s.className = "select-label", s.textContent = this.props.title, e.appendChild(s);
848
+ const n = document.createElement("div");
849
+ n.className = "select-label", n.textContent = this.props.title, e.appendChild(n);
831
850
  const a = document.createElement("span");
832
851
  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
852
  } 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);
853
+ const n = document.createElement("span");
854
+ 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
855
  }
837
856
  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));
857
+ var n, a;
858
+ 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
859
  }, t.appendChild(e), this.buttonEl = e;
841
860
  const i = document.createElement("ul");
842
- i.classList.add("select-api-options"), this._options.forEach((s, a) => {
843
- const o = this.createOption(s, a);
861
+ i.classList.add("select-api-options"), this._options.forEach((n, a) => {
862
+ const o = this.createOption(n, a);
844
863
  o.onclick = (l) => this.selectApiOption(l, a, e), i.appendChild(o);
845
864
  }), 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(
865
+ const s = document.createElement("div");
866
+ return s.classList.add("svg-container"), s.innerHTML = D, t.appendChild(s), s.onclick = () => {
867
+ var n, a;
868
+ 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));
869
+ }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
870
+ this._options.push(...n), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
852
871
  (a) => JSON.stringify(a.value) === JSON.stringify(this.value)
853
872
  )), 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)));
873
+ }).catch((n) => {
874
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
875
+ })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
876
+ const a = new Set(this._options.map((l) => JSON.stringify(l.value))), o = n.filter((l) => !a.has(JSON.stringify(l.value)));
858
877
  this._options.push(...o), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
859
878
  (l) => JSON.stringify(l.value) === JSON.stringify(this.value)
860
879
  )), 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");
880
+ }).catch((n) => {
881
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
863
882
  })), t;
864
883
  }
865
884
  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(
885
+ var n, a;
886
+ const s = this._options[e];
887
+ if (s) {
888
+ const o = s.value;
889
+ 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
890
  ".select-api-radio"
872
891
  ).forEach((r, h) => {
873
892
  r.checked = h === e;
@@ -883,23 +902,23 @@ class ht extends C {
883
902
  }
884
903
  this._options.forEach((t, e) => {
885
904
  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));
905
+ this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (s) => {
906
+ this.buttonEl && this.selectApiOption(s, e, this.buttonEl);
907
+ }, i.tabIndex = 0, i.addEventListener("keydown", (s) => {
908
+ (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.buttonEl && this.selectApiOption(s, e, this.buttonEl));
890
909
  }), this.optionsListEl.appendChild(i);
891
910
  });
892
911
  }
893
912
  }
894
913
  updateButtonText(t) {
895
914
  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");
915
+ const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), s = this.buttonEl.querySelector(".select-label");
897
916
  if (this.isLoading) {
898
917
  this.buttonEl.classList.add("loading");
899
918
  const a = this.props.loadingText || "Loading options...";
900
919
  if (e)
901
920
  e.textContent = a;
902
- else if (i && this.props.title && !n) {
921
+ else if (i && this.props.title && !s) {
903
922
  this.buttonEl.innerHTML = "";
904
923
  const o = document.createElement("div");
905
924
  o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
@@ -910,17 +929,17 @@ class ht extends C {
910
929
  return;
911
930
  }
912
931
  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) {
932
+ let n;
933
+ 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)
934
+ e.textContent = n;
935
+ else if (i && this.props.title && !s) {
917
936
  this.buttonEl.innerHTML = "";
918
937
  const a = document.createElement("div");
919
938
  a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
920
939
  const o = document.createElement("span");
921
- o.className = "select-value", o.textContent = s, this.buttonEl.appendChild(o);
940
+ o.className = "select-value", o.textContent = n, this.buttonEl.appendChild(o);
922
941
  } else
923
- this.buttonEl.textContent = s;
942
+ this.buttonEl.textContent = n;
924
943
  }
925
944
  setDetectChange(t) {
926
945
  this.detectChangeCallback = t;
@@ -945,12 +964,12 @@ class rt extends C {
945
964
  t.appendChild(e);
946
965
  const i = document.createElement("label");
947
966
  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);
967
+ const s = document.createElement("input");
968
+ s.type = "checkbox", s.checked = this.value ?? !1, s.addEventListener("change", () => {
969
+ this.value = s.checked, this.onChange && this.onChange(this.value);
951
970
  });
952
- const s = document.createElement("span");
953
- return s.className = "toggle-slider", i.appendChild(n), i.appendChild(s), t.appendChild(i), t;
971
+ const n = document.createElement("span");
972
+ return n.className = "toggle-slider", i.appendChild(s), i.appendChild(n), t.appendChild(i), t;
954
973
  }
955
974
  }
956
975
  const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -990,12 +1009,12 @@ class ct extends C {
990
1009
  createGapInput(t, e) {
991
1010
  const i = document.createElement("div");
992
1011
  i.classList.add("gap-input-wrapper");
993
- const n = document.createElement("div");
994
- n.classList.add("gap-label-container");
995
1012
  const s = document.createElement("div");
996
- s.classList.add("gap-setting-icon"), s.innerHTML = this.props.icon || Z, n.appendChild(s);
1013
+ s.classList.add("gap-label-container");
1014
+ const n = document.createElement("div");
1015
+ n.classList.add("gap-setting-icon"), n.innerHTML = this.props.icon || Z, s.appendChild(n);
997
1016
  const a = document.createElement("label");
998
- a.classList.add("gap-input-label"), a.textContent = t, n.appendChild(a), i.appendChild(n);
1017
+ a.classList.add("gap-input-label"), a.textContent = t, s.appendChild(a), i.appendChild(s);
999
1018
  const o = (u) => {
1000
1019
  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
1020
  var m;
@@ -1030,31 +1049,31 @@ class dt extends C {
1030
1049
  const t = document.createElement("div");
1031
1050
  t.classList.add("tabs-settings-container"), this.props.className && t.classList.add(this.props.className);
1032
1051
  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);
1052
+ e.classList.add("tabs-header"), this.tabsContainer = e, this.tabs.forEach((s) => {
1053
+ const n = document.createElement("button");
1054
+ 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
1055
  }), t.appendChild(e);
1037
1056
  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);
1057
+ return i.classList.add("tab-content"), this.contentContainer = i, this.tabs.forEach((s) => {
1058
+ const n = document.createElement("div");
1059
+ n.classList.add("tab-panel"), s.id === this.activeTabId && n.classList.add("active"), s.content instanceof v ? n.appendChild(s.content.draw()) : n.appendChild(s.content), i.appendChild(n);
1041
1060
  }), t.appendChild(i), t;
1042
1061
  }
1043
1062
  handleTabClick(t) {
1044
- var i, n;
1063
+ var i, s;
1045
1064
  if (t === this.activeTabId) return;
1046
1065
  this.previousTabId = this.activeTabId, this.activeTabId = t;
1047
1066
  const e = (i = this.tabsContainer) == null ? void 0 : i.querySelectorAll(".tab-button");
1048
- if (e == null || e.forEach((s) => {
1067
+ if (e == null || e.forEach((n) => {
1049
1068
  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));
1069
+ n instanceof HTMLElement && n.classList.toggle("active", n.textContent === ((a = this.tabs.find((o) => o.id === t)) == null ? void 0 : a.label));
1051
1070
  }), 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) => {
1071
+ const n = this.contentContainer.querySelectorAll(".tab-panel"), a = this.tabs.findIndex((l) => l.id === this.previousTabId), o = this.tabs.findIndex((l) => l.id === t);
1072
+ n.forEach((l, r) => {
1054
1073
  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"));
1055
1074
  });
1056
1075
  }
1057
- (n = this.onChangeCallback) == null || n.call(this, t);
1076
+ (s = this.onChangeCallback) == null || s.call(this, t);
1058
1077
  }
1059
1078
  setOnChange(t) {
1060
1079
  return this.onChangeCallback = t, this;
@@ -1103,10 +1122,10 @@ class pt extends v {
1103
1122
  * Optional helper to generate CSS from the current settings.
1104
1123
  */
1105
1124
  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;
1125
+ 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
1126
  return `
1108
1127
  border-color: ${t};
1109
- border-width: ${n}px;
1128
+ border-width: ${s}px;
1110
1129
  border-radius: ${i}px;
1111
1130
  opacity: ${e / 100};
1112
1131
  `;
@@ -1138,7 +1157,7 @@ class ut extends v {
1138
1157
  opacity: new M({
1139
1158
  default: t.colorOpacityDefault ?? 100
1140
1159
  }),
1141
- fontFamily: new T({
1160
+ fontFamily: new V({
1142
1161
  title: "Font",
1143
1162
  icon: X,
1144
1163
  default: t.fontFamilyDefault ?? "Satoshi",
@@ -1150,7 +1169,7 @@ class ut extends v {
1150
1169
  getOptions: t.fontFamilyGetOptions,
1151
1170
  getOptionsAsync: t.fontFamilyGetOptionsAsync
1152
1171
  }),
1153
- fontWeight: new T({
1172
+ fontWeight: new V({
1154
1173
  title: "Weight",
1155
1174
  icon: Q,
1156
1175
  default: t.fontWeightDefault ?? "400",
@@ -1176,13 +1195,13 @@ class ut extends v {
1176
1195
  });
1177
1196
  }
1178
1197
  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";
1198
+ 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
1199
  return `
1181
1200
  color: ${t};
1182
1201
  opacity: ${e / 100};
1183
1202
  font-family: ${i};
1184
- font-weight: ${n};
1185
- font-size: ${s}px;
1203
+ font-weight: ${s};
1204
+ font-size: ${n}px;
1186
1205
  text-align: ${a};
1187
1206
  `;
1188
1207
  }
@@ -1214,12 +1233,12 @@ class k extends C {
1214
1233
  if (!this.props.suffix || this.props.suffix === "none")
1215
1234
  return i;
1216
1235
  i.classList.add("suffix-wrapper");
1217
- const n = i.querySelector(
1236
+ const s = i.querySelector(
1218
1237
  "input.number-setting-input"
1219
1238
  );
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);
1239
+ s && (s.style.paddingRight = "35px");
1240
+ const n = document.createElement("span");
1241
+ n.className = "suffix-label", n.textContent = this.props.suffix, i.appendChild(n);
1223
1242
  const a = i.querySelector("input");
1224
1243
  return a && (a.oninput = (o) => {
1225
1244
  const l = o.target.value.trim();
@@ -1268,12 +1287,12 @@ class gt extends v {
1268
1287
  });
1269
1288
  }
1270
1289
  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;
1290
+ 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
1291
  return `
1273
1292
  margin-top: ${t};
1274
1293
  margin-right: ${e};
1275
1294
  margin-bottom: ${i};
1276
- margin-left: ${n};
1295
+ margin-left: ${s};
1277
1296
  `;
1278
1297
  }
1279
1298
  }
@@ -1309,10 +1328,10 @@ class st extends v {
1309
1328
  e && e.parentElement && e.parentElement.removeChild(e);
1310
1329
  const i = t.querySelector(".setting-group-title");
1311
1330
  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 = `
1331
+ const s = document.createElement("div");
1332
+ s.className = "tab-delete-container";
1333
+ const n = document.createElement("button");
1334
+ n.className = "tab-delete-button", n.innerHTML = `
1316
1335
  <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
1336
  <polyline points="3 6 5 6 21 6"></polyline>
1318
1337
  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
@@ -1320,12 +1339,12 @@ class st extends v {
1320
1339
  <path d="M14 11v6"></path>
1321
1340
  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
1322
1341
  </svg>
1323
- `, s.onclick = () => {
1342
+ `, n.onclick = () => {
1324
1343
  var o;
1325
1344
  return (o = this.onDeleteCallback) == null ? void 0 : o.call(this);
1326
- }, n.appendChild(s);
1345
+ }, s.appendChild(n);
1327
1346
  const a = i.querySelector("h3");
1328
- a ? a.insertAdjacentElement("afterend", n) : i.appendChild(n);
1347
+ a ? a.insertAdjacentElement("afterend", s) : i.appendChild(s);
1329
1348
  }
1330
1349
  return t;
1331
1350
  }
@@ -1452,8 +1471,8 @@ class Ct extends v {
1452
1471
  draw() {
1453
1472
  const t = super.draw(), e = t.querySelector(".setting-group-content");
1454
1473
  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);
1474
+ const i = Array.from(e.children), [s, n, a, o] = i;
1475
+ e.innerHTML = "", e.appendChild(s), e.appendChild(n);
1457
1476
  const l = document.createElement("div");
1458
1477
  return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(a), e.appendChild(o), t;
1459
1478
  }
@@ -1461,7 +1480,7 @@ class Ct extends v {
1461
1480
  * Helper method to generate CSS based on the current settings.
1462
1481
  */
1463
1482
  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;
1483
+ 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
1484
  return t ? `
1466
1485
  background-image: url("${t}");
1467
1486
  background-size: cover;
@@ -1469,7 +1488,7 @@ class Ct extends v {
1469
1488
  opacity: ${e / 100};
1470
1489
  ` : `
1471
1490
  background-color: ${i};
1472
- opacity: ${n / 100};
1491
+ opacity: ${s / 100};
1473
1492
  `;
1474
1493
  }
1475
1494
  }
@@ -1487,7 +1506,7 @@ export {
1487
1506
  w as NumberSetting,
1488
1507
  M as OpacitySetting,
1489
1508
  ht as SelectApiSettings,
1490
- T as SelectSetting,
1509
+ V as SelectSetting,
1491
1510
  C as Setting,
1492
1511
  v as SettingGroup,
1493
1512
  H as StringSetting,
@@ -1496,5 +1515,5 @@ export {
1496
1515
  rt as Toggle,
1497
1516
  F as UploadSetting,
1498
1517
  lt as WidthSetting,
1499
- R as iterateSettings
1518
+ O as iterateSettings
1500
1519
  };