builder-settings-types 0.0.52 → 0.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/builder-settings-types.cjs.js +87 -18
  2. package/dist/builder-settings-types.es.js +520 -186
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +91 -6
  5. package/package.json +1 -1
package/dist/builder-settings-types.es.js CHANGED
@@ -1,52 +1,72 @@
1
- const x = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
- let f = (o = 21) => {
3
- let t = "", e = crypto.getRandomValues(new Uint8Array(o |= 0));
4
- for (; o--; )
5
- t += x[e[o] & 63];
1
+ const N = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
+ let k = (l = 21) => {
3
+ let t = "", e = crypto.getRandomValues(new Uint8Array(l |= 0));
4
+ for (; l--; )
5
+ t += N[e[l] & 63];
6
6
  return t;
7
7
  };
8
- function k(o, t) {
9
- for (const e in o)
10
- if (o.hasOwnProperty(e)) {
11
- const n = o[e];
12
- t(e, n);
8
+ function E(l, t) {
9
+ for (const e in l)
10
+ if (l.hasOwnProperty(e)) {
11
+ const i = l[e];
12
+ t(e, i);
13
13
  }
14
14
  }
15
- class N {
15
+ class g {
16
+ constructor(t) {
17
+ this.id = t.id || k(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
18
+ }
16
19
  setOnChange(t) {
17
- return this.onChange = t, k(this.settings, (e, n) => {
18
- n.setOnChange(t);
20
+ return this.onChange = t, E(this.settings, (e, i) => {
21
+ i.setOnChange(t);
19
22
  }), this;
20
23
  }
21
- constructor(t) {
22
- this.id = t.id || f(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
24
+ /**
25
+ * Returns all values if called with no arguments,
26
+ * or returns only the values for a single child if a key is provided.
27
+ */
28
+ getValues(t) {
29
+ if (t === void 0) {
30
+ const e = {};
31
+ for (const i in this.settings)
32
+ if (this.settings.hasOwnProperty(i)) {
33
+ const n = this.settings[i];
34
+ n instanceof g ? e[i] = n.getValues() : e[i] = n.value;
35
+ }
36
+ return e;
37
+ } else {
38
+ const e = this.settings[t];
39
+ return e ? e instanceof g ? e.getValues() : e.value : void 0;
40
+ }
23
41
  }
24
42
  draw() {
25
43
  const t = document.createElement("div");
26
44
  t.className = "setting-group";
27
45
  const e = document.createElement("div");
28
46
  e.className = "setting-group-title";
29
- const n = document.createElement("h3");
30
- n.textContent = this.title;
31
- const i = document.createElement("span");
32
- i.className = "setting-group-arrow", i.innerHTML = `
47
+ const i = document.createElement("h3");
48
+ i.textContent = this.title;
49
+ const n = document.createElement("span");
50
+ n.className = "setting-group-arrow", n.innerHTML = `
33
51
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
34
52
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
35
53
  </svg>
36
- `;
54
+ `, e.onclick = () => {
55
+ const a = t.querySelector(".setting-group-content");
56
+ a && (a.classList.toggle("collapsed"), n.classList.toggle("rotated"));
57
+ }, e.appendChild(i), e.appendChild(n);
37
58
  const s = document.createElement("div");
38
59
  s.className = "setting-group-content";
39
- for (const a in this.settings) {
40
- const r = this.settings[a].draw();
41
- s.appendChild(r);
42
- }
43
- return e.onclick = () => {
44
- s.classList.toggle("collapsed"), i.classList.toggle("rotated");
45
- }, e.appendChild(n), e.appendChild(i), t.appendChild(e), t.appendChild(s), t;
60
+ for (const a in this.settings)
61
+ if (this.settings.hasOwnProperty(a)) {
62
+ const o = this.settings[a];
63
+ s.appendChild(o.draw());
64
+ }
65
+ return t.appendChild(e), t.appendChild(s), t;
46
66
  }
47
67
  }
48
- function E(o) {
49
- switch (o) {
68
+ function y(l) {
69
+ switch (l) {
50
70
  case "number":
51
71
  return 0;
52
72
  case "text":
@@ -65,7 +85,7 @@ function E(o) {
65
85
  }
66
86
  class C {
67
87
  constructor(t = {}) {
68
- this.props = t, this.id = t.id || f(), this.value = this.props.default, this.title = t.title || "";
88
+ this.props = t, this.id = t.id || k(), this.value = this.props.default, this.title = t.title || "";
69
89
  }
70
90
  setOnChange(t) {
71
91
  return this.onChange = t, this;
@@ -88,78 +108,25 @@ class C {
88
108
  }
89
109
  e.appendChild(s);
90
110
  }
91
- const n = document.createElement("div");
92
- n.className = t.wrapperClassName || "";
93
- const i = document.createElement("input");
94
- return this.inputEl = i, i.value = String(t.value || E(t.inputType)), i.type = t.inputType, i.placeholder = t.placeholder || "", i.className = t.inputClassName || "", i.oninput = (s) => {
111
+ const i = document.createElement("div");
112
+ i.className = t.wrapperClassName || "";
113
+ const n = document.createElement("input");
114
+ return this.inputEl = n, n.value = String(t.value || y(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "", n.oninput = (s) => {
95
115
  const a = s.target;
96
- let l = a.value;
97
- t.inputType === "number" ? l = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (l = a.value), this.value = l, this.onChange && this.onChange(this.value);
98
- }, t.inputCustomizer && t.inputCustomizer(i), n.appendChild(i), e.appendChild(n), e;
116
+ let o = a.value;
117
+ t.inputType === "number" ? o = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (o = a.value), this.value = o, this.onChange && this.onChange(this.value);
118
+ }, t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
99
119
  }
100
120
  createLabel(t, e) {
101
- const n = document.createElement("span");
102
- return n.textContent = t, n.className = "input-label " + (e || ""), n;
121
+ const i = document.createElement("span");
122
+ return i.textContent = t, i.className = "input-label " + (e || ""), i;
103
123
  }
104
124
  createIcon(t, e) {
105
- const n = document.createElement("span");
106
- return n.className = "input-icon " + (e || ""), n.innerHTML = t, n;
107
- }
108
- }
109
- class d extends C {
110
- constructor(t = {}) {
111
- super(t), this.inputType = "number";
112
- }
113
- draw() {
114
- const t = (s) => {
115
- 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", () => {
116
- const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, l = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
117
- let r = Number(s.value);
118
- r < a && (r = a), r > l && (r = l), s.value = String(r);
119
- });
120
- }, e = this.createInput({
121
- value: this.value,
122
- inputType: this.inputType,
123
- title: this.props.title,
124
- icon: this.props.icon,
125
- inputClassName: "number-setting-input " + (this.props.inputClassName || ""),
126
- wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
127
- inputCustomizer: t
128
- });
129
- if (!this.props.suffix || this.props.suffix === "none")
130
- return e;
131
- e.classList.add("suffix-wrapper");
132
- const n = e.querySelector(
133
- "input.number-setting-input"
134
- );
135
- n && (n.style.paddingRight = "35px");
136
125
  const i = document.createElement("span");
137
- return i.className = "suffix-label", i.textContent = this.props.suffix, e.appendChild(i), e;
126
+ return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
138
127
  }
139
128
  }
140
- class T extends N {
141
- constructor() {
142
- super({
143
- title: "Margin",
144
- settings: {
145
- margin: new d({ title: "Margin All" }),
146
- marginTop: new d({ title: "Margin Top" }),
147
- marginRight: new d({ title: "Margin Right" }),
148
- marginBottom: new d({ title: "Margin Bottom" }),
149
- marginLeft: new d({ title: "Margin Left" })
150
- }
151
- });
152
- }
153
- getCssCode() {
154
- return `
155
- margin-botton: ${this.settings.marginBottom.value}px;
156
- margin-top: ${this.settings.marginTop.value}px;
157
- margin-right: ${this.settings.marginRight.value}px;
158
- margin-left: ${this.settings.marginLeft.value}px;
159
- `;
160
- }
161
- }
162
- class L extends C {
129
+ class M extends C {
163
130
  constructor(t = {}) {
164
131
  super(t), this.inputType = "text";
165
132
  }
@@ -179,12 +146,12 @@ class L extends C {
179
146
  });
180
147
  }
181
148
  }
182
- const w = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
183
- class V extends L {
149
+ const x = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
150
+ class H extends M {
184
151
  constructor(t) {
185
152
  super({
186
153
  ...t,
187
- icon: t.icon || w,
154
+ icon: t.icon || x,
188
155
  title: t.title || "Color"
189
156
  }), this.inputType = "color";
190
157
  }
@@ -193,62 +160,96 @@ class V extends L {
193
160
  t.className = "color-setting-wrapper";
194
161
  const e = document.createElement("div");
195
162
  e.className = "icon-container";
196
- const n = this.createIcon(this.props.icon || w), i = this.createLabel(this.title || "Color");
197
- console.log("label:", i), e.appendChild(n), e.appendChild(i);
163
+ const i = this.createIcon(this.props.icon || x), n = this.createLabel(this.title || "Color");
164
+ e.appendChild(i), e.appendChild(n);
198
165
  const s = document.createElement("div");
199
166
  s.className = "color-input-wrapper";
200
- const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, l = (u) => {
201
- const c = u.value.startsWith("#") ? u.value.slice(1) : u.value;
202
- return a.test(c) ? (u.style.border = "", !0) : (u.style.border = "1px solid red", !1);
167
+ const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, o = (p) => {
168
+ const u = p.value.startsWith("#") ? p.value.slice(1) : p.value;
169
+ return a.test(u) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
203
170
  }, r = document.createElement("div");
204
171
  r.className = "color-preview", r.style.backgroundColor = this.value || "";
205
- const p = this.createInput({
172
+ const h = this.createInput({
206
173
  value: this.value,
207
174
  inputType: "text",
208
175
  inputClassName: "color-text-input"
209
- }), h = p.querySelector(
176
+ }), c = h.querySelector(
210
177
  "input"
211
- ), g = this.createInput({
178
+ ), m = this.createInput({
212
179
  value: this.value,
213
180
  inputType: this.inputType,
214
181
  inputClassName: "color-picker"
215
- }), v = g.querySelector(
182
+ }), f = m.querySelector(
216
183
  "input"
217
184
  );
218
- return h.oninput = (u) => {
219
- var m;
220
- let c = u.target.value.trim();
221
- c.charAt(0) !== "#" && (c = "#" + c, h.value = c), l(h) && (this.value = c, (m = this.onChange) == null || m.call(this, c), v.value = c, r.style.backgroundColor = c);
222
- }, v.oninput = (u) => {
223
- var m;
224
- let c = u.target.value;
225
- c.charAt(0) !== "#" && (c = "#" + c, v.value = c), this.value = c, (m = this.onChange) == null || m.call(this, c), h.value = c, r.style.backgroundColor = c, l(h);
226
- }, s.appendChild(r), s.appendChild(g), s.appendChild(p), t.appendChild(e), t.appendChild(s), t;
185
+ return c.oninput = (p) => {
186
+ var v;
187
+ let u = p.target.value.trim();
188
+ u.charAt(0) !== "#" && (u = "#" + u, c.value = u), o(c) && (this.value = u, (v = this.onChange) == null || v.call(this, u), f.value = u, r.style.backgroundColor = u);
189
+ }, f.oninput = (p) => {
190
+ var v;
191
+ let u = p.target.value;
192
+ u.charAt(0) !== "#" && (u = "#" + u, f.value = u), this.value = u, (v = this.onChange) == null || v.call(this, u), c.value = u, r.style.backgroundColor = u, o(c);
193
+ }, s.appendChild(r), s.appendChild(m), s.appendChild(h), t.appendChild(e), t.appendChild(s), t;
227
194
  }
228
195
  }
229
- class I extends d {
196
+ class d extends C {
197
+ constructor(t = {}) {
198
+ super(t), this.inputType = "number";
199
+ }
200
+ draw() {
201
+ const t = (s) => {
202
+ 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", () => {
203
+ const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
204
+ let r = Number(s.value);
205
+ r < a && (r = a), r > o && (r = o), s.value = String(r);
206
+ });
207
+ }, e = this.createInput({
208
+ value: this.value,
209
+ inputType: this.inputType,
210
+ title: this.props.title,
211
+ icon: this.props.icon,
212
+ inputClassName: "number-setting-input " + (this.props.inputClassName || ""),
213
+ wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
214
+ inputCustomizer: t
215
+ });
216
+ if (!this.props.suffix || this.props.suffix === "none")
217
+ return e;
218
+ e.classList.add("suffix-wrapper");
219
+ const i = e.querySelector(
220
+ "input.number-setting-input"
221
+ );
222
+ i && (i.style.paddingRight = "35px");
223
+ const n = document.createElement("span");
224
+ return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
225
+ }
226
+ }
227
+ class _ extends d {
230
228
  constructor(t) {
231
229
  super({
232
230
  ...t,
233
231
  minValue: 0,
234
232
  maxValue: 100,
235
- icon: t.icon || b,
233
+ icon: t.icon || L,
236
234
  title: t.title || "Opacity"
237
235
  }), this.inputType = "number";
238
236
  }
239
237
  }
240
- const b = `
238
+ const L = `
241
239
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
242
- <path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
243
- <path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
244
- </svg>
240
+ <path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
241
+ <path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
242
+ <path d="M10.0575 17.4873C9.91496 17.4873 9.77248 17.4348 9.65998 17.3223L5.41496 13.0773C5.19746 12.8598 5.19746 12.4998 5.41496 12.2823C5.63246 12.0648 5.9925 12.0648 6.21 12.2823L10.455 16.5273C10.6725 16.7448 10.6725 17.1048 10.455 17.3223C10.35 17.4348 10.2075 17.4873 10.0575 17.4873Z" fill="#667085"/>
243
+ <path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
244
+ <path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
245
+ </svg>
245
246
  `;
246
- class H extends C {
247
+ class b extends C {
247
248
  constructor(t = {}) {
248
249
  super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
249
- this.props.options = [...this.props.options, ...e], e.forEach((n) => {
250
- var i;
251
- (i = this.selectNode) == null || i.appendChild(this.createOption(n));
250
+ this.props.options = [...this.props.options, ...e], e.forEach((i) => {
251
+ var n;
252
+ (n = this.selectNode) == null || n.appendChild(this.createOption(i));
252
253
  });
253
254
  }).catch((e) => {
254
255
  console.error("Failed to fetch async options:", e);
@@ -259,25 +260,25 @@ class H extends C {
259
260
  return e.value = t.value, e.textContent = t.name, e;
260
261
  }
261
262
  draw() {
262
- var l, r;
263
+ var o, r;
263
264
  const t = document.createElement("div");
264
265
  t.classList.add("select-container");
265
266
  const e = document.createElement("div");
266
267
  e.className = "icon-container";
267
- const n = this.createIcon(this.props.icon || ""), i = this.createLabel(this.props.title || ""), s = document.createElement("select");
268
- return this.selectNode = s, s.classList.add("select"), s.onchange = (p) => {
269
- var h;
270
- this.value = p.target.value, (h = this.onChange) == null || h.call(this, p.target.value);
268
+ const i = this.createIcon(this.props.icon || ""), n = this.createLabel(this.props.title || ""), s = document.createElement("select");
269
+ return this.selectNode = s, s.classList.add("select"), s.onchange = (h) => {
270
+ var c;
271
+ this.value = h.target.value, (c = this.onChange) == null || c.call(this, h.target.value);
271
272
  }, [
272
273
  ...this.props.options || [],
273
- ...((r = (l = this.props).getOptions) == null ? void 0 : r.call(l)) || []
274
- ].forEach((p) => {
275
- const h = this.createOption(p);
276
- s.appendChild(h);
277
- }), this.value && (s.value = this.value), e.appendChild(n), e.appendChild(i), t.appendChild(e), t.appendChild(s), t;
274
+ ...((r = (o = this.props).getOptions) == null ? void 0 : r.call(o)) || []
275
+ ].forEach((h) => {
276
+ const c = this.createOption(h);
277
+ s.appendChild(c);
278
+ }), this.value && (s.value = this.value), e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(s), t;
278
279
  }
279
280
  }
280
- class R extends C {
281
+ class V extends C {
281
282
  constructor(t = {}) {
282
283
  super(t), this.inputType = "button", this.value || (this.value = "center");
283
284
  }
@@ -286,8 +287,8 @@ class R extends C {
286
287
  t.className = "align-setting-wrapper";
287
288
  const e = document.createElement("label");
288
289
  e.className = "align-setting-label", e.textContent = this.title || "Align", t.appendChild(e);
289
- const n = document.createElement("div");
290
- return n.className = "align-options-container", [
290
+ const i = document.createElement("div");
291
+ return i.className = "align-options-container", [
291
292
  {
292
293
  name: "left",
293
294
  icon: `
@@ -324,13 +325,13 @@ class R extends C {
324
325
  ].forEach((s) => {
325
326
  const a = document.createElement("button");
326
327
  a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
327
- var l;
328
- n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (l = this.onChange) == null || l.call(this, this.value);
329
- }), n.appendChild(a);
330
- }), t.appendChild(n), t;
328
+ var o;
329
+ i.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (o = this.onChange) == null || o.call(this, this.value);
330
+ }), i.appendChild(a);
331
+ }), t.appendChild(i), t;
331
332
  }
332
333
  }
333
- class A extends C {
334
+ class F extends C {
334
335
  constructor(t) {
335
336
  super(t), this.inputType = "button";
336
337
  }
@@ -343,7 +344,7 @@ class A extends C {
343
344
  return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
344
345
  }
345
346
  }
346
- class O extends C {
347
+ class G extends C {
347
348
  constructor(t = {}) {
348
349
  super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new d({
349
350
  title: "Width",
@@ -352,7 +353,7 @@ class O extends C {
352
353
  // Display "px" as the unit.
353
354
  minValue: t.minWidth ?? 1,
354
355
  maxValue: t.maxWidth,
355
- icon: M
356
+ icon: S
356
357
  // SVG icon defined at the bottom.
357
358
  }), this.heightSetting = new d({
358
359
  title: "Height",
@@ -360,19 +361,19 @@ class O extends C {
360
361
  suffix: "px",
361
362
  minValue: t.minHeight ?? 1,
362
363
  maxValue: t.maxHeight,
363
- icon: y
364
+ icon: T
364
365
  }), this.widthSetting.setOnChange((e) => {
365
366
  var s;
366
367
  if (this.isUpdating || isNaN(e) || e < 1) return;
367
368
  this.isUpdating = !0;
368
- let n = e, i = this.value.height;
369
- this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (i = Math.round(n / this.aspectRatio), i < 1 && (i = 1)), this.value = { width: n, height: i }, i !== 0 && (this.aspectRatio = n / i), (s = this.onChange) == null || s.call(this, this.value), this.heightSetting.setValue(i), this.isUpdating = !1;
369
+ let i = e, n = this.value.height;
370
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (n = Math.round(i / this.aspectRatio), n < 1 && (n = 1)), this.value = { width: i, height: n }, n !== 0 && (this.aspectRatio = i / n), (s = this.onChange) == null || s.call(this, this.value), this.heightSetting.setValue(n), this.isUpdating = !1;
370
371
  }), this.heightSetting.setOnChange((e) => {
371
372
  var s;
372
373
  if (this.isUpdating || isNaN(e) || e < 1) return;
373
374
  this.isUpdating = !0;
374
- let n = e, i = this.value.width;
375
- this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (i = Math.round(n * this.aspectRatio), i < 1 && (i = 1)), this.value = { width: i, height: n }, n !== 0 && (this.aspectRatio = i / n), (s = this.onChange) == null || s.call(this, this.value), this.widthSetting.setValue(i), this.isUpdating = !1;
375
+ let i = e, n = this.value.width;
376
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (n = Math.round(i * this.aspectRatio), n < 1 && (n = 1)), this.value = { width: n, height: i }, i !== 0 && (this.aspectRatio = n / i), (s = this.onChange) == null || s.call(this, this.value), this.widthSetting.setValue(n), this.isUpdating = !1;
376
377
  });
377
378
  }
378
379
  /**
@@ -382,8 +383,8 @@ class O extends C {
382
383
  */
383
384
  toggleLock(t) {
384
385
  if (this.locked = !this.locked, this.locked) {
385
- const e = this.value.width, n = this.value.height;
386
- n !== 0 && (this.aspectRatio = e / n);
386
+ const e = this.value.width, i = this.value.height;
387
+ i !== 0 && (this.aspectRatio = e / i);
387
388
  }
388
389
  t.innerHTML = this.getLockSVG(this.locked);
389
390
  }
@@ -392,10 +393,14 @@ class O extends C {
392
393
  * @param isLocked Whether the dimension is currently locked.
393
394
  */
394
395
  getLockSVG(t) {
395
- return `
396
+ return t ? `
396
397
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
397
398
  <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
398
399
  </svg>
400
+ ` : `
401
+ <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
402
+ <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
403
+ </svg>
399
404
  `;
400
405
  }
401
406
  /**
@@ -406,22 +411,22 @@ class O extends C {
406
411
  draw() {
407
412
  const t = document.createElement("div");
408
413
  t.className = "dimension-setting-container";
409
- const e = this.widthSetting.draw(), n = this.heightSetting.draw(), i = document.createElement("div");
410
- i.className = "dimension-bracket";
414
+ const e = this.widthSetting.draw(), i = this.heightSetting.draw(), n = document.createElement("div");
415
+ n.className = "dimension-bracket";
411
416
  const s = document.createElement("span");
412
- return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), i.appendChild(s), t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
417
+ return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
413
418
  }
414
419
  }
415
- const M = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
420
+ const S = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
416
421
  <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"/>
417
- </svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
422
+ </svg>`, T = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
418
423
  <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"/>
419
- </svg>`, S = `
424
+ </svg>`, I = `
420
425
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
421
426
  <path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
422
427
  </svg>
423
428
  `;
424
- class B extends C {
429
+ class q extends C {
425
430
  constructor(t = {}) {
426
431
  super(t), this.inputType = "button", !this.value && t.defaultUrl && (this.value = t.defaultUrl);
427
432
  }
@@ -430,40 +435,369 @@ class B extends C {
430
435
  t.className = "upload-setting-wrapper";
431
436
  const e = document.createElement("img");
432
437
  e.className = "upload-preview", e.src = this.value || this.props.defaultUrl || "";
433
- const n = document.createElement("button");
434
- n.className = "upload-button", n.innerHTML = `
435
- <span class="upload-icon">${S}</span>
438
+ const i = document.createElement("button");
439
+ i.className = "upload-button", i.innerHTML = `
440
+ <span class="upload-icon">${I}</span>
436
441
  <span class="upload-label">Upload</span>
437
442
  `;
438
- const i = document.createElement("input");
439
- return i.type = "file", i.accept = "image/*", i.style.display = "none", n.onclick = () => {
440
- i.click();
441
- }, i.onchange = () => {
443
+ const n = document.createElement("input");
444
+ return n.type = "file", n.accept = "image/*", n.style.display = "none", i.onclick = () => {
445
+ n.click();
446
+ }, n.onchange = () => {
442
447
  var a;
443
- const s = (a = i.files) == null ? void 0 : a[0];
448
+ const s = (a = n.files) == null ? void 0 : a[0];
444
449
  if (s) {
445
- const l = new FileReader();
446
- l.onload = (r) => {
447
- var h, g;
448
- const p = (h = r.target) == null ? void 0 : h.result;
449
- this.value = p, e.src = p, (g = this.onChange) == null || g.call(this, p);
450
- }, l.readAsDataURL(s);
450
+ const o = new FileReader();
451
+ o.onload = (r) => {
452
+ var c, m;
453
+ const h = (c = r.target) == null ? void 0 : c.result;
454
+ this.value = h, e.src = h, (m = this.onChange) == null || m.call(this, h);
455
+ }, o.readAsDataURL(s);
451
456
  }
452
- }, t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
457
+ }, t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
458
+ }
459
+ }
460
+ const B = `
461
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
462
+ <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.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.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.75L5.85 2.75C4.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.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
463
+ </svg>
464
+ `, R = `
465
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
466
+ <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"/>
467
+ </svg>
468
+ `;
469
+ class D extends g {
470
+ constructor() {
471
+ super({
472
+ title: "Border",
473
+ settings: {
474
+ color: new H({
475
+ title: "Color",
476
+ default: "#00141E"
477
+ }),
478
+ opacity: new d({
479
+ title: "Opacity",
480
+ default: 100,
481
+ maxValue: 100,
482
+ minValue: 0
483
+ }),
484
+ radius: new d({
485
+ title: "Radius",
486
+ icon: B,
487
+ default: 12,
488
+ suffix: "px"
489
+ }),
490
+ size: new d({
491
+ title: "Size",
492
+ icon: R,
493
+ default: 0,
494
+ suffix: "px"
495
+ })
496
+ }
497
+ });
498
+ }
499
+ /**
500
+ * Optional helper to generate CSS from the current settings.
501
+ */
502
+ getCssCode() {
503
+ 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;
504
+ return `
505
+ /* Example CSS usage */
506
+ border-color: ${t};
507
+ border-width: ${n}px;
508
+ border-radius: ${i}px;
509
+ opacity: ${e / 100};
510
+ `;
511
+ }
512
+ }
513
+ const j = `
514
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
515
+ <path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
516
+ </svg>
517
+ `, $ = `
518
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
519
+ <path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
520
+ </svg>
521
+ `, A = `
522
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
523
+ <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"/>
524
+ </svg>
525
+ `;
526
+ class P extends g {
527
+ constructor() {
528
+ super({
529
+ title: "Header Typography",
530
+ settings: {
531
+ color: new H({
532
+ title: "Color",
533
+ default: "#00141E"
534
+ }),
535
+ opacity: new d({
536
+ title: "Opacity",
537
+ default: 100
538
+ }),
539
+ fontFamily: new b({
540
+ title: "Font",
541
+ icon: j,
542
+ default: "Satoshi",
543
+ options: [
544
+ { name: "Satoshi", value: "Satoshi" },
545
+ { name: "Arial", value: "Arial" },
546
+ { name: "Roboto", value: "Roboto" }
547
+ ]
548
+ }),
549
+ fontWeight: new b({
550
+ title: "Weight",
551
+ icon: $,
552
+ default: "bold",
553
+ options: [
554
+ { name: "Regular", value: "regular" },
555
+ { name: "Medium", value: "medium" },
556
+ { name: "Bold", value: "bold" }
557
+ ]
558
+ }),
559
+ fontSize: new d({
560
+ title: "Size",
561
+ icon: A,
562
+ default: 12,
563
+ suffix: "px"
564
+ }),
565
+ align: new V({
566
+ title: "Align",
567
+ default: "center"
568
+ })
569
+ }
570
+ });
571
+ }
572
+ /**
573
+ * Optional helper: generate CSS from these settings, for instance.
574
+ */
575
+ getCssCode() {
576
+ const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", n = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, a = this.settings.align.value ?? "left";
577
+ return `
578
+ color: ${t};
579
+ opacity: ${e / 100};
580
+ font-family: ${i};
581
+ font-weight: ${n};
582
+ font-size: ${s}px;
583
+ text-align: ${a};
584
+ `;
585
+ }
586
+ }
587
+ class w extends C {
588
+ constructor(t) {
589
+ super({
590
+ ...t,
591
+ default: t.default !== void 0 ? t.default : "auto"
592
+ }), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
593
+ }
594
+ draw() {
595
+ const t = this.value === "auto" ? "text" : "number", e = (o) => {
596
+ this.value !== "auto" && (this.props.minValue !== void 0 && (o.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (o.max = String(this.props.maxValue)), this.props.className && o.classList.add(this.props.className), o.addEventListener("input", () => {
597
+ const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER, h = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
598
+ let c = Number(o.value);
599
+ c < r && (c = r), c > h && (c = h), o.value = String(c);
600
+ }));
601
+ }, i = this.createInput({
602
+ value: this.value,
603
+ inputType: t,
604
+ title: this.props.title,
605
+ icon: this.props.icon,
606
+ inputClassName: "number-setting-input " + (this.props.inputClassName || ""),
607
+ wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
608
+ inputCustomizer: e,
609
+ placeholder: this.value === "auto" ? "auto" : ""
610
+ });
611
+ if (!this.props.suffix || this.props.suffix === "none")
612
+ return i;
613
+ i.classList.add("suffix-wrapper");
614
+ const n = i.querySelector(
615
+ "input.number-setting-input"
616
+ );
617
+ n && (n.style.paddingRight = "35px");
618
+ const s = document.createElement("span");
619
+ s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
620
+ const a = i.querySelector("input");
621
+ return a && (a.oninput = (o) => {
622
+ const r = o.target.value.trim();
623
+ if (r.toLowerCase() === "auto")
624
+ this.value = "auto";
625
+ else {
626
+ const h = Number(r);
627
+ isNaN(h) || (this.value = h);
628
+ }
629
+ this.onChange && this.onChange(this.value);
630
+ }), i;
631
+ }
632
+ }
633
+ class X extends g {
634
+ constructor() {
635
+ super({
636
+ title: "Margins",
637
+ settings: {
638
+ marginTop: new w({
639
+ title: "Top",
640
+ icon: O,
641
+ suffix: "px",
642
+ default: "auto"
643
+ }),
644
+ marginRight: new w({
645
+ title: "Right",
646
+ icon: Z,
647
+ suffix: "px",
648
+ default: 0
649
+ }),
650
+ marginBottom: new w({
651
+ title: "Bottom",
652
+ icon: U,
653
+ suffix: "px",
654
+ default: 0
655
+ }),
656
+ marginLeft: new w({
657
+ title: "Left",
658
+ icon: z,
659
+ suffix: "px",
660
+ default: 0
661
+ })
662
+ }
663
+ });
664
+ }
665
+ getCssCode() {
666
+ 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;
667
+ return `
668
+ margin-top: ${t};
669
+ margin-right: ${e};
670
+ margin-bottom: ${i};
671
+ margin-left: ${n};
672
+ `;
673
+ }
674
+ }
675
+ const O = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
676
+ <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
677
+ </svg>`, Z = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
678
+ <path d="M4.625 0.75H4.6325M4.625 7.5H4.6325M4.625 14.25H4.6325M11.375 0.75H11.3825M11.375 7.5H11.3825M11.375 14.25H11.3825M8 0.75H8.0075M8 7.5H8.0075M8 14.25H8.0075M8 10.875H8.0075M8 4.125H8.0075M1.25 0.75H1.2575M1.25 7.5H1.2575M1.25 14.25H1.2575M1.25 10.875H1.2575M1.25 4.125H1.2575M14.75 14.25V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
679
+ </svg>`, U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
680
+ <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
681
+ </svg>`, z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
682
+ <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"/>
683
+ </svg>`;
684
+ class W extends g {
685
+ constructor(t, e) {
686
+ super({
687
+ title: `Tab ${t + 1}`,
688
+ settings: {
689
+ name: new M({
690
+ title: "Tab Name",
691
+ default: `Tab ${t + 1}`
692
+ }),
693
+ content: new M({
694
+ title: "Content",
695
+ default: ""
696
+ })
697
+ }
698
+ }), this.onDeleteCallback = e;
699
+ }
700
+ draw() {
701
+ const t = super.draw(), e = t.querySelector(".setting-group-arrow");
702
+ e && e.parentElement && e.parentElement.removeChild(e);
703
+ const i = t.querySelector(".setting-group-title");
704
+ if (i) {
705
+ const n = document.createElement("div");
706
+ n.className = "tab-delete-container";
707
+ const s = document.createElement("button");
708
+ s.className = "tab-delete-button", s.innerHTML = `
709
+ <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">
710
+ <polyline points="3 6 5 6 21 6"></polyline>
711
+ <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
712
+ <path d="M10 11v6"></path>
713
+ <path d="M14 11v6"></path>
714
+ <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
715
+ </svg>
716
+ `, s.onclick = () => {
717
+ var o;
718
+ return (o = this.onDeleteCallback) == null ? void 0 : o.call(this);
719
+ }, n.appendChild(s);
720
+ const a = i.querySelector("h3");
721
+ a ? a.insertAdjacentElement("afterend", n) : i.appendChild(n);
722
+ }
723
+ return t;
724
+ }
725
+ }
726
+ class J extends g {
727
+ // Store the rendered element
728
+ constructor() {
729
+ super({ title: "Tabs", settings: {} }), this.tabs = [], this._el = null, this.addTab();
730
+ }
731
+ /** Adds a new tab. */
732
+ addTab() {
733
+ const t = this.tabs.length, e = new W(t, () => this.removeTab(e));
734
+ this.tabs.push(e), this.settings[`Tab ${t + 1}`] = e;
735
+ }
736
+ /** Removes a specific tab. */
737
+ removeTab(t) {
738
+ const e = this.tabs.indexOf(t);
739
+ e >= 0 && (this.tabs.splice(e, 1), delete this.settings[`Tab ${e + 1}`], this.relabelTabs(), this.rerender());
740
+ }
741
+ /** Relabels tabs sequentially after removal. */
742
+ relabelTabs() {
743
+ this.settings = {}, this.tabs.forEach((t, e) => {
744
+ t.title = `Tab ${e + 1}`, this.settings[`Tab ${e + 1}`] = t;
745
+ });
746
+ }
747
+ /**
748
+ * Override draw() so we can store the created DOM element
749
+ * and add the "Add Tab" button in a container positioned at the bottom-right.
750
+ */
751
+ draw() {
752
+ const t = super.draw();
753
+ this._el = t;
754
+ const e = document.createElement("div");
755
+ e.className = "tabs-add-btn-container";
756
+ const i = document.createElement("button");
757
+ return i.className = "tabs-add-button", i.innerHTML = `
758
+ <span class="add-icon">
759
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
760
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
761
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
762
+ <g id="SVGRepo_iconCarrier">
763
+ <g id="Edit / Add_Plus">
764
+ <path id="Vector" d="M6 12H12M12 12H18M12 12V18M12 12V6" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
765
+ </g>
766
+ </g>
767
+ </svg>
768
+ </span>
769
+ <span class="add-label">Add Tab</span>
770
+ `, i.onclick = () => {
771
+ this.addTab(), this.rerender();
772
+ }, e.appendChild(i), t.appendChild(e), t;
773
+ }
774
+ /**
775
+ * Re-renders the inner settings content based on the current tabs.
776
+ */
777
+ rerender() {
778
+ if (!this._el) return;
779
+ const t = this._el.querySelector(".setting-group-content");
780
+ t && (t.innerHTML = "", Object.keys(this.settings).forEach((e) => {
781
+ const i = this.settings[e];
782
+ t.appendChild(i.draw());
783
+ }));
453
784
  }
454
785
  }
455
786
  export {
456
- R as AlignSetting,
457
- A as ButtonSetting,
458
- V as ColorSetting,
459
- O as DimensionSetting,
460
- T as MarginSettingGroup,
787
+ V as AlignSetting,
788
+ D as BorderSettingSet,
789
+ F as ButtonSetting,
790
+ H as ColorSetting,
791
+ G as DimensionSetting,
792
+ P as HeaderTypographySettingSet,
793
+ X as MarginSettingGroup,
461
794
  d as NumberSetting,
462
- I as OpacitySetting,
463
- H as SelectSetting,
795
+ _ as OpacitySetting,
796
+ b as SelectSetting,
464
797
  C as Setting,
465
- N as SettingGroup,
466
- L as StringSetting,
467
- B as UploadSetting,
468
- k as iterateSettings
798
+ g as SettingGroup,
799
+ M as StringSetting,
800
+ J as TabsContainerGroup,
801
+ q as UploadSetting,
802
+ E as iterateSettings
469
803
  };