@myissue/vue-website-page-builder
Version:
Vue 3 page builder component with drag & drop functionality.
1,582 lines • 1.06 MB
JavaScript
var Oh = Object.defineProperty;
var fd = (r) => {
throw TypeError(r);
};
var Bh = (r, e, t) => e in r ? Oh(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var he = (r, e, t) => Bh(r, typeof e != "symbol" ? e + "" : e, t), bd = (r, e, t) => e.has(r) || fd("Cannot " + t);
var Go = (r, e, t) => (bd(r, e, "read from private field"), t ? t.call(r) : e.get(r)), po = (r, e, t) => e.has(r) ? fd("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t);
var ne = (r, e, t) => (bd(r, e, "access private method"), t);
import * as yd from "vue";
import { nextTick as Ve, computed as $, ref as O, defineComponent as rt, createBlock as xe, openBlock as v, Teleport as Ph, createElementVNode as u, createElementBlock as C, createCommentVNode as I, normalizeClass as Y, renderSlot as Fr, toDisplayString as z, effectScope as xp, markRaw as hr, toRaw as Fe, hasInjectionContext as Ah, inject as Yr, getCurrentInstance as vp, watch as se, unref as A, reactive as Nh, isRef as yn, isReactive as yl, toRef as Gs, getCurrentScope as Dh, onScopeDispose as Ih, toRefs as wd, withCtx as W, createVNode as V, Transition as At, Fragment as de, shallowRef as Lh, onMounted as tr, onBeforeUnmount as Bs, h as Mr, watchEffect as _n, customRef as Rh, onBeforeMount as $h, withDirectives as Re, vModelText as wl, createTextVNode as Xe, provide as pr, resolveDynamicComponent as kp, cloneVNode as _h, onUnmounted as zh, renderList as we, withKeys as Fh, vShow as Aa, vModelSelect as xt, withModifiers as Vt, createStaticVNode as Hh } from "vue";
const Di = {
backgroundColorVariables: [
"none",
"bg-white",
"bg-black",
"bg-slate-50",
"bg-slate-100",
"bg-slate-200",
"bg-slate-300",
"bg-slate-400",
"bg-slate-500",
"bg-slate-600",
"bg-slate-700",
"bg-slate-800",
"bg-slate-900",
"bg-gray-50",
"bg-gray-100",
"bg-gray-200",
"bg-gray-300",
"bg-gray-400",
"bg-gray-500",
"bg-gray-600",
"bg-gray-700",
"bg-gray-800",
"bg-gray-900",
"bg-zinc-50",
"bg-zinc-100",
"bg-zinc-200",
"bg-zinc-300",
"bg-zinc-400",
"bg-zinc-500",
"bg-zinc-600",
"bg-zinc-700",
"bg-zinc-800",
"bg-zinc-900",
"bg-neutral-50",
"bg-neutral-100",
"bg-neutral-200",
"bg-neutral-300",
"bg-neutral-400",
"bg-neutral-500",
"bg-neutral-600",
"bg-neutral-700",
"bg-neutral-800",
"bg-neutral-900",
"bg-stone-50",
"bg-stone-100",
"bg-stone-200",
"bg-stone-300",
"bg-stone-400",
"bg-stone-500",
"bg-stone-600",
"bg-stone-700",
"bg-stone-800",
"bg-stone-900",
"bg-red-50",
"bg-red-100",
"bg-red-200",
"bg-red-300",
"bg-red-400",
"bg-red-500",
"bg-red-600",
"bg-red-700",
"bg-red-800",
"bg-red-900",
"bg-orange-50",
"bg-orange-100",
"bg-orange-200",
"bg-orange-300",
"bg-orange-400",
"bg-orange-500",
"bg-orange-600",
"bg-orange-700",
"bg-orange-800",
"bg-orange-900",
"bg-amber-50",
"bg-amber-100",
"bg-amber-200",
"bg-amber-300",
"bg-amber-400",
"bg-amber-500",
"bg-amber-600",
"bg-amber-700",
"bg-amber-800",
"bg-amber-900",
"bg-yellow-50",
"bg-yellow-100",
"bg-yellow-200",
"bg-yellow-300",
"bg-yellow-400",
"bg-yellow-500",
"bg-yellow-600",
"bg-yellow-700",
"bg-yellow-800",
"bg-yellow-900",
"bg-lime-50",
"bg-lime-100",
"bg-lime-200",
"bg-lime-300",
"bg-lime-400",
"bg-lime-500",
"bg-lime-600",
"bg-lime-700",
"bg-lime-800",
"bg-lime-900",
"bg-green-50",
"bg-green-100",
"bg-green-200",
"bg-green-300",
"bg-green-400",
"bg-green-500",
"bg-green-600",
"bg-green-700",
"bg-green-800",
"bg-green-900",
"bg-emerald-50",
"bg-emerald-100",
"bg-emerald-200",
"bg-emerald-300",
"bg-emerald-400",
"bg-emerald-500",
"bg-emerald-600",
"bg-emerald-700",
"bg-emerald-800",
"bg-emerald-900",
"bg-teal-50",
"bg-teal-100",
"bg-teal-200",
"bg-teal-300",
"bg-teal-400",
"bg-teal-500",
"bg-teal-600",
"bg-teal-700",
"bg-teal-800",
"bg-teal-900",
"bg-cyan-50",
"bg-cyan-100",
"bg-cyan-200",
"bg-cyan-300",
"bg-cyan-400",
"bg-cyan-500",
"bg-cyan-600",
"bg-cyan-700",
"bg-cyan-800",
"bg-cyan-900",
"bg-sky-50",
"bg-sky-100",
"bg-sky-200",
"bg-sky-300",
"bg-sky-400",
"bg-sky-500",
"bg-sky-600",
"bg-sky-700",
"bg-sky-800",
"bg-sky-900",
"bg-blue-50",
"bg-blue-100",
"bg-blue-200",
"bg-blue-300",
"bg-blue-400",
"bg-blue-500",
"bg-blue-600",
"bg-blue-700",
"bg-blue-800",
"bg-blue-900",
"bg-indigo-50",
"bg-indigo-100",
"bg-indigo-200",
"bg-indigo-300",
"bg-indigo-400",
"bg-indigo-500",
"bg-indigo-600",
"bg-indigo-700",
"bg-indigo-800",
"bg-indigo-900",
"bg-violet-50",
"bg-violet-100",
"bg-violet-200",
"bg-violet-300",
"bg-violet-400",
"bg-violet-500",
"bg-violet-600",
"bg-violet-700",
"bg-violet-800",
"bg-violet-900",
"bg-purple-50",
"bg-purple-100",
"bg-purple-200",
"bg-purple-300",
"bg-purple-400",
"bg-purple-500",
"bg-purple-600",
"bg-purple-700",
"bg-purple-800",
"bg-purple-900",
"bg-fuchsia-50",
"bg-fuchsia-100",
"bg-fuchsia-200",
"bg-fuchsia-300",
"bg-fuchsia-400",
"bg-fuchsia-500",
"bg-fuchsia-600",
"bg-fuchsia-700",
"bg-fuchsia-800",
"bg-fuchsia-900",
"bg-pink-50",
"bg-pink-100",
"bg-pink-200",
"bg-pink-300",
"bg-pink-400",
"bg-pink-500",
"bg-pink-600",
"bg-pink-700",
"bg-pink-800",
"bg-pink-900",
"bg-rose-50",
"bg-rose-100",
"bg-rose-200",
"bg-rose-300",
"bg-rose-400",
"bg-rose-500",
"bg-rose-600",
"bg-rose-700",
"bg-rose-800",
"bg-rose-900"
],
textColorVariables: [
"none",
"text-white",
"text-black",
"text-slate-50",
"text-slate-100",
"text-slate-200",
"text-slate-300",
"text-slate-400",
"text-slate-500",
"text-slate-600",
"text-slate-700",
"text-slate-800",
"text-slate-900",
"text-gray-50",
"text-gray-100",
"text-gray-200",
"text-gray-300",
"text-gray-400",
"text-gray-500",
"text-gray-600",
"text-gray-700",
"text-gray-800",
"text-gray-900",
"text-zinc-50",
"text-zinc-100",
"text-zinc-200",
"text-zinc-300",
"text-zinc-400",
"text-zinc-500",
"text-zinc-600",
"text-zinc-700",
"text-zinc-800",
"text-zinc-900",
"text-neutral-50",
"text-neutral-100",
"text-neutral-200",
"text-neutral-300",
"text-neutral-400",
"text-neutral-500",
"text-neutral-600",
"text-neutral-700",
"text-neutral-800",
"text-neutral-900",
"text-stone-50",
"text-stone-100",
"text-stone-200",
"text-stone-300",
"text-stone-400",
"text-stone-500",
"text-stone-600",
"text-stone-700",
"text-stone-800",
"text-stone-900",
"text-red-50",
"text-red-100",
"text-red-200",
"text-red-300",
"text-red-400",
"text-red-500",
"text-red-600",
"text-red-700",
"text-red-800",
"text-red-900",
"text-orange-50",
"text-orange-100",
"text-orange-200",
"text-orange-300",
"text-orange-400",
"text-orange-500",
"text-orange-600",
"text-orange-700",
"text-orange-800",
"text-orange-900",
"text-amber-50",
"text-amber-100",
"text-amber-200",
"text-amber-300",
"text-amber-400",
"text-amber-500",
"text-amber-600",
"text-amber-700",
"text-amber-800",
"text-amber-900",
"text-yellow-50",
"text-yellow-100",
"text-yellow-200",
"text-yellow-300",
"text-yellow-400",
"text-yellow-500",
"text-yellow-600",
"text-yellow-700",
"text-yellow-800",
"text-yellow-900",
"text-lime-50",
"text-lime-100",
"text-lime-200",
"text-lime-300",
"text-lime-400",
"text-lime-500",
"text-lime-600",
"text-lime-700",
"text-lime-800",
"text-lime-900",
"text-green-50",
"text-green-100",
"text-green-200",
"text-green-300",
"text-green-400",
"text-green-500",
"text-green-600",
"text-green-700",
"text-green-800",
"text-green-900",
"text-emerald-50",
"text-emerald-100",
"text-emerald-200",
"text-emerald-300",
"text-emerald-400",
"text-emerald-500",
"text-emerald-600",
"text-emerald-700",
"text-emerald-800",
"text-emerald-900",
"text-teal-50",
"text-teal-100",
"text-teal-200",
"text-teal-300",
"text-teal-400",
"text-teal-500",
"text-teal-600",
"text-teal-700",
"text-teal-800",
"text-teal-900",
"text-cyan-50",
"text-cyan-100",
"text-cyan-200",
"text-cyan-300",
"text-cyan-400",
"text-cyan-500",
"text-cyan-600",
"text-cyan-700",
"text-cyan-800",
"text-cyan-900",
"text-sky-50",
"text-sky-100",
"text-sky-200",
"text-sky-300",
"text-sky-400",
"text-sky-500",
"text-sky-600",
"text-sky-700",
"text-sky-800",
"text-sky-900",
"text-blue-50",
"text-blue-100",
"text-blue-200",
"text-blue-300",
"text-blue-400",
"text-blue-500",
"text-blue-600",
"text-blue-700",
"text-blue-800",
"text-blue-900",
"text-indigo-50",
"text-indigo-100",
"text-indigo-200",
"text-indigo-300",
"text-indigo-400",
"text-indigo-500",
"text-indigo-600",
"text-indigo-700",
"text-indigo-800",
"text-indigo-900",
"text-violet-50",
"text-violet-100",
"text-violet-200",
"text-violet-300",
"text-violet-400",
"text-violet-500",
"text-violet-600",
"text-violet-700",
"text-violet-800",
"text-violet-900",
"text-purple-50",
"text-purple-100",
"text-purple-200",
"text-purple-300",
"text-purple-400",
"text-purple-500",
"text-purple-600",
"text-purple-700",
"text-purple-800",
"text-purple-900",
"text-fuchsia-50",
"text-fuchsia-100",
"text-fuchsia-200",
"text-fuchsia-300",
"text-fuchsia-400",
"text-fuchsia-500",
"text-fuchsia-600",
"text-fuchsia-700",
"text-fuchsia-800",
"text-fuchsia-900",
"text-pink-50",
"text-pink-100",
"text-pink-200",
"text-pink-300",
"text-pink-400",
"text-pink-500",
"text-pink-600",
"text-pink-700",
"text-pink-800",
"text-pink-900",
"text-rose-50",
"text-rose-100",
"text-rose-200",
"text-rose-300",
"text-rose-400",
"text-rose-500",
"text-rose-600",
"text-rose-700",
"text-rose-800",
"text-rose-900"
]
}, Ii = {
opacities: [
"none",
"opacity-0",
"opacity-5",
"opacity-10",
"opacity-20",
"opacity-25",
"opacity-30",
"opacity-40",
"opacity-50",
"opacity-60",
"opacity-70",
"opacity-75",
"opacity-80",
"opacity-90",
"opacity-95",
"opacity-100"
],
backgroundOpacities: [
"none",
"bg-opacity-0",
"bg-opacity-5",
"bg-opacity-10",
"bg-opacity-20",
"bg-opacity-25",
"bg-opacity-30",
"bg-opacity-40",
"bg-opacity-50",
"bg-opacity-60",
"bg-opacity-70",
"bg-opacity-75",
"bg-opacity-80",
"bg-opacity-90",
"bg-opacity-95",
"bg-opacity-100"
]
}, si = {
// text-xs sm:text-2xl md:text-4xl lg:text-8xl
fontBase: [
"base:none",
"text-xs",
"text-sm",
"text-base",
"text-lg",
"text-xl",
"text-2xl",
"text-3xl",
"text-4xl",
"text-5xl",
"text-6xl",
"text-7xl",
"text-8xl",
"text-9xl"
],
fontDesktop: [
"lg:none",
"lg:text-xs",
"lg:text-sm",
"lg:text-base",
"lg:text-lg",
"lg:text-xl",
"lg:text-2xl",
"lg:text-3xl",
"lg:text-4xl",
"lg:text-5xl",
"lg:text-6xl",
"lg:text-7xl",
"lg:text-8xl",
"lg:text-9xl"
],
fontTablet: [
"md:none",
"md:text-xs",
"md:text-sm",
"md:text-base",
"md:text-lg",
"md:text-xl",
"md:text-2xl",
"md:text-3xl",
"md:text-4xl",
"md:text-5xl",
"md:text-6xl",
"md:text-7xl",
"md:text-8xl",
"md:text-9xl"
],
fontMobile: [
"sm:none",
"sm:text-xs",
"sm:text-sm",
"sm:text-base",
"sm:text-lg",
"sm:text-xl",
"sm:text-2xl",
"sm:text-3xl",
"sm:text-4xl",
"sm:text-5xl",
"sm:text-6xl",
"sm:text-7xl",
"sm:text-8xl",
"sm:text-9xl"
]
}, Js = {
fontWeight: [
"none",
"font-thin",
"font-extralight",
"font-light",
"font-normal",
"font-medium",
"font-medium",
"font-bold",
"font-extrabold",
"font-black"
],
fontFamily: ["none", "font-sans", "font-serif", "font-mono"],
fontStyle: ["none", "italic", "non-italic"]
}, gr = {
verticalPadding: [
"none",
"py-0",
"py-0.5",
"py-1",
"py-1.5",
"py-2",
"py-2.5",
"py-3",
"py-3.5",
"py-4",
"py-5",
"py-6",
"py-7",
"py-8",
"py-9",
"py-10",
"py-11",
"py-12",
"py-14",
"py-16",
"py-20",
"py-24",
"py-28",
"py-32",
"py-36",
"py-40",
"py-44",
"py-48",
"py-52",
"py-56",
"py-60",
"py-64",
"py-72",
"py-80",
"py-96"
],
horizontalPadding: [
"none",
"px-0",
"px-0.5",
"px-1",
"px-1.5",
"px-2",
"px-2.5",
"px-3",
"px-3.5",
"px-4",
"px-5",
"px-6",
"px-7",
"px-8",
"px-9",
"px-10",
"px-11",
"px-12",
"px-14",
"px-16",
"px-20",
"px-24",
"px-28",
"px-32",
"px-36",
"px-40",
"px-44",
"px-48",
"px-52",
"px-56",
"px-60",
"px-64",
"px-72",
"px-80",
"px-96"
],
verticalMargin: [
"none",
"my-0",
"my-0.5",
"my-1",
"my-1.5",
"my-2",
"my-2.5",
"my-3",
"my-3.5",
"my-4",
"my-5",
"my-6",
"my-7",
"my-8",
"my-9",
"my-10",
"my-11",
"my-12",
"my-14",
"my-16",
"my-20",
"my-24",
"my-28",
"my-32",
"my-36",
"my-40",
"my-44",
"my-48",
"my-52",
"my-56",
"my-60",
"my-64",
"my-72",
"my-80",
"my-96"
],
horizontalMargin: [
"none",
"mx-0",
"mx-0.5",
"mx-1",
"mx-1.5",
"mx-2",
"mx-2.5",
"mx-3",
"mx-3.5",
"mx-4",
"mx-5",
"mx-6",
"mx-7",
"mx-8",
"mx-9",
"mx-10",
"mx-11",
"mx-12",
"mx-14",
"mx-16",
"mx-20",
"mx-24",
"mx-28",
"mx-32",
"mx-36",
"mx-40",
"mx-44",
"mx-48",
"mx-52",
"mx-56",
"mx-60",
"mx-64",
"mx-72",
"mx-80",
"mx-96"
]
}, Nt = {
roundedGlobal: [
"none",
"rounded-sm",
"rounded",
"rounded-md",
"rounded-lg",
"rounded-xl",
"rounded-2xl",
"rounded-3xl",
"rounded-full"
],
roundedTopLeft: [
"none",
"rounded-tl-sm",
"rounded-tl",
"rounded-tl-md",
"rounded-tl-lg",
"rounded-tl-xl",
"rounded-tl-2xl",
"rounded-tl-3xl",
"rounded-tl-full"
],
roundedTopRight: [
"none",
"rounded-tr-sm",
"rounded-tr",
"rounded-tr-md",
"rounded-tr-lg",
"rounded-tr-xl",
"rounded-tr-2xl",
"rounded-tr-3xl",
"rounded-tr-full"
],
roundedBottomLeft: [
"none",
"rounded-bl-sm",
"rounded-bl",
"rounded-bl-md",
"rounded-bl-lg",
"rounded-bl-xl",
"rounded-bl-2xl",
"rounded-bl-3xl",
"rounded-bl-full"
],
roundedBottomRight: [
"none",
"rounded-br-sm",
"rounded-br",
"rounded-br-md",
"rounded-br-lg",
"rounded-br-xl",
"rounded-br-2xl",
"rounded-br-3xl",
"rounded-br-full"
]
}, Mo = {
borderStyle: [
"none",
"border-solid",
"border-dashed",
"border-dotted",
"border-double",
"border-hidden"
],
borderWidth: [
"none",
"border",
// 1px
"border-2",
// 2px
"border-4",
// 4px
"border-8"
// 8px
],
borderColor: [
"none",
"border-white",
"border-black",
"border-slate-50",
"border-slate-100",
"border-slate-200",
"border-slate-300",
"border-slate-400",
"border-slate-500",
"border-slate-600",
"border-slate-700",
"border-slate-800",
"border-slate-900",
"border-gray-50",
"border-gray-100",
"border-gray-200",
"border-gray-300",
"border-gray-400",
"border-gray-500",
"border-gray-600",
"border-gray-700",
"border-gray-800",
"border-gray-900",
"border-zinc-50",
"border-zinc-100",
"border-zinc-200",
"border-zinc-300",
"border-zinc-400",
"border-zinc-500",
"border-zinc-600",
"border-zinc-700",
"border-zinc-800",
"border-zinc-900",
"border-neutral-50",
"border-neutral-100",
"border-neutral-200",
"border-neutral-300",
"border-neutral-400",
"border-neutral-500",
"border-neutral-600",
"border-neutral-700",
"border-neutral-800",
"border-neutral-900",
"border-stone-50",
"border-stone-100",
"border-stone-200",
"border-stone-300",
"border-stone-400",
"border-stone-500",
"border-stone-600",
"border-stone-700",
"border-stone-800",
"border-stone-900",
"border-red-50",
"border-red-100",
"border-red-200",
"border-red-300",
"border-red-400",
"border-red-500",
"border-red-600",
"border-red-700",
"border-red-800",
"border-red-900",
"border-orange-50",
"border-orange-100",
"border-orange-200",
"border-orange-300",
"border-orange-400",
"border-orange-500",
"border-orange-600",
"border-orange-700",
"border-orange-800",
"border-orange-900",
"border-amber-50",
"border-amber-100",
"border-amber-200",
"border-amber-300",
"border-amber-400",
"border-amber-500",
"border-amber-600",
"border-amber-700",
"border-amber-800",
"border-amber-900",
"border-yellow-50",
"border-yellow-100",
"border-yellow-200",
"border-yellow-300",
"border-yellow-400",
"border-yellow-500",
"border-yellow-600",
"border-yellow-700",
"border-yellow-800",
"border-yellow-900",
"border-lime-50",
"border-lime-100",
"border-lime-200",
"border-lime-300",
"border-lime-400",
"border-lime-500",
"border-lime-600",
"border-lime-700",
"border-lime-800",
"border-lime-900",
"border-green-50",
"border-green-100",
"border-green-200",
"border-green-300",
"border-green-400",
"border-green-500",
"border-green-600",
"border-green-700",
"border-green-800",
"border-green-900",
"border-emerald-50",
"border-emerald-100",
"border-emerald-200",
"border-emerald-300",
"border-emerald-400",
"border-emerald-500",
"border-emerald-600",
"border-emerald-700",
"border-emerald-800",
"border-emerald-900",
"border-teal-50",
"border-teal-100",
"border-teal-200",
"border-teal-300",
"border-teal-400",
"border-teal-500",
"border-teal-600",
"border-teal-700",
"border-teal-800",
"border-teal-900",
"border-cyan-50",
"border-cyan-100",
"border-cyan-200",
"border-cyan-300",
"border-cyan-400",
"border-cyan-500",
"border-cyan-600",
"border-cyan-700",
"border-cyan-800",
"border-cyan-900",
"border-sky-50",
"border-sky-100",
"border-sky-200",
"border-sky-300",
"border-sky-400",
"border-sky-500",
"border-sky-600",
"border-sky-700",
"border-sky-800",
"border-sky-900",
"border-blue-50",
"border-blue-100",
"border-blue-200",
"border-blue-300",
"border-blue-400",
"border-blue-500",
"border-blue-600",
"border-blue-700",
"border-blue-800",
"border-blue-900",
"border-indigo-50",
"border-indigo-100",
"border-indigo-200",
"border-indigo-300",
"border-indigo-400",
"border-indigo-500",
"border-indigo-600",
"border-indigo-700",
"border-indigo-800",
"border-indigo-900",
"border-violet-50",
"border-violet-100",
"border-violet-200",
"border-violet-300",
"border-violet-400",
"border-violet-500",
"border-violet-600",
"border-violet-700",
"border-violet-800",
"border-violet-900",
"border-purple-50",
"border-purple-100",
"border-purple-200",
"border-purple-300",
"border-purple-400",
"border-purple-500",
"border-purple-600",
"border-purple-700",
"border-purple-800",
"border-purple-900",
"border-fuchsia-50",
"border-fuchsia-100",
"border-fuchsia-200",
"border-fuchsia-300",
"border-fuchsia-400",
"border-fuchsia-500",
"border-fuchsia-600",
"border-fuchsia-700",
"border-fuchsia-800",
"border-fuchsia-900",
"border-pink-50",
"border-pink-100",
"border-pink-200",
"border-pink-300",
"border-pink-400",
"border-pink-500",
"border-pink-600",
"border-pink-700",
"border-pink-800",
"border-pink-900",
"border-rose-50",
"border-rose-100",
"border-rose-200",
"border-rose-300",
"border-rose-400",
"border-rose-500",
"border-rose-600",
"border-rose-700",
"border-rose-800",
"border-rose-900"
]
};
let ai;
const jh = new Uint8Array(16);
function Vh() {
if (!ai && (ai = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !ai))
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
return ai(jh);
}
const Ne = [];
for (let r = 0; r < 256; ++r)
Ne.push((r + 256).toString(16).slice(1));
function Wh(r, e = 0) {
return Ne[r[e + 0]] + Ne[r[e + 1]] + Ne[r[e + 2]] + Ne[r[e + 3]] + "-" + Ne[r[e + 4]] + Ne[r[e + 5]] + "-" + Ne[r[e + 6]] + Ne[r[e + 7]] + "-" + Ne[r[e + 8]] + Ne[r[e + 9]] + "-" + Ne[r[e + 10]] + Ne[r[e + 11]] + Ne[r[e + 12]] + Ne[r[e + 13]] + Ne[r[e + 14]] + Ne[r[e + 15]];
}
const qh = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), xd = {
randomUUID: qh
};
function vd(r, e, t) {
if (xd.randomUUID && !r)
return xd.randomUUID();
r = r || {};
const o = r.random || (r.rng || Vh)();
return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, Wh(o);
}
const Sp = function(e = 200) {
return new Promise((t) => {
setTimeout(t, e);
});
};
var ee, ve, Cp, Mp, Ms, Es, Ts, Ep, Os, Tp, Op, Na, Bp;
class Se {
constructor(e) {
po(this, ee);
// Class properties with types
he(this, "nextTick");
he(this, "containsPagebuilder");
he(this, "pageBuilderStateStore");
he(this, "getTextAreaVueModel");
he(this, "getLocalStorageItemName");
he(this, "getCurrentImage");
he(this, "getHyberlinkEnable");
he(this, "getComponents");
he(this, "getComponent");
he(this, "getElement");
he(this, "getNextSibling");
he(this, "getParentElement");
he(this, "getRestoredElement");
he(this, "getComponentArrayAddMethod");
he(this, "NoneListernesTags");
he(this, "delay");
he(this, "observer");
po(this, Ms, async (e, t) => {
e.preventDefault(), e.stopPropagation();
const o = document.querySelector("#pagebuilder");
if (!o) return;
this.pageBuilderStateStore.setMenuRight(!0);
const n = o.querySelector("[selected]");
n && n.removeAttribute("selected"), t.removeAttribute("hovered"), t.setAttribute("selected", ""), this.pageBuilderStateStore.setElement(t);
});
po(this, Es, (e, t) => {
e.preventDefault(), e.stopPropagation();
const o = document.querySelector("#pagebuilder");
if (!o) return;
const n = o.querySelector("[hovered]");
n && n.removeAttribute("hovered"), t.hasAttribute("selected") || t.setAttribute("hovered", "");
});
po(this, Ts, (e) => {
e.preventDefault(), e.stopPropagation();
const t = document.querySelector("#pagebuilder");
if (!t) return;
const o = t.querySelector("[hovered]");
o && o.removeAttribute("hovered");
});
/**
* The function is used to
* attach event listeners to each element within a 'section'
*/
he(this, "setEventListenersForElements", async () => {
const e = /* @__PURE__ */ new WeakSet(), t = document.querySelector("#pagebuilder");
t && (await Ve(), await new Promise((o) => requestAnimationFrame(o)), t.querySelectorAll("section *").forEach((o) => {
if (this.isEditableElement(o) && e && !e.has(o)) {
e.add(o);
const n = o;
n.addEventListener("click", (i) => Go(this, Ms).call(this, i, n)), n.addEventListener("mouseover", (i) => Go(this, Es).call(this, i, n)), n.addEventListener("mouseleave", (i) => Go(this, Ts).call(this, i));
}
}));
});
he(this, "handleAutoSave", async () => {
const e = this.pageBuilderStateStore.getConfigPageBuilder;
if (e && e.userSettings && typeof e.userSettings.autoSave == "boolean" && e.userSettings.autoSave !== !1) {
if (this.pageBuilderStateStore.getIsSaving) return;
try {
this.pageBuilderStateStore.setIsSaving(!0), await this.delay(1e3), await this.saveComponentsLocalStorage();
} catch (t) {
console.error("Error trying auto save.", t);
} finally {
this.pageBuilderStateStore.setIsSaving(!1);
}
}
if (e && !e.userSettings)
try {
this.pageBuilderStateStore.setIsSaving(!0), await this.delay(200), await this.saveComponentsLocalStorage();
} catch (t) {
console.error("Error trying saving.", t);
} finally {
this.pageBuilderStateStore.setIsSaving(!1);
}
});
he(this, "handleManualSave", async () => {
const e = this.pageBuilderStateStore.getConfigPageBuilder;
e && e.userSettings && (typeof e.userSettings.autoSave == "boolean" && !e.userSettings.autoSave || typeof e.userSettings.autoSave == "boolean" && e.userSettings.autoSave) && (this.pageBuilderStateStore.setIsSaving(!0), await this.delay(200), await this.saveComponentsLocalStorage(), this.pageBuilderStateStore.setIsSaving(!1)), e && !e.userSettings && (this.pageBuilderStateStore.setIsSaving(!0), await this.delay(200), await this.saveComponentsLocalStorage(), this.pageBuilderStateStore.setIsSaving(!1));
});
he(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"));
});
//
he(this, "handleTextInput", async (e) => {
var t;
typeof ((t = this.getElement.value) == null ? void 0 : t.innerHTML) == "string" && (typeof this.getElement.value.innerHTML == "string" && (await this.nextTick, this.getElement.value.textContent = e, this.pageBuilderStateStore.setTextAreaVueModel(this.getElement.value.innerHTML), this.getElement.value.innerHTML = e), this.ensureTextAreaHasContent());
});
/**
* Components from DOM → JS (not JS → DOM).
* Saving the current DOM state into JS this.getComponents (for example, before saving to localStorage).
* This function Only copies the current DOM HTML into JS this.getComponents (component.html_code).
*/
po(this, Os, async () => {
const e = document.querySelector("#pagebuilder");
if (!e) return;
const t = e.querySelector("[hovered]");
t && t.removeAttribute("hovered");
const o = [];
e.querySelectorAll("section[data-componentid]").forEach((n) => {
o.push({
html_code: n.outerHTML,
id: n.getAttribute("data-componentid"),
title: n.getAttribute("title") || n.getAttribute("data-componentid") || "Untitled Component"
});
}), this.getLocalStorageItemName.value && localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(o)), await new Promise((n) => n());
});
this.nextTick = Ve(), this.containsPagebuilder = document.querySelector("#contains-pagebuilder"), this.pageBuilderStateStore = e, this.getTextAreaVueModel = $(() => this.pageBuilderStateStore.getTextAreaVueModel), this.getLocalStorageItemName = $(
() => this.pageBuilderStateStore.getLocalStorageItemName
), this.getCurrentImage = $(() => this.pageBuilderStateStore.getCurrentImage), this.getHyberlinkEnable = $(() => this.pageBuilderStateStore.getHyberlinkEnable), this.getComponents = $(() => this.pageBuilderStateStore.getComponents), this.getComponent = $(() => this.pageBuilderStateStore.getComponent), this.getElement = $(() => this.pageBuilderStateStore.getElement), this.getNextSibling = $(() => this.pageBuilderStateStore.getNextSibling), this.getParentElement = $(() => this.pageBuilderStateStore.getParentElement), this.getRestoredElement = $(() => this.pageBuilderStateStore.getRestoredElement), this.getComponentArrayAddMethod = $(
() => this.pageBuilderStateStore.getComponentArrayAddMethod
), this.NoneListernesTags = [
"P",
"H1",
"H2",
"H3",
"H4",
"H5",
"H6",
"IFRAME",
"UL",
"OL",
"LI",
"EM",
"STRONG",
"B",
"A",
"SPAN",
"BLOCKQUOTE",
"BR"
], this.delay = Sp;
}
// Load existing content from HTML when in update mode
async clearHtmlSelection() {
this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null), await ne(this, ee, Ep).call(this);
}
// Load existing content from HTML when in update mode
setConfigPageBuilder(e) {
this.pageBuilderStateStore.setConfigPageBuilder(e);
}
isEditableElement(e) {
return e ? !this.NoneListernesTags.includes(e.tagName) : !1;
}
cloneCompObjForDOMInsertion(e) {
const t = { ...e };
if (this.containsPagebuilder && (this.getComponentArrayAddMethod.value === "unshift" || this.getComponentArrayAddMethod.value === "push") && (this.getComponentArrayAddMethod.value === "unshift" && this.containsPagebuilder.scrollTo({
top: 0,
behavior: "smooth"
}), this.getComponentArrayAddMethod.value === "push")) {
const a = this.containsPagebuilder.scrollHeight;
this.containsPagebuilder.scrollTo({
top: a,
behavior: "smooth"
});
}
const n = new DOMParser().parseFromString(t.html_code || "", "text/html");
n.querySelectorAll("*").forEach((a) => {
ne(this, ee, Cp).call(this, a);
});
const s = n.querySelector("section");
return s && (s.dataset.componentid = vd(), s.querySelectorAll("img").forEach((l) => {
l.setAttribute("data-image", vd());
}), t.id = s.dataset.componentid, t.html_code = s.outerHTML), t;
}
async currentClasses() {
var t;
await new Promise((o) => requestAnimationFrame(o));
const e = Array.from(((t = this.getElement.value) == null ? void 0 : t.classList) || []);
this.pageBuilderStateStore.setCurrentClasses(e);
}
handleAddClasses(e) {
var t, o;
if (typeof e == "string" && e !== "" && !e.includes(" ") && // Check if class already exists
!((t = this.getElement.value) != null && t.classList.contains(e))) {
const n = e.trim();
(o = this.getElement.value) == null || o.classList.add(n), this.pageBuilderStateStore.setElement(this.getElement.value), this.pageBuilderStateStore.setClass(e);
}
}
handleRemoveClasses(e) {
var t, o;
(t = this.getElement.value) != null && t.classList.contains(e) && ((o = this.getElement.value) == null || o.classList.remove(e), this.pageBuilderStateStore.setElement(this.getElement.value), this.pageBuilderStateStore.removeClass(e));
}
handleDeleteElement() {
var t, o;
const e = this.getElement.value;
if (e) {
if (!(e != null && e.parentNode)) {
this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null);
return;
}
((t = e.parentElement) == null ? void 0 : t.tagName) !== "SECTION" && (this.pageBuilderStateStore.setParentElement(e.parentNode), this.pageBuilderStateStore.setRestoredElement(e.outerHTML), this.pageBuilderStateStore.setNextSibling(e.nextSibling)), ((o = e.parentElement) == null ? void 0 : o.tagName) === "SECTION" && this.deleteComponent(), e.remove(), this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null);
}
}
async handleRestoreElement() {
if (this.getRestoredElement.value && this.getParentElement.value) {
const e = document.createElement("div");
e.innerHTML = this.getRestoredElement.value, e.firstChild && this.getParentElement.value && this.getParentElement.value.insertBefore(e.firstChild, this.getNextSibling.value);
}
this.pageBuilderStateStore.setParentElement(null), this.pageBuilderStateStore.setRestoredElement(null), this.pageBuilderStateStore.setNextSibling(null), this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null), await this.setEventListenersForElements();
}
handleFontWeight(e) {
ne(this, ee, ve).call(this, e, Js.fontWeight, "setFontWeight");
}
handleFontFamily(e) {
ne(this, ee, ve).call(this, e, Js.fontFamily, "setFontFamily");
}
handleFontStyle(e) {
ne(this, ee, ve).call(this, e, Js.fontStyle, "setFontStyle");
}
handleVerticalPadding(e) {
ne(this, ee, ve).call(this, e, gr.verticalPadding, "setFontVerticalPadding");
}
handleHorizontalPadding(e) {
ne(this, ee, ve).call(this, e, gr.horizontalPadding, "setFontHorizontalPadding");
}
handleVerticalMargin(e) {
ne(this, ee, ve).call(this, e, gr.verticalMargin, "setFontVerticalMargin");
}
handleHorizontalMargin(e) {
ne(this, ee, ve).call(this, e, gr.horizontalMargin, "setFontHorizontalMargin");
}
// border color, style & width / start
handleBorderStyle(e) {
ne(this, ee, ve).call(this, e, Mo.borderStyle, "setBorderStyle");
}
handleBorderWidth(e) {
ne(this, ee, ve).call(this, e, Mo.borderWidth, "setBorderWidth");
}
handleBorderColor(e) {
ne(this, ee, ve).call(this, e, Mo.borderColor, "setBorderColor");
}
// border color, style & width / end
handleBackgroundColor(e) {
ne(this, ee, ve).call(this, e, Di.backgroundColorVariables, "setBackgroundColor");
}
handleTextColor(e) {
ne(this, ee, ve).call(this, e, Di.textColorVariables, "setTextColor");
}
// border radius / start
handleBorderRadiusGlobal(e) {
ne(this, ee, ve).call(this, e, Nt.roundedGlobal, "setBorderRadiusGlobal");
}
handleBorderRadiusTopLeft(e) {
ne(this, ee, ve).call(this, e, Nt.roundedTopLeft, "setBorderRadiusTopLeft");
}
handleBorderRadiusTopRight(e) {
ne(this, ee, ve).call(this, e, Nt.roundedTopRight, "setBorderRadiusTopRight");
}
handleBorderRadiusBottomleft(e) {
ne(this, ee, ve).call(this, e, Nt.roundedBottomLeft, "setBorderRadiusBottomleft");
}
handleBorderRadiusBottomRight(e) {
ne(this, ee, ve).call(this, e, Nt.roundedBottomRight, "setBorderRadiusBottomRight");
}
// border radius / end
handleFontSize(e) {
if (!e || !this.getElement.value) return;
let t = si.fontBase.find((c) => {
var p;
return (p = this.getElement.value) == null ? void 0 : p.classList.contains(c);
});
t === void 0 && (t = "base:none");
let o = si.fontDesktop.find((c) => {
var p;
return (p = this.getElement.value) == null ? void 0 : p.classList.contains(c);
});
o === void 0 && (o = "lg:none");
let n = si.fontTablet.find((c) => {
var p;
return (p = this.getElement.value) == null ? void 0 : p.classList.contains(c);
});
n === void 0 && (n = "md:none");
let i = si.fontMobile.find((c) => {
var p;
return (p = this.getElement.value) == null ? void 0 : p.classList.contains(c);
});
i === void 0 && (i = "sm:none"), this.pageBuilderStateStore.setFontBase(t), this.pageBuilderStateStore.setFontDesktop(o), this.pageBuilderStateStore.setFontTablet(n), this.pageBuilderStateStore.setFontMobile(i);
const s = $(() => this.pageBuilderStateStore.getFontBase), a = $(() => this.pageBuilderStateStore.getFontDesktop), l = $(() => this.pageBuilderStateStore.getFontTablet), d = $(() => this.pageBuilderStateStore.getFontMobile);
e !== void 0 && this.getElement.value && (!e.includes("sm:") && !e.includes("md:") && !e.includes("lg:") && (s.value && this.getElement.value.classList.remove(s.value), e.includes("base:none") || this.getElement.value.classList.add(e), this.pageBuilderStateStore.setFontBase(e)), e.includes("lg:") && (a.value && this.getElement.value.classList.remove(a.value), e.includes("lg:none") || this.getElement.value.classList.add(e), this.pageBuilderStateStore.setFontDesktop(e)), e.includes("md:") && (l.value && this.getElement.value.classList.remove(l.value), e.includes("md:none") || this.getElement.value.classList.add(e), this.pageBuilderStateStore.setFontTablet(e)), e.includes("sm:") && (d.value && this.getElement.value.classList.remove(d.value), e.includes("sm:none") || this.getElement.value.classList.add(e), this.pageBuilderStateStore.setFontMobile(e)), this.pageBuilderStateStore.setElement(this.getElement.value));
}
handleBackgroundOpacity(e) {
ne(this, ee, ve).call(this, e, Ii.backgroundOpacities, "setBackgroundOpacity");
}
handleOpacity(e) {
ne(this, ee, ve).call(this, e, Ii.opacities, "setOpacity");
}
deleteAllComponents() {
this.pageBuilderStateStore.setComponents([]);
}
deleteComponent() {
if (!this.getComponents.value || !this.getComponent.value) return;
const e = this.getComponents.value.findIndex(
(t) => {
var o;
return t.id === ((o = this.getComponent.value) == null ? void 0 : o.id);
}
);
e !== -1 && (this.getComponents.value.splice(e, 1), this.pageBuilderStateStore.setComponents(this.getComponents.value), this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null));
}
// move component
// runs when html components are rearranged
moveComponent(e) {
if (!this.getComponents.value || !this.getComponent.value || this.getComponents.value.length <= 1) return;
const t = this.getComponent.value, o = this.getComponents.value.findIndex(
(i) => i.id === t.id
);
if (o === -1)
return;
const n = o + e;
n < 0 || n >= this.getComponents.value.length || (this.getComponents.value.splice(o, 1), this.getComponents.value.splice(n, 0, t));
}
//
//
ElOrFirstChildIsIframe() {
var e, t, o;
return ((e = this.getElement.value) == null ? void 0 : e.tagName) === "IFRAME" || ((o = (t = this.getElement.value) == null ? void 0 : t.firstElementChild) == null ? void 0 : o.tagName) === "IFRAME";
}
//
//
//
selectedElementIsValidText() {
var o, n, i, s;
let e = !1;
const t = (o = this.getElement.value) == null ? void 0 : o.children;
if (!(((n = this.getElement.value) == null ? void 0 : n.tagName) === "IMG" || ((s = (i = this.getElement.value) == null ? void 0 : i.firstElementChild) == null ? void 0 : s.tagName) === "IFRAME") && t)
return Array.from(t).forEach((a) => {
(a == null ? void 0 : a.tagName) === "IMG" || (a == null ? void 0 : a.tagName) === "DIV" ? e = !1 : e = !0;
}), e;
}
previewCurrentDesign() {
this.pageBuilderStateStore.setElement(null);
const e = document.querySelector("#pagebuilder");
if (!e) return;
const t = O([]);
e.querySelectorAll("section:not(section section)").forEach((n) => {
const i = n.querySelector("[hovered]");
i && i.removeAttribute("hovered");
const s = n.querySelector("[selected]");
s && s.removeAttribute("selected"), t.value.push(n.outerHTML);
});
const o = JSON.stringify(t.value);
this.pageBuilderStateStore.setCurrentLayoutPreview(o), t.value = [];
}
// Helper function to sanitize title for localStorage key
sanitizeForLocalStorage(e) {
return e.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
}
updateLocalStorageItemName() {
var n, i, s, a, l;
const e = (i = (n = this.pageBuilderStateStore.getConfigPageBuilder) == null ? void 0 : n.updateOrCreate) == null ? void 0 : i.formType, t = (s = this.pageBuilderStateStore.getConfigPageBuilder) == null ? void 0 : s.resourceData, o = (l = (a = this.pageBuilderStateStore.getConfigPageBuilder) == null ? void 0 : a.updateOrCreate) == null ? void 0 : l.formName;
if (e === "create") {
if (o && o.length > 0) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-create-resource-${this.sanitizeForLocalStorage(o)}`
);
return;
}
this.pageBuilderStateStore.setLocalStorageItemName("page-builder-create-resource");
return;
}
if (e === "update") {
if (typeof o == "string" && o.length > 0) {
if (t && t != null && !t.title && (!t.id || typeof t.id == "string")) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-update-resource-${this.sanitizeForLocalStorage(o)}`
);
return;
}
if (t && t != null && t.title && typeof t.title == "string" && t.title.length > 0 && (!t.id || typeof t.id == "string")) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-update-resource-${this.sanitizeForLocalStorage(o)}-${this.sanitizeForLocalStorage(t.title)}`
);
return;
}
if (t && t != null && !t.title && typeof t.title != "string" && (t.id || typeof t.id == "number")) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-update-resource-${this.sanitizeForLocalStorage(o)}-${this.sanitizeForLocalStorage(String(t.id))}`
);
return;
}
if (t && t != null && t.title && typeof t.title == "string" && t.title.length > 0 && (t.id || typeof t.id == "number")) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-update-resource-${this.sanitizeForLocalStorage(o)}-${this.sanitizeForLocalStorage(t.title)}-${this.sanitizeForLocalStorage(String(t.id))}`
);
return;
}
}
if (!o || typeof o == "string" && o.length === 0) {
if (t && t != null && !t.title && (!t.id || typeof t.id == "string")) {
this.pageBuilderStateStore.setLocalStorageItemName("page-builder-update-resource");
return;
}
if (t && t != null && t.title && typeof t.title == "string" && t.title.length > 0 && (!t.id || typeof t.id == "string")) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-update-resource-${this.sanitizeForLocalStorage(t.title)}`
);
return;
}
if (t && t != null && !t.title && typeof t.title != "string" && (t.id || typeof t.id == "number")) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-update-resource-${this.sanitizeForLocalStorage(String(t.id))}`
);
return;
}
if (t && t != null && t.title && typeof t.title == "string" && t.title.length > 0 && (t.id || typeof t.id == "number")) {
this.pageBuilderStateStore.setLocalStorageItemName(
`page-builder-update-resource-${this.sanitizeForLocalStorage(t.title)}-${this.sanitizeForLocalStorage(String(t.id))}`
);
return;
}
}
}
}
// save to local storage
async saveComponentsLocalStorage() {
await this.nextTick, await Go(this, Os).call(this);
}
async removeItemComponentsLocalStorageCreate() {
await this.nextTick, this.getLocalStorageItemName.value && localStorage.removeItem(this.getLocalStorageItemName.value);
}
async removeItemComponentsLocalStorageUpdate() {
this.getLocalStorageItemName.value && localStorage.removeItem(this.getLocalStorageItemName.value);
}
areComponentsStoredInLocalStorage() {
if (!this.getLocalStorageItemName.value) return !1;
if (this.getLocalStorageItemName.value && localStorage.getItem(this.getLocalStorageItemName.value)) {
const e = localStorage.getItem(this.getLocalStorageItemName.value);
if (e)
return e;
}
return !1;
}
//
//
async updateBasePrimaryImage(e) {
this.getElement.value && this.getCurrentImage.value && this.getCurrentImage.value.src && (await this.nextTick, this.pageBuilderStateStore.setBasePrimaryImage(`${this.getCurrentImage.value.src}`), await this.handleAutoSave());
}
showBasePrimaryImage() {
if (!this.getElement.value) return;
const e = document.createElement("div");
e.innerHTML = this.getElement.value.outerHTML;
const t = e.getElementsByTagName("img"), o = e.getElementsByTagName("div");
if (t.length === 1 && o.length === 0) {
this.pageBuilderStateStore.setBasePrimaryImage(t[0].src);
return;
}
this.pageBuilderStateStore.setBasePrimaryImage(null);
}
handleHyperlink(e, t, o) {
var s;
if (this.pageBuilderStateStore.setHyperlinkAbility(!0), !this.getElement.value || !(this.getElement.value instanceof HTMLElement) || typeof this.getElement.value.closest != "function")
return;
this.getElement.value.closest("a") !== null && this.pageBuilderStateStore.setHyperlinkAbility(!1);
const i = (s = this.getElement.value) == null ? void 0 : s.tagName.toUpperCase();
if (i !== "P" && i !== "H1" && i !== "H2" && i !== "H3" && i !== "H4" && i !== "H5" && i !== "H6" && this.pageBuilderStateStore.setHyperlinkAbility(!1), e === void 0) {
ne(this, ee, Op).call(this);
return;
}
ne(this, ee, Tp).call(this, e, t || null, o || !1);
}
// Helper method for custom components to easily add components
async addComponent(e) {
try {
const t = this.cloneCompObjForDOMInsertion({
html_code: e.html_code,
id: e.id,
title: e.title
});
this.pageBuilderStateStore.setPushComponents({
component: t,
componentArrayAddMethod: this.getComponentArrayAddMethod.value || "push"
}), await Ve(), await this.setEventListenersForElements();
} catch (t) {
console.error("Error adding component:", t);
}
}
/**
* Parse and set components from JSON or HTML data
*
* Supports:
* - JSON: Array of ComponentObject with html_code, id, title
* - HTML: String containing <section data-componentid="..."> elements
*
* Auto-detects format and parses accordingly
*
* @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
* OR HTML string (e.g., '<section data-componentid="123">...</section>')
*/
setComponentsFromData(e) {
const t = e.trim();
t.startsWith("[") || t.startsWith("{") ? ne(this, ee, Na).call(this, t) : t.startsWith("<") ? ne(this, ee, Bp).call(this, t) : ne(this, ee, Na).call(this, t);
}
toggleTipTapModal(e) {
this.pageBuilderStateStore.setShowModalTipTap(e), e || this.handleAutoSave();
}
// Load existing content from HTML when in update mode
loadExistingContent(e, t) {
var n, i, s, a;
if (this.pageBuilderStateStore.setComponents([]), !this.pageBuilderStateStore.getConfigPageBuilder) return;
t && e !== void 0 && this.setComponentsFromData(e);
const o = this.areComponentsStoredInLocalStorage();
((i = (n = this.pageBuilderStateStore.getConfigPageBuilder) == null ? void 0 : n.updateOrCreate) == null ? void 0 : i.formType) === "create" && o && this.setComponentsFromData(o), ((a = (s = this.pageBuilderStateStore.getConfigPageBuilder) == null ? void 0 : s.updateOrCreate) == null ? void 0 : a.formType) === "update" && e && this.setComponentsFromData(e);
}
async handlePageBuilderMethods() {
await new Promise((e) => requestAnimationFrame(e)), this.handleHyperlink(void 0, null, !1), this.handleOpacity(void 0), this.handleBackgroundOpacity(void 0), this.showBasePrimaryImage(), this.handleBorderStyle(void 0), this.handleBorderWidth(void 0), this.handleBorderColor(void 0), this.handleBorderRadiusGlobal(void 0), this.handleBorderRadiusTopLeft(void 0), this.handleBorderRadiusTopRight(void 0), this.handleBorderRadiusBottomleft(void 0), this.handleBorderRadiusBottomRight(void 0), this.handleFontSize(void 0), this.handleFontWeight(void 0), this.handleFontFamily(void 0), this.handleFontStyle(void 0), this.handleVerticalPadding(void 0), this.handleHorizontalPadding(void 0), this.handleVerticalMargin(void 0), this.handleHorizontalMargin(void 0), this.handleBackgroundColor(void 0), this.handleTextColor(void 0), await this.currentClasses();
}
}
ee = new WeakSet(), ve = function(e, t, o) {
const n = this.getElement.value;
if (!n) return;
const i = t.find((a) => n.classList.contains(a));
let s = i || "none";
return e === void 0 ? (typeof o == "string" && o.length > 2 && this.pageBuilderStateStore[o](s), i) : (typeof e == "string" && e !== "none" ? (s && n.classList.contains(s) && n.classList.remove(s), n.classList.add(e), s = e) : typeof e == "string" && e === "none" && s && (n.classList.remove(s), s = e), typeof o == "string" && o.length > 2 && (this.pageBuilderStateStore[o](s), this.pageBuilderStateStore.setElement(n)), i);
}, Cp = function(e) {
ne(this, ee, Mp).call(this, e), e.tagName === "IMG" && e.classList.add("smooth-transition"), e.tagName === "DIV" && e.classList.length;
}, Mp = function(e) {
var t;
if (e && this.NoneListernesTags.includes(