builder-settings-types 0.0.279 → 0.0.280
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.
- package/dist/builder-settings-types.cjs.js +26 -18
- package/dist/builder-settings-types.es.js +131 -118
- package/dist/groups/borderSettingsSet.d.ts +7 -5
- package/dist/groups/headerTypographySettingsSet.d.ts +3 -2
- package/dist/settings/select-settings/selectSettings.d.ts +0 -6
- package/package.json +1 -1
|
@@ -15,10 +15,10 @@ function J(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
|
|
18
|
+
function et(c, t = 0) {
|
|
19
19
|
c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
|
|
20
20
|
const s = i, n = t + 1;
|
|
21
|
-
J(s, n),
|
|
21
|
+
J(s, n), et(s, n);
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
const Ct = {
|
|
@@ -111,7 +111,7 @@ class yt {
|
|
|
111
111
|
this.observer && (this.observer.disconnect(), this.observer = void 0), this.observedElements.clear();
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
const
|
|
114
|
+
const ot = new yt();
|
|
115
115
|
function X(c) {
|
|
116
116
|
if (c === null || typeof c != "object") return c;
|
|
117
117
|
if (c instanceof Date) return new Date(c.getTime());
|
|
@@ -233,14 +233,14 @@ class w {
|
|
|
233
233
|
return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
|
-
function
|
|
236
|
+
function D(c) {
|
|
237
237
|
return c instanceof w;
|
|
238
238
|
}
|
|
239
239
|
function L(c) {
|
|
240
240
|
return c instanceof T;
|
|
241
241
|
}
|
|
242
|
-
function
|
|
243
|
-
return
|
|
242
|
+
function at(c) {
|
|
243
|
+
return D(c) || L(c);
|
|
244
244
|
}
|
|
245
245
|
function j(c, t) {
|
|
246
246
|
for (const e in c)
|
|
@@ -249,7 +249,7 @@ function j(c, t) {
|
|
|
249
249
|
t(e, i);
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
|
-
const
|
|
252
|
+
const Y = class Y {
|
|
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
255
|
}, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.hide = !1, this.id = t.id || ht(), 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 || "", this.hide = t.hide ?? !1, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
|
|
@@ -275,11 +275,11 @@ const K = class K {
|
|
|
275
275
|
propagateDataPropsPath() {
|
|
276
276
|
j(this.settings, (t, e) => {
|
|
277
277
|
const i = String(t), s = this.dataPropsPath ? `${this.dataPropsPath}_${i}` : i;
|
|
278
|
-
(L(e) ||
|
|
278
|
+
(L(e) || D(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
|
|
279
279
|
});
|
|
280
280
|
}
|
|
281
281
|
updateNestingStyles() {
|
|
282
|
-
this.elementRef && (J(this.elementRef, this.nestingLevel),
|
|
282
|
+
this.elementRef && (J(this.elementRef, this.nestingLevel), et(this.elementRef, this.nestingLevel));
|
|
283
283
|
}
|
|
284
284
|
forceChildUIRefresh() {
|
|
285
285
|
Object.entries(this.settings).forEach(([t, e]) => {
|
|
@@ -355,7 +355,7 @@ const K = class K {
|
|
|
355
355
|
setMobileValues(t) {
|
|
356
356
|
!t || typeof t != "object" || (Object.entries(t).forEach(([e, i]) => {
|
|
357
357
|
const s = this.settings[e];
|
|
358
|
-
s && (L(s) ||
|
|
358
|
+
s && (L(s) || D(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
|
|
359
359
|
}), this.setValue(t), this.onChange && this.onChange(this.getValues()));
|
|
360
360
|
}
|
|
361
361
|
getMobileValues(t) {
|
|
@@ -398,7 +398,7 @@ const K = class K {
|
|
|
398
398
|
const o = this.getValues();
|
|
399
399
|
this.initialValues = o, t(o);
|
|
400
400
|
}), this.changeHandlers.add(() => t(this.getValues()));
|
|
401
|
-
else if (
|
|
401
|
+
else if (D(s)) {
|
|
402
402
|
const o = () => e();
|
|
403
403
|
this.changeHandlers.add(o), s.setOnChange(o);
|
|
404
404
|
} else {
|
|
@@ -421,10 +421,10 @@ const K = class K {
|
|
|
421
421
|
const o = i.slice(this.addItemCfg.keyPrefix.length), a = Number(o);
|
|
422
422
|
if (Number.isFinite(a)) {
|
|
423
423
|
const l = this.addItemCfg.createItem(a);
|
|
424
|
-
|
|
424
|
+
at(l) && (this.addSetting(i, l), n = l);
|
|
425
425
|
}
|
|
426
426
|
}
|
|
427
|
-
n && (L(n) ||
|
|
427
|
+
n && (L(n) || D(n)) && typeof n.setValue == "function" && n.setValue(s);
|
|
428
428
|
}), setTimeout(() => {
|
|
429
429
|
this.forceChildUIRefresh();
|
|
430
430
|
}, 0);
|
|
@@ -438,7 +438,7 @@ const K = class K {
|
|
|
438
438
|
const s = this.getValues();
|
|
439
439
|
this.initialValues = s, (n = this.onChange) == null || n.call(this, s), this.updateVisibility();
|
|
440
440
|
};
|
|
441
|
-
L(t) ? t.setOnChange(() => e()) :
|
|
441
|
+
L(t) ? t.setOnChange(() => e()) : D(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
|
|
442
442
|
}
|
|
443
443
|
addSetting(t, e) {
|
|
444
444
|
var s, n;
|
|
@@ -454,7 +454,7 @@ const K = class K {
|
|
|
454
454
|
p && t.startsWith(p) && this.addDeleteButtonToElement(a, t);
|
|
455
455
|
}
|
|
456
456
|
const r = o.querySelector(".sg-add-button-bottom");
|
|
457
|
-
r ? o.insertBefore(a, r) : o.appendChild(a),
|
|
457
|
+
r ? o.insertBefore(a, r) : o.appendChild(a), ot.trackElement(a), J(a, this.nestingLevel + 1), et(a, this.nestingLevel + 1);
|
|
458
458
|
const h = a.style.display;
|
|
459
459
|
a.style.display = "none", a.offsetHeight, a.style.display = h, this.updateNestingStyles();
|
|
460
460
|
}
|
|
@@ -705,7 +705,7 @@ const K = class K {
|
|
|
705
705
|
}
|
|
706
706
|
draw() {
|
|
707
707
|
const t = document.createElement("div");
|
|
708
|
-
t.className = "setting-group", t.id = `setting-group-${this.id}`,
|
|
708
|
+
t.className = "setting-group", t.id = `setting-group-${this.id}`, Y.hiddenElements.add(t), this.hide && (t.style.display = "none"), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), J(t, this.nestingLevel);
|
|
709
709
|
const e = document.createElement("div");
|
|
710
710
|
e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
|
|
711
711
|
"aria-expanded",
|
|
@@ -761,13 +761,13 @@ const K = class K {
|
|
|
761
761
|
h.innerHTML = `${p}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, h.addEventListener("click", (d) => {
|
|
762
762
|
d.stopPropagation(), d.preventDefault();
|
|
763
763
|
const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), g = this.addItemCfg.createItem(u);
|
|
764
|
-
if (
|
|
764
|
+
if (at(g)) {
|
|
765
765
|
const m = `${this.addItemCfg.keyPrefix}${u}`;
|
|
766
766
|
this.addSetting(m, g);
|
|
767
767
|
}
|
|
768
768
|
}), a.appendChild(h);
|
|
769
769
|
}
|
|
770
|
-
return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t,
|
|
770
|
+
return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, ot.trackElement(t), setTimeout(() => {
|
|
771
771
|
this.updateNestingStyles();
|
|
772
772
|
}, 0), this.pendingBlurHandler && (this.pendingBlurHandler = null), t;
|
|
773
773
|
}
|
|
@@ -809,8 +809,8 @@ const K = class K {
|
|
|
809
809
|
}
|
|
810
810
|
}
|
|
811
811
|
};
|
|
812
|
-
|
|
813
|
-
let T =
|
|
812
|
+
Y.hiddenElements = /* @__PURE__ */ new Set();
|
|
813
|
+
let T = Y;
|
|
814
814
|
function ae(c) {
|
|
815
815
|
return new bt(c);
|
|
816
816
|
}
|
|
@@ -1001,14 +1001,14 @@ const kt = `
|
|
|
1001
1001
|
<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="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
|
1002
1002
|
<path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
|
1003
1003
|
</svg>`;
|
|
1004
|
-
class
|
|
1004
|
+
class R extends w {
|
|
1005
1005
|
constructor(t = {}) {
|
|
1006
1006
|
super({
|
|
1007
1007
|
...t,
|
|
1008
1008
|
icon: t.icon || kt,
|
|
1009
1009
|
title: t.title || "Color & Opacity",
|
|
1010
1010
|
default: t.default || "#000000FF"
|
|
1011
|
-
}), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value =
|
|
1011
|
+
}), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value = R.normalizeHexWithOpacity(this.value));
|
|
1012
1012
|
}
|
|
1013
1013
|
static normalizeHexWithOpacity(t) {
|
|
1014
1014
|
return t = t.replace("#", ""), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), t.length === 6 && (t = t + "FF"), t.length === 8 && /^[0-9A-Fa-f]{8}$/.test(t) ? `#${t.toUpperCase()}` : (console.warn(`Invalid hex value "${t}", using default "#000000FF"`), "#000000FF");
|
|
@@ -1026,7 +1026,7 @@ class P extends w {
|
|
|
1026
1026
|
return `#${i}${n}`;
|
|
1027
1027
|
}
|
|
1028
1028
|
setValue(t) {
|
|
1029
|
-
t === void 0 || t === "" ? this.value = "#000000FF" : this.value =
|
|
1029
|
+
t === void 0 || t === "" ? this.value = "#000000FF" : this.value = R.normalizeHexWithOpacity(t), this.updateInputElements(), this.updateColorPreview(), this.onChange && this.onChange(this.value), this.detectChange && this.detectChange(this.value);
|
|
1030
1030
|
}
|
|
1031
1031
|
updateInputElements() {
|
|
1032
1032
|
this.value && (this.colorInputEl && (this.colorInputEl.value = this.getRgbColor()), this.textInputEl && (this.textInputEl.value = this.value), this.opacityInputEl && (this.opacityInputEl.value = this.getOpacityPercent().toString()));
|
|
@@ -1037,7 +1037,7 @@ class P extends w {
|
|
|
1037
1037
|
this.colorPreviewEl.style.backgroundColor = `rgba(${s}, ${n}, ${o}, ${e})`;
|
|
1038
1038
|
}
|
|
1039
1039
|
handleColorChange(t) {
|
|
1040
|
-
const e = this.getOpacityPercent(), i =
|
|
1040
|
+
const e = this.getOpacityPercent(), i = R.combineColorOpacity(
|
|
1041
1041
|
t,
|
|
1042
1042
|
e
|
|
1043
1043
|
);
|
|
@@ -1048,7 +1048,7 @@ class P extends w {
|
|
|
1048
1048
|
return e || i ? (this.setValue(t), !0) : !1;
|
|
1049
1049
|
}
|
|
1050
1050
|
handleOpacityChange(t) {
|
|
1051
|
-
const e = this.getRgbColor(), i = Math.max(0, Math.min(100, t)), s =
|
|
1051
|
+
const e = this.getRgbColor(), i = Math.max(0, Math.min(100, t)), s = R.combineColorOpacity(
|
|
1052
1052
|
e,
|
|
1053
1053
|
i
|
|
1054
1054
|
);
|
|
@@ -1245,7 +1245,7 @@ const It = `
|
|
|
1245
1245
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
1246
1246
|
</svg>
|
|
1247
1247
|
`;
|
|
1248
|
-
class
|
|
1248
|
+
class it extends w {
|
|
1249
1249
|
constructor(t = {}) {
|
|
1250
1250
|
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) {
|
|
1251
1251
|
const e = this._options.findIndex((i) => i.value === this.value);
|
|
@@ -1300,9 +1300,6 @@ class et extends w {
|
|
|
1300
1300
|
this.isOpen && this.checkDropdownPosition();
|
|
1301
1301
|
}, window.addEventListener("resize", this.resizeListener), t;
|
|
1302
1302
|
}
|
|
1303
|
-
/**
|
|
1304
|
-
* Check if dropdown should be positioned above the button
|
|
1305
|
-
*/
|
|
1306
1303
|
checkDropdownPosition() {
|
|
1307
1304
|
if (!this.optionsListEl || !this.buttonEl || !this.container) return;
|
|
1308
1305
|
const t = this.buttonEl.getBoundingClientRect();
|
|
@@ -1323,9 +1320,6 @@ class et extends w {
|
|
|
1323
1320
|
r === e ? l.classList.add("selected") : l.classList.remove("selected");
|
|
1324
1321
|
}));
|
|
1325
1322
|
}
|
|
1326
|
-
/**
|
|
1327
|
-
* Clean up dropdown positioning when closed
|
|
1328
|
-
*/
|
|
1329
1323
|
cleanupDropdownPosition() {
|
|
1330
1324
|
this.optionsListEl && (this.optionsListEl.style.position = "", this.optionsListEl.style.top = "", this.optionsListEl.style.bottom = "", this.optionsListEl.style.left = "", this.optionsListEl.style.right = "", this.optionsListEl.style.width = "");
|
|
1331
1325
|
}
|
|
@@ -1561,7 +1555,7 @@ const Vt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
|
|
|
1561
1555
|
<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"/>
|
|
1562
1556
|
</svg>`, Tt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1563
1557
|
<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"/>
|
|
1564
|
-
</svg>`,
|
|
1558
|
+
</svg>`, Q = `
|
|
1565
1559
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
1566
1560
|
<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"/>
|
|
1567
1561
|
</svg>
|
|
@@ -1647,7 +1641,7 @@ class pt extends w {
|
|
|
1647
1641
|
);
|
|
1648
1642
|
if (t && t !== "") {
|
|
1649
1643
|
this.showLoading(), s && s instanceof HTMLElement && (s.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
|
|
1650
|
-
<span class="upload-icon">${
|
|
1644
|
+
<span class="upload-icon">${Q}</span>
|
|
1651
1645
|
<span class="upload-label">Replace</span>
|
|
1652
1646
|
`);
|
|
1653
1647
|
const n = () => {
|
|
@@ -1658,7 +1652,7 @@ class pt extends w {
|
|
|
1658
1652
|
this.previewEl.addEventListener("load", n), this.previewEl.addEventListener("error", o), this.previewEl.src = t;
|
|
1659
1653
|
} else
|
|
1660
1654
|
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 = `
|
|
1661
|
-
<span class="upload-icon">${
|
|
1655
|
+
<span class="upload-icon">${Q}</span>
|
|
1662
1656
|
<span class="upload-label">Upload</span>
|
|
1663
1657
|
`);
|
|
1664
1658
|
}
|
|
@@ -1701,7 +1695,7 @@ class pt extends w {
|
|
|
1701
1695
|
this.previewWrapper.appendChild(this.previewEl);
|
|
1702
1696
|
const o = document.createElement("button");
|
|
1703
1697
|
return o.className = "upload-button", this.getDataPropsPath() && o.setAttribute("data-test-id", this.getDataPropsPath()), o.innerHTML = `
|
|
1704
|
-
<span class="upload-icon">${
|
|
1698
|
+
<span class="upload-icon">${Q}</span>
|
|
1705
1699
|
<span class="upload-label">Upload</span>
|
|
1706
1700
|
`, i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = () => {
|
|
1707
1701
|
window.postMessage(
|
|
@@ -2205,7 +2199,7 @@ class ye extends w {
|
|
|
2205
2199
|
{ name: "Bounce", value: "bounce 1.5s ease-in-out infinite" },
|
|
2206
2200
|
{ name: "Pulse", value: "pulse 1.5s ease-in-out infinite" }
|
|
2207
2201
|
];
|
|
2208
|
-
this.selectSetting = new
|
|
2202
|
+
this.selectSetting = new it({
|
|
2209
2203
|
title: this.title || "Animation",
|
|
2210
2204
|
options: e,
|
|
2211
2205
|
default: this.props.default || "none"
|
|
@@ -2221,7 +2215,7 @@ class ye extends w {
|
|
|
2221
2215
|
this.selectSetting.destroy(), super.destroy();
|
|
2222
2216
|
}
|
|
2223
2217
|
}
|
|
2224
|
-
const
|
|
2218
|
+
const Gt = (c, t) => {
|
|
2225
2219
|
let e = !1, i = 0, s = 0, n = 0, o = 0;
|
|
2226
2220
|
const a = (h) => {
|
|
2227
2221
|
if (h.target.closest("button")) return;
|
|
@@ -2237,7 +2231,7 @@ const Ut = (c, t) => {
|
|
|
2237
2231
|
e = !1, document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", r), document.body.style.userSelect = "";
|
|
2238
2232
|
};
|
|
2239
2233
|
c.addEventListener("mousedown", a);
|
|
2240
|
-
},
|
|
2234
|
+
}, G = (c) => {
|
|
2241
2235
|
if (!c) return null;
|
|
2242
2236
|
let t = c.trim();
|
|
2243
2237
|
return !t.startsWith("#") || (t = t.slice(1), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), !/^[0-9a-fA-F]{6}$/.test(t)) ? null : `#${t.toUpperCase()}`;
|
|
@@ -2248,7 +2242,7 @@ const Ut = (c, t) => {
|
|
|
2248
2242
|
g: parseInt(e.slice(2, 4), 16),
|
|
2249
2243
|
b: parseInt(e.slice(4, 6), 16)
|
|
2250
2244
|
};
|
|
2251
|
-
},
|
|
2245
|
+
}, H = (c) => {
|
|
2252
2246
|
const { r: t, g: e, b: i } = S(c), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
|
|
2253
2247
|
let h = 0;
|
|
2254
2248
|
r !== 0 && (a === s ? h = (n - o) / r % 6 : a === n ? h = (o - s) / r + 2 : h = (s - n) / r + 4), h < 0 && (h += 6);
|
|
@@ -2262,7 +2256,7 @@ const Ut = (c, t) => {
|
|
|
2262
2256
|
Math.round((l + o) * 255),
|
|
2263
2257
|
Math.round((r + o) * 255)
|
|
2264
2258
|
);
|
|
2265
|
-
},
|
|
2259
|
+
}, Ut = (c, t, e) => {
|
|
2266
2260
|
const i = e * (1 - t / 2), s = i === 0 || i === 1 ? 0 : (e - i) / Math.min(i, 1 - i);
|
|
2267
2261
|
return { hue: c, sat: s, lightness: i };
|
|
2268
2262
|
}, Z = (c, t, e) => {
|
|
@@ -2305,7 +2299,7 @@ const Ut = (c, t) => {
|
|
|
2305
2299
|
return `rgba(${n}, ${o}, ${a}, ${e})`;
|
|
2306
2300
|
}
|
|
2307
2301
|
}
|
|
2308
|
-
const i =
|
|
2302
|
+
const i = G(c);
|
|
2309
2303
|
if (i) {
|
|
2310
2304
|
const { r: s, g: n, b: o } = S(i);
|
|
2311
2305
|
return `rgba(${s}, ${n}, ${o}, ${e})`;
|
|
@@ -2342,7 +2336,7 @@ const Ut = (c, t) => {
|
|
|
2342
2336
|
/^[a-zA-Z]+$/
|
|
2343
2337
|
].some((e) => e.test(c.trim())), Wt = (c) => {
|
|
2344
2338
|
if (typeof document > "u")
|
|
2345
|
-
return ut(c) || !!
|
|
2339
|
+
return ut(c) || !!G(c);
|
|
2346
2340
|
const t = document.createElement("div");
|
|
2347
2341
|
return t.style.color = c, t.style.color !== "";
|
|
2348
2342
|
}, gt = (c) => {
|
|
@@ -2381,8 +2375,8 @@ const Ut = (c, t) => {
|
|
|
2381
2375
|
opacity: Math.round(l * 100)
|
|
2382
2376
|
};
|
|
2383
2377
|
}
|
|
2384
|
-
return { color:
|
|
2385
|
-
},
|
|
2378
|
+
return { color: G(t) || t, position: 0, opacity: 100 };
|
|
2379
|
+
}, lt = (c) => {
|
|
2386
2380
|
const t = [];
|
|
2387
2381
|
let e = "", i = 0;
|
|
2388
2382
|
for (let s = 0; s < c.length; s++) {
|
|
@@ -2396,7 +2390,7 @@ const Ut = (c, t) => {
|
|
|
2396
2390
|
e += n;
|
|
2397
2391
|
}
|
|
2398
2392
|
return e.trim() && t.push(e.trim()), t;
|
|
2399
|
-
},
|
|
2393
|
+
}, rt = (c, t) => {
|
|
2400
2394
|
const e = new RegExp(`${t}\\s*\\(`, "i"), i = c.match(e);
|
|
2401
2395
|
if (!i) return null;
|
|
2402
2396
|
const s = i.index + i[0].length;
|
|
@@ -2417,7 +2411,7 @@ const Ut = (c, t) => {
|
|
|
2417
2411
|
"contain",
|
|
2418
2412
|
"cover"
|
|
2419
2413
|
].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(c) || /^hsl/i.test(c) || zt(t);
|
|
2420
|
-
},
|
|
2414
|
+
}, ct = (c) => {
|
|
2421
2415
|
const t = [];
|
|
2422
2416
|
return c.forEach((e, i) => {
|
|
2423
2417
|
const s = e.trim();
|
|
@@ -2428,7 +2422,7 @@ const Ut = (c, t) => {
|
|
|
2428
2422
|
const l = gt(n);
|
|
2429
2423
|
l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
|
|
2430
2424
|
}), t;
|
|
2431
|
-
},
|
|
2425
|
+
}, $ = (c) => {
|
|
2432
2426
|
const t = c.stops && c.stops.length ? c.stops : [{ color: "#000000", position: 0, opacity: 100 }];
|
|
2433
2427
|
return {
|
|
2434
2428
|
type: c.type && ["linear", "radial", "solid"].includes(c.type) ? c.type : "linear",
|
|
@@ -2439,15 +2433,15 @@ const Ut = (c, t) => {
|
|
|
2439
2433
|
opacity: e.opacity === void 0 || Number.isNaN(e.opacity) ? 100 : e.opacity
|
|
2440
2434
|
}))
|
|
2441
2435
|
};
|
|
2442
|
-
},
|
|
2436
|
+
}, P = (c) => {
|
|
2443
2437
|
const t = c.replace(/;$/, "").trim();
|
|
2444
2438
|
if (Wt(t)) {
|
|
2445
2439
|
const s = gt(t);
|
|
2446
|
-
return
|
|
2440
|
+
return $({ type: "solid", angle: 0, stops: [s] });
|
|
2447
2441
|
}
|
|
2448
|
-
const e =
|
|
2442
|
+
const e = rt(t, "linear-gradient");
|
|
2449
2443
|
if (e) {
|
|
2450
|
-
const s =
|
|
2444
|
+
const s = lt(e);
|
|
2451
2445
|
let n = 90, o = s;
|
|
2452
2446
|
const a = s[0];
|
|
2453
2447
|
if (a.includes("deg")) {
|
|
@@ -2463,13 +2457,13 @@ const Ut = (c, t) => {
|
|
|
2463
2457
|
"to top right": 45,
|
|
2464
2458
|
"to top left": 315
|
|
2465
2459
|
}[a] ?? 90, o = s.slice(1));
|
|
2466
|
-
const l =
|
|
2467
|
-
return l.length ?
|
|
2460
|
+
const l = ct(o);
|
|
2461
|
+
return l.length ? $({ type: "linear", angle: n, stops: l }) : null;
|
|
2468
2462
|
}
|
|
2469
|
-
const i =
|
|
2463
|
+
const i = rt(t, "radial-gradient");
|
|
2470
2464
|
if (i) {
|
|
2471
|
-
const s =
|
|
2472
|
-
return o.length ?
|
|
2465
|
+
const s = lt(i), n = s[0] && !qt(s[0]) ? s.slice(1) : s, o = ct(n);
|
|
2466
|
+
return o.length ? $({ type: "radial", angle: 0, stops: o }) : null;
|
|
2473
2467
|
}
|
|
2474
2468
|
return null;
|
|
2475
2469
|
}, N = (c) => {
|
|
@@ -2481,7 +2475,7 @@ const Ut = (c, t) => {
|
|
|
2481
2475
|
(e) => `${dt(e.color, e.opacity ?? 100)} ${e.position}%`
|
|
2482
2476
|
).join(", ");
|
|
2483
2477
|
return c.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${c.angle}deg, ${t})`;
|
|
2484
|
-
},
|
|
2478
|
+
}, tt = (c) => {
|
|
2485
2479
|
if (c.type === "solid") {
|
|
2486
2480
|
const t = c.stops[0];
|
|
2487
2481
|
return t ? t.color.replace("#", "").toUpperCase() : "Color";
|
|
@@ -2497,8 +2491,8 @@ const Ut = (c, t) => {
|
|
|
2497
2491
|
static normalizeList(t) {
|
|
2498
2492
|
const e = /* @__PURE__ */ new Set(), i = [];
|
|
2499
2493
|
return t.forEach((s) => {
|
|
2500
|
-
let n =
|
|
2501
|
-
n ||
|
|
2494
|
+
let n = G(s);
|
|
2495
|
+
n || P(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
|
|
2502
2496
|
}), i.slice(0, this.MAX_COLORS);
|
|
2503
2497
|
}
|
|
2504
2498
|
static ensureLoaded() {
|
|
@@ -2541,11 +2535,11 @@ const Ut = (c, t) => {
|
|
|
2541
2535
|
}
|
|
2542
2536
|
static addColor(t, e) {
|
|
2543
2537
|
if (!t) return;
|
|
2544
|
-
let i =
|
|
2538
|
+
let i = G(t), s = "solid";
|
|
2545
2539
|
if (i)
|
|
2546
2540
|
s = "solid";
|
|
2547
2541
|
else {
|
|
2548
|
-
const l =
|
|
2542
|
+
const l = P(t);
|
|
2549
2543
|
l && (i = t, s = l.type === "solid" ? "solid" : "gradient");
|
|
2550
2544
|
}
|
|
2551
2545
|
if (!i) return;
|
|
@@ -2554,8 +2548,8 @@ const Ut = (c, t) => {
|
|
|
2554
2548
|
}
|
|
2555
2549
|
};
|
|
2556
2550
|
q.STORAGE_KEY = "settingsLib_recentColors", q.MAX_COLORS = 12, q.colors = null;
|
|
2557
|
-
let
|
|
2558
|
-
const
|
|
2551
|
+
let A = q;
|
|
2552
|
+
const st = (c, t) => {
|
|
2559
2553
|
const e = document.createElement("div");
|
|
2560
2554
|
e.className = "color-picker-recent-section";
|
|
2561
2555
|
const i = document.createElement("div");
|
|
@@ -2566,7 +2560,7 @@ const it = (c, t) => {
|
|
|
2566
2560
|
n.className = "color-picker-recent-placeholder", n.textContent = "No recent colors yet", e.appendChild(i), e.appendChild(s), e.appendChild(n);
|
|
2567
2561
|
const o = () => {
|
|
2568
2562
|
s.innerHTML = "";
|
|
2569
|
-
const a =
|
|
2563
|
+
const a = A.getColors(t);
|
|
2570
2564
|
if (a.length === 0) {
|
|
2571
2565
|
s.style.display = "none", n.style.display = "block";
|
|
2572
2566
|
return;
|
|
@@ -2624,7 +2618,7 @@ class Xt {
|
|
|
2624
2618
|
const i = document.createElement("span");
|
|
2625
2619
|
i.textContent = "Color";
|
|
2626
2620
|
const s = document.createElement("button");
|
|
2627
|
-
s.className = "color-picker-close", s.innerHTML = mt, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s),
|
|
2621
|
+
s.className = "color-picker-close", s.innerHTML = mt, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s), Gt(e, t);
|
|
2628
2622
|
const n = document.createElement("div");
|
|
2629
2623
|
n.className = "color-picker-area", this.colorArea = n;
|
|
2630
2624
|
const o = document.createElement("div");
|
|
@@ -2641,9 +2635,9 @@ class Xt {
|
|
|
2641
2635
|
p.className = "color-picker-opacity", this.opacitySlider = p;
|
|
2642
2636
|
const d = document.createElement("div");
|
|
2643
2637
|
d.className = "color-picker-opacity-marker", this.opacityMarker = d, p.appendChild(d);
|
|
2644
|
-
const u =
|
|
2645
|
-
var
|
|
2646
|
-
this.setColor(
|
|
2638
|
+
const u = st((B) => {
|
|
2639
|
+
var U;
|
|
2640
|
+
this.setColor(B), (U = this.onChange) == null || U.call(this, B, this.currentOpacity);
|
|
2647
2641
|
}, this.recentScope);
|
|
2648
2642
|
this.recentSectionRefresh = u.refresh;
|
|
2649
2643
|
const g = document.createElement("div");
|
|
@@ -2661,7 +2655,7 @@ class Xt {
|
|
|
2661
2655
|
const O = document.createElement("div");
|
|
2662
2656
|
O.className = "color-picker-input-container";
|
|
2663
2657
|
const k = document.createElement("button");
|
|
2664
|
-
return k.className = "color-picker-copy-inside", k.textContent = "Copy", O.appendChild(E), O.appendChild(k), g.appendChild(m), g.appendChild(O), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(p), t.appendChild(u.container), t.appendChild(g), t.addEventListener("click", (
|
|
2658
|
+
return k.className = "color-picker-copy-inside", k.textContent = "Copy", O.appendChild(E), O.appendChild(k), g.appendChild(m), g.appendChild(O), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(p), t.appendChild(u.container), t.appendChild(g), t.addEventListener("click", (B) => B.stopPropagation()), this.bind(n, r, p, E, m, k, l), t;
|
|
2665
2659
|
}
|
|
2666
2660
|
createBackdrop() {
|
|
2667
2661
|
const t = document.createElement("div");
|
|
@@ -2733,17 +2727,17 @@ class Xt {
|
|
|
2733
2727
|
setColor(t) {
|
|
2734
2728
|
var o;
|
|
2735
2729
|
this.currentColor = t;
|
|
2736
|
-
const { h: e, s: i, v: s } =
|
|
2730
|
+
const { h: e, s: i, v: s } = H(t), n = e >= 360 ? e % 360 : e;
|
|
2737
2731
|
this.hueMarker.style.left = `${n / 360 * 100}%`, this.colorMarker.style.left = `${i * 100}%`, this.colorMarker.style.top = `${(1 - s) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${n}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (o = this.onChange) == null || o.call(this, t, this.currentOpacity);
|
|
2738
2732
|
}
|
|
2739
2733
|
syncInput() {
|
|
2740
|
-
const t = this.select.value, { h: e, s: i, v: s } =
|
|
2734
|
+
const t = this.select.value, { h: e, s: i, v: s } = H(this.currentColor);
|
|
2741
2735
|
if (t === "hex") this.input.value = this.currentColor;
|
|
2742
2736
|
else if (t === "rgb") {
|
|
2743
2737
|
const { r: n, g: o, b: a } = S(this.currentColor);
|
|
2744
2738
|
this.input.value = `rgb(${n}, ${o}, ${a})`;
|
|
2745
2739
|
} else {
|
|
2746
|
-
const { hue: n, sat: o, lightness: a } =
|
|
2740
|
+
const { hue: n, sat: o, lightness: a } = Ut(e, i, s);
|
|
2747
2741
|
this.input.value = `hsl(${Math.round(n)}, ${Math.round(
|
|
2748
2742
|
o * 100
|
|
2749
2743
|
)}%, ${Math.round(a * 100)}%)`;
|
|
@@ -2778,7 +2772,7 @@ class Xt {
|
|
|
2778
2772
|
open(t, e, i) {
|
|
2779
2773
|
var E;
|
|
2780
2774
|
this.currentColor = t, this.currentOpacity = i ?? 100, this.syncInput();
|
|
2781
|
-
const { h: s, s: n, v: o } =
|
|
2775
|
+
const { h: s, s: n, v: o } = H(t);
|
|
2782
2776
|
this.hueMarker.style.left = `${s / 360 * 100}%`, this.colorMarker.style.left = `${n * 100}%`, this.colorMarker.style.top = `${(1 - o) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${s}, 100%, 50%))`, this.updateOpacityBg(), this.opacityMarker.style.left = `${this.currentOpacity}%`, (E = this.recentSectionRefresh) == null || E.call(this), this.isOpen = !0, this.backdrop.style.display = "block", this.backdrop.parentElement || document.body.appendChild(this.backdrop), this.element.style.display = "block", this.element.style.position = "fixed", this.element.style.zIndex = "10002", this.element.style.left = "-9999px", this.element.style.top = "0px", this.element.parentElement || document.body.appendChild(this.element);
|
|
2783
2777
|
const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), h = window.innerWidth, p = window.innerHeight, d = 16;
|
|
2784
2778
|
let u = r.right + 8, g = r.top;
|
|
@@ -2789,7 +2783,7 @@ class Xt {
|
|
|
2789
2783
|
}
|
|
2790
2784
|
close(t) {
|
|
2791
2785
|
var e;
|
|
2792
|
-
this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.recentScope !== "gradient" && (
|
|
2786
|
+
this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.recentScope !== "gradient" && (A.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
|
|
2793
2787
|
}
|
|
2794
2788
|
getElement() {
|
|
2795
2789
|
return this.element;
|
|
@@ -2830,7 +2824,7 @@ class Zt {
|
|
|
2830
2824
|
</div>
|
|
2831
2825
|
</div>
|
|
2832
2826
|
`;
|
|
2833
|
-
const e =
|
|
2827
|
+
const e = st((i) => {
|
|
2834
2828
|
this.applyRecentColor(i);
|
|
2835
2829
|
}, this.recentScope);
|
|
2836
2830
|
return this.recentSectionRefresh = e.refresh, t.appendChild(e.container), t;
|
|
@@ -2854,7 +2848,7 @@ class Zt {
|
|
|
2854
2848
|
".color-picker-color-input"
|
|
2855
2849
|
), r = this.container.querySelector(
|
|
2856
2850
|
".color-picker-copy-inside"
|
|
2857
|
-
), { h, s: p, v: d } =
|
|
2851
|
+
), { h, s: p, v: d } = H(this.currentColor);
|
|
2858
2852
|
s.style.left = `${h / 360 * 100}%`, e.style.left = `${p * 100}%`, e.style.top = `${(1 - d) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${h}, 100%, 50%))`, o.style.left = `${this.currentOpacity}%`, this.updateOpacityBackground(n), this.updateColorInput(a, l), this.setupColorAreaEvents(t, e, s), this.setupHueSliderEvents(
|
|
2859
2853
|
i,
|
|
2860
2854
|
s,
|
|
@@ -2882,7 +2876,7 @@ class Zt {
|
|
|
2882
2876
|
e.value = `rgb(${s.r}, ${s.g}, ${s.b})`;
|
|
2883
2877
|
break;
|
|
2884
2878
|
case "hsl":
|
|
2885
|
-
const { h: n, s: o, v: a } =
|
|
2879
|
+
const { h: n, s: o, v: a } = H(this.currentColor), l = a * (1 - o / 2), r = l === 0 || l === 1 ? 0 : (a - l) / Math.min(l, 1 - l);
|
|
2886
2880
|
e.value = `hsl(${Math.round(n)}, ${Math.round(
|
|
2887
2881
|
r * 100
|
|
2888
2882
|
)}%, ${Math.round(l * 100)}%)`;
|
|
@@ -2903,7 +2897,7 @@ class Zt {
|
|
|
2903
2897
|
}
|
|
2904
2898
|
commitRecentColor() {
|
|
2905
2899
|
var t;
|
|
2906
|
-
|
|
2900
|
+
A.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this);
|
|
2907
2901
|
}
|
|
2908
2902
|
setupColorAreaEvents(t, e, i) {
|
|
2909
2903
|
const s = (n) => {
|
|
@@ -2990,7 +2984,7 @@ class Zt {
|
|
|
2990
2984
|
}
|
|
2991
2985
|
parseHexInput(t) {
|
|
2992
2986
|
const e = t.startsWith("#") ? t : `#${t}`;
|
|
2993
|
-
return
|
|
2987
|
+
return G(e);
|
|
2994
2988
|
}
|
|
2995
2989
|
parseRgbInput(t) {
|
|
2996
2990
|
const e = t.match(
|
|
@@ -3033,7 +3027,7 @@ class Zt {
|
|
|
3033
3027
|
".color-picker-hue-marker"
|
|
3034
3028
|
), s = this.container.querySelector(
|
|
3035
3029
|
".color-picker-opacity"
|
|
3036
|
-
), { h: n, s: o, v: a } =
|
|
3030
|
+
), { h: n, s: o, v: a } = H(this.currentColor);
|
|
3037
3031
|
i.style.left = `${n / 360 * 100}%`, e.style.left = `${o * 100}%`, e.style.top = `${(1 - a) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${n}, 100%, 50%))`, this.updateOpacityBackground(s);
|
|
3038
3032
|
}
|
|
3039
3033
|
triggerChange() {
|
|
@@ -3058,7 +3052,7 @@ class Zt {
|
|
|
3058
3052
|
".color-picker-format-select"
|
|
3059
3053
|
), r = this.container.querySelector(
|
|
3060
3054
|
".color-picker-color-input"
|
|
3061
|
-
), { h, s: p, v: d } =
|
|
3055
|
+
), { h, s: p, v: d } = H(t), u = h >= 360 ? h % 360 : h;
|
|
3062
3056
|
n.style.left = `${u / 360 * 100}%`, s.style.left = `${p * 100}%`, s.style.top = `${(1 - d) * 100}%`, i.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${u}, 100%, 50%))`, o.style.left = `${e}%`, this.updateOpacityBackground(a), this.updateColorInput(l, r);
|
|
3063
3057
|
}
|
|
3064
3058
|
}
|
|
@@ -3098,11 +3092,11 @@ const V = class V extends w {
|
|
|
3098
3092
|
defaultValue() {
|
|
3099
3093
|
const t = this.originalDefault;
|
|
3100
3094
|
if (typeof t == "string") {
|
|
3101
|
-
const i =
|
|
3095
|
+
const i = P(t);
|
|
3102
3096
|
if (i)
|
|
3103
|
-
return
|
|
3097
|
+
return $(i);
|
|
3104
3098
|
}
|
|
3105
|
-
return
|
|
3099
|
+
return $(t && typeof t == "object" ? t : {
|
|
3106
3100
|
type: "linear",
|
|
3107
3101
|
angle: 90,
|
|
3108
3102
|
stops: [
|
|
@@ -3114,7 +3108,7 @@ const V = class V extends w {
|
|
|
3114
3108
|
setValue(t) {
|
|
3115
3109
|
var i, s;
|
|
3116
3110
|
let e = null;
|
|
3117
|
-
typeof t == "string" ? e =
|
|
3111
|
+
typeof t == "string" ? e = P(t) : t && typeof t == "object" && (e = $(t)), e || (e = this.defaultValue()), this.value = e, this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), (i = this.onChange) == null || i.call(this, this.value), (s = this.detectChange) == null || s.call(this, this.value), this.pendingSolidColor = null;
|
|
3118
3112
|
}
|
|
3119
3113
|
updateUI() {
|
|
3120
3114
|
if (this.previewEl && this.value)
|
|
@@ -3123,7 +3117,7 @@ const V = class V extends w {
|
|
|
3123
3117
|
this.previewEl.style.background = dt(t.color, e);
|
|
3124
3118
|
} else
|
|
3125
3119
|
this.previewEl.style.background = N(this.value);
|
|
3126
|
-
this.inputEl && this.value && !this.isEditing && (this.inputEl.value =
|
|
3120
|
+
this.inputEl && this.value && !this.isEditing && (this.inputEl.value = tt(this.value));
|
|
3127
3121
|
}
|
|
3128
3122
|
cssForTextValue() {
|
|
3129
3123
|
return this.value ? {
|
|
@@ -3145,10 +3139,10 @@ const V = class V extends w {
|
|
|
3145
3139
|
const e = document.createElement("div");
|
|
3146
3140
|
return e.className = "gradient-input-wrapper", this.previewEl = document.createElement("div"), this.previewEl.className = "gradient-mini-preview", this.previewEl.style.background = this.value ? N(this.value) : "linear-gradient(90deg, #a84b4b 0%, #786666 100%)", this.previewEl.addEventListener("mousedown", (i) => {
|
|
3147
3141
|
i.preventDefault(), i.stopPropagation(), this.openPopover();
|
|
3148
|
-
}), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "gradient-text-input", this.inputEl.placeholder = "Enter gradient CSS or paste color...", this.inputEl.value = this.value ?
|
|
3142
|
+
}), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "gradient-text-input", this.inputEl.placeholder = "Enter gradient CSS or paste color...", this.inputEl.value = this.value ? tt(this.value) : "", this.inputEl.readOnly = !1, this.inputEl.addEventListener("focus", () => {
|
|
3149
3143
|
this.isEditing = !0, this.value && (this.inputEl.value = N(this.value));
|
|
3150
3144
|
}), this.inputEl.addEventListener("blur", () => {
|
|
3151
|
-
this.isEditing = !1, this.value && (this.inputEl.value =
|
|
3145
|
+
this.isEditing = !1, this.value && (this.inputEl.value = tt(this.value));
|
|
3152
3146
|
}), this.inputEl.addEventListener(
|
|
3153
3147
|
"paste",
|
|
3154
3148
|
(i) => this.handlePaste(i)
|
|
@@ -3210,7 +3204,7 @@ const V = class V extends w {
|
|
|
3210
3204
|
initialOpacity: e.opacity ?? 100,
|
|
3211
3205
|
onColorChange: (s, n) => {
|
|
3212
3206
|
if (this.value) {
|
|
3213
|
-
const o =
|
|
3207
|
+
const o = P(s);
|
|
3214
3208
|
if (o && o.type !== "solid") {
|
|
3215
3209
|
this.value = o, this.switchType(o.type);
|
|
3216
3210
|
return;
|
|
@@ -3265,8 +3259,8 @@ const V = class V extends w {
|
|
|
3265
3259
|
d.type = "button", d.className = "gradient-add-stop", d.textContent = "+", h.appendChild(p), h.appendChild(d);
|
|
3266
3260
|
const u = document.createElement("div");
|
|
3267
3261
|
u.className = "gradient-stops", t.appendChild(h), t.appendChild(u), this.updateStopsList(u);
|
|
3268
|
-
const g =
|
|
3269
|
-
const f =
|
|
3262
|
+
const g = st((m) => {
|
|
3263
|
+
const f = P(m);
|
|
3270
3264
|
f && (this.value = f, this.switchType(f.type), this.updateUI(), this.triggerChange());
|
|
3271
3265
|
}, "all");
|
|
3272
3266
|
this.recentGradientRefresh = g.refresh, t.appendChild(g.container), d.addEventListener("click", () => {
|
|
@@ -3318,7 +3312,7 @@ const V = class V extends w {
|
|
|
3318
3312
|
(n, o) => n.position - o.position
|
|
3319
3313
|
);
|
|
3320
3314
|
i.forEach((n, o) => {
|
|
3321
|
-
var
|
|
3315
|
+
var U, nt;
|
|
3322
3316
|
const a = this.value.stops.findIndex(
|
|
3323
3317
|
(v, b) => v.position === n.position && v.color === n.color && v.opacity === n.opacity && this.value.stops.slice(0, b).filter(
|
|
3324
3318
|
(x) => x.position === n.position && x.color === n.color && x.opacity === n.opacity
|
|
@@ -3340,7 +3334,7 @@ const V = class V extends w {
|
|
|
3340
3334
|
const m = document.createElement("button");
|
|
3341
3335
|
m.type = "button", m.className = "gstop-color-copy", m.textContent = "Copy", d.appendChild(u), d.appendChild(g), d.appendChild(m);
|
|
3342
3336
|
const f = document.createElement("button");
|
|
3343
|
-
f.type = "button", f.className = "gstop-del", f.innerHTML = Jt, f.disabled = (((
|
|
3337
|
+
f.type = "button", f.className = "gstop-del", f.innerHTML = Jt, f.disabled = (((nt = (U = this.value) == null ? void 0 : U.stops) == null ? void 0 : nt.length) || 0) <= 2, r.appendChild(h), r.appendChild(d), r.appendChild(f), e.appendChild(r);
|
|
3344
3338
|
const C = document.createElement("span");
|
|
3345
3339
|
C.className = "gstop-opacity-label", C.textContent = "Opacity";
|
|
3346
3340
|
const y = document.createElement("div");
|
|
@@ -3354,7 +3348,7 @@ const V = class V extends w {
|
|
|
3354
3348
|
);
|
|
3355
3349
|
const k = document.createElement("span");
|
|
3356
3350
|
k.className = "gstop-opacity-value", k.textContent = `${n.opacity ?? 100}%`, y.appendChild(E), y.appendChild(k);
|
|
3357
|
-
const
|
|
3351
|
+
const B = new Xt((v, b) => {
|
|
3358
3352
|
g.value = v.replace("#", "").toUpperCase(), u.style.backgroundColor = v, this.value.stops[l].color = v, b !== void 0 && (this.value.stops[l].opacity = b, E.value = String(b), k.textContent = `${b}%`);
|
|
3359
3353
|
const x = S(v);
|
|
3360
3354
|
E.style.setProperty(
|
|
@@ -3366,7 +3360,7 @@ const V = class V extends w {
|
|
|
3366
3360
|
), this.updateUI(), this.triggerChange();
|
|
3367
3361
|
}, "solid");
|
|
3368
3362
|
g.addEventListener("click", (v) => {
|
|
3369
|
-
v.preventDefault(), v.stopPropagation(),
|
|
3363
|
+
v.preventDefault(), v.stopPropagation(), B.open(n.color, g, n.opacity ?? 100);
|
|
3370
3364
|
}), g.addEventListener("input", () => {
|
|
3371
3365
|
const v = g.value.trim(), b = v.startsWith("#") ? v : `#${v}`;
|
|
3372
3366
|
if (/^#[0-9A-Fa-f]{6}$/.test(b)) {
|
|
@@ -3484,13 +3478,13 @@ const V = class V extends w {
|
|
|
3484
3478
|
if (!(!this.popoverEl || !this.isPopoverOpen)) {
|
|
3485
3479
|
if (this.isPopoverOpen = !1, this.popoverEl.style.display = "none", document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), this.commitPendingSolidColor(), this.value && this.value.type !== "solid") {
|
|
3486
3480
|
const t = N(this.value);
|
|
3487
|
-
|
|
3481
|
+
A.addColor(t, "gradient");
|
|
3488
3482
|
}
|
|
3489
3483
|
this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), V.openInstance === this && (V.openInstance = null);
|
|
3490
3484
|
}
|
|
3491
3485
|
}
|
|
3492
3486
|
commitPendingSolidColor() {
|
|
3493
|
-
this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() :
|
|
3487
|
+
this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : A.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
|
|
3494
3488
|
}
|
|
3495
3489
|
handlePaste(t) {
|
|
3496
3490
|
var i;
|
|
@@ -3503,7 +3497,7 @@ const V = class V extends w {
|
|
|
3503
3497
|
this.parseAndSet(e.value);
|
|
3504
3498
|
}
|
|
3505
3499
|
parseAndSet(t) {
|
|
3506
|
-
const e =
|
|
3500
|
+
const e = P(t.trim());
|
|
3507
3501
|
e && this.setValue(e);
|
|
3508
3502
|
}
|
|
3509
3503
|
triggerChange() {
|
|
@@ -3527,7 +3521,7 @@ const V = class V extends w {
|
|
|
3527
3521
|
}
|
|
3528
3522
|
};
|
|
3529
3523
|
V.openInstance = null;
|
|
3530
|
-
let
|
|
3524
|
+
let K = V;
|
|
3531
3525
|
const Kt = `
|
|
3532
3526
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
3533
3527
|
<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"/>
|
|
@@ -3549,8 +3543,9 @@ class Ee extends T {
|
|
|
3549
3543
|
default: (t == null ? void 0 : t.size) ?? 0,
|
|
3550
3544
|
suffix: "px"
|
|
3551
3545
|
}),
|
|
3552
|
-
color: new
|
|
3553
|
-
|
|
3546
|
+
color: new K({
|
|
3547
|
+
title: "Border Color",
|
|
3548
|
+
default: (t == null ? void 0 : t.color) || "#000000"
|
|
3554
3549
|
}),
|
|
3555
3550
|
radius: new I({
|
|
3556
3551
|
title: "Radius",
|
|
@@ -3561,15 +3556,20 @@ class Ee extends T {
|
|
|
3561
3556
|
}
|
|
3562
3557
|
});
|
|
3563
3558
|
}
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3559
|
+
getValues() {
|
|
3560
|
+
const t = super.getValues(), e = this.settings.color.getValue();
|
|
3561
|
+
return {
|
|
3562
|
+
...t,
|
|
3563
|
+
color: e ? `${e} 1` : t.color
|
|
3564
|
+
};
|
|
3565
|
+
}
|
|
3567
3566
|
getCssCode() {
|
|
3568
|
-
const t = this.settings.color.
|
|
3567
|
+
const t = this.settings.color.getValue() ?? "#000000", e = this.settings.radius.value ?? 0, i = this.settings.size.value ?? 0;
|
|
3569
3568
|
return `
|
|
3570
|
-
border-
|
|
3569
|
+
border-image: ${t} 1;
|
|
3571
3570
|
border-width: ${i}px;
|
|
3572
3571
|
border-radius: ${e}px;
|
|
3572
|
+
border-style: solid;
|
|
3573
3573
|
`;
|
|
3574
3574
|
}
|
|
3575
3575
|
}
|
|
@@ -3594,10 +3594,11 @@ class be extends T {
|
|
|
3594
3594
|
collapsed: i.collapsed,
|
|
3595
3595
|
settings: (() => {
|
|
3596
3596
|
const s = {
|
|
3597
|
-
color: new
|
|
3598
|
-
|
|
3597
|
+
color: new K({
|
|
3598
|
+
title: "Color",
|
|
3599
|
+
default: i.colorDefault ?? "#001E1E"
|
|
3599
3600
|
}),
|
|
3600
|
-
fontFamily: new
|
|
3601
|
+
fontFamily: new it({
|
|
3601
3602
|
title: "Font",
|
|
3602
3603
|
icon: Qt,
|
|
3603
3604
|
default: i.fontFamilyDefault ?? "Satoshi",
|
|
@@ -3610,7 +3611,7 @@ class be extends T {
|
|
|
3610
3611
|
getOptions: i.fontFamilyGetOptions,
|
|
3611
3612
|
getOptionsAsync: i.fontFamilyGetOptionsAsync
|
|
3612
3613
|
}),
|
|
3613
|
-
fontWeight: new
|
|
3614
|
+
fontWeight: new it({
|
|
3614
3615
|
title: "Weight",
|
|
3615
3616
|
icon: te,
|
|
3616
3617
|
default: i.fontWeightDefault ?? "400",
|
|
@@ -3642,7 +3643,7 @@ class be extends T {
|
|
|
3642
3643
|
}
|
|
3643
3644
|
getCssCode() {
|
|
3644
3645
|
var o;
|
|
3645
|
-
const t = this.settings.color.
|
|
3646
|
+
const t = this.settings.color.getValue() ?? "#000000", e = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, n = ((o = this.settings.align) == null ? void 0 : o.value) ?? "left";
|
|
3646
3647
|
return `
|
|
3647
3648
|
color: ${t};
|
|
3648
3649
|
font-family: ${e};
|
|
@@ -3651,6 +3652,18 @@ class be extends T {
|
|
|
3651
3652
|
text-align: ${n};
|
|
3652
3653
|
`;
|
|
3653
3654
|
}
|
|
3655
|
+
getTextGradientCss() {
|
|
3656
|
+
var a;
|
|
3657
|
+
const t = this.settings.color.getCSSForText(), e = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, n = ((a = this.settings.align) == null ? void 0 : a.value) ?? "left";
|
|
3658
|
+
return `
|
|
3659
|
+
${Object.entries(t).map(([l, r]) => `${l}: ${r};`).join(`
|
|
3660
|
+
`)}
|
|
3661
|
+
font-family: ${e};
|
|
3662
|
+
font-weight: ${i};
|
|
3663
|
+
font-size: ${s}px;
|
|
3664
|
+
text-align: ${n};
|
|
3665
|
+
`;
|
|
3666
|
+
}
|
|
3654
3667
|
}
|
|
3655
3668
|
class _ extends w {
|
|
3656
3669
|
constructor(t) {
|
|
@@ -3763,7 +3776,7 @@ class xe extends T {
|
|
|
3763
3776
|
opacity: new St({
|
|
3764
3777
|
default: (t == null ? void 0 : t.opacity) ?? 100
|
|
3765
3778
|
}),
|
|
3766
|
-
backgroundColor: new
|
|
3779
|
+
backgroundColor: new R({
|
|
3767
3780
|
default: (t == null ? void 0 : t.backgroundColor) ?? "0, 0, 30"
|
|
3768
3781
|
})
|
|
3769
3782
|
}
|
|
@@ -3796,10 +3809,10 @@ export {
|
|
|
3796
3809
|
Ee as BorderSettingSet,
|
|
3797
3810
|
ce as ButtonSetting,
|
|
3798
3811
|
M as ColorSetting,
|
|
3799
|
-
|
|
3812
|
+
R as ColorWithOpacitySetting,
|
|
3800
3813
|
he as DimensionSetting,
|
|
3801
3814
|
me as GapSetting,
|
|
3802
|
-
|
|
3815
|
+
K as GradientSetting,
|
|
3803
3816
|
be as HeaderTypographySettingSet,
|
|
3804
3817
|
pe as HeightSetting,
|
|
3805
3818
|
re as HtmlSetting,
|
|
@@ -3810,7 +3823,7 @@ export {
|
|
|
3810
3823
|
I as NumberSetting,
|
|
3811
3824
|
St as OpacitySetting,
|
|
3812
3825
|
ue as SelectApiSettings,
|
|
3813
|
-
|
|
3826
|
+
it as SelectSetting,
|
|
3814
3827
|
w as Setting,
|
|
3815
3828
|
T as SettingGroup,
|
|
3816
3829
|
xt as StringSetting,
|
|
@@ -3822,8 +3835,8 @@ export {
|
|
|
3822
3835
|
le as asSettingGroupWithSettings,
|
|
3823
3836
|
wt as createSettingGroup,
|
|
3824
3837
|
ae as createTabSettingGroup,
|
|
3825
|
-
|
|
3826
|
-
|
|
3838
|
+
D as isSetting,
|
|
3839
|
+
at as isSettingChild,
|
|
3827
3840
|
L as isSettingGroup,
|
|
3828
3841
|
j as iterateSettings
|
|
3829
3842
|
};
|