@myissue/vue-website-page-builder
Version:
Vue 3 page builder component with drag & drop functionality.
1,670 lines • 1.24 MB
JavaScript
var lw = Object.defineProperty;
var aw = (n, e, t) => e in n ? lw(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
var de = (n, e, t) => aw(n, typeof e != "symbol" ? e + "" : e, t);
import * as Na from "vue";
import { defineComponent as Ze, computed as A, createBlock as oe, openBlock as y, Teleport as dw, createElementVNode as c, createElementBlock as w, createCommentVNode as E, normalizeClass as q, toDisplayString as C, renderSlot as en, ref as k, watchEffect as mi, Fragment as G, withCtx as j, nextTick as ee, readonly as pw, effectScope as kp, markRaw as tn, toRaw as Fe, hasInjectionContext as cw, inject as fn, getCurrentInstance as Tp, watch as Y, unref as x, reactive as uw, isRef as Vi, isReactive as Tl, toRef as ls, getCurrentScope as hw, onScopeDispose as fw, toRefs as Ha, Transition as Ft, withModifiers as Ye, createVNode as F, normalizeStyle as mw, renderList as ie, shallowRef as bw, onMounted as $n, onBeforeUnmount as Mp, h as Dn, customRef as gw, withDirectives as se, vModelSelect as Se, onBeforeMount as xw, vModelText as _n, provide as Yt, resolveDynamicComponent as Ep, cloneVNode as yw, onUnmounted as vw, createTextVNode as Ie, withKeys as Fs, vShow as Vs, createStaticVNode as Sw } from "vue";
const ww = {
id: "pbx-modal",
class: "pbx-font-sans"
}, Cw = {
key: 0,
class: "pbx-fixed pbx-inset-0 pbx-z-40 pbx-flex pbx-items-center pbx-justify-center pbx-mx-4",
role: "dialog",
"aria-modal": "true",
"aria-labelledby": "dialog-title"
}, kw = { class: "pbx-px-4 pbx-min-h-32" }, Ot = /* @__PURE__ */ Ze({
__name: "ModalBuilder",
props: {
title: {
type: String,
required: !0
},
showModalBuilder: {
type: Boolean,
default: !1
},
type: {
type: String,
default: "success"
},
maxWidth: {
type: String,
default: "2xl"
},
minHeight: {
type: String
},
maxHeight: {
type: String
},
noBackgroundOpacity: {
type: Boolean
}
},
emits: ["closeMainModalBuilder"],
setup(n, { emit: e }) {
const t = n, i = e, r = () => {
i("closeMainModalBuilder");
}, o = A(() => ({
sm: "md:pbx-max-w-sm pbx-w-screen",
md: "md:pbx-max-w-md pbx-w-screen",
lg: "md:pbx-max-w-lg pbx-w-screen",
xl: "md:pbx-max-w-xl pbx-w-screen",
"2xl": "md:pbx-max-w-2xl pbx-w-screen",
"3xl": "md:pbx-max-w-3xl pbx-w-screen",
"4xl": "md:pbx-max-w-4xl pbx-w-screen",
"5xl": "md:pbx-max-w-5xl pbx-w-screen",
"6xl": "md:pbx-max-w-6xl pbx-w-screen",
"7xl": "md:pbx-max-w-7xl pbx-w-screen",
full: "md:pbx-max-w-full pbx-w-screen",
// 100% width
screen: "md:pbx-w-screen pbx-w-screen pbx-max-w-none"
// truly full screen
})[t.maxWidth]);
return (s, l) => (y(), oe(dw, { to: "body" }, [
c("div", ww, [
n.showModalBuilder ? (y(), w("div", Cw, [
c("div", {
class: q(["pbx-fixed pbx-inset-0 pbx-bg-black/50 pbx-transition-opacity", [n.noBackgroundOpacity ? "pbx-bg-black/100" : ""]]),
onClick: r
}, null, 2),
c("div", {
class: q(["pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-3xl pbx-text-left pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-overflow-y-auto pbx-w-full", [
o.value ? o.value : "",
n.minHeight ? n.minHeight : "",
n.maxHeight ? n.maxHeight : ""
]])
}, [
c("div", {
class: q(["pbx-h-16 pbx-px-4 pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 pbx-flex pbx-items-center pbx-justify-between", [
n.type === "success" ? "pbx-bg-white" : "",
n.type === "warning" ? "pbx-bg-white" : "",
n.type === "danger" ? "pbx-bg-white" : "",
n.type === "delete" ? "pbx-bg-white" : ""
]])
}, [
c("h3", {
as: "h3",
class: q(["pbx-myQuaternaryHeader pbx-my-0 pbx-py-0", [
n.type === "success" ? "pbx-text-black" : "",
n.type === "warning" ? "pbx-text-black" : "",
n.type === "danger" ? "pbx-text-black" : "",
n.type === "delete" ? "pbx-text-black" : ""
]])
}, C(n.title), 3),
c("div", {
class: "pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black",
onClick: r
}, [...l[0] || (l[0] = [
c("span", { class: "material-symbols-outlined" }, " close ", -1)
])])
], 2),
c("div", kw, [
en(s.$slots, "default")
])
], 2)
])) : E("", !0)
])
]));
}
}), Tw = { key: 0 }, Mw = { class: "pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2" }, Ew = { id: "pagebuilder" }, Pw = ["innerHTML"], Bw = { key: 1 }, Lw = ["srcdoc"], Ra = {
__name: "Preview",
props: {
mobile: {
type: Boolean
}
},
setup(n) {
const e = n, t = k(""), i = k(null), r = localStorage.getItem("preview");
if (r)
try {
const a = JSON.parse(r);
t.value = Array.isArray(a) ? a.join("") : "";
} catch (a) {
console.error("Invalid preview data:", a), t.value = "";
}
const o = k(""), s = () => {
const a = [];
document.querySelectorAll('link[rel="stylesheet"], style').forEach((d) => {
d.tagName === "STYLE" ? a.push(`<style>${d.textContent}</style>`) : d.tagName === "LINK" && a.push(`<link rel="stylesheet" href="${d.href}">`);
}), o.value = a.join("");
}, l = A(() => `<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
${o.value}
</head>
<body>
<div id="pagebuilder" class="pbx-font-sans pbx-text-black">${t.value}</div>
</body>
</html>`);
return mi(() => {
e.mobile && t.value && s();
}), (a, d) => (y(), w(G, null, [
n.mobile ? E("", !0) : (y(), w("div", Tw, [
c("div", Mw, [
c("div", Ew, [
c("div", {
class: "",
innerHTML: t.value
}, null, 8, Pw)
])
])
])),
n.mobile ? (y(), w("div", Bw, [
c("iframe", {
ref_key: "iframeRef",
ref: i,
class: "pbx-mx-auto pbx-w-full pbx-bg-white pbx-shadow-lg pbx-h-[80vh] pbx-border-0",
srcdoc: l.value,
sandbox: "allow-same-origin allow-scripts allow-popups allow-forms allow-presentation",
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen"
}, null, 8, Lw)
])) : E("", !0)
], 64));
}
}, Aw = { class: "pbx-min-h-32 pbx-h-max pbx-font-sans pbx-w-full pbx-relative pbx-inline-block pbx-align-bottom pbx-text-left pbx-overflow-hidden pbx-transform pbx-transition-all sm:pbx-align-middle" }, Iw = ["innerHTML"], $w = { class: "pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end" }, Dw = {
key: 0,
class: "pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center"
}, _w = {
key: 1,
class: "pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-end"
}, dn = {
__name: "DynamicModalBuilder",
props: {
showDynamicModalBuilder: {
type: Boolean,
default: !1,
required: !0
},
simpleModal: {
type: Boolean,
default: !1,
required: !1
},
disabled: {
type: Boolean,
default: !1,
required: !1
},
isLoading: {
type: Boolean,
default: !1,
required: !1
},
disabledWhichButton: {
type: String,
default: "",
required: !1
},
maxWidth: {
type: String,
required: !1,
default: "2xl"
},
gridColumnAmount: {
type: Number,
required: !0
},
type: {
type: String,
required: !0
},
title: {
type: String,
required: !0
},
description: {
required: !0
},
firstButtonText: {
type: String
},
secondButtonText: {
type: String
},
thirdButtonText: {
type: String
}
},
emits: [
"firstModalButtonFunctionDynamicModalBuilder",
"secondModalButtonFunctionDynamicModalBuilder",
"thirdModalButtonFunctionDynamicModalBuilder"
],
setup(n, { emit: e }) {
const t = e, i = function() {
t("firstModalButtonFunctionDynamicModalBuilder");
}, r = function() {
t("secondModalButtonFunctionDynamicModalBuilder");
}, o = function() {
t("thirdModalButtonFunctionDynamicModalBuilder");
};
return (s, l) => (y(), oe(Ot, {
title: n.title,
showModalBuilder: n.showDynamicModalBuilder,
type: n.type,
onCloseMainModalBuilder: i,
maxWidth: n.maxWidth
}, {
default: j(() => [
en(s.$slots, "content"),
c("div", Aw, [
c("div", {
class: q({ "pbx-pr-4 pbx-pb-4": !n.simpleModal })
}, [
n.simpleModal !== !0 ? (y(), w("div", {
key: 0,
innerHTML: n.description,
class: "pbx-myPrimaryParagraph pbx-mb-6"
}, null, 8, Iw)) : E("", !0),
en(s.$slots, "header"),
en(s.$slots, "default")
], 2)
]),
c("div", $w, [
n.simpleModal !== !0 && !n.isLoading ? (y(), w("div", Dw, [
en(s.$slots, "footer"),
c("div", {
class: q([{
"sm:pbx-grid-cols-1": n.gridColumnAmount === 1,
"sm:pbx-grid-cols-2": n.gridColumnAmount === 2,
"sm:pbx-grid-cols-3": n.gridColumnAmount === 3
}, "sm:pbx-grid-cols-2 sm:pbx-items-end sm:pbx-justify-end pbx-flex pbx-flex-row pbx-myPrimaryGap pbx-w-full"])
}, [
n.firstButtonText ? (y(), w("button", {
key: 0,
ref: "firstButtonRef",
class: "pbx-mySecondaryButton",
type: "button",
onClick: i
}, C(n.firstButtonText), 513)) : E("", !0),
n.secondButtonText ? (y(), w("button", {
key: 1,
class: "pbx-myPrimaryButton pbx-bg-yellow-300 hover:pbx-bg-yellow-400 pbx-text-myPrimaryDarkGrayColor hover:pbx-text-myPrimaryDarkGrayColor focus:pbx-ring-yellow-400 pbx-w-full",
type: "button",
onClick: r
}, C(n.secondButtonText), 1)) : E("", !0),
n.thirdButtonText ? (y(), w("button", {
key: 2,
class: q(["pbx-myPrimaryButton pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor pbx-w-full", [
n.type === "danger" || n.type === "delete" ? "pbx-bg-red-600 focus-visible:pbx-ring-red-600 focus:pbx-ring-red-600 hover:pbx-bg-red-600" : "pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor"
]]),
type: "button",
onClick: o
}, C(n.thirdButtonText), 3)) : E("", !0)
], 2)
])) : E("", !0),
n.isLoading ? (y(), w("div", _w, [...l[0] || (l[0] = [
c("div", { class: "pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]" }, [
c("span", { class: "!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]" }, "Loading...")
], -1)
])])) : E("", !0)
])
]),
_: 3
}, 8, ["title", "showModalBuilder", "type", "maxWidth"]));
}
};
class ti {
static getHistory(e) {
const t = e + this.HISTORY_KEY_SUFFIX, i = localStorage.getItem(t);
return i ? JSON.parse(i) : [];
}
static addToHistory(e, t) {
const i = e + this.HISTORY_KEY_SUFFIX;
let r = this.getHistory(e);
r.push(t), r.length > this.MAX_HISTORY_SIZE && (r = r.slice(r.length - this.MAX_HISTORY_SIZE)), localStorage.setItem(i, JSON.stringify(r));
}
static clearHistory(e) {
const t = e + this.HISTORY_KEY_SUFFIX;
localStorage.removeItem(t);
}
}
de(ti, "HISTORY_KEY_SUFFIX", "-history"), de(ti, "MAX_HISTORY_SIZE", 10);
const ni = {
fontBase: [
"none",
"pbx-text-xs",
"pbx-text-sm",
"pbx-text-base",
"pbx-text-lg",
"pbx-text-xl",
"pbx-text-2xl",
"pbx-text-3xl",
"pbx-text-4xl",
"pbx-text-5xl",
"pbx-text-6xl",
"pbx-text-7xl",
"pbx-text-8xl",
"pbx-text-9xl"
],
fontDesktop: [
"none",
"lg:pbx-text-xs",
"lg:pbx-text-sm",
"lg:pbx-text-base",
"lg:pbx-text-lg",
"lg:pbx-text-xl",
"lg:pbx-text-2xl",
"lg:pbx-text-3xl",
"lg:pbx-text-4xl",
"lg:pbx-text-5xl",
"lg:pbx-text-6xl",
"lg:pbx-text-7xl",
"lg:pbx-text-8xl",
"lg:pbx-text-9xl"
],
fontTablet: [
"none",
"md:pbx-text-xs",
"md:pbx-text-sm",
"md:pbx-text-base",
"md:pbx-text-lg",
"md:pbx-text-xl",
"md:pbx-text-2xl",
"md:pbx-text-3xl",
"md:pbx-text-4xl",
"md:pbx-text-5xl",
"md:pbx-text-6xl",
"md:pbx-text-7xl",
"md:pbx-text-8xl",
"md:pbx-text-9xl"
],
fontMobile: [
"none",
"sm:pbx-text-xs",
"sm:pbx-text-sm",
"sm:pbx-text-base",
"sm:pbx-text-lg",
"sm:pbx-text-xl",
"sm:pbx-text-2xl",
"sm:pbx-text-3xl",
"sm:pbx-text-4xl",
"sm:pbx-text-5xl",
"sm:pbx-text-6xl",
"sm:pbx-text-7xl",
"sm:pbx-text-8xl",
"sm:pbx-text-9xl"
]
}, Wr = {
backgroundColorVariables: [
"none",
"pbx-bg-white",
"pbx-bg-black",
"pbx-bg-slate-50",
"pbx-bg-slate-100",
"pbx-bg-slate-200",
"pbx-bg-slate-300",
"pbx-bg-slate-400",
"pbx-bg-slate-500",
"pbx-bg-slate-600",
"pbx-bg-slate-700",
"pbx-bg-slate-800",
"pbx-bg-slate-900",
"pbx-bg-gray-50",
"pbx-bg-gray-100",
"pbx-bg-gray-200",
"pbx-bg-gray-300",
"pbx-bg-gray-400",
"pbx-bg-gray-500",
"pbx-bg-gray-600",
"pbx-bg-gray-700",
"pbx-bg-gray-800",
"pbx-bg-gray-900",
"pbx-bg-zinc-50",
"pbx-bg-zinc-100",
"pbx-bg-zinc-200",
"pbx-bg-zinc-300",
"pbx-bg-zinc-400",
"pbx-bg-zinc-500",
"pbx-bg-zinc-600",
"pbx-bg-zinc-700",
"pbx-bg-zinc-800",
"pbx-bg-zinc-900",
"pbx-bg-neutral-50",
"pbx-bg-neutral-100",
"pbx-bg-neutral-200",
"pbx-bg-neutral-300",
"pbx-bg-neutral-400",
"pbx-bg-neutral-500",
"pbx-bg-neutral-600",
"pbx-bg-neutral-700",
"pbx-bg-neutral-800",
"pbx-bg-neutral-900",
"pbx-bg-stone-50",
"pbx-bg-stone-100",
"pbx-bg-stone-200",
"pbx-bg-stone-300",
"pbx-bg-stone-400",
"pbx-bg-stone-500",
"pbx-bg-stone-600",
"pbx-bg-stone-700",
"pbx-bg-stone-800",
"pbx-bg-stone-900",
"pbx-bg-red-50",
"pbx-bg-red-100",
"pbx-bg-red-200",
"pbx-bg-red-300",
"pbx-bg-red-400",
"pbx-bg-red-500",
"pbx-bg-red-600",
"pbx-bg-red-700",
"pbx-bg-red-800",
"pbx-bg-red-900",
"pbx-bg-orange-50",
"pbx-bg-orange-100",
"pbx-bg-orange-200",
"pbx-bg-orange-300",
"pbx-bg-orange-400",
"pbx-bg-orange-500",
"pbx-bg-orange-600",
"pbx-bg-orange-700",
"pbx-bg-orange-800",
"pbx-bg-orange-900",
"pbx-bg-amber-50",
"pbx-bg-amber-100",
"pbx-bg-amber-200",
"pbx-bg-amber-300",
"pbx-bg-amber-400",
"pbx-bg-amber-500",
"pbx-bg-amber-600",
"pbx-bg-amber-700",
"pbx-bg-amber-800",
"pbx-bg-amber-900",
"pbx-bg-yellow-50",
"pbx-bg-yellow-100",
"pbx-bg-yellow-200",
"pbx-bg-yellow-300",
"pbx-bg-yellow-400",
"pbx-bg-yellow-500",
"pbx-bg-yellow-600",
"pbx-bg-yellow-700",
"pbx-bg-yellow-800",
"pbx-bg-yellow-900",
"pbx-bg-lime-50",
"pbx-bg-lime-100",
"pbx-bg-lime-200",
"pbx-bg-lime-300",
"pbx-bg-lime-400",
"pbx-bg-lime-500",
"pbx-bg-lime-600",
"pbx-bg-lime-700",
"pbx-bg-lime-800",
"pbx-bg-lime-900",
"pbx-bg-green-50",
"pbx-bg-green-100",
"pbx-bg-green-200",
"pbx-bg-green-300",
"pbx-bg-green-400",
"pbx-bg-green-500",
"pbx-bg-green-600",
"pbx-bg-green-700",
"pbx-bg-green-800",
"pbx-bg-green-900",
"pbx-bg-emerald-50",
"pbx-bg-emerald-100",
"pbx-bg-emerald-200",
"pbx-bg-emerald-300",
"pbx-bg-emerald-400",
"pbx-bg-emerald-500",
"pbx-bg-emerald-600",
"pbx-bg-emerald-700",
"pbx-bg-emerald-800",
"pbx-bg-emerald-900",
"pbx-bg-teal-50",
"pbx-bg-teal-100",
"pbx-bg-teal-200",
"pbx-bg-teal-300",
"pbx-bg-teal-400",
"pbx-bg-teal-500",
"pbx-bg-teal-600",
"pbx-bg-teal-700",
"pbx-bg-teal-800",
"pbx-bg-teal-900",
"pbx-bg-cyan-50",
"pbx-bg-cyan-100",
"pbx-bg-cyan-200",
"pbx-bg-cyan-300",
"pbx-bg-cyan-400",
"pbx-bg-cyan-500",
"pbx-bg-cyan-600",
"pbx-bg-cyan-700",
"pbx-bg-cyan-800",
"pbx-bg-cyan-900",
"pbx-bg-sky-50",
"pbx-bg-sky-100",
"pbx-bg-sky-200",
"pbx-bg-sky-300",
"pbx-bg-sky-400",
"pbx-bg-sky-500",
"pbx-bg-sky-600",
"pbx-bg-sky-700",
"pbx-bg-sky-800",
"pbx-bg-sky-900",
"pbx-bg-blue-50",
"pbx-bg-blue-100",
"pbx-bg-blue-200",
"pbx-bg-blue-300",
"pbx-bg-blue-400",
"pbx-bg-blue-500",
"pbx-bg-blue-600",
"pbx-bg-blue-700",
"pbx-bg-blue-800",
"pbx-bg-blue-900",
"pbx-bg-indigo-50",
"pbx-bg-indigo-100",
"pbx-bg-indigo-200",
"pbx-bg-indigo-300",
"pbx-bg-indigo-400",
"pbx-bg-indigo-500",
"pbx-bg-indigo-600",
"pbx-bg-indigo-700",
"pbx-bg-indigo-800",
"pbx-bg-indigo-900",
"pbx-bg-violet-50",
"pbx-bg-violet-100",
"pbx-bg-violet-200",
"pbx-bg-violet-300",
"pbx-bg-violet-400",
"pbx-bg-violet-500",
"pbx-bg-violet-600",
"pbx-bg-violet-700",
"pbx-bg-violet-800",
"pbx-bg-violet-900",
"pbx-bg-purple-50",
"pbx-bg-purple-100",
"pbx-bg-purple-200",
"pbx-bg-purple-300",
"pbx-bg-purple-400",
"pbx-bg-purple-500",
"pbx-bg-purple-600",
"pbx-bg-purple-700",
"pbx-bg-purple-800",
"pbx-bg-purple-900",
"pbx-bg-fuchsia-50",
"pbx-bg-fuchsia-100",
"pbx-bg-fuchsia-200",
"pbx-bg-fuchsia-300",
"pbx-bg-fuchsia-400",
"pbx-bg-fuchsia-500",
"pbx-bg-fuchsia-600",
"pbx-bg-fuchsia-700",
"pbx-bg-fuchsia-800",
"pbx-bg-fuchsia-900",
"pbx-bg-pink-50",
"pbx-bg-pink-100",
"pbx-bg-pink-200",
"pbx-bg-pink-300",
"pbx-bg-pink-400",
"pbx-bg-pink-500",
"pbx-bg-pink-600",
"pbx-bg-pink-700",
"pbx-bg-pink-800",
"pbx-bg-pink-900",
"pbx-bg-rose-50",
"pbx-bg-rose-100",
"pbx-bg-rose-200",
"pbx-bg-rose-300",
"pbx-bg-rose-400",
"pbx-bg-rose-500",
"pbx-bg-rose-600",
"pbx-bg-rose-700",
"pbx-bg-rose-800",
"pbx-bg-rose-900"
],
textColorVariables: [
"none",
"pbx-text-white",
"pbx-text-black",
"pbx-text-slate-50",
"pbx-text-slate-100",
"pbx-text-slate-200",
"pbx-text-slate-300",
"pbx-text-slate-400",
"pbx-text-slate-500",
"pbx-text-slate-600",
"pbx-text-slate-700",
"pbx-text-slate-800",
"pbx-text-slate-900",
"pbx-text-gray-50",
"pbx-text-gray-100",
"pbx-text-gray-200",
"pbx-text-gray-300",
"pbx-text-gray-400",
"pbx-text-gray-500",
"pbx-text-gray-600",
"pbx-text-gray-700",
"pbx-text-gray-800",
"pbx-text-gray-900",
"pbx-text-zinc-50",
"pbx-text-zinc-100",
"pbx-text-zinc-200",
"pbx-text-zinc-300",
"pbx-text-zinc-400",
"pbx-text-zinc-500",
"pbx-text-zinc-600",
"pbx-text-zinc-700",
"pbx-text-zinc-800",
"pbx-text-zinc-900",
"pbx-text-neutral-50",
"pbx-text-neutral-100",
"pbx-text-neutral-200",
"pbx-text-neutral-300",
"pbx-text-neutral-400",
"pbx-text-neutral-500",
"pbx-text-neutral-600",
"pbx-text-neutral-700",
"pbx-text-neutral-800",
"pbx-text-neutral-900",
"pbx-text-stone-50",
"pbx-text-stone-100",
"pbx-text-stone-200",
"pbx-text-stone-300",
"pbx-text-stone-400",
"pbx-text-stone-500",
"pbx-text-stone-600",
"pbx-text-stone-700",
"pbx-text-stone-800",
"pbx-text-stone-900",
"pbx-text-red-50",
"pbx-text-red-100",
"pbx-text-red-200",
"pbx-text-red-300",
"pbx-text-red-400",
"pbx-text-red-500",
"pbx-text-red-600",
"pbx-text-red-700",
"pbx-text-red-800",
"pbx-text-red-900",
"pbx-text-orange-50",
"pbx-text-orange-100",
"pbx-text-orange-200",
"pbx-text-orange-300",
"pbx-text-orange-400",
"pbx-text-orange-500",
"pbx-text-orange-600",
"pbx-text-orange-700",
"pbx-text-orange-800",
"pbx-text-orange-900",
"pbx-text-amber-50",
"pbx-text-amber-100",
"pbx-text-amber-200",
"pbx-text-amber-300",
"pbx-text-amber-400",
"pbx-text-amber-500",
"pbx-text-amber-600",
"pbx-text-amber-700",
"pbx-text-amber-800",
"pbx-text-amber-900",
"pbx-text-yellow-50",
"pbx-text-yellow-100",
"pbx-text-yellow-200",
"pbx-text-yellow-300",
"pbx-text-yellow-400",
"pbx-text-yellow-500",
"pbx-text-yellow-600",
"pbx-text-yellow-700",
"pbx-text-yellow-800",
"pbx-text-yellow-900",
"pbx-text-lime-50",
"pbx-text-lime-100",
"pbx-text-lime-200",
"pbx-text-lime-300",
"pbx-text-lime-400",
"pbx-text-lime-500",
"pbx-text-lime-600",
"pbx-text-lime-700",
"pbx-text-lime-800",
"pbx-text-lime-900",
"pbx-text-green-50",
"pbx-text-green-100",
"pbx-text-green-200",
"pbx-text-green-300",
"pbx-text-green-400",
"pbx-text-green-500",
"pbx-text-green-600",
"pbx-text-green-700",
"pbx-text-green-800",
"pbx-text-green-900",
"pbx-text-emerald-50",
"pbx-text-emerald-100",
"pbx-text-emerald-200",
"pbx-text-emerald-300",
"pbx-text-emerald-400",
"pbx-text-emerald-500",
"pbx-text-emerald-600",
"pbx-text-emerald-700",
"pbx-text-emerald-800",
"pbx-text-emerald-900",
"pbx-text-teal-50",
"pbx-text-teal-100",
"pbx-text-teal-200",
"pbx-text-teal-300",
"pbx-text-teal-400",
"pbx-text-teal-500",
"pbx-text-teal-600",
"pbx-text-teal-700",
"pbx-text-teal-800",
"pbx-text-teal-900",
"pbx-text-cyan-50",
"pbx-text-cyan-100",
"pbx-text-cyan-200",
"pbx-text-cyan-300",
"pbx-text-cyan-400",
"pbx-text-cyan-500",
"pbx-text-cyan-600",
"pbx-text-cyan-700",
"pbx-text-cyan-800",
"pbx-text-cyan-900",
"pbx-text-sky-50",
"pbx-text-sky-100",
"pbx-text-sky-200",
"pbx-text-sky-300",
"pbx-text-sky-400",
"pbx-text-sky-500",
"pbx-text-sky-600",
"pbx-text-sky-700",
"pbx-text-sky-800",
"pbx-text-sky-900",
"pbx-text-blue-50",
"pbx-text-blue-100",
"pbx-text-blue-200",
"pbx-text-blue-300",
"pbx-text-blue-400",
"pbx-text-blue-500",
"pbx-text-blue-600",
"pbx-text-blue-700",
"pbx-text-blue-800",
"pbx-text-blue-900",
"pbx-text-indigo-50",
"pbx-text-indigo-100",
"pbx-text-indigo-200",
"pbx-text-indigo-300",
"pbx-text-indigo-400",
"pbx-text-indigo-500",
"pbx-text-indigo-600",
"pbx-text-indigo-700",
"pbx-text-indigo-800",
"pbx-text-indigo-900",
"pbx-text-violet-50",
"pbx-text-violet-100",
"pbx-text-violet-200",
"pbx-text-violet-300",
"pbx-text-violet-400",
"pbx-text-violet-500",
"pbx-text-violet-600",
"pbx-text-violet-700",
"pbx-text-violet-800",
"pbx-text-violet-900",
"pbx-text-purple-50",
"pbx-text-purple-100",
"pbx-text-purple-200",
"pbx-text-purple-300",
"pbx-text-purple-400",
"pbx-text-purple-500",
"pbx-text-purple-600",
"pbx-text-purple-700",
"pbx-text-purple-800",
"pbx-text-purple-900",
"pbx-text-fuchsia-50",
"pbx-text-fuchsia-100",
"pbx-text-fuchsia-200",
"pbx-text-fuchsia-300",
"pbx-text-fuchsia-400",
"pbx-text-fuchsia-500",
"pbx-text-fuchsia-600",
"pbx-text-fuchsia-700",
"pbx-text-fuchsia-800",
"pbx-text-fuchsia-900",
"pbx-text-pink-50",
"pbx-text-pink-100",
"pbx-text-pink-200",
"pbx-text-pink-300",
"pbx-text-pink-400",
"pbx-text-pink-500",
"pbx-text-pink-600",
"pbx-text-pink-700",
"pbx-text-pink-800",
"pbx-text-pink-900",
"pbx-text-rose-50",
"pbx-text-rose-100",
"pbx-text-rose-200",
"pbx-text-rose-300",
"pbx-text-rose-400",
"pbx-text-rose-500",
"pbx-text-rose-600",
"pbx-text-rose-700",
"pbx-text-rose-800",
"pbx-text-rose-900"
]
}, Ur = {
opacities: [
"none",
"pbx-opacity-0",
"pbx-opacity-5",
"pbx-opacity-10",
"pbx-opacity-20",
"pbx-opacity-25",
"pbx-opacity-30",
"pbx-opacity-40",
"pbx-opacity-50",
"pbx-opacity-60",
"pbx-opacity-70",
"pbx-opacity-75",
"pbx-opacity-80",
"pbx-opacity-90",
"pbx-opacity-95",
"pbx-opacity-100"
],
backgroundOpacities: [
"none",
"pbx-bg-opacity-0",
"pbx-bg-opacity-5",
"pbx-bg-opacity-10",
"pbx-bg-opacity-20",
"pbx-bg-opacity-25",
"pbx-bg-opacity-30",
"pbx-bg-opacity-40",
"pbx-bg-opacity-50",
"pbx-bg-opacity-60",
"pbx-bg-opacity-70",
"pbx-bg-opacity-75",
"pbx-bg-opacity-80",
"pbx-bg-opacity-90",
"pbx-bg-opacity-95",
"pbx-bg-opacity-100"
]
}, Ht = {
fontWeight: [
"none",
"pbx-font-thin",
"pbx-font-extralight",
"pbx-font-light",
"pbx-font-normal",
"pbx-font-medium",
"pbx-font-bold",
"pbx-font-extrabold",
"pbx-font-black"
],
fontFamily: [
"none",
"pbx-font-sans",
"pbx-font-serif",
"pbx-font-mono",
"pbx-font-arial",
"pbx-font-helvetica",
"pbx-font-georgia",
"pbx-font-times",
"pbx-font-times-new-roman",
"pbx-font-courier",
"pbx-font-courier-new",
"pbx-font-verdana",
"pbx-font-tahoma",
"pbx-font-trebuchet",
"pbx-font-garamond",
"pbx-font-palantino",
"pbx-font-bookman",
"pbx-font-comic-sans",
"pbx-font-impact",
"pbx-font-lucida",
"pbx-font-lucida-console",
"pbx-font-lucida-sans",
"pbx-font-candara",
"pbx-font-optima",
"pbx-font-avenir",
"pbx-font-futura",
"pbx-font-calibri",
"pbx-font-cambria",
"pbx-font-didot",
"pbx-font-franklin-gothic",
"pbx-font-rockwell",
"pbx-font-baskerville"
],
fontStyle: ["none", "pbx-italic", "pbx-non-italic"]
}, nn = {
verticalPadding: [
"none",
"lg:pbx-py-0",
"lg:pbx-py-0.5",
"lg:pbx-py-1",
"lg:pbx-py-1.5",
"lg:pbx-py-2",
"lg:pbx-py-2.5",
"lg:pbx-py-3",
"lg:pbx-py-3.5",
"lg:pbx-py-4",
"lg:pbx-py-5",
"lg:pbx-py-6",
"lg:pbx-py-7",
"lg:pbx-py-8",
"lg:pbx-py-9",
"lg:pbx-py-10",
"lg:pbx-py-11",
"lg:pbx-py-12",
"lg:pbx-py-14",
"lg:pbx-py-16",
"lg:pbx-py-20",
"lg:pbx-py-24",
"lg:pbx-py-28",
"lg:pbx-py-32",
"lg:pbx-py-36",
"lg:pbx-py-40",
"lg:pbx-py-44",
"lg:pbx-py-48",
"lg:pbx-py-52",
"lg:pbx-py-56",
"lg:pbx-py-60",
"lg:pbx-py-64",
"lg:pbx-py-72",
"lg:pbx-py-80",
"lg:pbx-py-96"
],
horizontalPadding: [
"none",
"lg:pbx-px-0",
"lg:pbx-px-0.5",
"lg:pbx-px-1",
"lg:pbx-px-1.5",
"lg:pbx-px-2",
"lg:pbx-px-2.5",
"lg:pbx-px-3",
"lg:pbx-px-3.5",
"lg:pbx-px-4",
"lg:pbx-px-5",
"lg:pbx-px-6",
"lg:pbx-px-7",
"lg:pbx-px-8",
"lg:pbx-px-9",
"lg:pbx-px-10",
"lg:pbx-px-11",
"lg:pbx-px-12",
"lg:pbx-px-14",
"lg:pbx-px-16",
"lg:pbx-px-20",
"lg:pbx-px-24",
"lg:pbx-px-28",
"lg:pbx-px-32",
"lg:pbx-px-36",
"lg:pbx-px-40",
"lg:pbx-px-44",
"lg:pbx-px-48",
"lg:pbx-px-52",
"lg:pbx-px-56",
"lg:pbx-px-60",
"lg:pbx-px-64",
"lg:pbx-px-72",
"lg:pbx-px-80",
"lg:pbx-px-96"
],
verticalMargin: [
"none",
"lg:pbx-my-0",
"lg:pbx-my-0.5",
"lg:pbx-my-1",
"lg:pbx-my-1.5",
"lg:pbx-my-2",
"lg:pbx-my-2.5",
"lg:pbx-my-3",
"lg:pbx-my-3.5",
"lg:pbx-my-4",
"lg:pbx-my-5",
"lg:pbx-my-6",
"lg:pbx-my-7",
"lg:pbx-my-8",
"lg:pbx-my-9",
"lg:pbx-my-10",
"lg:pbx-my-11",
"lg:pbx-my-12",
"lg:pbx-my-14",
"lg:pbx-my-16",
"lg:pbx-my-20",
"lg:pbx-my-24",
"lg:pbx-my-28",
"lg:pbx-my-32",
"lg:pbx-my-36",
"lg:pbx-my-40",
"lg:pbx-my-44",
"lg:pbx-my-48",
"lg:pbx-my-52",
"lg:pbx-my-56",
"lg:pbx-my-60",
"lg:pbx-my-64",
"lg:pbx-my-72",
"lg:pbx-my-80",
"lg:pbx-my-96"
],
horizontalMargin: [
"none",
"lg:pbx-mx-0",
"lg:pbx-mx-0.5",
"lg:pbx-mx-1",
"lg:pbx-mx-1.5",
"lg:pbx-mx-2",
"lg:pbx-mx-2.5",
"lg:pbx-mx-3",
"lg:pbx-mx-3.5",
"lg:pbx-mx-4",
"lg:pbx-mx-5",
"lg:pbx-mx-6",
"lg:pbx-mx-7",
"lg:pbx-mx-8",
"lg:pbx-mx-9",
"lg:pbx-mx-10",
"lg:pbx-mx-11",
"lg:pbx-mx-12",
"lg:pbx-mx-14",
"lg:pbx-mx-16",
"lg:pbx-mx-20",
"lg:pbx-mx-24",
"lg:pbx-mx-28",
"lg:pbx-mx-32",
"lg:pbx-mx-36",
"lg:pbx-mx-40",
"lg:pbx-mx-44",
"lg:pbx-mx-48",
"lg:pbx-mx-52",
"lg:pbx-mx-56",
"lg:pbx-mx-60",
"lg:pbx-mx-64",
"lg:pbx-mx-72",
"lg:pbx-mx-80",
"lg:pbx-mx-96"
]
}, Ct = {
roundedGlobal: [
"none",
"pbx-rounded-sm",
"pbx-rounded",
"pbx-rounded-md",
"pbx-rounded-lg",
"pbx-rounded-xl",
"pbx-rounded-2xl",
"pbx-rounded-3xl",
"pbx-rounded-full"
],
roundedTopLeft: [
"none",
"pbx-rounded-tl-sm",
"pbx-rounded-tl",
"pbx-rounded-tl-md",
"pbx-rounded-tl-lg",
"pbx-rounded-tl-xl",
"pbx-rounded-tl-2xl",
"pbx-rounded-tl-3xl",
"pbx-rounded-tl-full"
],
roundedTopRight: [
"none",
"pbx-rounded-tr-sm",
"pbx-rounded-tr",
"pbx-rounded-tr-md",
"pbx-rounded-tr-lg",
"pbx-rounded-tr-xl",
"pbx-rounded-tr-2xl",
"pbx-rounded-tr-3xl",
"pbx-rounded-tr-full"
],
roundedBottomLeft: [
"none",
"pbx-rounded-bl-sm",
"pbx-rounded-bl",
"pbx-rounded-bl-md",
"pbx-rounded-bl-lg",
"pbx-rounded-bl-xl",
"pbx-rounded-bl-2xl",
"pbx-rounded-bl-3xl",
"pbx-rounded-bl-full"
],
roundedBottomRight: [
"none",
"pbx-rounded-br-sm",
"pbx-rounded-br",
"pbx-rounded-br-md",
"pbx-rounded-br-lg",
"pbx-rounded-br-xl",
"pbx-rounded-br-2xl",
"pbx-rounded-br-3xl",
"pbx-rounded-br-full"
]
}, oi = {
borderStyle: [
"none",
"pbx-border-solid",
"pbx-border-dashed",
"pbx-border-dotted",
"pbx-border-double",
"pbx-border-hidden"
],
borderWidth: [
"none",
"pbx-border",
// 1px
"pbx-border-2",
// 2px
"pbx-border-4",
// 4px
"pbx-border-8"
// 8px
],
borderColor: [
"none",
"pbx-border-white",
"pbx-border-black",
"pbx-border-slate-50",
"pbx-border-slate-100",
"pbx-border-slate-200",
"pbx-border-slate-300",
"pbx-border-slate-400",
"pbx-border-slate-500",
"pbx-border-slate-600",
"pbx-border-slate-700",
"pbx-border-slate-800",
"pbx-border-slate-900",
"pbx-border-gray-50",
"pbx-border-gray-100",
"pbx-border-gray-200",
"pbx-border-gray-300",
"pbx-border-gray-400",
"pbx-border-gray-500",
"pbx-border-gray-600",
"pbx-border-gray-700",
"pbx-border-gray-800",
"pbx-border-gray-900",
"pbx-border-zinc-50",
"pbx-border-zinc-100",
"pbx-border-zinc-200",
"pbx-border-zinc-300",
"pbx-border-zinc-400",
"pbx-border-zinc-500",
"pbx-border-zinc-600",
"pbx-border-zinc-700",
"pbx-border-zinc-800",
"pbx-border-zinc-900",
"pbx-border-neutral-50",
"pbx-border-neutral-100",
"pbx-border-neutral-200",
"pbx-border-neutral-300",
"pbx-border-neutral-400",
"pbx-border-neutral-500",
"pbx-border-neutral-600",
"pbx-border-neutral-700",
"pbx-border-neutral-800",
"pbx-border-neutral-900",
"pbx-border-stone-50",
"pbx-border-stone-100",
"pbx-border-stone-200",
"pbx-border-stone-300",
"pbx-border-stone-400",
"pbx-border-stone-500",
"pbx-border-stone-600",
"pbx-border-stone-700",
"pbx-border-stone-800",
"pbx-border-stone-900",
"pbx-border-red-50",
"pbx-border-red-100",
"pbx-border-red-200",
"pbx-border-red-300",
"pbx-border-red-400",
"pbx-border-red-500",
"pbx-border-red-600",
"pbx-border-red-700",
"pbx-border-red-800",
"pbx-border-red-900",
"pbx-border-orange-50",
"pbx-border-orange-100",
"pbx-border-orange-200",
"pbx-border-orange-300",
"pbx-border-orange-400",
"pbx-border-orange-500",
"pbx-border-orange-600",
"pbx-border-orange-700",
"pbx-border-orange-800",
"pbx-border-orange-900",
"pbx-border-amber-50",
"pbx-border-amber-100",
"pbx-border-amber-200",
"pbx-border-amber-300",
"pbx-border-amber-400",
"pbx-border-amber-500",
"pbx-border-amber-600",
"pbx-border-amber-700",
"pbx-border-amber-800",
"pbx-border-amber-900",
"pbx-border-yellow-50",
"pbx-border-yellow-100",
"pbx-border-yellow-200",
"pbx-border-yellow-300",
"pbx-border-yellow-400",
"pbx-border-yellow-500",
"pbx-border-yellow-600",
"pbx-border-yellow-700",
"pbx-border-yellow-800",
"pbx-border-yellow-900",
"pbx-border-lime-50",
"pbx-border-lime-100",
"pbx-border-lime-200",
"pbx-border-lime-300",
"pbx-border-lime-400",
"pbx-border-lime-500",
"pbx-border-lime-600",
"pbx-border-lime-700",
"pbx-border-lime-800",
"pbx-border-lime-900",
"pbx-border-green-50",
"pbx-border-green-100",
"pbx-border-green-200",
"pbx-border-green-300",
"pbx-border-green-400",
"pbx-border-green-500",
"pbx-border-green-600",
"pbx-border-green-700",
"pbx-border-green-800",
"pbx-border-green-900",
"pbx-border-emerald-50",
"pbx-border-emerald-100",
"pbx-border-emerald-200",
"pbx-border-emerald-300",
"pbx-border-emerald-400",
"pbx-border-emerald-500",
"pbx-border-emerald-600",
"pbx-border-emerald-700",
"pbx-border-emerald-800",
"pbx-border-emerald-900",
"pbx-border-teal-50",
"pbx-border-teal-100",
"pbx-border-teal-200",
"pbx-border-teal-300",
"pbx-border-teal-400",
"pbx-border-teal-500",
"pbx-border-teal-600",
"pbx-border-teal-700",
"pbx-border-teal-800",
"pbx-border-teal-900",
"pbx-border-cyan-50",
"pbx-border-cyan-100",
"pbx-border-cyan-200",
"pbx-border-cyan-300",
"pbx-border-cyan-400",
"pbx-border-cyan-500",
"pbx-border-cyan-600",
"pbx-border-cyan-700",
"pbx-border-cyan-800",
"pbx-border-cyan-900",
"pbx-border-sky-50",
"pbx-border-sky-100",
"pbx-border-sky-200",
"pbx-border-sky-300",
"pbx-border-sky-400",
"pbx-border-sky-500",
"pbx-border-sky-600",
"pbx-border-sky-700",
"pbx-border-sky-800",
"pbx-border-sky-900",
"pbx-border-blue-50",
"pbx-border-blue-100",
"pbx-border-blue-200",
"pbx-border-blue-300",
"pbx-border-blue-400",
"pbx-border-blue-500",
"pbx-border-blue-600",
"pbx-border-blue-700",
"pbx-border-blue-800",
"pbx-border-blue-900",
"pbx-border-indigo-50",
"pbx-border-indigo-100",
"pbx-border-indigo-200",
"pbx-border-indigo-300",
"pbx-border-indigo-400",
"pbx-border-indigo-500",
"pbx-border-indigo-600",
"pbx-border-indigo-700",
"pbx-border-indigo-800",
"pbx-border-indigo-900",
"pbx-border-violet-50",
"pbx-border-violet-100",
"pbx-border-violet-200",
"pbx-border-violet-300",
"pbx-border-violet-400",
"pbx-border-violet-500",
"pbx-border-violet-600",
"pbx-border-violet-700",
"pbx-border-violet-800",
"pbx-border-violet-900",
"pbx-border-purple-50",
"pbx-border-purple-100",
"pbx-border-purple-200",
"pbx-border-purple-300",
"pbx-border-purple-400",
"pbx-border-purple-500",
"pbx-border-purple-600",
"pbx-border-purple-700",
"pbx-border-purple-800",
"pbx-border-purple-900",
"pbx-border-fuchsia-50",
"pbx-border-fuchsia-100",
"pbx-border-fuchsia-200",
"pbx-border-fuchsia-300",
"pbx-border-fuchsia-400",
"pbx-border-fuchsia-500",
"pbx-border-fuchsia-600",
"pbx-border-fuchsia-700",
"pbx-border-fuchsia-800",
"pbx-border-fuchsia-900",
"pbx-border-pink-50",
"pbx-border-pink-100",
"pbx-border-pink-200",
"pbx-border-pink-300",
"pbx-border-pink-400",
"pbx-border-pink-500",
"pbx-border-pink-600",
"pbx-border-pink-700",
"pbx-border-pink-800",
"pbx-border-pink-900",
"pbx-border-rose-50",
"pbx-border-rose-100",
"pbx-border-rose-200",
"pbx-border-rose-300",
"pbx-border-rose-400",
"pbx-border-rose-500",
"pbx-border-rose-600",
"pbx-border-rose-700",
"pbx-border-rose-800",
"pbx-border-rose-900"
]
};
let wr;
const Ow = new Uint8Array(16);
function Nw() {
if (!wr && (wr = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !wr))
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
return wr(Ow);
}
const _e = [];
for (let n = 0; n < 256; ++n)
_e.push((n + 256).toString(16).slice(1));
function Hw(n, e = 0) {
return _e[n[e + 0]] + _e[n[e + 1]] + _e[n[e + 2]] + _e[n[e + 3]] + "-" + _e[n[e + 4]] + _e[n[e + 5]] + "-" + _e[n[e + 6]] + _e[n[e + 7]] + "-" + _e[n[e + 8]] + _e[n[e + 9]] + "-" + _e[n[e + 10]] + _e[n[e + 11]] + _e[n[e + 12]] + _e[n[e + 13]] + _e[n[e + 14]] + _e[n[e + 15]];
}
const Rw = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), za = {
randomUUID: Rw
};
function Fa(n, e, t) {
if (za.randomUUID && !n)
return za.randomUUID();
n = n || {};
const i = n.random || (n.rng || Nw)();
return i[6] = i[6] & 15 | 64, i[8] = i[8] & 63 | 128, Hw(i);
}
const ve = function(e = 200) {
return new Promise((t) => {
setTimeout(t, e);
});
}, Qt = function(n) {
return !n || typeof n == "object" && n.constructor === Object && Object.keys(n).length === 0;
};
function Pp(n, e) {
if (!n)
return console.warn("No valid pagebuilder element passed"), "";
const t = n.cloneNode(!0);
if (t.removeAttribute("id"), t.querySelectorAll('[id="nolocalstorage"]').forEach((o) => {
o.remove();
}), t.querySelectorAll(
"[data-componentid], [data-component-title], #page-builder-editor-editable-area"
).forEach((o) => {
o.removeAttribute("data-componentid"), o.removeAttribute("data-component-title"), o.id === "page-builder-editor-editable-area" && o.removeAttribute("id");
}), e && e && typeof e.imageUrlPrefix == "string") {
const o = e.imageUrlPrefix;
t.querySelectorAll("img").forEach((l) => {
const a = l.getAttribute("src") || "";
!a.startsWith("http") && // extra safety
o && !a.startsWith(o) && l.setAttribute("src", o + a.replace(/^\/+/, ""));
});
}
const r = (o) => {
for (let s = o.childNodes.length - 1; s >= 0; s--) {
const l = o.childNodes[s];
l.nodeType === Node.COMMENT_NODE ? o.removeChild(l) : l.nodeType === Node.ELEMENT_NODE && r(l);
}
};
return r(t), t.outerHTML;
}
const zw = [
"en",
"zh-Hans",
"fr",
"ja",
"ru",
"es",
"pt",
"de",
"ar",
"hi",
"da",
"it"
];
class Fw {
constructor(e) {
// Class properties with types
de(this, "fontSizeRegex", /^(sm:|md:|lg:|xl:|2xl:)?pbx-text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);
de(this, "pageBuilderStateStore");
de(this, "getLocalStorageItemName");
de(this, "getApplyImageToSelection");
de(this, "getHyberlinkEnable");
de(this, "getComponents");
de(this, "getComponent");
de(this, "getElement");
de(this, "getComponentArrayAddMethod");
de(this, "NoneListernesTags");
de(this, "hasStartedEditing", !1);
// Hold data from Database or Backend for updated post
de(this, "originalComponents");
// Holds data to be mounted when pagebuilder is not yet present in the DOM
de(this, "savedMountComponents", null);
de(this, "pendingMountComponents", null);
de(this, "isPageBuilderMissingOnStart", !1);
// Add a class-level WeakMap to track elements and their listeners
// Use class-level WeakMap from being a local variable inside addListenersToEditableElements to a private class-level property.
// This ensures that the map persists across multiple calls to the method and retains knowledge of
// which elements already have listeners.
// This prevents multiple event listeners being attached to the same HTML elements
de(this, "elementsWithListeners", /* @__PURE__ */ new WeakMap());
/**
* Handles the mouseover event for editable elements, showing a hover state.
* @param {Event} e - The mouse event.
* @param {HTMLElement} element - The element being hovered over.
* @private
*/
de(this, "handleMouseOver", (e, t) => {
e.preventDefault(), e.stopPropagation();
const i = document.querySelector("#pagebuilder");
if (!i) return;
const r = i.querySelector("[hovered]");
r && r.removeAttribute("hovered"), t.hasAttribute("selected") || t.setAttribute("hovered", "");
});
/**
* Handles the mouseleave event for editable elements, removing the hover state.
* @param {Event} e - The mouse event.
* @private
*/
de(this, "handleMouseLeave", (e) => {
e.preventDefault(), e.stopPropagation();
const t = document.querySelector("#pagebuilder");
if (!t) return;
const i = t.querySelector("[hovered]");
i && i.removeAttribute("hovered");
});
/**
* Attaches click, mouseover, and mouseleave event listeners to all editable elements in the page builder.
* @private
*/
de(this, "addListenersToEditableElements", async () => {
const e = document.querySelector("#pagebuilder");
e && (await ee(), e.querySelectorAll("section *").forEach((t) => {
if (this.isEditableElement(t)) {
const i = t;
if (this.elementsWithListeners.has(i)) {
const l = this.elementsWithListeners.get(i);
l && (i.removeEventListener("click", l.click), i.removeEventListener("mouseover", l.mouseover), i.removeEventListener("mouseleave", l.mouseleave));
}
const r = (l) => this.handleElementClick(l, i), o = (l) => this.handleMouseOver(l, i), s = (l) => this.handleMouseLeave(l);
i.addEventListener("click", r), i.addEventListener("mouseover", o), i.addEventListener("mouseleave", s), this.elementsWithListeners.set(i, {
click: r,
mouseover: o,
mouseleave: s
});
}
}));
});
/**
* Handles the click event for editable elements, setting the element as selected.
* @param {Event} e - The click event.
* @param {HTMLElement} element - The clicked element.
* @private
*/
de(this, "handleElementClick", async (e, t) => {
e.preventDefault(), e.stopPropagation();
const i = document.querySelector("#pagebuilder");
if (!i) return;
this.pageBuilderStateStore.setMenuRight(!0);
const r = i.querySelector("[selected]");
r && r.removeAttribute("selected"), t.removeAttribute("hovered"), t.setAttribute("selected", ""), this.pageBuilderStateStore.setElement(t), await this.handleAutoSave();
});
/**
* Triggers an auto-save of the current page builder content to local storage if enabled.
*/
de(this, "handleAutoSave", async () => {
this.startEditing();
const e = this.pageBuilderStateStore.getPageBuilderConfig;
if (e && e.userSettings && typeof e.userSettings.autoSave == "boolean" && e.userSettings.autoSave !== !1) {
if (this.pageBuilderStateStore.getIsSaving) return;
try {
this.pageBuilderStateStore.setIsSaving(!0), this.saveDomComponentsToLocalStorage(), await ve(400);
} catch (t) {
console.error("Error trying auto save.", t);
} finally {
this.pageBuilderStateStore.setIsSaving(!1);
}
}
if (e && !e.userSettings)
try {
this.pageBuilderStateStore.setIsSaving(!0), this.saveDomComponentsToLocalStorage(), await ve(400);
} catch (t) {
console.error("Error trying saving.", t);
} finally {
this.pageBuilderStateStore.setIsSaving(!1);
}
});
/**
* Manually saves the current page builder content to local storage.
*/
de(this, "handleManualSave", async (e) => {
this.pageBuilderStateStore.setIsSaving(!0), e || this.clearHtmlSelection(), this.startEditing(), this.saveDomComponentsToLocalStorage(), await ve(300), this.pageBuilderStateStore.setIsSaving(!1);
});
/**
* Ensures that a text area element has content, adding a visual indicator if it's empty.
*/
de(this, "ensureTextAreaHasContent", () => {
if (!this.getElement.value || typeof this.getElement.value.innerHTML != "string")
return;
const e = this.getElement.value, t = e.tagName;
["DIV"].includes(t) && e.tagName.toLowerCase() !== "img" && e.textContent && Number(e.textContent.length) === 0 ? (e.classList.add("h-6"), e.classList.add("bg-red-50")) : (e.classList.remove("h-6"), e.classList.remove("bg-red-50"));
});
/**
* Handles text input for an element, updating its content.
* @param {string} textContentVueModel - The new text content from the Vue model.
* @returns {Promise<void>}
*/
de(this, "handleTextInput", async (e) => {
var t;
typeof ((t = this.getElement.value) == null ? void 0 : t.innerHTML) == "string" && (typeof this.getElement.value.innerHTML == "string" && (await ee(), this.getElement.value.textContent = e, this.pageBuilderStateStore.setTextAreaVueModel(this.getElement.value.innerHTML), this.getElement.value.innerHTML = e), this.ensureTextAreaHasContent());
});
this.hasStartedEditing = !1, this.pageBuilderStateStore = e, this.getApplyImageToSelection = A(
() => this.pageBuilderStateStore.getApplyImageToSelection
), this.getLocalStorageItemName = A(
() => this.pageBuilderStateStore.getLocalStorageItemName
), this.getHyberlinkEnable = A(() => this.pageBuilderStateStore.getHyberlinkEnable), this.getComponents = A(() => this.pageBuilderStateStore.getComponents), this.getComponent = A(() => this.pageBuilderStateStore.getComponent), this.getElement = A(() => this.pageBuilderStateStore.getElement), this.getComponentArrayAddMethod = A(
() => this.pageBuilderStateStore.getComponentArrayAddMethod
), this.NoneListernesTags = [
"P",
"H1",
"H2",
"H3",
"H4",
"H5",
"H6",
"IFRAME",
"UL",
"OL",
"LI",
"EM",
"STRONG",
"B",
"A",
"SPAN",
"BLOCKQUOTE",
"BR",
"PRE",
"CODE",
"MARK",
"DEL",
"INS",
"U",
"FIGURE",
"FIGCAPTION"
];
}
/**
* Returns an array of available languages.
* @returns {AvailableLanguage[]} An array of available language codes.
*/
availableLanguage() {
return zw;
}
/**
* Sets the current language in the page builder state.
* @param {string} lang - The language code to set.
*/
changeLanguage(e) {
this.pageBuilderStateStore.setCurrentLanguage(e);
}
/**
* Deselects any selected or hovered elements in the builder UI.
* @returns {Promise<void>}
*/
async clearHtmlSelection() {
this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null), await this.removeHoveredAndSelected();
}
/**
* Ensures that the `updateOrCreate` configuration is valid and sets default values if necessary.
* @param {PageBuilderConfig} config - The page builder configuration.
* @private
*/
ensureUpdateOrCreateConfig(e) {
if (!e.updateOrCreate || e.updateOrCreate && Qt(e.updateOrCreate)) {
const t = {
...e,
updateOrCreate: {
formType: "create",
formName: "post"
}
};
this.pageBuilderStateStore.setPageBuilderConfig(t);
return;
}
if (e.updateOrCreate && typeof e.updateOrCreate.formType == "string" && (e.updateOrCreate.formType === "create" || e.updateOrCreate.formType === "update") && typeof e.updateOrCreate.formName != "string" || typeof e.updateOrCreate.formName == "string" && e.updateOrCreate.formName.length === 0) {
const t = {
...e,
updateOrCreate: {
formType: e.updateOrCreate.formType,
formName: "post"
}
};
this.pageBuilderStateStore.setPageBuilderConfig(t);
}
if (e.updateOrCreate && typeof e.updateOrCreate.formType != "string" || typeof e.updateOrCreate.formType == "string" && e.updateOrCreate.formType !== "create" && e.updateOrCreate.formType !== "update" && typeof e.updateOrCreate.formName == "string" && e.updateOrCreate.formName.length !== 0) {
const t = {
...e,
updateOrCreate: {
formType: "create",
formName: e.updateOrCreate.form