builder-settings-types 0.0.93 → 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 (5) hide show
  1. package/dist/builder-settings-types.cjs.js +26 -26
  2. package/dist/builder-settings-types.es.js +262 -237
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +7 -0
  5. package/package.json +1 -1
package/dist/builder-settings-types.es.js CHANGED
@@ -1,20 +1,20 @@
1
- const R = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
- let I = (c = 21) => {
1
+ const B = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
+ let R = (c = 21) => {
3
3
  let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
4
4
  for (; c--; )
5
- t += R[e[c] & 63];
5
+ t += B[e[c] & 63];
6
6
  return t;
7
7
  };
8
- function B(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.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.hideCondition = t.hideCondition, 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,12 +27,36 @@ const x = class x {
27
27
  });
28
28
  }
29
29
  setOnChange(t) {
30
- return this.onChange = t, B(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
+ setOnBlur(t) {
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;
59
+ }
36
60
  hide() {
37
61
  this.elementRef && (this.elementRef.style.display = "none", this.isHidden = !0);
38
62
  }
@@ -44,18 +68,18 @@ const x = class x {
44
68
  const e = {};
45
69
  for (const i in this.settings)
46
70
  if (this.settings.hasOwnProperty(i)) {
47
- const n = this.settings[i];
48
- 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;
49
73
  }
50
74
  return e;
51
75
  } else {
52
76
  const e = this.settings[t];
53
- return e ? e instanceof x ? e.getValues() : e.value : void 0;
77
+ return e ? e instanceof b ? e.getValues() : e.value : void 0;
54
78
  }
55
79
  }
56
80
  draw() {
57
81
  const t = document.createElement("div");
58
- 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");
59
83
  const e = document.createElement("div");
60
84
  e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
61
85
  "aria-expanded",
@@ -63,53 +87,54 @@ const x = class x {
63
87
  ), e.setAttribute("tabindex", "0");
64
88
  const i = document.createElement("div");
65
89
  if (i.className = "title-section", this.icon) {
66
- const r = document.createElement("span");
67
- r.className = "group-icon", r.innerHTML = this.icon, i.appendChild(r);
90
+ const h = document.createElement("span");
91
+ h.className = "group-icon", h.innerHTML = this.icon, i.appendChild(h);
68
92
  }
69
- const n = document.createElement("h3");
70
- n.textContent = this.title, i.appendChild(n);
71
- const s = document.createElement("div");
72
- if (s.className = "actions-section", this.description && this.isCollapsed) {
73
- const r = document.createElement("span");
74
- r.className = "info-marker", r.innerHTML = `
93
+ this.custom && t.classList.add("custom_class");
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) {
98
+ const h = document.createElement("span");
99
+ h.className = "info-marker", h.innerHTML = `
75
100
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
76
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"
77
102
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
78
103
  </svg>
79
- `, r.title = this.description, s.appendChild(r);
104
+ `, h.title = this.description, n.appendChild(h);
80
105
  }
81
106
  const a = document.createElement("span");
82
107
  a.className = "setting-group-arrow", a.innerHTML = `
83
108
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
84
109
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
85
110
  </svg>
86
- `, this.isCollapsed && a.classList.add("rotated"), s.appendChild(a);
111
+ `, this.isCollapsed && a.classList.add("rotated"), n.appendChild(a);
87
112
  const o = document.createElement("div");
88
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) {
89
- const r = document.createElement("div");
90
- r.className = "setting-group-description", r.textContent = this.description, o.appendChild(r);
114
+ const h = document.createElement("div");
115
+ h.className = "setting-group-description", h.textContent = this.description, o.appendChild(h);
91
116
  }
92
117
  const l = () => {
93
118
  this.isCollapsed = !this.isCollapsed, o.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), a.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
94
119
  "aria-expanded",
95
120
  (!this.isCollapsed).toString()
96
121
  );
97
- const r = o.querySelector(
122
+ const h = o.querySelector(
98
123
  ".setting-group-description"
99
- ), u = s.querySelector(".info-marker");
124
+ ), u = n.querySelector(".info-marker");
100
125
  if (this.description)
101
126
  if (this.isCollapsed) {
102
- if (r && r.remove(), !u) {
127
+ if (h && h.remove(), !u) {
103
128
  const p = document.createElement("span");
104
129
  p.className = "info-marker", p.innerHTML = `
105
130
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
106
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"
107
132
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
108
133
  </svg>
109
- `, p.title = this.description, s.insertBefore(p, a);
134
+ `, p.title = this.description, n.insertBefore(p, a);
110
135
  }
111
136
  } else {
112
- if (!r) {
137
+ if (!h) {
113
138
  const p = document.createElement("div");
114
139
  p.className = "setting-group-description", p.textContent = this.description, o.insertBefore(
115
140
  p,
@@ -119,19 +144,19 @@ const x = class x {
119
144
  u && u.remove();
120
145
  }
121
146
  };
122
- if (e.onclick = l, e.onkeydown = (r) => {
123
- (r.key === "Enter" || r.key === " ") && (r.preventDefault(), l());
147
+ if (e.onclick = l, e.onkeydown = (h) => {
148
+ (h.key === "Enter" || h.key === " ") && (h.preventDefault(), l());
124
149
  }, Object.keys(this.settings).length > 0) {
125
- for (const r in this.settings)
126
- if (this.settings.hasOwnProperty(r)) {
127
- const u = this.settings[r];
150
+ for (const h in this.settings)
151
+ if (this.settings.hasOwnProperty(h)) {
152
+ const u = this.settings[h];
128
153
  o.appendChild(u.draw());
129
154
  }
130
155
  } else {
131
- const r = document.createElement("div");
132
- r.className = "setting-group-empty", r.textContent = "No settings in this group", o.appendChild(r);
156
+ const h = document.createElement("div");
157
+ h.className = "setting-group-empty", h.textContent = "No settings in this group", o.appendChild(h);
133
158
  }
134
- return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(o), this.elementRef = t, t;
159
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, t;
135
160
  }
136
161
  collapse() {
137
162
  if (!this.elementRef || this.isCollapsed) return;
@@ -158,8 +183,8 @@ const x = class x {
158
183
  this.isHidden ? this.show() : this.hide();
159
184
  }
160
185
  };
161
- x.hiddenElements = /* @__PURE__ */ new Set();
162
- let v = x;
186
+ b.hiddenElements = /* @__PURE__ */ new Set();
187
+ let v = b;
163
188
  function W(c) {
164
189
  switch (c) {
165
190
  case "number":
@@ -180,7 +205,7 @@ function W(c) {
180
205
  }
181
206
  class C {
182
207
  constructor(t = {}) {
183
- 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 || "";
184
209
  }
185
210
  destroy() {
186
211
  throw new Error("Method not implemented.");
@@ -208,9 +233,9 @@ class C {
208
233
  }
209
234
  const i = document.createElement("div");
210
235
  i.className = t.wrapperClassName || "";
211
- const n = document.createElement("input");
212
- this.inputEl = n, n.value = String(t.value || W(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "";
213
- 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) => {
214
239
  const o = a.target;
215
240
  let l = o.value;
216
241
  switch (t.inputType) {
@@ -237,7 +262,7 @@ class C {
237
262
  }
238
263
  this.value = l, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
239
264
  };
240
- 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;
241
266
  }
242
267
  createLabel(t, e) {
243
268
  const i = document.createElement("span");
@@ -268,38 +293,38 @@ class H extends C {
268
293
  });
269
294
  }
270
295
  }
271
- 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>";
272
297
  class S extends H {
273
298
  constructor(t) {
274
299
  super({
275
300
  ...t,
276
- icon: t.icon || O,
301
+ icon: t.icon || T,
277
302
  title: t.title || "Color"
278
303
  }), this.inputType = "color", this.detectChange = t.detectChange;
279
304
  }
280
305
  hexToRgb(t) {
281
306
  t = t.replace("#", "");
282
- const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
283
- 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}`;
284
309
  }
285
310
  rgbToHex(t) {
286
- const [e, i, n] = t.split(",").map((a) => parseInt(a.trim()));
287
- if (isNaN(e) || isNaN(i) || isNaN(n)) return "#000000";
288
- 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) => {
289
314
  const o = a.toString(16);
290
315
  return o.length === 1 ? "0" + o : o;
291
316
  };
292
- return `#${s(e)}${s(i)}${s(n)}`;
317
+ return `#${n(e)}${n(i)}${n(s)}`;
293
318
  }
294
319
  draw() {
295
320
  const t = document.createElement("div");
296
321
  t.className = "color-setting-wrapper";
297
322
  const e = document.createElement("div");
298
323
  e.className = "icon-container";
299
- const i = this.createIcon(this.props.icon || O), n = this.createLabel(this.title || "Color");
300
- e.appendChild(i), e.appendChild(n);
301
- const s = document.createElement("div");
302
- 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";
303
328
  const a = (p) => {
304
329
  const g = p.value.split(",").map((N) => parseInt(N.trim()));
305
330
  if (g.length !== 3 || g.some(isNaN))
@@ -312,24 +337,24 @@ class S extends H {
312
337
  value: this.value,
313
338
  inputType: "text",
314
339
  inputClassName: "color-text-input"
315
- }), h = l.querySelector("input"), r = this.createInput({
340
+ }), r = l.querySelector("input"), h = this.createInput({
316
341
  value: this.value ? this.rgbToHex(this.value) : "",
317
342
  inputType: this.inputType,
318
343
  inputClassName: "color-picker"
319
- }), u = r.querySelector("input");
320
- return h.oninput = (p) => {
344
+ }), u = h.querySelector("input");
345
+ return r.oninput = (p) => {
321
346
  var d;
322
347
  let g = p.target.value.trim();
323
- a(h) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
348
+ a(r) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
324
349
  }, u.oninput = (p) => {
325
350
  var m, f;
326
351
  const g = p.target.value, d = this.hexToRgb(g);
327
- this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), h.value = d, o.style.backgroundColor = `rgb(${d})`;
352
+ 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})`;
328
353
  }, u.onchange = (p) => {
329
354
  var m, f;
330
355
  const g = p.target.value, d = this.hexToRgb(g);
331
- this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), h.value = d, o.style.backgroundColor = `rgb(${d})`;
332
- }, s.appendChild(o), s.appendChild(r), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (h.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
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})`;
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;
333
358
  }
334
359
  }
335
360
  class w extends C {
@@ -337,11 +362,11 @@ class w extends C {
337
362
  super(t), this.inputType = "number";
338
363
  }
339
364
  draw() {
340
- const t = (s) => {
341
- 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", () => {
342
367
  const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
343
- let l = Number(s.value);
344
- 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);
345
370
  });
346
371
  }, e = this.createInput({
347
372
  value: this.value,
@@ -359,8 +384,8 @@ class w extends C {
359
384
  "input.number-setting-input"
360
385
  );
361
386
  i && (i.style.paddingRight = "35px");
362
- const n = document.createElement("span");
363
- 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;
364
389
  }
365
390
  }
366
391
  class M extends w {
@@ -387,7 +412,7 @@ const A = `
387
412
  <polyline points="6 9 12 15 18 9"></polyline>
388
413
  </svg>
389
414
  `;
390
- class T extends C {
415
+ class V extends C {
391
416
  constructor(t = {}) {
392
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) {
393
418
  const e = this._options.findIndex((i) => i.value === this.value);
@@ -401,45 +426,45 @@ class T extends C {
401
426
  draw() {
402
427
  const t = document.createElement("div");
403
428
  if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
404
- const s = document.createElement("div");
405
- if (s.className = "icon-container", this.props.icon) {
429
+ const n = document.createElement("div");
430
+ if (n.className = "icon-container", this.props.icon) {
406
431
  const a = this.createIcon(this.props.icon);
407
- s.appendChild(a);
432
+ n.appendChild(a);
408
433
  }
409
434
  if (this.props.title) {
410
435
  const a = this.createLabel(this.props.title);
411
- s.appendChild(a);
436
+ n.appendChild(a);
412
437
  }
413
- t.appendChild(s);
438
+ t.appendChild(n);
414
439
  } else {
415
- const s = document.createElement("div");
416
- t.appendChild(s);
440
+ const n = document.createElement("div");
441
+ t.appendChild(n);
417
442
  }
418
443
  const e = document.createElement("div");
419
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 = () => {
420
- var s, a;
421
- 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));
422
447
  }, t.appendChild(e), this.buttonEl = e;
423
448
  const i = document.createElement("ul");
424
- i.classList.add("select-options"), this._options.forEach((s, a) => {
425
- const o = this.createOption(s, a);
449
+ i.classList.add("select-options"), this._options.forEach((n, a) => {
450
+ const o = this.createOption(n, a);
426
451
  o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
427
452
  }), t.appendChild(i);
428
- const n = document.createElement("div");
429
- 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) => {
430
- this._options.push(...s), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
431
- }).catch((s) => {
432
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
433
- })), 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) => {
434
459
  var a, o;
435
- 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"));
436
461
  }, document.addEventListener("click", this.clickOutsideListener), t;
437
462
  }
438
463
  selectOption(t, e, i) {
439
- var s, a, o;
440
- const n = this._options[e];
441
- 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((h, r) => {
442
- r === e ? h.classList.add("selected") : h.classList.remove("selected");
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) => {
467
+ h === e ? r.classList.add("selected") : r.classList.remove("selected");
443
468
  }));
444
469
  }
445
470
  updateOptionsList() {
@@ -451,8 +476,8 @@ class T extends C {
451
476
  }
452
477
  this._options.forEach((t, e) => {
453
478
  const i = this.createOption(t, e);
454
- i.onclick = (n) => {
455
- this.buttonEl && this.selectOption(n, e, this.buttonEl);
479
+ i.onclick = (s) => {
480
+ this.buttonEl && this.selectOption(s, e, this.buttonEl);
456
481
  }, this.optionsListEl.appendChild(i);
457
482
  });
458
483
  }
@@ -515,11 +540,11 @@ class _ extends C {
515
540
  </svg>
516
541
  `
517
542
  }
518
- ].forEach((s) => {
543
+ ].forEach((n) => {
519
544
  const a = document.createElement("button");
520
- 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", () => {
521
546
  var o;
522
- 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);
523
548
  }), i.appendChild(a);
524
549
  }), t.appendChild(i), t;
525
550
  }
@@ -584,8 +609,8 @@ class at extends C {
584
609
  }
585
610
  toggleLock(t) {
586
611
  if (this.locked = !this.locked, this.locked && this.value) {
587
- const { width: i, height: n } = this.value;
588
- n > 0 && (this.aspectRatio = i / n);
612
+ const { width: i, height: s } = this.value;
613
+ s > 0 && (this.aspectRatio = i / s);
589
614
  }
590
615
  t.innerHTML = this.getLockSVG(this.locked), t.setAttribute("aria-pressed", String(this.locked)), t.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio";
591
616
  const e = t.closest(".dimension-setting-container");
@@ -619,15 +644,15 @@ class at extends C {
619
644
  draw() {
620
645
  const t = document.createElement("div");
621
646
  t.className = "dimension-setting-container", this.locked && t.classList.add("aspect-locked");
622
- const e = this.widthSetting.draw(), i = this.heightSetting.draw(), n = document.createElement("div");
623
- n.className = "dimension-bracket";
624
- const s = document.createElement("button");
625
- 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(
626
651
  "aria-label",
627
652
  this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
628
- ), s.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", s.innerHTML = this.getLockSVG(this.locked), s.onclick = (a) => {
629
- a.preventDefault(), this.toggleLock(s);
630
- }, 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;
631
656
  }
632
657
  isLocked() {
633
658
  return this.locked;
@@ -635,8 +660,8 @@ class at extends C {
635
660
  setLocked(t) {
636
661
  if (this.locked !== t) {
637
662
  if (this.locked = t, this.locked && this.value) {
638
- const { width: i, height: n } = this.value;
639
- n > 0 && (this.aspectRatio = i / n);
663
+ const { width: i, height: s } = this.value;
664
+ s > 0 && (this.aspectRatio = i / s);
640
665
  }
641
666
  const e = document.querySelector(
642
667
  ".dimension-setting-container .dimension-lock-icon"
@@ -657,7 +682,7 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
657
682
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
658
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"/>
659
684
  </svg>
660
- `, V = `
685
+ `, I = `
661
686
  <svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
662
687
  <rect width="91" height="71" rx="4" fill="#F2F4F7"/>
663
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"/>
@@ -673,13 +698,13 @@ class F extends C {
673
698
  }
674
699
  updatePreviewState(t = null) {
675
700
  if (!this.previewWrapper || !this.previewEl || !this.emptyStateEl) return;
676
- 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(
677
702
  ".preview-placeholder"
678
703
  );
679
- 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 = `
680
705
  <span class="upload-icon">${y}</span>
681
706
  <span class="upload-label">Replace</span>
682
- `)) : (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 = `
683
708
  <span class="upload-icon">${y}</span>
684
709
  <span class="upload-label">Upload</span>
685
710
  `));
@@ -689,23 +714,23 @@ class F extends C {
689
714
  t.className = "upload-setting-wrapper";
690
715
  const e = !!(this.props.title || this.props.icon);
691
716
  if (e || t.classList.add("no-label"), e) {
692
- const h = document.createElement("div");
693
- if (h.className = "icon-title-container", this.props.icon) {
694
- const r = this.createIcon(this.props.icon);
695
- h.appendChild(r);
717
+ const r = document.createElement("div");
718
+ if (r.className = "icon-title-container", this.props.icon) {
719
+ const h = this.createIcon(this.props.icon);
720
+ r.appendChild(h);
696
721
  }
697
722
  if (this.props.title) {
698
- const r = this.createLabel(this.props.title);
699
- h.appendChild(r);
723
+ const h = this.createLabel(this.props.title);
724
+ r.appendChild(h);
700
725
  }
701
- t.appendChild(h);
726
+ t.appendChild(r);
702
727
  }
703
728
  const i = document.createElement("div");
704
729
  i.className = "preview-button-container";
705
- const n = this.value && this.value !== "";
706
- n || i.classList.add("no-image");
707
- const s = document.createElement("div");
708
- 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";
709
734
  const a = document.createElement("button");
710
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);
711
736
  const o = document.createElement("button");
@@ -714,19 +739,19 @@ class F extends C {
714
739
  <span class="upload-label">Upload</span>
715
740
  `;
716
741
  const l = document.createElement("input");
717
- 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 = (h) => {
718
- var r;
719
- h.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
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) => {
743
+ var h;
744
+ r.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, "");
720
745
  }, o.onclick = () => {
721
746
  l.click();
722
747
  }, l.onchange = async () => {
723
- var r, u, p;
724
- const h = (r = l.files) == null ? void 0 : r[0];
725
- if (h)
748
+ var h, u, p;
749
+ const r = (h = l.files) == null ? void 0 : h[0];
750
+ if (r)
726
751
  try {
727
752
  o.classList.add("loading"), o.disabled = !0;
728
753
  const g = new FormData(), d = this.props.formFieldName || "file";
729
- g.append(d, h, h.name);
754
+ g.append(d, r, r.name);
730
755
  const m = this.props.uploadUrl;
731
756
  if (!m)
732
757
  throw new Error("No uploadUrl provided to UploadSetting.");
@@ -735,14 +760,14 @@ class F extends C {
735
760
  body: g,
736
761
  headers: L
737
762
  })).json();
738
- let b;
763
+ let x;
739
764
  if (this.props.parseResponse)
740
- b = this.props.parseResponse(E);
741
- 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)
742
767
  throw new Error(
743
768
  "No URL found in response. Provide a parseResponse if needed."
744
769
  );
745
- 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);
746
771
  } catch (g) {
747
772
  console.error("Error uploading file:", g), this.updatePreviewState(null);
748
773
  } finally {
@@ -797,7 +822,7 @@ const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
797
822
  <polyline points="6 9 12 15 18 9"></polyline>
798
823
  </svg>
799
824
  `;
800
- class rt extends C {
825
+ class ht extends C {
801
826
  constructor(t = {}) {
802
827
  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(
803
828
  (e) => JSON.stringify(e.value) === JSON.stringify(t.default)
@@ -811,8 +836,8 @@ class rt extends C {
811
836
  createOption(t, e) {
812
837
  const i = document.createElement("li");
813
838
  i.classList.add("select-api-option"), i.textContent = t.name, i.dataset.index = String(e);
814
- const n = document.createElement("input");
815
- 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;
816
841
  }
817
842
  draw() {
818
843
  const t = document.createElement("div");
@@ -820,51 +845,51 @@ class rt extends C {
820
845
  const e = document.createElement("div");
821
846
  if (e.classList.add("select-api-button"), this.props.title) {
822
847
  e.classList.add("has-label");
823
- const s = document.createElement("div");
824
- 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);
825
850
  const a = document.createElement("span");
826
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);
827
852
  } else {
828
- const s = document.createElement("span");
829
- 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);
830
855
  }
831
856
  e.onclick = () => {
832
- var s, a;
833
- 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));
834
859
  }, t.appendChild(e), this.buttonEl = e;
835
860
  const i = document.createElement("ul");
836
- i.classList.add("select-api-options"), this._options.forEach((s, a) => {
837
- 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);
838
863
  o.onclick = (l) => this.selectApiOption(l, a, e), i.appendChild(o);
839
864
  }), t.appendChild(i);
840
- const n = document.createElement("div");
841
- return n.classList.add("svg-container"), n.innerHTML = D, t.appendChild(n), n.onclick = () => {
842
- var s, a;
843
- 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));
844
- }, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
845
- 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(
846
871
  (a) => JSON.stringify(a.value) === JSON.stringify(this.value)
847
872
  )), this.updateOptionsList(), this.updateButtonText();
848
- }).catch((s) => {
849
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
850
- })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
851
- 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)));
852
877
  this._options.push(...o), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
853
878
  (l) => JSON.stringify(l.value) === JSON.stringify(this.value)
854
879
  )), this.updateOptionsList(), this.updateButtonText();
855
- }).catch((s) => {
856
- 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");
857
882
  })), t;
858
883
  }
859
884
  selectApiOption(t, e, i) {
860
- var s, a;
861
- const n = this._options[e];
862
- if (n) {
863
- const o = n.value;
864
- 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(
865
890
  ".select-api-radio"
866
- ).forEach((h, r) => {
867
- h.checked = r === e;
891
+ ).forEach((r, h) => {
892
+ r.checked = h === e;
868
893
  });
869
894
  }
870
895
  }
@@ -877,23 +902,23 @@ class rt extends C {
877
902
  }
878
903
  this._options.forEach((t, e) => {
879
904
  const i = this.createOption(t, e);
880
- this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (n) => {
881
- this.buttonEl && this.selectApiOption(n, e, this.buttonEl);
882
- }, i.tabIndex = 0, i.addEventListener("keydown", (n) => {
883
- (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));
884
909
  }), this.optionsListEl.appendChild(i);
885
910
  });
886
911
  }
887
912
  }
888
913
  updateButtonText(t) {
889
914
  if (!this.buttonEl) return;
890
- 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");
891
916
  if (this.isLoading) {
892
917
  this.buttonEl.classList.add("loading");
893
918
  const a = this.props.loadingText || "Loading options...";
894
919
  if (e)
895
920
  e.textContent = a;
896
- else if (i && this.props.title && !n) {
921
+ else if (i && this.props.title && !s) {
897
922
  this.buttonEl.innerHTML = "";
898
923
  const o = document.createElement("div");
899
924
  o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
@@ -904,23 +929,23 @@ class rt extends C {
904
929
  return;
905
930
  }
906
931
  this.buttonEl.classList.remove("loading", "error");
907
- let s;
908
- 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)
909
- e.textContent = s;
910
- 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) {
911
936
  this.buttonEl.innerHTML = "";
912
937
  const a = document.createElement("div");
913
938
  a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
914
939
  const o = document.createElement("span");
915
- o.className = "select-value", o.textContent = s, this.buttonEl.appendChild(o);
940
+ o.className = "select-value", o.textContent = n, this.buttonEl.appendChild(o);
916
941
  } else
917
- this.buttonEl.textContent = s;
942
+ this.buttonEl.textContent = n;
918
943
  }
919
944
  setDetectChange(t) {
920
945
  this.detectChangeCallback = t;
921
946
  }
922
947
  }
923
- class ht extends C {
948
+ class rt extends C {
924
949
  constructor(t) {
925
950
  super(t), this.inputType = "text", this.value = t.default ?? !1;
926
951
  }
@@ -939,12 +964,12 @@ class ht extends C {
939
964
  t.appendChild(e);
940
965
  const i = document.createElement("label");
941
966
  i.className = "toggle-switch";
942
- const n = document.createElement("input");
943
- n.type = "checkbox", n.checked = this.value ?? !1, n.addEventListener("change", () => {
944
- 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);
945
970
  });
946
- const s = document.createElement("span");
947
- 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;
948
973
  }
949
974
  }
950
975
  const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -984,12 +1009,12 @@ class ct extends C {
984
1009
  createGapInput(t, e) {
985
1010
  const i = document.createElement("div");
986
1011
  i.classList.add("gap-input-wrapper");
987
- const n = document.createElement("div");
988
- n.classList.add("gap-label-container");
989
1012
  const s = document.createElement("div");
990
- 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);
991
1016
  const a = document.createElement("label");
992
- 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);
993
1018
  const o = (u) => {
994
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", () => {
995
1020
  var m;
@@ -1007,10 +1032,10 @@ class ct extends C {
1007
1032
  if (!this.props.suffix || this.props.suffix === "none")
1008
1033
  return i.appendChild(l), i;
1009
1034
  l.classList.add("suffix-wrapper");
1010
- const h = l.querySelector("input.gap-setting-input");
1011
- h && (h.style.paddingRight = "35px");
1012
- const r = document.createElement("span");
1013
- return r.className = "suffix-label", r.textContent = this.props.suffix, l.appendChild(r), i.appendChild(l), i;
1035
+ const r = l.querySelector("input.gap-setting-input");
1036
+ r && (r.style.paddingRight = "35px");
1037
+ const h = document.createElement("span");
1038
+ return h.className = "suffix-label", h.textContent = this.props.suffix, l.appendChild(h), i.appendChild(l), i;
1014
1039
  }
1015
1040
  }
1016
1041
  class dt extends C {
@@ -1024,31 +1049,31 @@ class dt extends C {
1024
1049
  const t = document.createElement("div");
1025
1050
  t.classList.add("tabs-settings-container"), this.props.className && t.classList.add(this.props.className);
1026
1051
  const e = document.createElement("div");
1027
- e.classList.add("tabs-header"), this.tabsContainer = e, this.tabs.forEach((n) => {
1028
- const s = document.createElement("button");
1029
- 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);
1030
1055
  }), t.appendChild(e);
1031
1056
  const i = document.createElement("div");
1032
- return i.classList.add("tab-content"), this.contentContainer = i, this.tabs.forEach((n) => {
1033
- const s = document.createElement("div");
1034
- 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);
1035
1060
  }), t.appendChild(i), t;
1036
1061
  }
1037
1062
  handleTabClick(t) {
1038
- var i, n;
1063
+ var i, s;
1039
1064
  if (t === this.activeTabId) return;
1040
1065
  this.previousTabId = this.activeTabId, this.activeTabId = t;
1041
1066
  const e = (i = this.tabsContainer) == null ? void 0 : i.querySelectorAll(".tab-button");
1042
- if (e == null || e.forEach((s) => {
1067
+ if (e == null || e.forEach((n) => {
1043
1068
  var a;
1044
- 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));
1045
1070
  }), this.contentContainer) {
1046
- const s = this.contentContainer.querySelectorAll(".tab-panel"), a = this.tabs.findIndex((l) => l.id === this.previousTabId), o = this.tabs.findIndex((l) => l.id === t);
1047
- s.forEach((l, h) => {
1048
- l instanceof HTMLElement && (h === o ? (l.classList.add("active"), l.classList.remove("slide-left", "slide-right")) : h === a ? (l.classList.remove("active"), l.classList.add(o > a ? "slide-left" : "slide-right")) : l.classList.remove("active", "slide-left", "slide-right"));
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) => {
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"));
1049
1074
  });
1050
1075
  }
1051
- (n = this.onChangeCallback) == null || n.call(this, t);
1076
+ (s = this.onChangeCallback) == null || s.call(this, t);
1052
1077
  }
1053
1078
  setOnChange(t) {
1054
1079
  return this.onChangeCallback = t, this;
@@ -1097,10 +1122,10 @@ class pt extends v {
1097
1122
  * Optional helper to generate CSS from the current settings.
1098
1123
  */
1099
1124
  getCssCode() {
1100
- 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;
1101
1126
  return `
1102
1127
  border-color: ${t};
1103
- border-width: ${n}px;
1128
+ border-width: ${s}px;
1104
1129
  border-radius: ${i}px;
1105
1130
  opacity: ${e / 100};
1106
1131
  `;
@@ -1132,7 +1157,7 @@ class ut extends v {
1132
1157
  opacity: new M({
1133
1158
  default: t.colorOpacityDefault ?? 100
1134
1159
  }),
1135
- fontFamily: new T({
1160
+ fontFamily: new V({
1136
1161
  title: "Font",
1137
1162
  icon: X,
1138
1163
  default: t.fontFamilyDefault ?? "Satoshi",
@@ -1144,7 +1169,7 @@ class ut extends v {
1144
1169
  getOptions: t.fontFamilyGetOptions,
1145
1170
  getOptionsAsync: t.fontFamilyGetOptionsAsync
1146
1171
  }),
1147
- fontWeight: new T({
1172
+ fontWeight: new V({
1148
1173
  title: "Weight",
1149
1174
  icon: Q,
1150
1175
  default: t.fontWeightDefault ?? "400",
@@ -1170,13 +1195,13 @@ class ut extends v {
1170
1195
  });
1171
1196
  }
1172
1197
  getCssCode() {
1173
- 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";
1174
1199
  return `
1175
1200
  color: ${t};
1176
1201
  opacity: ${e / 100};
1177
1202
  font-family: ${i};
1178
- font-weight: ${n};
1179
- font-size: ${s}px;
1203
+ font-weight: ${s};
1204
+ font-size: ${n}px;
1180
1205
  text-align: ${a};
1181
1206
  `;
1182
1207
  }
@@ -1191,9 +1216,9 @@ class k extends C {
1191
1216
  draw() {
1192
1217
  const t = this.value === "auto" ? "text" : "number", e = (o) => {
1193
1218
  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", () => {
1194
- const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, h = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
1195
- let r = Number(o.value);
1196
- r < l && (r = l), r > h && (r = h), o.value = String(r);
1219
+ const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, r = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
1220
+ let h = Number(o.value);
1221
+ h < l && (h = l), h > r && (h = r), o.value = String(h);
1197
1222
  }));
1198
1223
  }, i = this.createInput({
1199
1224
  value: this.value,
@@ -1208,20 +1233,20 @@ class k extends C {
1208
1233
  if (!this.props.suffix || this.props.suffix === "none")
1209
1234
  return i;
1210
1235
  i.classList.add("suffix-wrapper");
1211
- const n = i.querySelector(
1236
+ const s = i.querySelector(
1212
1237
  "input.number-setting-input"
1213
1238
  );
1214
- n && (n.style.paddingRight = "35px");
1215
- const s = document.createElement("span");
1216
- 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);
1217
1242
  const a = i.querySelector("input");
1218
1243
  return a && (a.oninput = (o) => {
1219
1244
  const l = o.target.value.trim();
1220
1245
  if (l.toLowerCase() === "auto")
1221
1246
  this.value = "auto";
1222
1247
  else {
1223
- const h = Number(l);
1224
- isNaN(h) || (this.value = h);
1248
+ const r = Number(l);
1249
+ isNaN(r) || (this.value = r);
1225
1250
  }
1226
1251
  this.onChange && this.onChange(this.value);
1227
1252
  }), i;
@@ -1262,12 +1287,12 @@ class gt extends v {
1262
1287
  });
1263
1288
  }
1264
1289
  getCssCode() {
1265
- 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;
1266
1291
  return `
1267
1292
  margin-top: ${t};
1268
1293
  margin-right: ${e};
1269
1294
  margin-bottom: ${i};
1270
- margin-left: ${n};
1295
+ margin-left: ${s};
1271
1296
  `;
1272
1297
  }
1273
1298
  }
@@ -1303,10 +1328,10 @@ class st extends v {
1303
1328
  e && e.parentElement && e.parentElement.removeChild(e);
1304
1329
  const i = t.querySelector(".setting-group-title");
1305
1330
  if (i) {
1306
- const n = document.createElement("div");
1307
- n.className = "tab-delete-container";
1308
- const s = document.createElement("button");
1309
- 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 = `
1310
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">
1311
1336
  <polyline points="3 6 5 6 21 6"></polyline>
1312
1337
  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
@@ -1314,12 +1339,12 @@ class st extends v {
1314
1339
  <path d="M14 11v6"></path>
1315
1340
  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
1316
1341
  </svg>
1317
- `, s.onclick = () => {
1342
+ `, n.onclick = () => {
1318
1343
  var o;
1319
1344
  return (o = this.onDeleteCallback) == null ? void 0 : o.call(this);
1320
- }, n.appendChild(s);
1345
+ }, s.appendChild(n);
1321
1346
  const a = i.querySelector("h3");
1322
- a ? a.insertAdjacentElement("afterend", n) : i.appendChild(n);
1347
+ a ? a.insertAdjacentElement("afterend", s) : i.appendChild(s);
1323
1348
  }
1324
1349
  return t;
1325
1350
  }
