@myissue/vue-website-page-builder
Version:
Vue 3 page builder component with drag & drop functionality.
1,673 lines • 994 kB
JavaScript
var Lh = Object.defineProperty;
var Dh = (n, e, t) => e in n ? Lh(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
var be = (n, e, t) => Dh(n, typeof e != "symbol" ? e + "" : e, t);
import * as vp from "vue";
import { defineComponent as Xe, computed as N, createBlock as ue, openBlock as w, Teleport as Ih, createElementVNode as u, createElementBlock as M, createCommentVNode as A, normalizeClass as Q, toDisplayString as C, renderSlot as pr, ref as E, watchEffect as ii, Fragment as X, withCtx as V, nextTick as oe, readonly as Nh, createVNode as j, unref as y, shallowRef as $h, onMounted as dn, onBeforeUnmount as Lo, h as zn, getCurrentInstance as Ad, markRaw as An, customRef as Rh, effectScope as _d, toRaw as Ve, hasInjectionContext as Hh, inject as Vn, watch as ee, reactive as Fh, isRef as Di, isReactive as Ca, toRef as Zo, getCurrentScope as jh, onScopeDispose as zh, toRefs as wp, onBeforeMount as Vh, withDirectives as xe, vModelText as yr, createTextVNode as we, provide as Tn, resolveDynamicComponent as Ld, cloneVNode as qh, onUnmounted as Uh, Transition as si, renderList as de, withKeys as Nl, withModifiers as bt, vShow as $l, vModelSelect as Ue } from "vue";
const Wh = { class: "pbx-font-sans" }, Kh = {
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"
}, Gh = { class: "pbx-px-4 pbx-min-h-32" }, Vt = /* @__PURE__ */ Xe({
__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, r = e, i = () => {
r("closeMainModalBuilder");
}, s = N(() => ({
sm: "lg:pbx-max-w-sm",
md: "lg:pbx-max-w-md",
lg: "lg:pbx-max-w-lg",
xl: "lg:pbx-max-w-xl",
"2xl": "lg:pbx-max-w-2xl",
"3xl": "lg:pbx-max-w-3xl",
"4xl": "lg:pbx-max-w-4xl",
"5xl": "lg:pbx-max-w-5xl",
"6xl": "lg:pbx-max-w-6xl",
"7xl": "lg:pbx-max-w-7xl",
full: "lg:pbx-max-w-full",
// 100% width
screen: "lg:w-screen sm:pbx-max-w-none"
// truly full screen
})[t.maxWidth]);
return (o, l) => (w(), ue(Ih, { to: "body" }, [
u("div", Wh, [
n.showModalBuilder ? (w(), M("div", Kh, [
u("div", {
class: Q(["pbx-fixed pbx-inset-0 pbx-bg-black/50 pbx-transition-opacity", [n.noBackgroundOpacity ? "pbx-bg-black/100" : ""]]),
onClick: i
}, null, 2),
u("div", {
class: Q(["pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl 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", [
s.value ? s.value : "",
n.minHeight ? n.minHeight : "",
n.maxHeight ? n.maxHeight : ""
]])
}, [
u("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" : ""
]])
}, [
u("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),
u("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: i
}, l[0] || (l[0] = [
u("span", { class: "material-symbols-outlined" }, " close ", -1)
]))
], 2),
u("div", Gh, [
pr(o.$slots, "default")
])
], 2)
])) : A("", !0)
])
]));
}
}), Jh = { key: 0 }, Yh = { 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" }, Qh = { id: "pagebuilder" }, Xh = ["innerHTML"], Zh = { key: 1 }, Sp = {
__name: "Preview",
props: {
mobile: {
type: Boolean
}
},
setup(n) {
const e = n, t = E(""), r = E(null), i = localStorage.getItem("preview");
if (i)
try {
const s = JSON.parse(i);
t.value = Array.isArray(s) ? s.join("") : "";
} catch (s) {
console.error("Invalid preview data:", s), t.value = "";
}
return ii(() => {
if (e.mobile && r.value && t.value) {
const o = r.value.contentWindow.document;
o.open(), o.write(
`<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div id="pagebuilder" class="pbx-font-sans pbx-text-black">${t.value}</div></body></html>`
), o.close(), document.querySelectorAll('link[rel="stylesheet"], style').forEach((l) => {
o.head.appendChild(l.cloneNode(!0));
});
}
}), (s, o) => (w(), M(X, null, [
n.mobile ? A("", !0) : (w(), M("div", Jh, [
u("div", Yh, [
u("div", Qh, [
u("div", {
class: "",
innerHTML: t.value
}, null, 8, Xh)
])
])
])),
n.mobile ? (w(), M("div", Zh, [
u("iframe", {
ref_key: "iframeRef",
ref: r,
class: "pbx-mx-auto pbx-w-full pbx-bg-white pbx-shadow-lg pbx-h-[80vh] pbx-border-0",
src: "about:blank"
}, null, 512)
])) : A("", !0)
], 64));
}
}, eb = { 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" }, tb = ["innerHTML"], nb = { 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" }, rb = {
key: 0,
class: "pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center"
}, ib = {
key: 1,
class: "pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-end"
}, vr = {
__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, r = function() {
t("firstModalButtonFunctionDynamicModalBuilder");
}, i = function() {
t("secondModalButtonFunctionDynamicModalBuilder");
}, s = function() {
t("thirdModalButtonFunctionDynamicModalBuilder");
};
return (o, l) => (w(), ue(Vt, {
title: n.title,
showModalBuilder: n.showDynamicModalBuilder,
type: n.type,
onCloseMainModalBuilder: r,
maxWidth: n.maxWidth
}, {
default: V(() => [
pr(o.$slots, "content"),
u("div", eb, [
u("div", {
class: Q({ "pbx-pr-4 pbx-pb-4": !n.simpleModal })
}, [
n.simpleModal !== !0 ? (w(), M("div", {
key: 0,
innerHTML: n.description,
class: "pbx-myPrimaryParagraph pbx-mb-6"
}, null, 8, tb)) : A("", !0),
pr(o.$slots, "header"),
pr(o.$slots, "default")
], 2)
]),
u("div", nb, [
n.simpleModal !== !0 && !n.isLoading ? (w(), M("div", rb, [
pr(o.$slots, "footer"),
u("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-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"])
}, [
n.firstButtonText ? (w(), M("button", {
key: 0,
ref: "firstButtonRef",
class: "pbx-mySecondaryButton",
type: "button",
onClick: r
}, C(n.firstButtonText), 513)) : A("", !0),
n.secondButtonText ? (w(), M("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: i
}, C(n.secondButtonText), 1)) : A("", !0),
n.thirdButtonText ? (w(), M("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: s
}, C(n.thirdButtonText), 3)) : A("", !0)
], 2)
])) : A("", !0),
n.isLoading ? (w(), M("div", ib, l[0] || (l[0] = [
u("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]" }, [
u("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)
]))) : A("", !0)
])
]),
_: 3
}, 8, ["title", "showModalBuilder", "type", "maxWidth"]));
}
};
class Fr {
static getHistory(e) {
const t = e + this.HISTORY_KEY_SUFFIX, r = localStorage.getItem(t);
return r ? JSON.parse(r) : [];
}
static addToHistory(e, t) {
const r = e + this.HISTORY_KEY_SUFFIX;
let i = this.getHistory(e);
i.push(t), i.length > this.MAX_HISTORY_SIZE && (i = i.slice(i.length - this.MAX_HISTORY_SIZE)), localStorage.setItem(r, JSON.stringify(i));
}
static clearHistory(e) {
const t = e + this.HISTORY_KEY_SUFFIX;
localStorage.removeItem(t);
}
}
be(Fr, "HISTORY_KEY_SUFFIX", "-history"), be(Fr, "MAX_HISTORY_SIZE", 10);
const hi = {
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"
]
}, Fs = {
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"
]
}, js = {
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"
]
}, qr = {
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"]
}, _n = {
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"
]
}, jt = {
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"
]
}, Ur = {
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 hs;
const sb = new Uint8Array(16);
function ob() {
if (!hs && (hs = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !hs))
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
return hs(sb);
}
const Ne = [];
for (let n = 0; n < 256; ++n)
Ne.push((n + 256).toString(16).slice(1));
function lb(n, e = 0) {
return Ne[n[e + 0]] + Ne[n[e + 1]] + Ne[n[e + 2]] + Ne[n[e + 3]] + "-" + Ne[n[e + 4]] + Ne[n[e + 5]] + "-" + Ne[n[e + 6]] + Ne[n[e + 7]] + "-" + Ne[n[e + 8]] + Ne[n[e + 9]] + "-" + Ne[n[e + 10]] + Ne[n[e + 11]] + Ne[n[e + 12]] + Ne[n[e + 13]] + Ne[n[e + 14]] + Ne[n[e + 15]];
}
const ab = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), kp = {
randomUUID: ab
};
function Cp(n, e, t) {
if (kp.randomUUID && !n)
return kp.randomUUID();
n = n || {};
const r = n.random || (n.rng || ob)();
return r[6] = r[6] & 15 | 64, r[8] = r[8] & 63 | 128, lb(r);
}
const Pe = function(e = 200) {
return new Promise((t) => {
setTimeout(t, e);
});
}, On = function(n) {
return !n || typeof n == "object" && n.constructor === Object && Object.keys(n).length === 0;
};
function Dd(n, e) {
if (!n)
return console.warn("No valid pagebuilder element passed"), "";
const t = n.cloneNode(!0);
if (t.removeAttribute("id"), t.querySelectorAll(
"[data-componentid], [data-component-title], #page-builder-editor-editable-area"
).forEach((s) => {
s.removeAttribute("data-componentid"), s.removeAttribute("data-component-title"), s.id === "page-builder-editor-editable-area" && s.removeAttribute("id");
}), e && e && typeof e.imageUrlPrefix == "string") {
const s = e.imageUrlPrefix;
t.querySelectorAll("img").forEach((l) => {
const a = l.getAttribute("src") || "";
!a.startsWith("http") && // extra safety
s && !a.startsWith(s) && l.setAttribute("src", s + a.replace(/^\/+/, ""));
});
}
const i = (s) => {
for (let o = s.childNodes.length - 1; o >= 0; o--) {
const l = s.childNodes[o];
l.nodeType === Node.COMMENT_NODE ? s.removeChild(l) : l.nodeType === Node.ELEMENT_NODE && i(l);
}
};
return i(t), t.outerHTML;
}
const pb = [
"en",
"zh-Hans",
"fr",
"ja",
"ru",
"es",
"pt",
"de",
"ar",
"hi"
];
class cb {
constructor(e) {
// Class properties with types
be(this, "fontSizeRegex", /^(sm:|md:|lg:|xl:|2xl:)?pbx-text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);
be(this, "pageBuilderStateStore");
be(this, "getLocalStorageItemName");
be(this, "getApplyImageToSelection");
be(this, "getHyberlinkEnable");
be(this, "getComponents");
be(this, "getComponent");
be(this, "getElement");
be(this, "getComponentArrayAddMethod");
be(this, "NoneListernesTags");
be(this, "hasStartedEditing", !1);
// Hold data from Database or Backend for updated post
be(this, "originalComponents");
// Holds data to be mounted when pagebuilder is not yet present in the DOM
be(this, "savedMountComponents", null);
be(this, "pendingMountComponents", null);
be(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
be(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
*/
be(this, "handleMouseOver", (e, t) => {
e.preventDefault(), e.stopPropagation();
const r = document.querySelector("#pagebuilder");
if (!r) return;
const i = r.querySelector("[hovered]");
i && i.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
*/
be(this, "handleMouseLeave", (e) => {
e.preventDefault(), e.stopPropagation();
const t = document.querySelector("#pagebuilder");
if (!t) return;
const r = t.querySelector("[hovered]");
r && r.removeAttribute("hovered");
});
/**
* Attaches click, mouseover, and mouseleave event listeners to all editable elements in the page builder.
* @private
*/
be(this, "addListenersToEditableElements", async () => {
const e = document.querySelector("#pagebuilder");
e && (await oe(), e.querySelectorAll("section *").forEach((t) => {
if (this.isEditableElement(t)) {
const r = t;
if (this.elementsWithListeners.has(r)) {
const l = this.elementsWithListeners.get(r);
l && (r.removeEventListener("click", l.click), r.removeEventListener("mouseover", l.mouseover), r.removeEventListener("mouseleave", l.mouseleave));
}
const i = (l) => this.handleElementClick(l, r), s = (l) => this.handleMouseOver(l, r), o = (l) => this.handleMouseLeave(l);
r.addEventListener("click", i), r.addEventListener("mouseover", s), r.addEventListener("mouseleave", o), this.elementsWithListeners.set(r, {
click: i,
mouseover: s,
mouseleave: o
});
}
}));
});
/**
* 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
*/
be(this, "handleElementClick", async (e, t) => {
e.preventDefault(), e.stopPropagation();
const r = document.querySelector("#pagebuilder");
if (!r) return;
this.pageBuilderStateStore.setMenuRight(!0);
const i = r.querySelector("[selected]");
i && i.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.
*/
be(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 Pe(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 Pe(400);
} catch (t) {
console.error("Error trying saving.", t);
} finally {
this.pageBuilderStateStore.setIsSaving(!1);
}
});
/**
* Manually saves the current page builder content to local storage.
*/
be(this, "handleManualSave", async (e) => {
this.pageBuilderStateStore.setIsSaving(!0), e || this.clearHtmlSelection(), this.startEditing(), this.saveDomComponentsToLocalStorage(), await Pe(300), this.pageBuilderStateStore.setIsSaving(!1);
});
/**
* Ensures that a text area element has content, adding a visual indicator if it's empty.
*/
be(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>}
*/
be(this, "handleTextInput", async (e) => {
var t;
typeof ((t = this.getElement.value) == null ? void 0 : t.innerHTML) == "string" && (typeof this.getElement.value.innerHTML == "string" && (await oe(), 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 = N(
() => this.pageBuilderStateStore.getApplyImageToSelection
), this.getLocalStorageItemName = N(
() => this.pageBuilderStateStore.getLocalStorageItemName
), this.getHyberlinkEnable = N(() => this.pageBuilderStateStore.getHyberlinkEnable), this.getComponents = N(() => this.pageBuilderStateStore.getComponents), this.getComponent = N(() => this.pageBuilderStateStore.getComponent), this.getElement = N(() => this.pageBuilderStateStore.getElement), this.getComponentArrayAddMethod = N(
() => 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 pb;
}
/**
* 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 && On(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.formName
}
};
this.pageBuilderStateStore.setPageBuilderConfig(t);
return;
}
if (e.updateOrCreate && typeof e.updateOrCreate.formType == "string" && e.updateOrCreate.formType !== "create" && e.updateOrCreate.formType !== "update" && typeof e.formName != "string") {
const t = {
...e,
updateOrCreate: {
formType: "create",
formName: "post"
}
};
this.pageBuilderStateStore.setPageBuilderConfig(t);
}
}
/**
* Validates the user-provided components array.
* @param {unknown} components - The components data to validate.
* @returns {{error: true, warning: string, stat