builder-settings-types 0.0.86 → 0.0.87

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 +24 -24
  2. package/dist/builder-settings-types.es.js +246 -211
  3. package/dist/index.d.ts +2 -0
  4. package/package.json +1 -1
package/dist/builder-settings-types.es.js CHANGED
@@ -18,18 +18,26 @@ class v {
18
18
  }
19
19
  setOnChange(t) {
20
20
  return this.onChange = t, R(this.settings, (e, i) => {
21
- i.setOnChange((n) => {
22
- t(n), this.updateVisibility();
21
+ i.setOnChange((s) => {
22
+ t(s), this.updateVisibility();
23
23
  });
24
24
  }), this;
25
25
  }
26
+ // hide(): void {
27
+ // if (this.elementRef){
28
+ // console.log(this.elementRef);
29
+ // }else{
30
+ // this.draw()
31
+ // }
32
+ // console.log(this.elementRef)
33
+ // }
26
34
  getValues(t) {
27
35
  if (t === void 0) {
28
36
  const e = {};
29
37
  for (const i in this.settings)
30
38
  if (this.settings.hasOwnProperty(i)) {
31
- const n = this.settings[i];
32
- n instanceof v ? e[i] = n.getValues() : e[i] = n.value;
39
+ const s = this.settings[i];
40
+ s instanceof v ? e[i] = s.getValues() : e[i] = s.value;
33
41
  }
34
42
  return e;
35
43
  } else {
@@ -47,53 +55,53 @@ class v {
47
55
  ), e.setAttribute("tabindex", "0");
48
56
  const i = document.createElement("div");
49
57
  if (i.className = "title-section", this.icon) {
50
- const l = document.createElement("span");
51
- l.className = "group-icon", l.innerHTML = this.icon, i.appendChild(l);
58
+ const r = document.createElement("span");
59
+ r.className = "group-icon", r.innerHTML = this.icon, i.appendChild(r);
52
60
  }
53
- const n = document.createElement("h3");
54
- n.textContent = this.title, i.appendChild(n);
55
- const s = document.createElement("div");
56
- if (s.className = "actions-section", this.description && this.isCollapsed) {
57
- const l = document.createElement("span");
58
- l.className = "info-marker", l.innerHTML = `
61
+ const s = document.createElement("h3");
62
+ s.textContent = this.title, i.appendChild(s);
63
+ const n = document.createElement("div");
64
+ if (n.className = "actions-section", this.description && this.isCollapsed) {
65
+ const r = document.createElement("span");
66
+ r.className = "info-marker", r.innerHTML = `
59
67
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
60
68
  <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"
61
69
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
62
70
  </svg>
63
- `, l.title = this.description, s.appendChild(l);
71
+ `, r.title = this.description, n.appendChild(r);
64
72
  }
65
73
  const o = document.createElement("span");
66
74
  o.className = "setting-group-arrow", o.innerHTML = `
67
75
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
68
76
  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
69
77
  </svg>
70
- `, this.isCollapsed && o.classList.add("rotated"), s.appendChild(o);
78
+ `, this.isCollapsed && o.classList.add("rotated"), n.appendChild(o);
71
79
  const a = document.createElement("div");
72
80
  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) {
73
- const l = document.createElement("div");
74
- l.className = "setting-group-description", l.textContent = this.description, a.appendChild(l);
81
+ const r = document.createElement("div");
82
+ r.className = "setting-group-description", r.textContent = this.description, a.appendChild(r);
75
83
  }
76
- const r = () => {
84
+ const l = () => {
77
85
  this.isCollapsed = !this.isCollapsed, a.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), o.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
78
86
  "aria-expanded",
79
87
  (!this.isCollapsed).toString()
80
88
  );
81
- const l = a.querySelector(
89
+ const r = a.querySelector(
82
90
  ".setting-group-description"
83
- ), u = s.querySelector(".info-marker");
91
+ ), u = n.querySelector(".info-marker");
84
92
  if (this.description)
85
93
  if (this.isCollapsed) {
86
- if (l && l.remove(), !u) {
94
+ if (r && r.remove(), !u) {
87
95
  const d = document.createElement("span");
88
96
  d.className = "info-marker", d.innerHTML = `
89
97
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
90
98
  <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"
91
99
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
92
100
  </svg>
93
- `, d.title = this.description, s.insertBefore(d, o);
101
+ `, d.title = this.description, n.insertBefore(d, o);
94
102
  }
95
103
  } else {
96
- if (!l) {
104
+ if (!r) {
97
105
  const d = document.createElement("div");
98
106
  d.className = "setting-group-description", d.textContent = this.description, a.insertBefore(
99
107
  d,
@@ -103,19 +111,19 @@ class v {
103
111
  u && u.remove();
104
112
  }
105
113
  };
106
- if (e.onclick = r, e.onkeydown = (l) => {
107
- (l.key === "Enter" || l.key === " ") && (l.preventDefault(), r());
114
+ if (e.onclick = l, e.onkeydown = (r) => {
115
+ (r.key === "Enter" || r.key === " ") && (r.preventDefault(), l());
108
116
  }, Object.keys(this.settings).length > 0) {
109
- for (const l in this.settings)
110
- if (this.settings.hasOwnProperty(l)) {
111
- const u = this.settings[l];
117
+ for (const r in this.settings)
118
+ if (this.settings.hasOwnProperty(r)) {
119
+ const u = this.settings[r];
112
120
  a.appendChild(u.draw());
113
121
  }
114
122
  } else {
115
- const l = document.createElement("div");
116
- l.className = "setting-group-empty", l.textContent = "No settings in this group", a.appendChild(l);
123
+ const r = document.createElement("div");
124
+ r.className = "setting-group-empty", r.textContent = "No settings in this group", a.appendChild(r);
117
125
  }
118
- return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(a), this.elementRef = t, t;
126
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, t;
119
127
  }
120
128
  collapse() {
121
129
  if (!this.elementRef || this.isCollapsed) return;
@@ -177,25 +185,49 @@ class m {
177
185
  t = { ...this.props.inputProps, ...t };
178
186
  const e = document.createElement("div");
179
187
  if (e.className = t.wrapperClassName || "", t.title || t.icon) {
180
- const s = document.createElement("div");
181
- if (s.className = "icon-container", t.icon) {
182
- const o = this.createIcon(t.icon, t.iconClassName);
183
- s.appendChild(o);
188
+ const o = document.createElement("div");
189
+ if (o.className = "icon-container", t.icon) {
190
+ const a = this.createIcon(t.icon, t.iconClassName);
191
+ o.appendChild(a);
184
192
  }
185
193
  if (t.title) {
186
- const o = this.createLabel(t.title, t.labelClassName);
187
- s.appendChild(o);
194
+ const a = this.createLabel(t.title, t.labelClassName);
195
+ o.appendChild(a);
188
196
  }
189
- e.appendChild(s);
197
+ e.appendChild(o);
190
198
  }
191
199
  const i = document.createElement("div");
192
200
  i.className = t.wrapperClassName || "";
193
- const n = document.createElement("input");
194
- return this.inputEl = n, n.value = String(t.value || B(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "", n.oninput = (s) => {
195
- const o = s.target;
196
- let a = o.value;
197
- t.inputType === "number" ? a = Number(o.value) : (t.inputType === "color" || t.inputType === "date") && (a = o.value), this.value = a, this.onChange && this.onChange(this.value);
198
- }, t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
201
+ const s = document.createElement("input");
202
+ this.inputEl = s, s.value = String(t.value || B(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "";
203
+ const n = (o) => {
204
+ const a = o.target;
205
+ let l = a.value;
206
+ switch (t.inputType) {
207
+ case "number":
208
+ l = Number(a.value);
209
+ break;
210
+ case "color":
211
+ l = a.value;
212
+ break;
213
+ case "date":
214
+ l = a.value;
215
+ break;
216
+ case "select":
217
+ l = a.value;
218
+ break;
219
+ case "text":
220
+ l = a.value;
221
+ break;
222
+ case "button":
223
+ l = a.value;
224
+ break;
225
+ default:
226
+ l = a.value;
227
+ }
228
+ this.value = l, this.onChange && this.onChange(this.value);
229
+ };
230
+ return s.addEventListener("input", n), s.addEventListener("change", n), t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
199
231
  }
200
232
  createLabel(t, e) {
201
233
  const i = document.createElement("span");
@@ -208,7 +240,7 @@ class m {
208
240
  }
209
241
  class y extends m {
210
242
  constructor(t = {}) {
211
- super(t), this.inputType = "text";
243
+ super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
212
244
  }
213
245
  draw() {
214
246
  const t = (e) => {
@@ -237,27 +269,27 @@ class H extends y {
237
269
  }
238
270
  hexToRgb(t) {
239
271
  t = t.replace("#", "");
240
- const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
241
- return `${e}, ${i}, ${n}`;
272
+ const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), s = parseInt(t.substring(4, 6), 16);
273
+ return `${e}, ${i}, ${s}`;
242
274
  }
243
275
  rgbToHex(t) {
244
- const [e, i, n] = t.split(",").map((o) => parseInt(o.trim()));
245
- if (isNaN(e) || isNaN(i) || isNaN(n)) return "#000000";
246
- const s = (o) => {
276
+ const [e, i, s] = t.split(",").map((o) => parseInt(o.trim()));
277
+ if (isNaN(e) || isNaN(i) || isNaN(s)) return "#000000";
278
+ const n = (o) => {
247
279
  const a = o.toString(16);
248
280
  return a.length === 1 ? "0" + a : a;
249
281
  };
250
- return `#${s(e)}${s(i)}${s(n)}`;
282
+ return `#${n(e)}${n(i)}${n(s)}`;
251
283
  }
252
284
  draw() {
253
285
  const t = document.createElement("div");
254
286
  t.className = "color-setting-wrapper";
255
287
  const e = document.createElement("div");
256
288
  e.className = "icon-container";
257
- const i = this.createIcon(this.props.icon || N), n = this.createLabel(this.title || "Color");
258
- e.appendChild(i), e.appendChild(n);
259
- const s = document.createElement("div");
260
- s.className = "color-input-wrapper";
289
+ const i = this.createIcon(this.props.icon || N), s = this.createLabel(this.title || "Color");
290
+ e.appendChild(i), e.appendChild(s);
291
+ const n = document.createElement("div");
292
+ n.className = "color-input-wrapper";
261
293
  const o = (d) => {
262
294
  const g = d.value.split(",").map((S) => parseInt(S.trim()));
263
295
  if (g.length !== 3 || g.some(isNaN))
@@ -266,15 +298,15 @@ class H extends y {
266
298
  return d.style.border = b ? "" : "1px solid red", b;
267
299
  }, a = document.createElement("div");
268
300
  a.className = "color-preview", a.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
269
- const r = this.createInput({
301
+ const l = this.createInput({
270
302
  value: this.value,
271
303
  inputType: "text",
272
304
  inputClassName: "color-text-input"
273
- }), c = r.querySelector("input"), l = this.createInput({
305
+ }), c = l.querySelector("input"), r = this.createInput({
274
306
  value: this.value ? this.rgbToHex(this.value) : "",
275
307
  inputType: this.inputType,
276
308
  inputClassName: "color-picker"
277
- }), u = l.querySelector("input");
309
+ }), u = r.querySelector("input");
278
310
  return c.oninput = (d) => {
279
311
  var p;
280
312
  let g = d.target.value.trim();
@@ -283,7 +315,7 @@ class H extends y {
283
315
  var C;
284
316
  const g = d.target.value, p = this.hexToRgb(g);
285
317
  this.value = p, (C = this.onChange) == null || C.call(this, p), c.value = p, a.style.backgroundColor = `rgb(${p})`;
286
- }, s.appendChild(a), s.appendChild(l), s.appendChild(r), 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;
318
+ }, 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;
287
319
  }
288
320
  }
289
321
  class f extends m {
@@ -291,11 +323,11 @@ class f extends m {
291
323
  super(t), this.inputType = "number";
292
324
  }
293
325
  draw() {
294
- const t = (s) => {
295
- 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", () => {
326
+ const t = (n) => {
327
+ 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", () => {
296
328
  const o = this.props.minValue ?? Number.MIN_SAFE_INTEGER, a = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
297
- let r = Number(s.value);
298
- r < o && (r = o), r > a && (r = a), s.value = String(r);
329
+ let l = Number(n.value);
330
+ l < o && (l = o), l > a && (l = a), n.value = String(l);
299
331
  });
300
332
  }, e = this.createInput({
301
333
  value: this.value,
@@ -313,8 +345,8 @@ class f extends m {
313
345
  "input.number-setting-input"
314
346
  );
315
347
  i && (i.style.paddingRight = "35px");
316
- const n = document.createElement("span");
317
- return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
348
+ const s = document.createElement("span");
349
+ return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
318
350
  }
319
351
  }
320
352
  class k extends f {
@@ -355,45 +387,45 @@ class O extends m {
355
387
  draw() {
356
388
  const t = document.createElement("div");
357
389
  if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
358
- const s = document.createElement("div");
359
- if (s.className = "icon-container", this.props.icon) {
390
+ const n = document.createElement("div");
391
+ if (n.className = "icon-container", this.props.icon) {
360
392
  const o = this.createIcon(this.props.icon);
361
- s.appendChild(o);
393
+ n.appendChild(o);
362
394
  }
363
395
  if (this.props.title) {
364
396
  const o = this.createLabel(this.props.title);
365
- s.appendChild(o);
397
+ n.appendChild(o);
366
398
  }
367
- t.appendChild(s);
399
+ t.appendChild(n);
368
400
  } else {
369
- const s = document.createElement("div");
370
- t.appendChild(s);
401
+ const n = document.createElement("div");
402
+ t.appendChild(n);
371
403
  }
372
404
  const e = document.createElement("div");
373
405
  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 = () => {
374
- var s, o;
375
- 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));
406
+ var n, o;
407
+ 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));
376
408
  }, t.appendChild(e), this.buttonEl = e;
377
409
  const i = document.createElement("ul");
378
- i.classList.add("select-options"), this._options.forEach((s, o) => {
379
- const a = this.createOption(s, o);
380
- a.onclick = (r) => this.selectOption(r, o, e), i.appendChild(a);
410
+ i.classList.add("select-options"), this._options.forEach((n, o) => {
411
+ const a = this.createOption(n, o);
412
+ a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
381
413
  }), t.appendChild(i);
382
- const n = document.createElement("div");
383
- return n.classList.add("svg-container"), n.innerHTML = A, t.appendChild(n), this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
384
- this._options.push(...s), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
385
- }).catch((s) => {
386
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
387
- })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (s) => {
414
+ const s = document.createElement("div");
415
+ return s.classList.add("svg-container"), s.innerHTML = A, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
416
+ this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
417
+ }).catch((n) => {
418
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
419
+ })), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (n) => {
388
420
  var o, a;
389
- 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"));
421
+ 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"));
390
422
  }, document.addEventListener("click", this.clickOutsideListener), t;
391
423
  }
392
424
  selectOption(t, e, i) {
393
- var s, o, a;
394
- const n = this._options[e];
395
- 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, l) => {
396
- l === e ? c.classList.add("selected") : c.classList.remove("selected");
425
+ var n, o, a;
426
+ const s = this._options[e];
427
+ 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) => {
428
+ r === e ? c.classList.add("selected") : c.classList.remove("selected");
397
429
  }));
398
430
  }
399
431
  updateOptionsList() {
@@ -405,8 +437,8 @@ class O extends m {
405
437
  }
406
438
  this._options.forEach((t, e) => {
407
439
  const i = this.createOption(t, e);
408
- i.onclick = (n) => {
409
- this.buttonEl && this.selectOption(n, e, this.buttonEl);
440
+ i.onclick = (s) => {
441
+ this.buttonEl && this.selectOption(s, e, this.buttonEl);
410
442
  }, this.optionsListEl.appendChild(i);
411
443
  });
412
444
  }
@@ -469,11 +501,11 @@ class _ extends m {
469
501
  </svg>
470
502
  `
471
503
  }
472
- ].forEach((s) => {
504
+ ].forEach((n) => {
473
505
  const o = document.createElement("button");
474
- o.className = "align-option-button", o.innerHTML = s.icon, this.value === s.name && o.classList.add("selected"), o.addEventListener("click", () => {
506
+ o.className = "align-option-button", o.innerHTML = n.icon, this.value === n.name && o.classList.add("selected"), o.addEventListener("click", () => {
475
507
  var a;
476
- i.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), o.classList.add("selected"), this.value = s.name, (a = this.onChange) == null || a.call(this, this.value);
508
+ 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);
477
509
  }), i.appendChild(o);
478
510
  }), t.appendChild(i), t;
479
511
  }
@@ -538,8 +570,8 @@ class nt extends m {
538
570
  }
539
571
  toggleLock(t) {
540
572
  if (this.locked = !this.locked, this.locked && this.value) {
541
- const { width: i, height: n } = this.value;
542
- n > 0 && (this.aspectRatio = i / n);
573
+ const { width: i, height: s } = this.value;
574
+ s > 0 && (this.aspectRatio = i / s);
543
575
  }
544
576
  t.innerHTML = this.getLockSVG(this.locked), t.setAttribute("aria-pressed", String(this.locked)), t.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio";
545
577
  const e = t.closest(".dimension-setting-container");
@@ -573,15 +605,15 @@ class nt extends m {
573
605
  draw() {
574
606
  const t = document.createElement("div");
575
607
  t.className = "dimension-setting-container", this.locked && t.classList.add("aspect-locked");
576
- const e = this.widthSetting.draw(), i = this.heightSetting.draw(), n = document.createElement("div");
577
- n.className = "dimension-bracket";
578
- const s = document.createElement("button");
579
- return s.className = "dimension-lock-icon", s.setAttribute("type", "button"), s.setAttribute("aria-pressed", String(this.locked)), s.setAttribute(
608
+ const e = this.widthSetting.draw(), i = this.heightSetting.draw(), s = document.createElement("div");
609
+ s.className = "dimension-bracket";
610
+ const n = document.createElement("button");
611
+ return n.className = "dimension-lock-icon", n.setAttribute("type", "button"), n.setAttribute("aria-pressed", String(this.locked)), n.setAttribute(
580
612
  "aria-label",
581
613
  this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
582
- ), s.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", s.innerHTML = this.getLockSVG(this.locked), s.onclick = (o) => {
583
- o.preventDefault(), this.toggleLock(s);
584
- }, n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
614
+ ), n.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", n.innerHTML = this.getLockSVG(this.locked), n.onclick = (o) => {
615
+ o.preventDefault(), this.toggleLock(n);
616
+ }, s.appendChild(n), t.appendChild(e), t.appendChild(s), t.appendChild(i), t;
585
617
  }
586
618
  isLocked() {
587
619
  return this.locked;
@@ -589,8 +621,8 @@ class nt extends m {
589
621
  setLocked(t) {
590
622
  if (this.locked !== t) {
591
623
  if (this.locked = t, this.locked && this.value) {
592
- const { width: i, height: n } = this.value;
593
- n > 0 && (this.aspectRatio = i / n);
624
+ const { width: i, height: s } = this.value;
625
+ s > 0 && (this.aspectRatio = i / s);
594
626
  }
595
627
  const e = document.querySelector(
596
628
  ".dimension-setting-container .dimension-lock-icon"
@@ -627,13 +659,13 @@ class q extends m {
627
659
  }
628
660
  updatePreviewState(t = null) {
629
661
  if (!this.previewWrapper || !this.previewEl || !this.emptyStateEl) return;
630
- const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), n = e == null ? void 0 : e.querySelector(
662
+ const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), s = e == null ? void 0 : e.querySelector(
631
663
  ".preview-placeholder"
632
664
  );
633
- 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 = `
665
+ 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 = `
634
666
  <span class="upload-icon">${M}</span>
635
667
  <span class="upload-label">Replace</span>
636
- `)) : (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 = `
668
+ `)) : (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 = `
637
669
  <span class="upload-icon">${M}</span>
638
670
  <span class="upload-label">Upload</span>
639
671
  `));
@@ -645,21 +677,21 @@ class q extends m {
645
677
  if (e || t.classList.add("no-label"), e) {
646
678
  const c = document.createElement("div");
647
679
  if (c.className = "icon-title-container", this.props.icon) {
648
- const l = this.createIcon(this.props.icon);
649
- c.appendChild(l);
680
+ const r = this.createIcon(this.props.icon);
681
+ c.appendChild(r);
650
682
  }
651
683
  if (this.props.title) {
652
- const l = this.createLabel(this.props.title);
653
- c.appendChild(l);
684
+ const r = this.createLabel(this.props.title);
685
+ c.appendChild(r);
654
686
  }
655
687
  t.appendChild(c);
656
688
  }
657
689
  const i = document.createElement("div");
658
690
  i.className = "preview-button-container";
659
- const n = this.value && this.value !== "";
660
- n || i.classList.add("no-image");
661
- const s = document.createElement("div");
662
- 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";
691
+ const s = this.value && this.value !== "";
692
+ s || i.classList.add("no-image");
693
+ const n = document.createElement("div");
694
+ n.className = "preview-placeholder", n.innerHTML = V, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = V, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
663
695
  const o = document.createElement("button");
664
696
  o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML = j, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(o);
665
697
  const a = document.createElement("button");
@@ -667,15 +699,15 @@ class q extends m {
667
699
  <span class="upload-icon">${M}</span>
668
700
  <span class="upload-label">Upload</span>
669
701
  `;
670
- const r = document.createElement("input");
671
- return r.type = "file", r.accept = "image/*", r.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), t.appendChild(r), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = (c) => {
672
- var l;
673
- c.stopPropagation(), this.value = "", this.updatePreviewState(null), (l = this.onChange) == null || l.call(this, "");
702
+ const l = document.createElement("input");
703
+ 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) => {
704
+ var r;
705
+ c.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
674
706
  }, a.onclick = () => {
675
- r.click();
676
- }, r.onchange = async () => {
677
- var l, u, d;
678
- const c = (l = r.files) == null ? void 0 : l[0];
707
+ l.click();
708
+ }, l.onchange = async () => {
709
+ var r, u, d;
710
+ const c = (r = l.files) == null ? void 0 : r[0];
679
711
  if (c)
680
712
  try {
681
713
  a.classList.add("loading"), a.disabled = !0;
@@ -755,7 +787,7 @@ class lt extends m {
755
787
  constructor(t = {}) {
756
788
  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(
757
789
  (e) => JSON.stringify(e.value) === JSON.stringify(t.default)
758
- ));
790
+ )), t.onChange && this.setOnChange(t.onChange);
759
791
  }
760
792
  initializeOptions(t) {
761
793
  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(
@@ -765,8 +797,8 @@ class lt extends m {
765
797
  createOption(t, e) {
766
798
  const i = document.createElement("li");
767
799
  i.classList.add("select-api-option"), i.textContent = t.name, i.dataset.index = String(e);
768
- const n = document.createElement("input");
769
- 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;
800
+ const s = document.createElement("input");
801
+ 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;
770
802
  }
771
803
  draw() {
772
804
  const t = document.createElement("div");
@@ -774,48 +806,51 @@ class lt extends m {
774
806
  const e = document.createElement("div");
775
807
  if (e.classList.add("select-api-button"), this.props.title) {
776
808
  e.classList.add("has-label");
777
- const s = document.createElement("div");
778
- s.className = "select-label", s.textContent = this.props.title, e.appendChild(s);
809
+ const n = document.createElement("div");
810
+ n.className = "select-label", n.textContent = this.props.title, e.appendChild(n);
779
811
  const o = document.createElement("span");
780
812
  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);
781
813
  } else
782
814
  this.isLoading ? e.textContent = this.props.loadingText || "Loading options..." : e.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option";
783
815
  e.onclick = () => {
784
- var s, o;
785
- 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));
816
+ var n, o;
817
+ 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));
786
818
  }, t.appendChild(e), this.buttonEl = e;
787
819
  const i = document.createElement("ul");
788
- i.classList.add("select-api-options"), this._options.forEach((s, o) => {
789
- const a = this.createOption(s, o);
790
- a.onclick = (r) => this.selectApiOption(r, o, e), i.appendChild(a);
820
+ i.classList.add("select-api-options"), this._options.forEach((n, o) => {
821
+ const a = this.createOption(n, o);
822
+ a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
791
823
  }), t.appendChild(i);
792
- const n = document.createElement("div");
793
- return n.classList.add("svg-container"), n.innerHTML = U, t.appendChild(n), n.onclick = () => {
794
- var s, o;
795
- 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));
796
- }, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
797
- this._options.push(...s), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
824
+ const s = document.createElement("div");
825
+ return s.classList.add("svg-container"), s.innerHTML = U, t.appendChild(s), s.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));
828
+ }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
829
+ this._options.push(...n), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
798
830
  (o) => JSON.stringify(o.value) === JSON.stringify(this.value)
799
831
  )), this.updateOptionsList(), this.updateButtonText();
800
- }).catch((s) => {
801
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
802
- })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
803
- const o = new Set(this._options.map((r) => JSON.stringify(r.value))), a = s.filter((r) => !o.has(JSON.stringify(r.value)));
832
+ }).catch((n) => {
833
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
834
+ })) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
835
+ const o = new Set(this._options.map((l) => JSON.stringify(l.value))), a = n.filter((l) => !o.has(JSON.stringify(l.value)));
804
836
  this._options.push(...a), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
805
- (r) => JSON.stringify(r.value) === JSON.stringify(this.value)
837
+ (l) => JSON.stringify(l.value) === JSON.stringify(this.value)
806
838
  )), this.updateOptionsList(), this.updateButtonText();
807
- }).catch((s) => {
808
- console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
839
+ }).catch((n) => {
840
+ console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
809
841
  })), t;
810
842
  }
811
843
  selectApiOption(t, e, i) {
812
- var s, o, a;
813
- const n = this._options[e];
814
- n && (this.value = n.value, (s = this.onChange) == null || s.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
815
- ".select-api-radio"
816
- ).forEach((c, l) => {
817
- c.checked = l === e;
818
- }));
844
+ var n, o;
845
+ const s = this._options[e];
846
+ if (s) {
847
+ const a = s.value;
848
+ 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(
849
+ ".select-api-radio"
850
+ ).forEach((c, r) => {
851
+ c.checked = r === e;
852
+ });
853
+ }
819
854
  }
820
855
  updateOptionsList() {
821
856
  if (this.optionsListEl) {
@@ -826,44 +861,44 @@ class lt extends m {
826
861
  }
827
862
  this._options.forEach((t, e) => {
828
863
  const i = this.createOption(t, e);
829
- this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (n) => {
830
- this.buttonEl && this.selectApiOption(n, e, this.buttonEl);
831
- }, i.tabIndex = 0, i.addEventListener("keydown", (n) => {
832
- (n.key === "Enter" || n.key === " ") && (n.preventDefault(), this.buttonEl && this.selectApiOption(n, e, this.buttonEl));
864
+ this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (s) => {
865
+ this.buttonEl && this.selectApiOption(s, e, this.buttonEl);
866
+ }, i.tabIndex = 0, i.addEventListener("keydown", (s) => {
867
+ (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.buttonEl && this.selectApiOption(s, e, this.buttonEl));
833
868
  }), this.optionsListEl.appendChild(i);
834
869
  });
835
870
  }
836
871
  }
837
872
  updateButtonText(t) {
838
873
  if (!this.buttonEl) return;
839
- const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), n = this.buttonEl.querySelector(".select-label");
874
+ const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), s = this.buttonEl.querySelector(".select-label");
840
875
  if (this.isLoading) {
841
876
  this.buttonEl.classList.add("loading");
842
877
  const o = this.props.loadingText || "Loading options...";
843
878
  if (e)
844
879
  e.textContent = o;
845
- else if (i && this.props.title && !n) {
880
+ else if (i && this.props.title && !s) {
846
881
  this.buttonEl.innerHTML = "";
847
882
  const a = document.createElement("div");
848
883
  a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
849
- const r = document.createElement("span");
850
- r.className = "select-value", r.textContent = o, this.buttonEl.appendChild(r);
884
+ const l = document.createElement("span");
885
+ l.className = "select-value", l.textContent = o, this.buttonEl.appendChild(l);
851
886
  } else
852
887
  this.buttonEl.textContent = o;
853
888
  return;
854
889
  }
855
890
  this.buttonEl.classList.remove("loading", "error");
856
- let s;
857
- 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)
858
- e.textContent = s;
859
- else if (i && this.props.title && !n) {
891
+ let n;
892
+ 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)
893
+ e.textContent = n;
894
+ else if (i && this.props.title && !s) {
860
895
  this.buttonEl.innerHTML = "";
861
896
  const o = document.createElement("div");
862
897
  o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
863
898
  const a = document.createElement("span");
864
- a.className = "select-value", a.textContent = s, this.buttonEl.appendChild(a);
899
+ a.className = "select-value", a.textContent = n, this.buttonEl.appendChild(a);
865
900
  } else
866
- this.buttonEl.textContent = s;
901
+ this.buttonEl.textContent = n;
867
902
  }
868
903
  }
869
904
  class rt extends m {
@@ -885,12 +920,12 @@ class rt extends m {
885
920
  t.appendChild(e);
886
921
  const i = document.createElement("label");
887
922
  i.className = "toggle-switch";
888
- const n = document.createElement("input");
889
- n.type = "checkbox", n.checked = this.value ?? !1, n.addEventListener("change", () => {
890
- this.value = n.checked, this.onChange && this.onChange(this.value);
923
+ const s = document.createElement("input");
924
+ s.type = "checkbox", s.checked = this.value ?? !1, s.addEventListener("change", () => {
925
+ this.value = s.checked, this.onChange && this.onChange(this.value);
891
926
  });
892
- const s = document.createElement("span");
893
- return s.className = "toggle-slider", i.appendChild(n), i.appendChild(s), t.appendChild(i), t;
927
+ const n = document.createElement("span");
928
+ return n.className = "toggle-slider", i.appendChild(s), i.appendChild(n), t.appendChild(i), t;
894
929
  }
895
930
  }
896
931
  const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -930,12 +965,12 @@ class ht extends m {
930
965
  createGapInput(t, e) {
931
966
  const i = document.createElement("div");
932
967
  i.classList.add("gap-input-wrapper");
933
- const n = document.createElement("div");
934
- n.classList.add("gap-label-container");
935
968
  const s = document.createElement("div");
936
- s.classList.add("gap-setting-icon"), s.innerHTML = this.props.icon || Z, n.appendChild(s);
969
+ s.classList.add("gap-label-container");
970
+ const n = document.createElement("div");
971
+ n.classList.add("gap-setting-icon"), n.innerHTML = this.props.icon || Z, s.appendChild(n);
937
972
  const o = document.createElement("label");
938
- o.classList.add("gap-input-label"), o.textContent = t, n.appendChild(o), i.appendChild(n);
973
+ o.classList.add("gap-input-label"), o.textContent = t, s.appendChild(o), i.appendChild(s);
939
974
  const a = (u) => {
940
975
  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", () => {
941
976
  var C;
@@ -943,7 +978,7 @@ class ht extends m {
943
978
  let p = Number(u.value);
944
979
  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);
945
980
  });
946
- }, r = this.createInput({
981
+ }, l = this.createInput({
947
982
  value: e,
948
983
  inputType: this.inputType,
949
984
  inputClassName: "gap-setting-input " + (this.props.inputClassName || ""),
@@ -951,12 +986,12 @@ class ht extends m {
951
986
  inputCustomizer: a
952
987
  });
953
988
  if (!this.props.suffix || this.props.suffix === "none")
954
- return i.appendChild(r), i;
955
- r.classList.add("suffix-wrapper");
956
- const c = r.querySelector("input.gap-setting-input");
989
+ return i.appendChild(l), i;
990
+ l.classList.add("suffix-wrapper");
991
+ const c = l.querySelector("input.gap-setting-input");
957
992
  c && (c.style.paddingRight = "35px");
958
- const l = document.createElement("span");
959
- return l.className = "suffix-label", l.textContent = this.props.suffix, r.appendChild(l), i.appendChild(r), i;
993
+ const r = document.createElement("span");
994
+ return r.className = "suffix-label", r.textContent = this.props.suffix, l.appendChild(r), i.appendChild(l), i;
960
995
  }
961
996
  }
962
997
  const D = `
@@ -1002,10 +1037,10 @@ class ct extends v {
1002
1037
  * Optional helper to generate CSS from the current settings.
1003
1038
  */
1004
1039
  getCssCode() {
1005
- 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;
1040
+ 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;
1006
1041
  return `
1007
1042
  border-color: ${t};
1008
- border-width: ${n}px;
1043
+ border-width: ${s}px;
1009
1044
  border-radius: ${i}px;
1010
1045
  opacity: ${e / 100};
1011
1046
  `;
@@ -1075,13 +1110,13 @@ class dt extends v {
1075
1110
  });
1076
1111
  }
1077
1112
  getCssCode() {
1078
- 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";
1113
+ 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";
1079
1114
  return `
1080
1115
  color: ${t};
1081
1116
  opacity: ${e / 100};
1082
1117
  font-family: ${i};
1083
- font-weight: ${n};
1084
- font-size: ${s}px;
1118
+ font-weight: ${s};
1119
+ font-size: ${n}px;
1085
1120
  text-align: ${o};
1086
1121
  `;
1087
1122
  }
@@ -1096,9 +1131,9 @@ class E extends m {
1096
1131
  draw() {
1097
1132
  const t = this.value === "auto" ? "text" : "number", e = (a) => {
1098
1133
  this.value !== "auto" && (this.props.minValue !== void 0 && (a.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (a.max = String(this.props.maxValue)), this.props.className && a.classList.add(this.props.className), a.addEventListener("input", () => {
1099
- const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER, c = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
1100
- let l = Number(a.value);
1101
- l < r && (l = r), l > c && (l = c), a.value = String(l);
1134
+ const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, c = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
1135
+ let r = Number(a.value);
1136
+ r < l && (r = l), r > c && (r = c), a.value = String(r);
1102
1137
  }));
1103
1138
  }, i = this.createInput({
1104
1139
  value: this.value,
@@ -1113,19 +1148,19 @@ class E extends m {
1113
1148
  if (!this.props.suffix || this.props.suffix === "none")
1114
1149
  return i;
1115
1150
  i.classList.add("suffix-wrapper");
1116
- const n = i.querySelector(
1151
+ const s = i.querySelector(
1117
1152
  "input.number-setting-input"
1118
1153
  );
1119
- n && (n.style.paddingRight = "35px");
1120
- const s = document.createElement("span");
1121
- s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
1154
+ s && (s.style.paddingRight = "35px");
1155
+ const n = document.createElement("span");
1156
+ n.className = "suffix-label", n.textContent = this.props.suffix, i.appendChild(n);
1122
1157
  const o = i.querySelector("input");
1123
1158
  return o && (o.oninput = (a) => {
1124
- const r = a.target.value.trim();
1125
- if (r.toLowerCase() === "auto")
1159
+ const l = a.target.value.trim();
1160
+ if (l.toLowerCase() === "auto")
1126
1161
  this.value = "auto";
1127
1162
  else {
1128
- const c = Number(r);
1163
+ const c = Number(l);
1129
1164
  isNaN(c) || (this.value = c);
1130
1165
  }
1131
1166
  this.onChange && this.onChange(this.value);
@@ -1167,12 +1202,12 @@ class pt extends v {
1167
1202
  });
1168
1203
  }
1169
1204
  getCssCode() {
1170
- 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;
1205
+ 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;
1171
1206
  return `
1172
1207
  margin-top: ${t};
1173
1208
  margin-right: ${e};
1174
1209
  margin-bottom: ${i};
1175
- margin-left: ${n};
1210
+ margin-left: ${s};
1176
1211
  `;
1177
1212
  }
1178
1213
  }
@@ -1208,10 +1243,10 @@ class it extends v {
1208
1243
  e && e.parentElement && e.parentElement.removeChild(e);
1209
1244
  const i = t.querySelector(".setting-group-title");
1210
1245
  if (i) {
1211
- const n = document.createElement("div");
1212
- n.className = "tab-delete-container";
1213
- const s = document.createElement("button");
1214
- s.className = "tab-delete-button", s.innerHTML = `
1246
+ const s = document.createElement("div");
1247
+ s.className = "tab-delete-container";
1248
+ const n = document.createElement("button");
1249
+ n.className = "tab-delete-button", n.innerHTML = `
1215
1250
  <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">
1216
1251
  <polyline points="3 6 5 6 21 6"></polyline>
1217
1252
  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
@@ -1219,12 +1254,12 @@ class it extends v {
1219
1254
  <path d="M14 11v6"></path>
1220
1255
  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
1221
1256
  </svg>
1222
- `, s.onclick = () => {
1257
+ `, n.onclick = () => {
1223
1258
  var a;
1224
1259
  return (a = this.onDeleteCallback) == null ? void 0 : a.call(this);
1225
- }, n.appendChild(s);
1260
+ }, s.appendChild(n);
1226
1261
  const o = i.querySelector("h3");
1227
- o ? o.insertAdjacentElement("afterend", n) : i.appendChild(n);
1262
+ o ? o.insertAdjacentElement("afterend", s) : i.appendChild(s);
1228
1263
  }
1229
1264
  return t;
1230
1265
  }
@@ -1351,16 +1386,16 @@ class gt extends v {
1351
1386
  draw() {
1352
1387
  const t = super.draw(), e = t.querySelector(".setting-group-content");
1353
1388
  if (!e) return t;
1354
- const i = Array.from(e.children), [n, s, o, a] = i;
1355
- e.innerHTML = "", e.appendChild(n), e.appendChild(s);
1356
- const r = document.createElement("div");
1357
- return r.className = "bgset-or-label", r.textContent = "OR", e.appendChild(r), e.appendChild(o), e.appendChild(a), t;
1389
+ const i = Array.from(e.children), [s, n, o, a] = i;
1390
+ e.innerHTML = "", e.appendChild(s), e.appendChild(n);
1391
+ const l = document.createElement("div");
1392
+ return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(o), e.appendChild(a), t;
1358
1393
  }
1359
1394
  /**
1360
1395
  * Helper method to generate CSS based on the current settings.
1361
1396
  */
1362
1397
  getCssCode() {
1363
- 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;
1398
+ 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;
1364
1399
  return t ? `
1365
1400
  background-image: url("${t}");
1366
1401
  background-size: cover;
@@ -1368,7 +1403,7 @@ class gt extends v {
1368
1403
  opacity: ${e / 100};
1369
1404
  ` : `
1370
1405
  background-color: ${i};
1371
- opacity: ${n / 100};
1406
+ opacity: ${s / 100};
1372
1407
  `;
1373
1408
  }
1374
1409
  }