@@ -1446,8 +1471,8 @@ class Ct extends v {
1446
1471
  draw() {
1447
1472
  const t = super.draw(), e = t.querySelector(".setting-group-content");
1448
1473
  if (!e) return t;
1449
- const i = Array.from(e.children), [n, s, a, o] = i;
1450
- 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);
1451
1476
  const l = document.createElement("div");
1452
1477
  return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(a), e.appendChild(o), t;
1453
1478
  }
@@ -1455,7 +1480,7 @@ class Ct extends v {
1455
1480
  * Helper method to generate CSS based on the current settings.
1456
1481
  */
1457
1482
  getCssCode() {
1458
- 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;
1459
1484
  return t ? `
1460
1485
  background-image: url("${t}");
1461
1486
  background-size: cover;
@@ -1463,7 +1488,7 @@ class Ct extends v {
1463
1488
  opacity: ${e / 100};
1464
1489
  ` : `
1465
1490
  background-color: ${i};
1466
- opacity: ${n / 100};
1491
+ opacity: ${s / 100};
1467
1492
  `;
1468
1493
  }
1469
1494
  }
@@ -1480,15 +1505,15 @@ export {
1480
1505
  gt as MarginSettingGroup,
1481
1506
  w as NumberSetting,
1482
1507
  M as OpacitySetting,
1483
- rt as SelectApiSettings,
1484
- T as SelectSetting,
1508
+ ht as SelectApiSettings,
1509
+ V as SelectSetting,
1485
1510
  C as Setting,
1486
1511
  v as SettingGroup,
1487
1512
  H as StringSetting,
1488
1513
  mt as TabsContainerGroup,
1489
1514
  dt as TabsSettings,
1490
- ht as Toggle,
1515
+ rt as Toggle,
1491
1516
  F as UploadSetting,
1492
1517
  lt as WidthSetting,
1493
- B as iterateSettings
1518
+ O as iterateSettings
1494
1519
  };