builder-settings-types 0.0.248 → 0.0.250

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.
@@ -1,35 +1,35 @@
1
- const P = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
- let S = (c = 21) => {
1
+ const A = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
+ let H = (c = 21) => {
3
3
  let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
4
4
  for (; c--; )
5
- t += P[e[c] & 63];
5
+ t += A[e[c] & 63];
6
6
  return t;
7
7
  };
8
- function A(c) {
8
+ function B(c) {
9
9
  let t = 0, e = c.parentElement;
10
10
  for (; e; )
11
11
  e.classList.contains("setting-group") && e !== c && t++, e = e.parentElement;
12
12
  return t;
13
13
  }
14
- function x(c, t) {
14
+ function L(c, t) {
15
15
  const e = Math.min(Math.max(t, 0), 5);
16
16
  c.setAttribute("data-nesting-level", e.toString()), e > 0 ? c.style.setProperty("--visual-indent", `${e * 2}px`) : (c.style.removeProperty("--visual-indent"), c.style.marginLeft = "");
17
17
  }
18
- function V(c, t = 0) {
18
+ function S(c, t = 0) {
19
19
  c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
20
20
  const s = i, n = t + 1;
21
- x(s, n), V(s, n);
21
+ L(s, n), S(s, n);
22
22
  });
23
23
  }
24
- const B = {
24
+ const $ = {
25
25
  maxLevel: 5,
26
26
  spacingMultiplier: 1,
27
27
  visualIndentMultiplier: 2,
28
28
  enableAutoDetection: !0
29
29
  };
30
- class $ {
30
+ class D {
31
31
  constructor(t = {}) {
32
- this.observedElements = /* @__PURE__ */ new Set(), this.config = { ...B, ...t }, this.config.enableAutoDetection && this.setupAutoDetection();
32
+ this.observedElements = /* @__PURE__ */ new Set(), this.config = { ...$, ...t }, this.config.enableAutoDetection && this.setupAutoDetection();
33
33
  }
34
34
  /**
35
35
  * Setup automatic detection using MutationObserver
@@ -63,7 +63,7 @@ class $ {
63
63
  * Update nesting for a specific element
64
64
  */
65
65
  updateElementNesting(t) {
66
- const e = A(t);
66
+ const e = B(t);
67
67
  this.applyNestingWithConfig(t, e);
68
68
  }
69
69
  /**
@@ -111,20 +111,20 @@ class $ {
111
111
  this.observer && (this.observer.disconnect(), this.observer = void 0), this.observedElements.clear();
112
112
  }
113
113
  }
114
- const N = new $();
115
- function y(c) {
114
+ const O = new D();
115
+ function k(c) {
116
116
  if (c === null || typeof c != "object") return c;
117
117
  if (c instanceof Date) return new Date(c.getTime());
118
- if (c instanceof Array) return c.map((t) => y(t));
118
+ if (c instanceof Array) return c.map((t) => k(t));
119
119
  if (typeof c == "object") {
120
120
  const t = {};
121
121
  for (const e in c)
122
- Object.prototype.hasOwnProperty.call(c, e) && (t[e] = y(c[e]));
122
+ Object.prototype.hasOwnProperty.call(c, e) && (t[e] = k(c[e]));
123
123
  return t;
124
124
  }
125
125
  return c;
126
126
  }
127
- function D(c) {
127
+ function F(c) {
128
128
  switch (c) {
129
129
  case "number":
130
130
  return 0;
@@ -144,7 +144,7 @@ function D(c) {
144
144
  }
145
145
  class p {
146
146
  constructor(t = {}) {
147
- this.props = t, this.dataPropsPath = "", this.id = t.id || S(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "", this.includeGetJson = t.includeGetJson !== void 0 ? t.includeGetJson : !0;
147
+ this.props = t, this.dataPropsPath = "", this.id = t.id || H(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "", this.includeGetJson = t.includeGetJson !== void 0 ? t.includeGetJson : !0;
148
148
  }
149
149
  static SetUploadUrl(t) {
150
150
  globalThis.DefaultUploadUrl = t, p.DefaultUploadUrl = t;
@@ -171,8 +171,8 @@ class p {
171
171
  this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t), this.props.detectChange && this.props.detectChange(t);
172
172
  }
173
173
  clone() {
174
- const t = this.constructor, e = y(this.props), i = new t(e);
175
- return i.value = y(this.value), i;
174
+ const t = this.constructor, e = k(this.props), i = new t(e);
175
+ return i.value = k(this.value), i;
176
176
  }
177
177
  createInput(t) {
178
178
  t = { ...this.props.inputProps, ...t };
@@ -192,7 +192,7 @@ class p {
192
192
  const i = document.createElement("div");
193
193
  i.className = t.wrapperClassName || "";
194
194
  const s = document.createElement("input");
195
- this.inputEl = s, s.value = String(t.value || D(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", this.dataPropsPath && s.setAttribute("data-test-id", this.dataPropsPath);
195
+ this.inputEl = s, s.value = String(t.value || F(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", this.dataPropsPath && s.setAttribute("data-test-id", this.dataPropsPath);
196
196
  const n = (o) => {
197
197
  const l = o.target;
198
198
  let r = l.value;
@@ -233,30 +233,30 @@ class p {
233
233
  return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
234
234
  }
235
235
  }
236
- function w(c) {
236
+ function E(c) {
237
237
  return c instanceof p;
238
238
  }
239
239
  function g(c) {
240
240
  return c instanceof v;
241
241
  }
242
- function gt(c) {
243
- return w(c) || g(c);
242
+ function ft(c) {
243
+ return E(c) || g(c);
244
244
  }
245
- function E(c, t) {
245
+ function x(c, t) {
246
246
  for (const e in c)
247
247
  if (Object.prototype.hasOwnProperty.call(c, e)) {
248
248
  const i = c[e];
249
249
  t(e, i);
250
250
  }
251
251
  }
252
- const L = class L {
252
+ const M = class M {
253
253
  constructor(t) {
254
254
  this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastChangeTime = 0, this.handleBlur = () => {
255
- }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.id = t.id || S(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.nestingLevel = 0, this.includeGetJson = t.includeGetJson ?? !0, this.addItemCfg = t.addItem, this.deleteItemCfg = t.deleteItem, this.dataProps = t.dataProps, this.dataPropsPath = t.dataProps || "", Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
255
+ }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.id = t.id || H(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.nestingLevel = 0, this.includeGetJson = t.includeGetJson ?? !0, this.addItemCfg = t.addItem, this.deleteItemCfg = t.deleteItem, this.dataProps = t.dataProps, this.dataPropsPath = t.dataProps || "", Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
256
256
  }
257
257
  propagateNestingLevel() {
258
258
  const t = this.nestingLevel + 1;
259
- E(this.settings, (e, i) => {
259
+ x(this.settings, (e, i) => {
260
260
  g(i) && (i.nestingLevel = t, i.propagateNestingLevel());
261
261
  });
262
262
  }
@@ -273,13 +273,13 @@ const L = class L {
273
273
  this.dataPropsPath = t, this.propagateDataPropsPath();
274
274
  }
275
275
  propagateDataPropsPath() {
276
- E(this.settings, (t, e) => {
276
+ x(this.settings, (t, e) => {
277
277
  const i = String(t), s = this.dataPropsPath ? `${this.dataPropsPath}_${i}` : i;
278
- (g(e) || w(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
278
+ (g(e) || E(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
279
279
  });
280
280
  }
281
281
  updateNestingStyles() {
282
- this.elementRef && (x(this.elementRef, this.nestingLevel), V(this.elementRef, this.nestingLevel));
282
+ this.elementRef && (L(this.elementRef, this.nestingLevel), S(this.elementRef, this.nestingLevel));
283
283
  }
284
284
  forceChildUIRefresh() {
285
285
  Object.entries(this.settings).forEach(([t, e]) => {
@@ -328,7 +328,7 @@ const L = class L {
328
328
  }
329
329
  clone() {
330
330
  const t = {};
331
- E(this.settings, (s, n) => {
331
+ x(this.settings, (s, n) => {
332
332
  const a = String(s);
333
333
  typeof n.clone == "function" ? t[a] = n.clone() : (console.warn(
334
334
  `Setting with key '${a}' does not have a clone method. Copying reference.`
@@ -344,7 +344,7 @@ const L = class L {
344
344
  addItem: this.addItemCfg,
345
345
  deleteItem: this.deleteItemCfg,
346
346
  dataProps: this.dataProps
347
- }, i = R(e);
347
+ }, i = z(e);
348
348
  return i.initialValues = this.getValues(), i;
349
349
  }
350
350
  resetDefault() {
@@ -354,7 +354,7 @@ const L = class L {
354
354
  setMobileValues(t) {
355
355
  !t || typeof t != "object" || (Object.entries(t).forEach(([e, i]) => {
356
356
  const s = this.settings[e];
357
- s && (g(s) || w(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
357
+ s && (g(s) || E(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
358
358
  }), this.setValue(t), this.onChange && this.onChange(this.getValues()));
359
359
  }
360
360
  getMobileValues(t) {
@@ -390,14 +390,14 @@ const L = class L {
390
390
  Object.keys(s).length > 0 && (this.lastChangeTime = Date.now(), this.initialValues = i, t(i), this.updateVisibility()), this.isHandlingChange = !1;
391
391
  }, 50));
392
392
  };
393
- return this.changeHandlers.clear(), E(this.settings, (i, s) => {
393
+ return this.changeHandlers.clear(), x(this.settings, (i, s) => {
394
394
  var n;
395
395
  if (g(s))
396
396
  s.setOnChange(() => {
397
397
  const a = this.getValues();
398
398
  this.initialValues = a, t(a);
399
399
  }), this.changeHandlers.add(() => t(this.getValues()));
400
- else if (w(s)) {
400
+ else if (E(s)) {
401
401
  const a = () => e();
402
402
  this.changeHandlers.add(a), s.setOnChange(a);
403
403
  } else {
@@ -423,7 +423,7 @@ const L = class L {
423
423
  this.addSetting(i, l), n = l;
424
424
  }
425
425
  }
426
- n && (g(n) || w(n)) && typeof n.setValue == "function" && n.setValue(s);
426
+ n && (g(n) || E(n)) && typeof n.setValue == "function" && n.setValue(s);
427
427
  }), setTimeout(() => {
428
428
  this.forceChildUIRefresh();
429
429
  }, 0);
@@ -437,7 +437,7 @@ const L = class L {
437
437
  const s = this.getValues();
438
438
  this.initialValues = s, (n = this.onChange) == null || n.call(this, s), this.updateVisibility();
439
439
  };
440
- g(t) ? t.setOnChange(() => e()) : w(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
440
+ g(t) ? t.setOnChange(() => e()) : E(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
441
441
  }
442
442
  addSetting(t, e) {
443
443
  var s, n;
@@ -453,7 +453,7 @@ const L = class L {
453
453
  d && t.startsWith(d) && this.addDeleteButtonToElement(o, t);
454
454
  }
455
455
  const r = a.querySelector(".sg-add-button-bottom");
456
- r ? a.insertBefore(o, r) : a.appendChild(o), N.trackElement(o), x(o, this.nestingLevel + 1), V(o, this.nestingLevel + 1);
456
+ r ? a.insertBefore(o, r) : a.appendChild(o), O.trackElement(o), L(o, this.nestingLevel + 1), S(o, this.nestingLevel + 1);
457
457
  const h = o.style.display;
458
458
  o.style.display = "none", o.offsetHeight, o.style.display = h, this.updateNestingStyles();
459
459
  }
@@ -694,7 +694,7 @@ const L = class L {
694
694
  }
695
695
  draw() {
696
696
  const t = document.createElement("div");
697
- t.className = "setting-group", t.id = `setting-group-${this.id}`, L.hiddenElements.add(t), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), x(t, this.nestingLevel);
697
+ t.className = "setting-group", t.id = `setting-group-${this.id}`, M.hiddenElements.add(t), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), L(t, this.nestingLevel);
698
698
  const e = document.createElement("div");
699
699
  e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
700
700
  "aria-expanded",
@@ -749,11 +749,11 @@ const L = class L {
749
749
  </svg>`;
750
750
  h.innerHTML = `${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, h.addEventListener("click", (u) => {
751
751
  u.stopPropagation(), u.preventDefault();
752
- const k = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), H = this.addItemCfg.createItem(k), T = `${this.addItemCfg.keyPrefix}${k}`;
753
- this.addSetting(T, H);
752
+ const w = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), V = this.addItemCfg.createItem(w), b = `${this.addItemCfg.keyPrefix}${w}`;
753
+ this.addSetting(b, V);
754
754
  }), o.appendChild(h);
755
755
  }
756
- return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, N.trackElement(t), setTimeout(() => {
756
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, O.trackElement(t), setTimeout(() => {
757
757
  this.updateNestingStyles();
758
758
  }, 0), this.pendingBlurHandler && (this.pendingBlurHandler = null), t;
759
759
  }
@@ -795,12 +795,12 @@ const L = class L {
795
795
  }
796
796
  }
797
797
  };
798
- L.hiddenElements = /* @__PURE__ */ new Set();
799
- let v = L;
800
- function mt(c) {
801
- return new F(c);
798
+ M.hiddenElements = /* @__PURE__ */ new Set();
799
+ let v = M;
800
+ function vt(c) {
801
+ return new R(c);
802
802
  }
803
- class F extends v {
803
+ class R extends v {
804
804
  constructor(t) {
805
805
  super(t);
806
806
  const e = Object.keys(this.settings)[0];
@@ -851,13 +851,13 @@ class F extends v {
851
851
  return this.updateTabUI(), t;
852
852
  }
853
853
  }
854
- function R(c) {
854
+ function z(c) {
855
855
  return new v(c);
856
856
  }
857
- function ft(c) {
857
+ function Ct(c) {
858
858
  return c;
859
859
  }
860
- class z extends p {
860
+ class W extends p {
861
861
  constructor(t = {}) {
862
862
  super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
863
863
  }
@@ -878,7 +878,7 @@ class z extends p {
878
878
  }
879
879
  }
880
880
  const G = "<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>";
881
- class m extends z {
881
+ class m extends W {
882
882
  constructor(t) {
883
883
  super({
884
884
  ...t,
@@ -1109,7 +1109,7 @@ class C extends p {
1109
1109
  };
1110
1110
  }
1111
1111
  }
1112
- class vt extends p {
1112
+ class wt extends p {
1113
1113
  constructor(t = {}) {
1114
1114
  super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
1115
1115
  }
@@ -1200,12 +1200,12 @@ class f extends p {
1200
1200
  );
1201
1201
  }
1202
1202
  }
1203
- const W = `
1203
+ const j = `
1204
1204
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1205
1205
  <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1206
1206
  <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1207
1207
  </svg>`;
1208
- class j extends f {
1208
+ class U extends f {
1209
1209
  constructor(t = {}) {
1210
1210
  const e = {
1211
1211
  title: "Opacity",
@@ -1214,7 +1214,7 @@ class j extends f {
1214
1214
  maxValue: 100,
1215
1215
  step: 1,
1216
1216
  default: t.default ?? 100,
1217
- icon: W,
1217
+ icon: j,
1218
1218
  ...t
1219
1219
  };
1220
1220
  super(e), this.inputType = "number", this.mobileValue = t.mobile;
@@ -1226,12 +1226,12 @@ class j extends f {
1226
1226
  this.mobileValue = t, t !== void 0 && this.setValue(t);
1227
1227
  }
1228
1228
  }
1229
- const U = `
1229
+ const J = `
1230
1230
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
1231
1231
  <polyline points="6 9 12 15 18 9"></polyline>
1232
1232
  </svg>
1233
1233
  `;
1234
- class I extends p {
1234
+ class N extends p {
1235
1235
  constructor(t = {}) {
1236
1236
  if (super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.clickOutsideListener = null, this.resizeListener = null, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
1237
1237
  const e = this._options.findIndex((i) => i.value === this.value);
@@ -1275,7 +1275,7 @@ class I extends p {
1275
1275
  o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
1276
1276
  }), document.body.appendChild(i);
1277
1277
  const s = document.createElement("div");
1278
- return s.classList.add("svg-container"), s.innerHTML = U, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
1278
+ return s.classList.add("svg-container"), s.innerHTML = J, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
1279
1279
  this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
1280
1280
  }).catch((n) => {
1281
1281
  console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
@@ -1344,7 +1344,7 @@ class I extends p {
1344
1344
  this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.parentNode && this.optionsListEl.parentNode.removeChild(this.optionsListEl), super.destroy();
1345
1345
  }
1346
1346
  }
1347
- class J extends p {
1347
+ class q extends p {
1348
1348
  constructor(t = {}) {
1349
1349
  super(t), this.inputType = "button", this.value || (this.value = "center");
1350
1350
  }
@@ -1400,7 +1400,7 @@ class J extends p {
1400
1400
  }), t.appendChild(i), t;
1401
1401
  }
1402
1402
  }
1403
- class Ct extends p {
1403
+ class bt extends p {
1404
1404
  constructor(t) {
1405
1405
  super(t), this.inputType = "button", this.bgWithAlpha = "rgba(145, 158, 171, 0.08)";
1406
1406
  }
@@ -1429,7 +1429,7 @@ class Ct extends p {
1429
1429
  return a.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), a.appendChild(t), a;
1430
1430
  }
1431
1431
  }
1432
- class wt extends p {
1432
+ class Et extends p {
1433
1433
  constructor(t = {}) {
1434
1434
  super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
1435
1435
  const e = t.width || 0, i = t.height || 0;
@@ -1442,14 +1442,14 @@ class wt extends p {
1442
1442
  suffix: "px",
1443
1443
  minValue: this.minWidth,
1444
1444
  maxValue: this.maxWidth,
1445
- icon: q
1445
+ icon: Z
1446
1446
  }), this.heightSetting = new f({
1447
1447
  title: "Height",
1448
1448
  default: this.value.height,
1449
1449
  suffix: "px",
1450
1450
  minValue: this.minHeight,
1451
1451
  maxValue: this.maxHeight,
1452
- icon: Z
1452
+ icon: K
1453
1453
  }), this.widthSetting.setOnChange(this.handleWidthChange.bind(this)), this.heightSetting.setOnChange(this.handleHeightChange.bind(this));
1454
1454
  }
1455
1455
  handleWidthChange(t) {
@@ -1543,20 +1543,20 @@ class wt extends p {
1543
1543
  }
1544
1544
  }
1545
1545
  }
1546
- const q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1546
+ const Z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1547
1547
  <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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
1548
- </svg>`, Z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1548
+ </svg>`, K = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1549
1549
  <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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
1550
- </svg>`, M = `
1550
+ </svg>`, I = `
1551
1551
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
1552
1552
  <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"/>
1553
1553
  </svg>
1554
- `, K = `
1554
+ `, X = `
1555
1555
  <svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
1556
1556
  <rect width="91" height="71" rx="4" fill="#F2F4F7"/>
1557
1557
  <path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
1558
1558
  </svg>
1559
- `, X = `
1559
+ `, Y = `
1560
1560
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
1561
1561
  <path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
1562
1562
  </svg>
@@ -1580,7 +1580,7 @@ const q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
1580
1580
  <circle cx="6.7" cy="6.7" r="1.5" fill="#02CC59" opacity="0.3"/>
1581
1581
  </svg>
1582
1582
  `;
1583
- class O extends p {
1583
+ class T extends p {
1584
1584
  constructor(t = {}) {
1585
1585
  super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, this.errorContainer = null, this.messageListener = null, this.loadingSpinner = null, this.props.delete === void 0 && (this.props.delete = !0), this.props.maxFileSizeMB === void 0 && (this.props.maxFileSizeMB = 5), !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl), this.setupMessageListener();
1586
1586
  }
@@ -1630,7 +1630,7 @@ class O extends p {
1630
1630
  );
1631
1631
  if (t && t !== "") {
1632
1632
  this.showLoading(), s && s instanceof HTMLElement && (s.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
1633
- <span class="upload-icon">${M}</span>
1633
+ <span class="upload-icon">${I}</span>
1634
1634
  <span class="upload-label">Replace</span>
1635
1635
  `);
1636
1636
  const n = () => {
@@ -1641,7 +1641,7 @@ class O extends p {
1641
1641
  this.previewEl.addEventListener("load", n), this.previewEl.addEventListener("error", a), this.previewEl.src = t;
1642
1642
  } else
1643
1643
  this.hideLoading(), this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewEl.style.display = "none", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "block"), e && e.classList.add("no-image"), i && (i.innerHTML = `
1644
- <span class="upload-icon">${M}</span>
1644
+ <span class="upload-icon">${I}</span>
1645
1645
  <span class="upload-label">Upload</span>
1646
1646
  `);
1647
1647
  }
@@ -1674,9 +1674,9 @@ class O extends p {
1674
1674
  const s = this.value && this.value !== "";
1675
1675
  s || i.classList.add("no-image");
1676
1676
  const n = document.createElement("div");
1677
- if (n.className = "preview-placeholder", n.innerHTML = K, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = Q, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
1677
+ if (n.className = "preview-placeholder", n.innerHTML = X, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.loadingSpinner = document.createElement("div"), this.loadingSpinner.className = "loading-spinner", this.loadingSpinner.innerHTML = Q, this.loadingSpinner.style.display = "none", this.previewWrapper.appendChild(this.loadingSpinner), this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
1678
1678
  const o = document.createElement("button");
1679
- o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML = X, this.previewWrapper.appendChild(o), o.onclick = (l) => {
1679
+ o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML = Y, this.previewWrapper.appendChild(o), o.onclick = (l) => {
1680
1680
  var r;
1681
1681
  l.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, ""), this.hideError();
1682
1682
  };
@@ -1684,7 +1684,7 @@ class O extends p {
1684
1684
  this.previewWrapper.appendChild(this.previewEl);
1685
1685
  const a = document.createElement("button");
1686
1686
  return a.className = "upload-button", this.getDataPropsPath() && a.setAttribute("data-test-id", this.getDataPropsPath()), a.innerHTML = `
1687
- <span class="upload-icon">${M}</span>
1687
+ <span class="upload-icon">${I}</span>
1688
1688
  <span class="upload-label">Upload</span>
1689
1689
  `, i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = () => {
1690
1690
  window.postMessage(
@@ -1697,14 +1697,14 @@ class O extends p {
1697
1697
  }, t;
1698
1698
  }
1699
1699
  }
1700
- class Et extends f {
1700
+ class xt extends f {
1701
1701
  constructor(t = {}) {
1702
1702
  super({
1703
1703
  ...t,
1704
1704
  title: t.title || "Height",
1705
1705
  suffix: t.suffix || "px",
1706
1706
  minValue: t.minValue ?? 0,
1707
- icon: t.icon || Y,
1707
+ icon: t.icon || tt,
1708
1708
  default: t.default ?? 100
1709
1709
  }), this.inputType = "number", this.mobileValue = t.mobile;
1710
1710
  }
@@ -1715,17 +1715,17 @@ class Et extends f {
1715
1715
  this.mobileValue = t, t !== void 0 && this.setValue(t);
1716
1716
  }
1717
1717
  }
1718
- const Y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1718
+ const tt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1719
1719
  <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"/>
1720
1720
  </svg>`;
1721
- class bt extends f {
1721
+ class yt extends f {
1722
1722
  constructor(t = {}) {
1723
1723
  super({
1724
1724
  ...t,
1725
1725
  title: t.title || "Width",
1726
1726
  suffix: t.suffix || "px",
1727
1727
  minValue: t.minValue ?? 0,
1728
- icon: t.icon || tt,
1728
+ icon: t.icon || et,
1729
1729
  default: t.default ?? 100
1730
1730
  }), this.inputType = "number", this.mobileValue = t.mobile;
1731
1731
  }
@@ -1736,14 +1736,14 @@ class bt extends f {
1736
1736
  this.mobileValue = t, t !== void 0 && this.setValue(t);
1737
1737
  }
1738
1738
  }
1739
- const tt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1739
+ const et = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1740
1740
  <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"/>
1741
- </svg>`, et = `
1741
+ </svg>`, it = `
1742
1742
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
1743
1743
  <polyline points="6 9 12 15 18 9"></polyline>
1744
1744
  </svg>
1745
1745
  `;
1746
- class xt extends p {
1746
+ class Lt extends p {
1747
1747
  constructor(t = {}) {
1748
1748
  if (super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.hasInitializedOptions = !1, this.selectedOptionIndex = null, t.default !== void 0 && (this.value = t.default), this.initializeOptions(t), !t.getOptionsAsync && this.value !== void 0) {
1749
1749
  const e = this._options.findIndex(
@@ -1798,7 +1798,7 @@ class xt extends p {
1798
1798
  o.onclick = (l) => this.selectApiOption(l, a, e), i.appendChild(o);
1799
1799
  }), t.appendChild(i);
1800
1800
  const s = document.createElement("div");
1801
- return s.classList.add("svg-container"), s.innerHTML = et, t.appendChild(s), s.onclick = () => {
1801
+ return s.classList.add("svg-container"), s.innerHTML = it, t.appendChild(s), s.onclick = () => {
1802
1802
  var n, a;
1803
1803
  this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
1804
1804
  }, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
@@ -1890,7 +1890,7 @@ class xt extends p {
1890
1890
  ), this.updateButtonText();
1891
1891
  }
1892
1892
  }
1893
- class yt extends p {
1893
+ class kt extends p {
1894
1894
  constructor(t) {
1895
1895
  var e, i;
1896
1896
  super(t), this.inputType = "text", this.value = t.default ?? ((i = (e = t.options) == null ? void 0 : e[0]) == null ? void 0 : i.value) ?? "", this.detectChangeCallback = t.detectChange;
@@ -1935,13 +1935,13 @@ class yt extends p {
1935
1935
  this.detectChangeCallback = t;
1936
1936
  }
1937
1937
  }
1938
- const it = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1938
+ const st = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1939
1939
  <path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
1940
1940
  </svg>`;
1941
- class Lt extends p {
1941
+ class Mt extends p {
1942
1942
  // Store mobile value
1943
1943
  constructor(t = {}) {
1944
- t.rowGap = t.rowGap ?? !0, t.columnGap = t.columnGap ?? !0, t.title = t.title ?? "Gap", t.icon = t.icon ?? it, t.suffix = t.suffix ?? "px", t.minValue = t.minValue ?? 0, super(t), this.inputType = "number", this.inputValues = {}, this.mobileValue = t.mobile, this.value = this.validateValue(t.default ?? 0), t.rowGap && (this.inputValues.row = this.value), t.columnGap && (this.inputValues.column = this.value);
1944
+ t.rowGap = t.rowGap ?? !0, t.columnGap = t.columnGap ?? !0, t.title = t.title ?? "Gap", t.icon = t.icon ?? st, t.suffix = t.suffix ?? "px", t.minValue = t.minValue ?? 0, super(t), this.inputType = "number", this.inputValues = {}, this.mobileValue = t.mobile, this.value = this.validateValue(t.default ?? 0), t.rowGap && (this.inputValues.row = this.value), t.columnGap && (this.inputValues.column = this.value);
1945
1945
  }
1946
1946
  draw() {
1947
1947
  const t = document.createElement("div");
@@ -1992,40 +1992,40 @@ class Lt extends p {
1992
1992
  this.mobileValue = t, t !== void 0 && this.setValue(t);
1993
1993
  }
1994
1994
  }
1995
- const st = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1995
+ const nt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1996
1996
  <path d="M2.25 11.75H15.75M5.85 2.75H12.15C13.4101 2.75 14.0402 2.75 14.5215 2.99524C14.9448 3.21095 15.289 3.55516 15.5048 3.97852C15.75 4.45982 15.75 5.08988 15.75 6.35V12.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.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.65V6.35C2.25 5.08988 2.25 4.45982 2.49524 3.97852C2.71095 3.55516 3.05516 3.21095 3.47852 2.99524C3.95982 2.75 4.58988 2.75 5.85 2.75Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1997
1997
  </svg>`;
1998
- class kt extends f {
1998
+ class Vt extends f {
1999
1999
  constructor(t = {}) {
2000
2000
  super({
2001
2001
  ...t,
2002
2002
  minValue: t.minValue ?? 0,
2003
2003
  maxValue: t.maxValue ?? 1e3,
2004
- icon: t.icon || st,
2004
+ icon: t.icon || nt,
2005
2005
  title: t.title || "Margin Bottom",
2006
2006
  default: t.default ?? 20,
2007
2007
  wrapperClassName: "margin-bottom-wrapper " + (t.wrapperClassName || "")
2008
2008
  }), this.inputType = "number";
2009
2009
  }
2010
2010
  }
2011
- const nt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2011
+ const at = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2012
2012
  <path d="M15.75 7.25H2.25m9.9 9h-6.3c-1.26 0-1.89 0-2.371-.245a2.25 2.25 0 0 1-.984-.983c-.245-.482-.245-1.112-.245-2.372v-6.3c0-1.26 0-1.89.245-2.371a2.25 2.25 0 0 1 .984-.984c.48-.245 1.11-.245 2.371-.245h6.3c1.26 0 1.89 0 2.371.245.424.216.768.56.984.984.245.48.245 1.11.245 2.371v6.3c0 1.26 0 1.89-.245 2.371-.216.424-.56.768-.984.984-.48.245-1.11.245-2.371.245"
2013
2013
  stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2014
2014
  </svg>`;
2015
- class Mt extends f {
2015
+ class It extends f {
2016
2016
  constructor(t = {}) {
2017
2017
  super({
2018
2018
  ...t,
2019
2019
  minValue: t.minValue ?? 0,
2020
2020
  maxValue: t.maxValue ?? 1e3,
2021
- icon: t.icon || nt,
2021
+ icon: t.icon || at,
2022
2022
  title: t.title || "Margin Top",
2023
2023
  default: t.default ?? 20,
2024
2024
  wrapperClassName: "margin-top-wrapper " + (t.wrapperClassName || "")
2025
2025
  }), this.inputType = "number";
2026
2026
  }
2027
2027
  }
2028
- class Vt extends p {
2028
+ class St extends p {
2029
2029
  constructor(t) {
2030
2030
  super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), t.default ? this.value = { ...t.default } : this.value || (this.value = {}), this.defaultLanguage = t.languages.includes(p.DefaultLanguage) ? p.DefaultLanguage : t.languages[0];
2031
2031
  const e = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
@@ -2037,12 +2037,46 @@ class Vt extends p {
2037
2037
  capitalizeFirstLetter(t) {
2038
2038
  return String(t).charAt(0).toUpperCase() + String(t).slice(1);
2039
2039
  }
2040
+ measureTextWidth(t, e) {
2041
+ this.textMeasureCanvas || (this.textMeasureCanvas = document.createElement("canvas"));
2042
+ const i = this.textMeasureCanvas.getContext("2d");
2043
+ if (!i) return t.length * 10;
2044
+ const s = `${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`.trim();
2045
+ return i.font = s, i.measureText(t).width;
2046
+ }
2047
+ adaptPlaceholderToSingleLine(t, e) {
2048
+ const i = window.getComputedStyle(t), s = parseFloat(i.paddingLeft) || 0, n = parseFloat(i.paddingRight) || 0, a = parseFloat(i.borderLeftWidth) || 0, o = parseFloat(i.borderRightWidth) || 0, l = Math.max(
2049
+ 0,
2050
+ t.clientWidth - s - n - a - o
2051
+ );
2052
+ if (l <= 0) {
2053
+ t.placeholder = e;
2054
+ return;
2055
+ }
2056
+ if (this.measureTextWidth(e, i) <= l) {
2057
+ t.placeholder = e;
2058
+ return;
2059
+ }
2060
+ const h = "...";
2061
+ let d = 0, u = e.length, w = 0;
2062
+ for (; d <= u; ) {
2063
+ const b = Math.floor((d + u) / 2), P = e.slice(0, b).trimEnd() + h;
2064
+ this.measureTextWidth(P, i) <= l ? (w = b, d = b + 1) : u = b - 1;
2065
+ }
2066
+ const V = e.slice(0, w).trimEnd() + h;
2067
+ t.placeholder = V;
2068
+ }
2069
+ autosizeTextarea(t, e = 3) {
2070
+ t.style.height = "auto";
2071
+ const i = window.getComputedStyle(t), s = parseFloat(i.lineHeight) || 20, n = parseFloat(i.paddingTop) + parseFloat(i.paddingBottom), a = parseFloat(i.borderTopWidth) + parseFloat(i.borderBottomWidth), o = s * e + n + a, l = Math.min(t.scrollHeight || 44, o);
2072
+ t.style.height = `${l}px`, t.scrollHeight > o ? t.style.overflowY = "auto" : t.style.overflowY = "hidden";
2073
+ }
2040
2074
  createTextareaRow(t, e) {
2041
2075
  const i = document.createElement("div");
2042
2076
  i.classList.add("simple-multi-language-row");
2043
2077
  const s = document.createElement("label");
2044
2078
  if (s.classList.add("simple-language-label"), s.textContent = t.toUpperCase(), s.setAttribute("for", `textarea-${t}`), i.appendChild(s), this.props.multiImg) {
2045
- const n = new O({
2079
+ const n = new T({
2046
2080
  defaultUrl: e || "",
2047
2081
  title: "",
2048
2082
  id: `${this.id}_upload_${t}`
@@ -2054,18 +2088,24 @@ class Vt extends p {
2054
2088
  a.classList.add("simple-language-upload"), i.appendChild(a);
2055
2089
  } else {
2056
2090
  const n = document.createElement("textarea");
2057
- n.id = `textarea-${t}`, n.classList.add("simple-language-textarea"), n.value = e || "";
2091
+ n.id = `textarea-${t}`, n.classList.add("simple-language-textarea"), n.value = e || "", n.rows = 1, n.style.overflowY = "hidden";
2058
2092
  let a = this.props.placeholder || "Enter text in {language}...";
2059
2093
  a.includes("{language}") && (a = a.replace(
2060
2094
  "{language}",
2061
2095
  t.toUpperCase()
2062
- )), n.placeholder = a, n.rows = this.props.rows || 3, this.getDataPropsPath() && n.setAttribute(
2096
+ )), n.setAttribute("data-full-placeholder", a), this.adaptPlaceholderToSingleLine(n, a), this.getDataPropsPath() && n.setAttribute(
2063
2097
  "data-test-id",
2064
2098
  `${this.getDataPropsPath()}_${t}`
2065
- ), n.addEventListener("input", (o) => {
2066
- const l = o.target;
2067
- this.updateLanguageValue(t, l.value), t === this.defaultLanguage && this.updateOtherLanguagePlaceholders(l.value);
2068
- }), i.appendChild(n);
2099
+ ), n.addEventListener("input", (l) => {
2100
+ const r = l.target;
2101
+ this.updateLanguageValue(t, r.value), t === this.defaultLanguage && this.updateOtherLanguagePlaceholders(r.value), this.autosizeTextarea(r, 3);
2102
+ const h = n.getAttribute("data-full-placeholder") || "";
2103
+ h && this.adaptPlaceholderToSingleLine(n, h);
2104
+ }), i.appendChild(n), ((l) => (typeof queueMicrotask == "function" ? queueMicrotask : (r) => setTimeout(r, 0))(l))(() => {
2105
+ this.autosizeTextarea(n, 3);
2106
+ const l = n.getAttribute("data-full-placeholder") || "";
2107
+ l && this.adaptPlaceholderToSingleLine(n, l);
2108
+ });
2069
2109
  }
2070
2110
  return i;
2071
2111
  }
@@ -2081,24 +2121,37 @@ class Vt extends p {
2081
2121
  const i = (s = this.container) == null ? void 0 : s.querySelector(
2082
2122
  `#textarea-${e}`
2083
2123
  );
2084
- i && (!i.value || i.value.trim() === "") && (i.placeholder = t || ((n = this.props.placeholder) == null ? void 0 : n.replace(
2085
- "{language}",
2086
- e.toUpperCase()
2087
- )) || `Enter text in ${e.toUpperCase()}...`);
2124
+ if (i && (!i.value || i.value.trim() === "")) {
2125
+ const a = t || ((n = this.props.placeholder) == null ? void 0 : n.replace(
2126
+ "{language}",
2127
+ e.toUpperCase()
2128
+ )) || `Enter text in ${e.toUpperCase()}...`;
2129
+ i.setAttribute("data-full-placeholder", a), this.adaptPlaceholderToSingleLine(i, a);
2130
+ }
2088
2131
  });
2089
2132
  }
2090
2133
  draw() {
2091
2134
  const t = document.createElement("div");
2092
2135
  if (t.classList.add("simple-multi-language-wrapper"), this.props.title) {
2093
- const i = document.createElement("div");
2094
- i.classList.add("simple-multi-language-title"), i.textContent = this.props.title, t.appendChild(i);
2136
+ const s = document.createElement("div");
2137
+ s.classList.add("simple-multi-language-title"), s.textContent = this.props.title, t.appendChild(s);
2095
2138
  }
2096
2139
  const e = document.createElement("div");
2097
- return e.classList.add("simple-multi-language-content"), this.props.languages.forEach((i) => {
2098
- var a;
2099
- const s = ((a = this.value) == null ? void 0 : a[i]) || "", n = this.createTextareaRow(i, s);
2100
- e.appendChild(n);
2101
- }), t.appendChild(e), this.container = t, t;
2140
+ e.classList.add("simple-multi-language-content"), this.props.languages.forEach((s) => {
2141
+ var o;
2142
+ const n = ((o = this.value) == null ? void 0 : o[s]) || "", a = this.createTextareaRow(s, n);
2143
+ e.appendChild(a);
2144
+ }), t.appendChild(e), this.container = t;
2145
+ const i = () => {
2146
+ if (!this.container) return;
2147
+ this.container.querySelectorAll(
2148
+ ".simple-language-textarea"
2149
+ ).forEach((n) => {
2150
+ const a = n.getAttribute("data-full-placeholder") || "";
2151
+ a && this.adaptPlaceholderToSingleLine(n, a);
2152
+ });
2153
+ };
2154
+ return window.addEventListener("resize", i), t;
2102
2155
  }
2103
2156
  setValue(t) {
2104
2157
  super.setValue(t), this.container && this.props.languages.forEach((e) => {
@@ -2115,7 +2168,7 @@ class Vt extends p {
2115
2168
  });
2116
2169
  }
2117
2170
  }
2118
- class It extends p {
2171
+ class Nt extends p {
2119
2172
  constructor(t = {}) {
2120
2173
  super(t), this.inputType = "select";
2121
2174
  const e = [
@@ -2126,7 +2179,7 @@ class It extends p {
2126
2179
  { name: "Bounce", value: "bounce 1.5s ease-in-out infinite" },
2127
2180
  { name: "Pulse", value: "pulse 1.5s ease-in-out infinite" }
2128
2181
  ];
2129
- this.selectSetting = new I({
2182
+ this.selectSetting = new N({
2130
2183
  title: this.title || "Animation",
2131
2184
  options: e,
2132
2185
  default: this.props.default || "none"
@@ -2142,16 +2195,16 @@ class It extends p {
2142
2195
  this.selectSetting.destroy(), super.destroy();
2143
2196
  }
2144
2197
  }
2145
- const at = `
2198
+ const ot = `
2146
2199
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2147
2200
  <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"/>
2148
2201
  </svg>
2149
- `, ot = `
2202
+ `, lt = `
2150
2203
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2151
2204
  <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"/>
2152
2205
  </svg>
2153
2206
  `;
2154
- class Nt extends v {
2207
+ class Ot extends v {
2155
2208
  constructor(t) {
2156
2209
  super({
2157
2210
  title: "Border",
@@ -2159,7 +2212,7 @@ class Nt extends v {
2159
2212
  settings: {
2160
2213
  size: new f({
2161
2214
  title: "Size",
2162
- icon: ot,
2215
+ icon: lt,
2163
2216
  default: (t == null ? void 0 : t.size) ?? 0,
2164
2217
  suffix: "px"
2165
2218
  }),
@@ -2168,7 +2221,7 @@ class Nt extends v {
2168
2221
  }),
2169
2222
  radius: new f({
2170
2223
  title: "Radius",
2171
- icon: at,
2224
+ icon: ot,
2172
2225
  default: (t == null ? void 0 : t.radius) ?? 12,
2173
2226
  suffix: "px"
2174
2227
  })
@@ -2187,20 +2240,20 @@ class Nt extends v {
2187
2240
  `;
2188
2241
  }
2189
2242
  }
2190
- const lt = `
2243
+ const rt = `
2191
2244
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
2192
2245
  <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"/>
2193
2246
  </svg>
2194
- `, rt = `
2247
+ `, ht = `
2195
2248
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2196
2249
  <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"/>
2197
2250
  </svg>
2198
- `, ht = `
2251
+ `, ct = `
2199
2252
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2200
2253
  <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"/>
2201
2254
  </svg>
2202
2255
  `;
2203
- class St extends v {
2256
+ class Ht extends v {
2204
2257
  constructor(t = {}) {
2205
2258
  const { showAlign: e = t.showAlign ?? !0, ...i } = t;
2206
2259
  super({
@@ -2211,9 +2264,9 @@ class St extends v {
2211
2264
  color: new C({
2212
2265
  default: i.colorDefault ?? "0, 0, 30"
2213
2266
  }),
2214
- fontFamily: new I({
2267
+ fontFamily: new N({
2215
2268
  title: "Font",
2216
- icon: lt,
2269
+ icon: rt,
2217
2270
  default: i.fontFamilyDefault ?? "Satoshi",
2218
2271
  options: i.fontFamilyOptions ?? [
2219
2272
  { name: "Alt", value: "Croco Sans Black Caps Alt" },
@@ -2224,9 +2277,9 @@ class St extends v {
2224
2277
  getOptions: i.fontFamilyGetOptions,
2225
2278
  getOptionsAsync: i.fontFamilyGetOptionsAsync
2226
2279
  }),
2227
- fontWeight: new I({
2280
+ fontWeight: new N({
2228
2281
  title: "Weight",
2229
- icon: rt,
2282
+ icon: ht,
2230
2283
  default: i.fontWeightDefault ?? "400",
2231
2284
  options: i.fontWeightOptions ?? [
2232
2285
  { name: "Regular", value: "400" },
@@ -2238,7 +2291,7 @@ class St extends v {
2238
2291
  }),
2239
2292
  fontSize: new f({
2240
2293
  title: "Size",
2241
- icon: ht,
2294
+ icon: ct,
2242
2295
  default: i.fontSizeDefault ?? 12,
2243
2296
  suffix: "px",
2244
2297
  mobile: i.fontSizeMobileDefault
@@ -2246,7 +2299,7 @@ class St extends v {
2246
2299
  };
2247
2300
  return e ? {
2248
2301
  ...s,
2249
- align: new J({
2302
+ align: new q({
2250
2303
  title: "Align",
2251
2304
  default: i.alignDefault ?? "center"
2252
2305
  })
@@ -2266,7 +2319,7 @@ class St extends v {
2266
2319
  `;
2267
2320
  }
2268
2321
  }
2269
- class b extends p {
2322
+ class y extends p {
2270
2323
  constructor(t) {
2271
2324
  super({
2272
2325
  ...t,
@@ -2312,33 +2365,33 @@ class b extends p {
2312
2365
  }), i;
2313
2366
  }
2314
2367
  }
2315
- class Ot extends v {
2368
+ class Tt extends v {
2316
2369
  constructor(t) {
2317
2370
  super({
2318
2371
  title: "Margins",
2319
2372
  collapsed: t == null ? void 0 : t.collapsed,
2320
2373
  settings: {
2321
- marginTop: new b({
2374
+ marginTop: new y({
2322
2375
  title: "Top",
2323
- icon: ct,
2376
+ icon: dt,
2324
2377
  suffix: "px",
2325
2378
  default: (t == null ? void 0 : t.marginTop) ?? "auto"
2326
2379
  }),
2327
- marginRight: new b({
2380
+ marginRight: new y({
2328
2381
  title: "Right",
2329
- icon: dt,
2382
+ icon: ut,
2330
2383
  suffix: "px",
2331
2384
  default: (t == null ? void 0 : t.marginRight) ?? 0
2332
2385
  }),
2333
- marginBottom: new b({
2386
+ marginBottom: new y({
2334
2387
  title: "Bottom",
2335
- icon: ut,
2388
+ icon: pt,
2336
2389
  suffix: "px",
2337
2390
  default: (t == null ? void 0 : t.marginBottom) ?? 0
2338
2391
  }),
2339
- marginLeft: new b({
2392
+ marginLeft: new y({
2340
2393
  title: "Left",
2341
- icon: pt,
2394
+ icon: gt,
2342
2395
  suffix: "px",
2343
2396
  default: (t == null ? void 0 : t.marginLeft) ?? 0
2344
2397
  })
@@ -2355,26 +2408,26 @@ class Ot extends v {
2355
2408
  `;
2356
2409
  }
2357
2410
  }
2358
- const ct = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2411
+ const dt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2359
2412
  <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"/>
2360
- </svg>`, dt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2361
- <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.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
2362
2413
  </svg>`, ut = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2363
- <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"/>
2414
+ <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.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
2364
2415
  </svg>`, pt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2416
+ <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"/>
2417
+ </svg>`, gt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
2365
2418
  <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"/>
2366
2419
  </svg>`;
2367
- class Ht extends v {
2420
+ class Pt extends v {
2368
2421
  constructor(t) {
2369
2422
  super({
2370
2423
  title: "Background Image",
2371
2424
  collapsed: t == null ? void 0 : t.collapsed,
2372
2425
  settings: {
2373
- backgroundImage: new O({
2426
+ backgroundImage: new T({
2374
2427
  ...t == null ? void 0 : t.uploadProps,
2375
2428
  default: (t == null ? void 0 : t.backgroundImage) ?? ""
2376
2429
  }),
2377
- opacity: new j({
2430
+ opacity: new U({
2378
2431
  default: (t == null ? void 0 : t.opacity) ?? 100
2379
2432
  }),
2380
2433
  backgroundColor: new C({
@@ -2404,39 +2457,39 @@ class Ht extends v {
2404
2457
  }
2405
2458
  }
2406
2459
  export {
2407
- J as AlignSetting,
2408
- It as AnimationSetting,
2409
- Ht as BackgroundSettingSet,
2410
- Nt as BorderSettingSet,
2411
- Ct as ButtonSetting,
2460
+ q as AlignSetting,
2461
+ Nt as AnimationSetting,
2462
+ Pt as BackgroundSettingSet,
2463
+ Ot as BorderSettingSet,
2464
+ bt as ButtonSetting,
2412
2465
  m as ColorSetting,
2413
2466
  C as ColorWithOpacitySetting,
2414
- wt as DimensionSetting,
2415
- Lt as GapSetting,
2416
- St as HeaderTypographySettingSet,
2417
- Et as HeightSetting,
2418
- vt as HtmlSetting,
2419
- kt as MarginBottomSetting,
2420
- Ot as MarginSettingGroup,
2421
- Mt as MarginTopSetting,
2422
- Vt as MultiLanguageSetting,
2467
+ Et as DimensionSetting,
2468
+ Mt as GapSetting,
2469
+ Ht as HeaderTypographySettingSet,
2470
+ xt as HeightSetting,
2471
+ wt as HtmlSetting,
2472
+ Vt as MarginBottomSetting,
2473
+ Tt as MarginSettingGroup,
2474
+ It as MarginTopSetting,
2475
+ St as MultiLanguageSetting,
2423
2476
  f as NumberSetting,
2424
- j as OpacitySetting,
2425
- xt as SelectApiSettings,
2426
- I as SelectSetting,
2477
+ U as OpacitySetting,
2478
+ Lt as SelectApiSettings,
2479
+ N as SelectSetting,
2427
2480
  p as Setting,
2428
2481
  v as SettingGroup,
2429
- z as StringSetting,
2430
- F as TabSettingGroup,
2431
- F as TabsSettingGroup,
2432
- yt as Toggle,
2433
- O as UploadSetting,
2434
- bt as WidthSetting,
2435
- ft as asSettingGroupWithSettings,
2436
- R as createSettingGroup,
2437
- mt as createTabSettingGroup,
2438
- w as isSetting,
2439
- gt as isSettingChild,
2482
+ W as StringSetting,
2483
+ R as TabSettingGroup,
2484
+ R as TabsSettingGroup,
2485
+ kt as Toggle,
2486
+ T as UploadSetting,
2487
+ yt as WidthSetting,
2488
+ Ct as asSettingGroupWithSettings,
2489
+ z as createSettingGroup,
2490
+ vt as createTabSettingGroup,
2491
+ E as isSetting,
2492
+ ft as isSettingChild,
2440
2493
  g as isSettingGroup,
2441
- E as iterateSettings
2494
+ x as iterateSettings
2442
2495
  };