builder-settings-types 0.0.90 → 0.0.92

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 +233 -224
  3. package/dist/index.d.ts +6 -1
  4. package/package.json +1 -1
package/dist/builder-settings-types.es.js CHANGED
@@ -12,7 +12,7 @@ function B(h, t) {
12
12
  t(e, i);
13
13
  }
14
14
  }
15
- const x = class x {
15
+ const b = class b {
16
16
  constructor(t) {
17
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);
18
18
  }
@@ -28,8 +28,8 @@ const x = class x {
28
28
  }
29
29
  setOnChange(t) {
30
30
  return this.onChange = t, B(this.settings, (e, i) => {
31
- i.setOnChange((s) => {
32
- t(s), this.updateVisibility();
31
+ i.setOnChange((n) => {
32
+ t(n), this.updateVisibility();
33
33
  });
34
34
  }), this;
35
35
  }
@@ -44,18 +44,18 @@ const x = class x {
44
44
  const e = {};
45
45
  for (const i in this.settings)
46
46
  if (this.settings.hasOwnProperty(i)) {
47
- const s = this.settings[i];
48
- s instanceof x ? e[i] = s.getValues() : e[i] = s.value;
47
+ const n = this.settings[i];
48
+ n instanceof b ? e[i] = n.getValues() : e[i] = n.value;
49
49
  }
50
50
  return e;
51
51
  } else {
52
52
  const e = this.settings[t];
53
- return e ? e instanceof x ? e.getValues() : e.value : void 0;
53
+ return e ? e instanceof b ? e.getValues() : e.value : void 0;
54
54
  }
55
55
  }
56
56
  draw() {
57
57
  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");
58
+ 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
59
  const e = document.createElement("div");
60
60
  e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
61
61
  "aria-expanded",
@@ -66,24 +66,24 @@ const x = class x {
66
66
  const r = document.createElement("span");
67
67
  r.className = "group-icon", r.innerHTML = this.icon, i.appendChild(r);
68
68
  }
69
- const s = document.createElement("h3");
70
- s.textContent = this.title, i.appendChild(s);
71
- const n = document.createElement("div");
72
- if (n.className = "actions-section", this.description && this.isCollapsed) {
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
73
  const r = document.createElement("span");
74
74
  r.className = "info-marker", r.innerHTML = `
75
75
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
76
76
  <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
77
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
78
78
  </svg>
79
- `, r.title = this.description, n.appendChild(r);
79
+ `, r.title = this.description, s.appendChild(r);
80
80
  }
81
81
  const o = document.createElement("span");
82
82
  o.className = "setting-group-arrow", o.innerHTML = `
83
83
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
84
84
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
85
85
  </svg>
86
- `, this.isCollapsed && o.classList.add("rotated"), n.appendChild(o);
86
+ `, this.isCollapsed && o.classList.add("rotated"), s.appendChild(o);
87
87
  const a = document.createElement("div");
88
88
  if (a.className = "setting-group-content", this.isCollapsed && (a.classList.add("collapsed"), e.classList.add("collapsed-view"), o.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && a.classList.add("main-content"), this.description && !this.isCollapsed) {
89
89
  const r = document.createElement("div");
@@ -96,23 +96,23 @@ const x = class x {
96
96
  );
97
97
  const r = a.querySelector(
98
98
  ".setting-group-description"
99
- ), u = n.querySelector(".info-marker");
99
+ ), u = s.querySelector(".info-marker");
100
100
  if (this.description)
101
101
  if (this.isCollapsed) {
102
102
  if (r && r.remove(), !u) {
103
- const d = document.createElement("span");
104
- d.className = "info-marker", d.innerHTML = `
103
+ const p = document.createElement("span");
104
+ p.className = "info-marker", p.innerHTML = `
105
105
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
106
106
  <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
107
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
108
108
  </svg>
109
- `, d.title = this.description, n.insertBefore(d, o);
109
+ `, p.title = this.description, s.insertBefore(p, o);
110
110
  }
111
111
  } else {
112
112
  if (!r) {
113
- const d = document.createElement("div");
114
- d.className = "setting-group-description", d.textContent = this.description, a.insertBefore(
115
- d,
113
+ const p = document.createElement("div");
114
+ p.className = "setting-group-description", p.textContent = this.description, a.insertBefore(
115
+ p,
116
116
  a.firstChild
117
117
  );
118
118
  }
@@ -131,7 +131,7 @@ const x = class x {
131
131
  const r = document.createElement("div");
132
132
  r.className = "setting-group-empty", r.textContent = "No settings in this group", a.appendChild(r);
133
133
  }
134
- return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, t;
134
+ return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(a), this.elementRef = t, t;
135
135
  }
136
136
  collapse() {
137
137
  if (!this.elementRef || this.isCollapsed) return;
@@ -158,8 +158,8 @@ const x = class x {
158
158
  this.isHidden ? this.show() : this.hide();
159
159
  }
160
160
  };
161
- x.hiddenElements = /* @__PURE__ */ new Set();
162
- let f = x;
161
+ b.hiddenElements = /* @__PURE__ */ new Set();
162
+ let v = b;
163
163
  function W(h) {
164
164
  switch (h) {
165
165
  case "number":
@@ -178,7 +178,7 @@ function W(h) {
178
178
  return "";
179
179
  }
180
180
  }
181
- class m {
181
+ class C {
182
182
  constructor(t = {}) {
183
183
  this.props = t, this.id = t.id || I(), this.value = this.props.default, this.title = t.title || "";
184
184
  }
@@ -189,7 +189,7 @@ class m {
189
189
  return this.onChange = t, this;
190
190
  }
191
191
  setValue(t) {
192
- this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t);
192
+ this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t), this.props.detectChange && this.props.detectChange(t);
193
193
  }
194
194
  createInput(t) {
195
195
  t = { ...this.props.inputProps, ...t };
@@ -208,9 +208,9 @@ class m {
208
208
  }
209
209
  const i = document.createElement("div");
210
210
  i.className = t.wrapperClassName || "";
211
- const s = document.createElement("input");
212
- this.inputEl = s, s.value = String(t.value || W(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "";
213
- const n = (o) => {
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 = (o) => {
214
214
  const a = o.target;
215
215
  let l = a.value;
216
216
  switch (t.inputType) {
@@ -235,9 +235,9 @@ class m {
235
235
  default:
236
236
  l = a.value;
237
237
  }
238
- this.value = l, this.onChange && this.onChange(this.value);
238
+ this.value = l, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
239
239
  };
240
- return s.addEventListener("input", n), s.addEventListener("change", n), t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
240
+ return n.addEventListener("input", s), n.addEventListener("change", s), t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
241
241
  }
242
242
  createLabel(t, e) {
243
243
  const i = document.createElement("span");
@@ -248,7 +248,7 @@ class m {
248
248
  return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
249
249
  }
250
250
  }
251
- class H extends m {
251
+ class H extends C {
252
252
  constructor(t = {}) {
253
253
  super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
254
254
  }
@@ -275,37 +275,37 @@ class S extends H {
275
275
  ...t,
276
276
  icon: t.icon || O,
277
277
  title: t.title || "Color"
278
- }), this.inputType = "color";
278
+ }), this.inputType = "color", this.detectChange = t.detectChange;
279
279
  }
280
280
  hexToRgb(t) {
281
281
  t = t.replace("#", "");
282
- const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), s = parseInt(t.substring(4, 6), 16);
283
- return `${e}, ${i}, ${s}`;
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}`;
284
284
  }
285
285
  rgbToHex(t) {
286
- const [e, i, s] = t.split(",").map((o) => parseInt(o.trim()));
287
- if (isNaN(e) || isNaN(i) || isNaN(s)) return "#000000";
288
- const n = (o) => {
286
+ const [e, i, n] = t.split(",").map((o) => parseInt(o.trim()));
287
+ if (isNaN(e) || isNaN(i) || isNaN(n)) return "#000000";
288
+ const s = (o) => {
289
289
  const a = o.toString(16);
290
290
  return a.length === 1 ? "0" + a : a;
291
291
  };
292
- return `#${n(e)}${n(i)}${n(s)}`;
292
+ return `#${s(e)}${s(i)}${s(n)}`;
293
293
  }
294
294
  draw() {
295
295
  const t = document.createElement("div");
296
296
  t.className = "color-setting-wrapper";
297
297
  const e = document.createElement("div");
298
298
  e.className = "icon-container";
299
- const i = this.createIcon(this.props.icon || O), s = this.createLabel(this.title || "Color");
300
- e.appendChild(i), e.appendChild(s);
301
- const n = document.createElement("div");
302
- n.className = "color-input-wrapper";
303
- const o = (d) => {
304
- const g = d.value.split(",").map((N) => parseInt(N.trim()));
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";
303
+ const o = (p) => {
304
+ const g = p.value.split(",").map((N) => parseInt(N.trim()));
305
305
  if (g.length !== 3 || g.some(isNaN))
306
- return d.style.border = "1px solid red", !1;
307
- const [p, C, b] = g, L = p >= 0 && p <= 255 && C >= 0 && C <= 255 && b >= 0 && b <= 255;
308
- return d.style.border = L ? "" : "1px solid red", L;
306
+ return p.style.border = "1px solid red", !1;
307
+ const [d, m, f] = g, L = d >= 0 && d <= 255 && m >= 0 && m <= 255 && f >= 0 && f <= 255;
308
+ return p.style.border = L ? "" : "1px solid red", L;
309
309
  }, a = document.createElement("div");
310
310
  a.className = "color-preview", a.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
311
311
  const l = this.createInput({
@@ -317,27 +317,31 @@ class S extends H {
317
317
  inputType: this.inputType,
318
318
  inputClassName: "color-picker"
319
319
  }), u = r.querySelector("input");
320
- return c.oninput = (d) => {
321
- var p;
322
- let g = d.target.value.trim();
323
- o(c) && (this.value = g, (p = this.onChange) == null || p.call(this, g), u.value = this.rgbToHex(g), a.style.backgroundColor = `rgb(${g})`);
324
- }, u.oninput = (d) => {
325
- var C;
326
- const g = d.target.value, p = this.hexToRgb(g);
327
- this.value = p, (C = this.onChange) == null || C.call(this, p), c.value = p, a.style.backgroundColor = `rgb(${p})`;
328
- }, n.appendChild(a), n.appendChild(r), n.appendChild(l), t.appendChild(e), t.appendChild(n), this.value && (c.value = this.value, u.value = this.rgbToHex(this.value), a.style.backgroundColor = `rgb(${this.value})`), t;
320
+ return c.oninput = (p) => {
321
+ var d;
322
+ let g = p.target.value.trim();
323
+ o(c) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), a.style.backgroundColor = `rgb(${g})`);
324
+ }, u.oninput = (p) => {
325
+ var m, f;
326
+ 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), c.value = d, a.style.backgroundColor = `rgb(${d})`;
328
+ }, u.onchange = (p) => {
329
+ var m, f;
330
+ 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), c.value = d, a.style.backgroundColor = `rgb(${d})`;
332
+ }, s.appendChild(a), s.appendChild(r), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (c.value = this.value, u.value = this.rgbToHex(this.value), a.style.backgroundColor = `rgb(${this.value})`), t;
329
333
  }
330
334
  }
331
- class v extends m {
335
+ class w extends C {
332
336
  constructor(t = {}) {
333
337
  super(t), this.inputType = "number";
334
338
  }
335
339
  draw() {
336
- const t = (n) => {
337
- 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", () => {
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", () => {
338
342
  const o = this.props.minValue ?? Number.MIN_SAFE_INTEGER, a = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
339
- let l = Number(n.value);
340
- l < o && (l = o), l > a && (l = a), n.value = String(l);
343
+ let l = Number(s.value);
344
+ l < o && (l = o), l > a && (l = a), s.value = String(l);
341
345
  });
342
346
  }, e = this.createInput({
343
347
  value: this.value,
@@ -355,11 +359,11 @@ class v extends m {
355
359
  "input.number-setting-input"
356
360
  );
357
361
  i && (i.style.paddingRight = "35px");
358
- const s = document.createElement("span");
359
- return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
362
+ const n = document.createElement("span");
363
+ return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
360
364
  }
361
365
  }
362
- class M extends v {
366
+ class M extends w {
363
367
  constructor(t) {
364
368
  super({
365
369
  ...t,
@@ -383,7 +387,7 @@ const A = `
383
387
  <polyline points="6 9 12 15 18 9"></polyline>
384
388
  </svg>
385
389
  `;
386
- class V extends m {
390
+ class V extends C {
387
391
  constructor(t = {}) {
388
392
  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) {
389
393
  const e = this._options.findIndex((i) => i.value === this.value);
@@ -397,44 +401,44 @@ class V extends m {
397
401
  draw() {
398
402
  const t = document.createElement("div");
399
403
  if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
400
- const n = document.createElement("div");
401
- if (n.className = "icon-container", this.props.icon) {
404
+ const s = document.createElement("div");
405
+ if (s.className = "icon-container", this.props.icon) {
402
406
  const o = this.createIcon(this.props.icon);
403
- n.appendChild(o);
407
+ s.appendChild(o);
404
408
  }
405
409
  if (this.props.title) {
406
410
  const o = this.createLabel(this.props.title);
407
- n.appendChild(o);
411
+ s.appendChild(o);
408
412
  }
409
- t.appendChild(n);
413
+ t.appendChild(s);
410
414
  } else {
411
- const n = document.createElement("div");
412
- t.appendChild(n);
415
+ const s = document.createElement("div");
416
+ t.appendChild(s);
413
417
  }
414
418
  const e = document.createElement("div");
415
419
  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 = () => {
416
- var n, o;
417
- this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
420
+ var s, o;
421
+ this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
418
422
  }, t.appendChild(e), this.buttonEl = e;
419
423
  const i = document.createElement("ul");
420
- i.classList.add("select-options"), this._options.forEach((n, o) => {
421
- const a = this.createOption(n, o);
424
+ i.classList.add("select-options"), this._options.forEach((s, o) => {
425
+ const a = this.createOption(s, o);
422
426
  a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
423
427
  }), t.appendChild(i);
424
- const s = document.createElement("div");
425
- 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) => {
426
- this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
427
- }).catch((n) => {
428
- console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
429
- })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (n) => {
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) => {
430
434
  var o, a;
431
- this.isOpen && !t.contains(n.target) && (this.isOpen = !1, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"));
435
+ this.isOpen && !t.contains(s.target) && (this.isOpen = !1, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"));
432
436
  }, document.addEventListener("click", this.clickOutsideListener), t;
433
437
  }
434
438
  selectOption(t, e, i) {
435
- var n, o, a;
436
- const s = this._options[e];
437
- s && (this.value = s.value, (n = this.onChange) == null || n.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = s.name, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((c, r) => {
439
+ var s, o, a;
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, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((c, r) => {
438
442
  r === e ? c.classList.add("selected") : c.classList.remove("selected");
439
443
  }));
440
444
  }
@@ -447,8 +451,8 @@ class V extends m {
447
451
  }
448
452
  this._options.forEach((t, e) => {
449
453
  const i = this.createOption(t, e);
450
- i.onclick = (s) => {
451
- this.buttonEl && this.selectOption(s, e, this.buttonEl);
454
+ i.onclick = (n) => {
455
+ this.buttonEl && this.selectOption(n, e, this.buttonEl);
452
456
  }, this.optionsListEl.appendChild(i);
453
457
  });
454
458
  }
@@ -467,7 +471,7 @@ class V extends m {
467
471
  this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), super.destroy();
468
472
  }
469
473
  }
470
- class _ extends m {
474
+ class _ extends C {
471
475
  constructor(t = {}) {
472
476
  super(t), this.inputType = "button", this.value || (this.value = "center");
473
477
  }
@@ -511,16 +515,16 @@ class _ extends m {
511
515
  </svg>
512
516
  `
513
517
  }
514
- ].forEach((n) => {
518
+ ].forEach((s) => {
515
519
  const o = document.createElement("button");
516
- o.className = "align-option-button", o.innerHTML = n.icon, this.value === n.name && o.classList.add("selected"), o.addEventListener("click", () => {
520
+ o.className = "align-option-button", o.innerHTML = s.icon, this.value === s.name && o.classList.add("selected"), o.addEventListener("click", () => {
517
521
  var a;
518
- i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), o.classList.add("selected"), this.value = n.name, (a = this.onChange) == null || a.call(this, this.value);
522
+ i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), o.classList.add("selected"), this.value = s.name, (a = this.onChange) == null || a.call(this, this.value);
519
523
  }), i.appendChild(o);
520
524
  }), t.appendChild(i), t;
521
525
  }
522
526
  }
523
- class nt extends m {
527
+ class nt extends C {
524
528
  constructor(t) {
525
529
  super(t), this.inputType = "button";
526
530
  }
@@ -533,21 +537,21 @@ class nt extends m {
533
537
  return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
534
538
  }
535
539
  }
536
- class ot extends m {
540
+ class ot extends C {
537
541
  constructor(t = {}) {
538
542
  super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
539
543
  const e = t.width || 100, i = t.height || 100;
540
544
  this.value || (this.value = {
541
545
  width: e,
542
546
  height: i
543
- }), this.minWidth = Math.max(1, t.minWidth || 1), this.maxWidth = t.maxWidth, this.minHeight = Math.max(1, t.minHeight || 1), this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, (!this.value.width || this.value.width < 1) && (this.value.width = 1), (!this.value.height || this.value.height < 1) && (this.value.height = 1), this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new v({
547
+ }), this.minWidth = Math.max(1, t.minWidth || 1), this.maxWidth = t.maxWidth, this.minHeight = Math.max(1, t.minHeight || 1), this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, (!this.value.width || this.value.width < 1) && (this.value.width = 1), (!this.value.height || this.value.height < 1) && (this.value.height = 1), this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new w({
544
548
  title: "Width",
545
549
  default: this.value.width,
546
550
  suffix: "px",
547
551
  minValue: this.minWidth,
548
552
  maxValue: this.maxWidth,
549
553
  icon: j
550
- }), this.heightSetting = new v({
554
+ }), this.heightSetting = new w({
551
555
  title: "Height",
552
556
  default: this.value.height,
553
557
  suffix: "px",
@@ -580,8 +584,8 @@ class ot extends m {
580
584
  }
581
585
  toggleLock(t) {
582
586
  if (this.locked = !this.locked, this.locked && this.value) {
583
- const { width: i, height: s } = this.value;
584
- s > 0 && (this.aspectRatio = i / s);
587
+ const { width: i, height: n } = this.value;
588
+ n > 0 && (this.aspectRatio = i / n);
585
589
  }
586
590
  t.innerHTML = this.getLockSVG(this.locked), t.setAttribute("aria-pressed", String(this.locked)), t.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio";
587
591
  const e = t.closest(".dimension-setting-container");
@@ -615,15 +619,15 @@ class ot extends m {
615
619
  draw() {
616
620
  const t = document.createElement("div");
617
621
  t.className = "dimension-setting-container", this.locked && t.classList.add("aspect-locked");
618
- const e = this.widthSetting.draw(), i = this.heightSetting.draw(), s = document.createElement("div");
619
- s.className = "dimension-bracket";
620
- const n = document.createElement("button");
621
- return n.className = "dimension-lock-icon", n.setAttribute("type", "button"), n.setAttribute("aria-pressed", String(this.locked)), n.setAttribute(
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(
622
626
  "aria-label",
623
627
  this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
624
- ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (o) => {
625
- o.preventDefault(), this.toggleLock(n);
626
- }, s.appendChild(n), t.appendChild(e), t.appendChild(s), t.appendChild(i), t;
628
+ ), s.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", s.innerHTML = this.getLockSVG(this.locked), s.onclick = (o) => {
629
+ o.preventDefault(), this.toggleLock(s);
630
+ }, n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
627
631
  }
628
632
  isLocked() {
629
633
  return this.locked;
@@ -631,8 +635,8 @@ class ot extends m {
631
635
  setLocked(t) {
632
636
  if (this.locked !== t) {
633
637
  if (this.locked = t, this.locked && this.value) {
634
- const { width: i, height: s } = this.value;
635
- s > 0 && (this.aspectRatio = i / s);
638
+ const { width: i, height: n } = this.value;
639
+ n > 0 && (this.aspectRatio = i / n);
636
640
  }
637
641
  const e = document.querySelector(
638
642
  ".dimension-setting-container .dimension-lock-icon"
@@ -663,19 +667,19 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
663
667
  <path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
664
668
  </svg>
665
669
  `;
666
- class F extends m {
670
+ class F extends C {
667
671
  constructor(t = {}) {
668
672
  super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
669
673
  }
670
674
  updatePreviewState(t = null) {
671
675
  if (!this.previewWrapper || !this.previewEl || !this.emptyStateEl) return;
672
- const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), s = e == null ? void 0 : e.querySelector(
676
+ const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), n = e == null ? void 0 : e.querySelector(
673
677
  ".preview-placeholder"
674
678
  );
675
- 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 = `
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 = `
676
680
  <span class="upload-icon">${y}</span>
677
681
  <span class="upload-label">Replace</span>
678
- `)) : (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 = `
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 = `
679
683
  <span class="upload-icon">${y}</span>
680
684
  <span class="upload-label">Upload</span>
681
685
  `));
@@ -698,10 +702,10 @@ class F extends m {
698
702
  }
699
703
  const i = document.createElement("div");
700
704
  i.className = "preview-button-container";
701
- const s = this.value && this.value !== "";
702
- s || i.classList.add("no-image");
703
- const n = document.createElement("div");
704
- n.className = "preview-placeholder", n.innerHTML = T, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = T, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
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 = T, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = T, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
705
709
  const o = document.createElement("button");
706
710
  o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML = q, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(o);
707
711
  const a = document.createElement("button");
@@ -710,35 +714,35 @@ class F extends m {
710
714
  <span class="upload-label">Upload</span>
711
715
  `;
712
716
  const l = document.createElement("input");
713
- return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), t.appendChild(l), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = (c) => {
717
+ return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), t.appendChild(l), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = (c) => {
714
718
  var r;
715
719
  c.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
716
720
  }, a.onclick = () => {
717
721
  l.click();
718
722
  }, l.onchange = async () => {
719
- var r, u, d;
723
+ var r, u, p;
720
724
  const c = (r = l.files) == null ? void 0 : r[0];
721
725
  if (c)
722
726
  try {
723
727
  a.classList.add("loading"), a.disabled = !0;
724
- const g = new FormData(), p = this.props.formFieldName || "file";
725
- g.append(p, c, c.name);
726
- const C = this.props.uploadUrl;
727
- if (!C)
728
+ const g = new FormData(), d = this.props.formFieldName || "file";
729
+ g.append(d, c, c.name);
730
+ const m = this.props.uploadUrl;
731
+ if (!m)
728
732
  throw new Error("No uploadUrl provided to UploadSetting.");
729
- const b = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(C, {
730
- method: b,
733
+ const f = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(m, {
734
+ method: f,
731
735
  body: g,
732
736
  headers: L
733
737
  })).json();
734
- let w;
738
+ let x;
735
739
  if (this.props.parseResponse)
736
- w = this.props.parseResponse(E);
737
- else if (w = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !w)
740
+ x = this.props.parseResponse(E);
741
+ else if (x = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !x)
738
742
  throw new Error(
739
743
  "No URL found in response. Provide a parseResponse if needed."
740
744
  );
741
- this.value = w, this.updatePreviewState(w), (d = this.onChange) == null || d.call(this, w);
745
+ this.value = x, this.updatePreviewState(x), (p = this.onChange) == null || p.call(this, x);
742
746
  } catch (g) {
743
747
  console.error("Error uploading file:", g), this.updatePreviewState(null);
744
748
  } finally {
@@ -747,9 +751,9 @@ class F extends m {
747
751
  }, t;
748
752
  }
749
753
  }
750
- class at extends m {
754
+ class at extends C {
751
755
  constructor(t = {}) {
752
- super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
756
+ super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
753
757
  title: "Height",
754
758
  default: this.value,
755
759
  suffix: "px",
@@ -768,9 +772,9 @@ class at extends m {
768
772
  const z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
769
773
  <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
770
774
  </svg>`;
771
- class lt extends m {
775
+ class lt extends C {
772
776
  constructor(t = {}) {
773
- super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
777
+ super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
774
778
  title: "Width",
775
779
  default: this.value,
776
780
  suffix: "px",
@@ -788,16 +792,16 @@ class lt extends m {
788
792
  }
789
793
  const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
790
794
  <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
791
- </svg>`, Z = `
795
+ </svg>`, D = `
792
796
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
793
797
  <polyline points="6 9 12 15 18 9"></polyline>
794
798
  </svg>
795
799
  `;
796
- class rt extends m {
800
+ class rt extends C {
797
801
  constructor(t = {}) {
798
802
  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(
799
803
  (e) => JSON.stringify(e.value) === JSON.stringify(t.default)
800
- )), t.onChange && this.setOnChange(t.onChange), t.detechChange && this.setOnChange(t.detechChange);
804
+ )), t.onChange && this.setOnChange(t.onChange), t.detectChange && (this.detectChangeCallback = t.detectChange);
801
805
  }
802
806
  initializeOptions(t) {
803
807
  this.hasInitializedOptions || (this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync ? (this.isLoading = !0, t.default !== void 0 && (this.value = t.default)) : t.default !== void 0 && (this.selectedOptionIndex = this._options.findIndex(
@@ -807,8 +811,8 @@ class rt extends m {
807
811
  createOption(t, e) {
808
812
  const i = document.createElement("li");
809
813
  i.classList.add("select-api-option"), i.textContent = t.name, i.dataset.index = String(e);
810
- const s = document.createElement("input");
811
- 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;
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;
812
816
  }
813
817
  draw() {
814
818
  const t = document.createElement("div");
@@ -816,46 +820,48 @@ class rt extends m {
816
820
  const e = document.createElement("div");
817
821
  if (e.classList.add("select-api-button"), this.props.title) {
818
822
  e.classList.add("has-label");
819
- const n = document.createElement("div");
820
- n.className = "select-label", n.textContent = this.props.title, e.appendChild(n);
823
+ const s = document.createElement("div");
824
+ s.className = "select-label", s.textContent = this.props.title, e.appendChild(s);
821
825
  const o = document.createElement("span");
822
826
  o.className = "select-value", this.isLoading ? o.textContent = this.props.loadingText || "Loading options..." : o.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(o);
823
- } else
824
- this.isLoading ? e.textContent = this.props.loadingText || "Loading options..." : e.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option";
827
+ } 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);
830
+ }
825
831
  e.onclick = () => {
826
- var n, o;
827
- this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
832
+ var s, o;
833
+ this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
828
834
  }, t.appendChild(e), this.buttonEl = e;
829
835
  const i = document.createElement("ul");
830
- i.classList.add("select-api-options"), this._options.forEach((n, o) => {
831
- const a = this.createOption(n, o);
836
+ i.classList.add("select-api-options"), this._options.forEach((s, o) => {
837
+ const a = this.createOption(s, o);
832
838
  a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
833
839
  }), t.appendChild(i);
834
- const s = document.createElement("div");
835
- return s.classList.add("svg-container"), s.innerHTML = Z, t.appendChild(s), s.onclick = () => {
836
- var n, o;
837
- this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
838
- }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
839
- this._options.push(...n), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
840
+ const n = document.createElement("div");
841
+ return n.classList.add("svg-container"), n.innerHTML = D, t.appendChild(n), n.onclick = () => {
842
+ var s, o;
843
+ this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.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(
840
846
  (o) => JSON.stringify(o.value) === JSON.stringify(this.value)
841
847
  )), this.updateOptionsList(), this.updateButtonText();
842
- }).catch((n) => {
843
- console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
844
- })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
845
- const o = new Set(this._options.map((l) => JSON.stringify(l.value))), a = n.filter((l) => !o.has(JSON.stringify(l.value)));
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 o = new Set(this._options.map((l) => JSON.stringify(l.value))), a = s.filter((l) => !o.has(JSON.stringify(l.value)));
846
852
  this._options.push(...a), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
847
853
  (l) => JSON.stringify(l.value) === JSON.stringify(this.value)
848
854
  )), this.updateOptionsList(), this.updateButtonText();
849
- }).catch((n) => {
850
- console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
855
+ }).catch((s) => {
856
+ console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
851
857
  })), t;
852
858
  }
853
859
  selectApiOption(t, e, i) {
854
- var n, o;
855
- const s = this._options[e];
856
- if (s) {
857
- const a = s.value;
858
- this.value = a, this.onChange && this.onChange(a), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (n = this.optionsListEl) == null || n.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
860
+ var s, o;
861
+ const n = this._options[e];
862
+ if (n) {
863
+ const a = n.value;
864
+ this.value = a, this.onChange && this.onChange(a), this.detectChangeCallback && this.detectChangeCallback(a), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (s = this.optionsListEl) == null || s.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
859
865
  ".select-api-radio"
860
866
  ).forEach((c, r) => {
861
867
  c.checked = r === e;
@@ -871,23 +877,23 @@ class rt extends m {
871
877
  }
872
878
  this._options.forEach((t, e) => {
873
879
  const i = this.createOption(t, e);
874
- this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (s) => {
875
- this.buttonEl && this.selectApiOption(s, e, this.buttonEl);
876
- }, i.tabIndex = 0, i.addEventListener("keydown", (s) => {
877
- (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.buttonEl && this.selectApiOption(s, e, this.buttonEl));
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));
878
884
  }), this.optionsListEl.appendChild(i);
879
885
  });
880
886
  }
881
887
  }
882
888
  updateButtonText(t) {
883
889
  if (!this.buttonEl) return;
884
- const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), s = this.buttonEl.querySelector(".select-label");
890
+ const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), n = this.buttonEl.querySelector(".select-label");
885
891
  if (this.isLoading) {
886
892
  this.buttonEl.classList.add("loading");
887
893
  const o = this.props.loadingText || "Loading options...";
888
894
  if (e)
889
895
  e.textContent = o;
890
- else if (i && this.props.title && !s) {
896
+ else if (i && this.props.title && !n) {
891
897
  this.buttonEl.innerHTML = "";
892
898
  const a = document.createElement("div");
893
899
  a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
@@ -898,20 +904,23 @@ class rt extends m {
898
904
  return;
899
905
  }
900
906
  this.buttonEl.classList.remove("loading", "error");
901
- let n;
902
- 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)
903
- e.textContent = n;
904
- else if (i && this.props.title && !s) {
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) {
905
911
  this.buttonEl.innerHTML = "";
906
912
  const o = document.createElement("div");
907
913
  o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
908
914
  const a = document.createElement("span");
909
- a.className = "select-value", a.textContent = n, this.buttonEl.appendChild(a);
915
+ a.className = "select-value", a.textContent = s, this.buttonEl.appendChild(a);
910
916
  } else
911
- this.buttonEl.textContent = n;
917
+ this.buttonEl.textContent = s;
918
+ }
919
+ setDetectChange(t) {
920
+ this.detectChangeCallback = t;
912
921
  }
913
922
  }
914
- class ht extends m {
923
+ class ht extends C {
915
924
  constructor(t) {
916
925
  super(t), this.inputType = "text", this.value = t.default ?? !1;
917
926
  }
@@ -930,18 +939,18 @@ class ht extends m {
930
939
  t.appendChild(e);
931
940
  const i = document.createElement("label");
932
941
  i.className = "toggle-switch";
933
- const s = document.createElement("input");
934
- s.type = "checkbox", s.checked = this.value ?? !1, s.addEventListener("change", () => {
935
- this.value = s.checked, this.onChange && this.onChange(this.value);
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);
936
945
  });
937
- const n = document.createElement("span");
938
- return n.className = "toggle-slider", i.appendChild(s), i.appendChild(n), t.appendChild(i), t;
946
+ const s = document.createElement("span");
947
+ return s.className = "toggle-slider", i.appendChild(n), i.appendChild(s), t.appendChild(i), t;
939
948
  }
940
949
  }
941
- const D = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
950
+ const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
942
951
  <path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
943
952
  </svg>`;
944
- class ct extends m {
953
+ class ct extends C {
945
954
  constructor(t = {}) {
946
955
  super(t), this.inputType = "number", this.inputValues = {};
947
956
  }
@@ -975,18 +984,18 @@ class ct extends m {
975
984
  createGapInput(t, e) {
976
985
  const i = document.createElement("div");
977
986
  i.classList.add("gap-input-wrapper");
978
- const s = document.createElement("div");
979
- s.classList.add("gap-label-container");
980
987
  const n = document.createElement("div");
981
- n.classList.add("gap-setting-icon"), n.innerHTML = this.props.icon || D, s.appendChild(n);
988
+ n.classList.add("gap-label-container");
989
+ const s = document.createElement("div");
990
+ s.classList.add("gap-setting-icon"), s.innerHTML = this.props.icon || Z, n.appendChild(s);
982
991
  const o = document.createElement("label");
983
- o.classList.add("gap-input-label"), o.textContent = t, s.appendChild(o), i.appendChild(s);
992
+ o.classList.add("gap-input-label"), o.textContent = t, n.appendChild(o), i.appendChild(n);
984
993
  const a = (u) => {
985
994
  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", () => {
986
- var C;
987
- const d = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
988
- let p = Number(u.value);
989
- p < d && (p = d), p > g && (p = g), u.value = String(p), this.value = p, this.inputValues[t] = p, console.log(`Gap Setting (${t}): ${p}${this.props.suffix || ""}`), (C = this.onChange) == null || C.call(this, p);
995
+ var m;
996
+ const p = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
997
+ let d = Number(u.value);
998
+ d < p && (d = p), d > g && (d = g), u.value = String(d), this.value = d, this.inputValues[t] = d, console.log(`Gap Setting (${t}): ${d}${this.props.suffix || ""}`), (m = this.onChange) == null || m.call(this, d);
990
999
  });
991
1000
  }, l = this.createInput({
992
1001
  value: e,
@@ -1013,14 +1022,14 @@ const J = `
1013
1022
  <path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1014
1023
  </svg>
1015
1024
  `;
1016
- class dt extends f {
1025
+ class dt extends v {
1017
1026
  constructor(t) {
1018
1027
  super({
1019
1028
  title: "Border",
1020
1029
  collapsed: t == null ? void 0 : t.collapsed,
1021
1030
  hideCondition: t == null ? void 0 : t.hideCondition,
1022
1031
  settings: {
1023
- size: new v({
1032
+ size: new w({
1024
1033
  title: "Size",
1025
1034
  icon: P,
1026
1035
  default: (t == null ? void 0 : t.size) ?? 0,
@@ -1034,7 +1043,7 @@ class dt extends f {
1034
1043
  minValue: 0,
1035
1044
  maxValue: 100
1036
1045
  }),
1037
- radius: new v({
1046
+ radius: new w({
1038
1047
  title: "Radius",
1039
1048
  icon: J,
1040
1049
  default: (t == null ? void 0 : t.radius) ?? 12,
@@ -1047,10 +1056,10 @@ class dt extends f {
1047
1056
  * Optional helper to generate CSS from the current settings.
1048
1057
  */
1049
1058
  getCssCode() {
1050
- 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;
1059
+ 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;
1051
1060
  return `
1052
1061
  border-color: ${t};
1053
- border-width: ${s}px;
1062
+ border-width: ${n}px;
1054
1063
  border-radius: ${i}px;
1055
1064
  opacity: ${e / 100};
1056
1065
  `;
@@ -1069,7 +1078,7 @@ const X = `
1069
1078
  <path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1070
1079
  </svg>
1071
1080
  `;
1072
- class pt extends f {
1081
+ class pt extends v {
1073
1082
  constructor(t = {}) {
1074
1083
  super({
1075
1084
  title: t.title || "Typography",
@@ -1106,7 +1115,7 @@ class pt extends f {
1106
1115
  getOptions: t.fontWeightGetOptions,
1107
1116
  getOptionsAsync: t.fontWeightGetOptionsAsync
1108
1117
  }),
1109
- fontSize: new v({
1118
+ fontSize: new w({
1110
1119
  title: "Size",
1111
1120
  icon: Y,
1112
1121
  default: t.fontSizeDefault ?? 12,
@@ -1120,18 +1129,18 @@ class pt extends f {
1120
1129
  });
1121
1130
  }
1122
1131
  getCssCode() {
1123
- 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, o = this.settings.align.value ?? "left";
1132
+ 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, o = this.settings.align.value ?? "left";
1124
1133
  return `
1125
1134
  color: ${t};
1126
1135
  opacity: ${e / 100};
1127
1136
  font-family: ${i};
1128
- font-weight: ${s};
1129
- font-size: ${n}px;
1137
+ font-weight: ${n};
1138
+ font-size: ${s}px;
1130
1139
  text-align: ${o};
1131
1140
  `;
1132
1141
  }
1133
1142
  }
1134
- class k extends m {
1143
+ class k extends C {
1135
1144
  constructor(t) {
1136
1145
  super({
1137
1146
  ...t,
@@ -1158,12 +1167,12 @@ class k extends m {
1158
1167
  if (!this.props.suffix || this.props.suffix === "none")
1159
1168
  return i;
1160
1169
  i.classList.add("suffix-wrapper");
1161
- const s = i.querySelector(
1170
+ const n = i.querySelector(
1162
1171
  "input.number-setting-input"
1163
1172
  );
1164
- s && (s.style.paddingRight = "35px");
1165
- const n = document.createElement("span");
1166
- n.className = "suffix-label", n.textContent = this.props.suffix, i.appendChild(n);
1173
+ n && (n.style.paddingRight = "35px");
1174
+ const s = document.createElement("span");
1175
+ s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
1167
1176
  const o = i.querySelector("input");
1168
1177
  return o && (o.oninput = (a) => {
1169
1178
  const l = a.target.value.trim();
@@ -1177,7 +1186,7 @@ class k extends m {
1177
1186
  }), i;
1178
1187
  }
1179
1188
  }
1180
- class ut extends f {
1189
+ class ut extends v {
1181
1190
  constructor(t) {
1182
1191
  super({
1183
1192
  title: "Margins",
@@ -1212,12 +1221,12 @@ class ut extends f {
1212
1221
  });
1213
1222
  }
1214
1223
  getCssCode() {
1215
- 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;
1224
+ 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;
1216
1225
  return `
1217
1226
  margin-top: ${t};
1218
1227
  margin-right: ${e};
1219
1228
  margin-bottom: ${i};
1220
- margin-left: ${s};
1229
+ margin-left: ${n};
1221
1230
  `;
1222
1231
  }
1223
1232
  }
@@ -1230,7 +1239,7 @@ const K = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
1230
1239
  </svg>`, it = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1231
1240
  <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1232
1241
  </svg>`;
1233
- class st extends f {
1242
+ class st extends v {
1234
1243
  constructor(t, e, i) {
1235
1244
  super({
1236
1245
  title: `Tab ${t + 1}`,
@@ -1253,10 +1262,10 @@ class st extends f {
1253
1262
  e && e.parentElement && e.parentElement.removeChild(e);
1254
1263
  const i = t.querySelector(".setting-group-title");
1255
1264
  if (i) {
1256
- const s = document.createElement("div");
1257
- s.className = "tab-delete-container";
1258
- const n = document.createElement("button");
1259
- n.className = "tab-delete-button", n.innerHTML = `
1265
+ const n = document.createElement("div");
1266
+ n.className = "tab-delete-container";
1267
+ const s = document.createElement("button");
1268
+ s.className = "tab-delete-button", s.innerHTML = `
1260
1269
  <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">
1261
1270
  <polyline points="3 6 5 6 21 6"></polyline>
1262
1271
  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
@@ -1264,17 +1273,17 @@ class st extends f {
1264
1273
  <path d="M14 11v6"></path>
1265
1274
  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
1266
1275
  </svg>
1267
- `, n.onclick = () => {
1276
+ `, s.onclick = () => {
1268
1277
  var a;
1269
1278
  return (a = this.onDeleteCallback) == null ? void 0 : a.call(this);
1270
- }, s.appendChild(n);
1279
+ }, n.appendChild(s);
1271
1280
  const o = i.querySelector("h3");
1272
- o ? o.insertAdjacentElement("afterend", s) : i.appendChild(s);
1281
+ o ? o.insertAdjacentElement("afterend", n) : i.appendChild(n);
1273
1282
  }
1274
1283
  return t;
1275
1284
  }
1276
1285
  }
1277
- class gt extends f {
1286
+ class gt extends v {
1278
1287
  // Store the rendered element
1279
1288
  constructor(t) {
1280
1289
  super({
@@ -1343,7 +1352,7 @@ class gt extends f {
1343
1352
  }));
1344
1353
  }
1345
1354
  }
1346
- class mt extends f {
1355
+ class mt extends v {
1347
1356
  /**
1348
1357
  * Constructs a new BackgroundSettingSet.
1349
1358
  *
@@ -1396,8 +1405,8 @@ class mt extends f {
1396
1405
  draw() {
1397
1406
  const t = super.draw(), e = t.querySelector(".setting-group-content");
1398
1407
  if (!e) return t;
1399
- const i = Array.from(e.children), [s, n, o, a] = i;
1400
- e.innerHTML = "", e.appendChild(s), e.appendChild(n);
1408
+ const i = Array.from(e.children), [n, s, o, a] = i;
1409
+ e.innerHTML = "", e.appendChild(n), e.appendChild(s);
1401
1410
  const l = document.createElement("div");
1402
1411
  return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(o), e.appendChild(a), t;
1403
1412
  }
@@ -1405,7 +1414,7 @@ class mt extends f {
1405
1414
  * Helper method to generate CSS based on the current settings.
1406
1415
  */
1407
1416
  getCssCode() {
1408
- 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;
1417
+ 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;
1409
1418
  return t ? `
1410
1419
  background-image: url("${t}");
1411
1420
  background-size: cover;
@@ -1413,7 +1422,7 @@ class mt extends f {
1413
1422
  opacity: ${e / 100};
1414
1423
  ` : `
1415
1424
  background-color: ${i};
1416
- opacity: ${s / 100};
1425
+ opacity: ${n / 100};
1417
1426
  `;
1418
1427
  }
1419
1428
  }
@@ -1428,12 +1437,12 @@ export {
1428
1437
  pt as HeaderTypographySettingSet,
1429
1438
  at as HeightSetting,
1430
1439
  ut as MarginSettingGroup,
1431
- v as NumberSetting,
1440
+ w as NumberSetting,
1432
1441
  M as OpacitySetting,
1433
1442
  rt as SelectApiSettings,
1434
1443
  V as SelectSetting,
1435
- m as Setting,
1436
- f as SettingGroup,
1444
+ C as Setting,
1445
+ v as SettingGroup,
1437
1446
  H as StringSetting,
1438
1447
  gt as TabsContainerGroup,
1439
1448
  ht as Toggle,