@mindfiredigital/page-builder
Version:
1,413 lines • 2.88 MB
JavaScript
'use strict';
function e(e, t, A, n) {
return new (A || (A = Promise))(function (r, s) {
function i(e) {
try {
a(n.next(e));
} catch (e) {
s(e);
}
}
function o(e) {
try {
a(n.throw(e));
} catch (e) {
s(e);
}
}
function a(e) {
var t;
e.done
? r(e.value)
: ((t = e.value),
t instanceof A
? t
: new A(function (e) {
e(t);
})).then(i, o);
}
a((n = n.apply(e, t || [])).next());
});
}
'function' == typeof SuppressedError && SuppressedError;
class t {
constructor(e, t) {
((this.canvas = e), (this.sidebar = t));
}
enable() {
this.sidebar.querySelectorAll('.draggable').forEach(e => {
e.addEventListener('dragstart', t => {
var A, n;
const r = t;
null === (A = r.dataTransfer) ||
void 0 === A ||
A.setData('component-type', e.id);
const s = e.getAttribute('data-component-settings');
s &&
(null === (n = r.dataTransfer) ||
void 0 === n ||
n.setData('custom-settings', s));
});
});
}
}
class A {
constructor() {
var e, t;
((this.resolvePromise = null), (this.attributes = []));
const A = document.getElementById('modal');
(A
? (this.modalElement = A)
: ((this.modalElement = this.createModalElement()),
document.body.appendChild(this.modalElement)),
(this.contentContainer =
this.modalElement.querySelector('#modal-content')),
this.hide(),
null === (e = this.modalElement.querySelector('#close-modal-button')) ||
void 0 === e ||
e.addEventListener('click', () => {
var e;
(this.hide(),
null === (e = this.resolvePromise) ||
void 0 === e ||
e.call(this, null));
}),
null === (t = this.modalElement.querySelector('#save-button')) ||
void 0 === t ||
t.addEventListener('click', () => {
this.onSave();
}));
const n = this.modalElement.querySelector('#attribute-search');
null == n ||
n.addEventListener('input', e => {
const t = e.target.value;
this.filterAttributes(t);
});
}
filterAttributes(e) {
const t = this.contentContainer.querySelectorAll('.form-field'),
A = e.toLowerCase().trim();
t.forEach(e => {
var t, n, r;
const s =
null === (t = e.getAttribute('data-attr-key')) || void 0 === t
? void 0
: t.toLowerCase(),
i =
null ===
(r =
null === (n = e.querySelector('.form-title')) || void 0 === n
? void 0
: n.textContent) || void 0 === r
? void 0
: r.toLowerCase();
(null == s ? void 0 : s.includes(A)) ||
(null == i ? void 0 : i.includes(A))
? e.classList.remove('modal-hidden')
: e.classList.add('modal-hidden');
});
}
createModalElement() {
const e = document.createElement('div');
return (
(e.className = 'modal-overlay modal-hidden'),
(e.id = 'modal'),
(e.innerHTML =
'\n <div class="modal-content">\n <div class="modal-header">\n <div class="modal-header-content">\n <h2 class="modal-title">Component Settings</h2>\n <button id="close-modal-button" class="modal-close-button">\n <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />\n </svg>\n </button>\n </div>\n <div class="modal-search-container">\n <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M10 2a8 8 0 100 16A8 8 0 0010 2zm7.4 12.6l4.2 4.2a1 1 0 01-1.4 1.4l-4.2-4.2a10 10 0 111.4-1.4z"/>\n </svg>\n <input type="text" id="attribute-search" class="modal-search-input" placeholder="Search attributes...">\n</div>\n </div>\n <div class="modal-body">\n <div id="modal-content" class="modal-form">\n \x3c!-- Dynamic form elements will be injected here --\x3e\n </div>\n <div class="modal-footer">\n <button id="save-button" class="save-button">\n Save\n </button>\n </div>\n </div>\n </div>\n '),
e
);
}
renderForm(e) {
((this.contentContainer.innerHTML = ''),
(this.attributes = e),
e.forEach(e => {
const t = document.createElement('div');
((t.className = 'form-field'), t.setAttribute('data-attr-key', e.key));
const A = document.createElement('div');
((A.className = 'form-field-header'),
A.setAttribute('data-attr-id', e.id),
t.addEventListener('click', () => {
(this.contentContainer
.querySelectorAll('.form-field')
.forEach(e => {
e.classList.remove('selected');
}),
t.classList.add('selected'));
}));
const n = document.createElement('button');
((n.className = 'expand-button'),
(n.type = 'button'),
(n.innerHTML =
'\n <svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />\n </svg>\n '));
const r = document.createElement('div');
r.className = 'title-key-container';
const s = document.createElement('span');
((s.className = 'form-title'), (s.textContent = `${e.title}`));
const i = document.createElement('span');
((i.className = 'form-key'),
(i.textContent = `(${e.key})(${e.type})`),
r.appendChild(s),
r.appendChild(i),
A.appendChild(n),
A.appendChild(r));
const o = document.createElement('div');
o.className = 'form-value-container form-value-collapsed';
const a = document.createElement('label');
let l;
((a.className = 'form-label'),
(a.textContent = 'Value:'),
a.setAttribute('for', e.id));
const c = document.createElement('span');
((c.id = e.id),
(c.textContent = e.value ? e.value.toString() : null),
(c.className = 'form-display-value'),
(l = c),
o.appendChild(a),
o.appendChild(l),
t.appendChild(A),
t.appendChild(o),
this.contentContainer.appendChild(t),
A.addEventListener('click', () => {
this.toggleFieldExpansion(e.id);
}));
}));
}
toggleFieldExpansion(e) {
const t = this.modalElement.querySelector(`[data-attr-id="${e}"]`),
A = null == t ? void 0 : t.nextElementSibling,
n = null == t ? void 0 : t.querySelector('.expand-icon');
if (A && n) {
!A.classList.contains('form-value-collapsed')
? (A.classList.add('form-value-collapsed'),
(n.style.transform = 'rotate(0deg)'))
: (A.classList.remove('form-value-collapsed'),
(n.style.transform = 'rotate(90deg)'));
}
}
show(e) {
this.renderForm(e);
const t = this.modalElement.querySelector('#attribute-search');
return (
t && (t.value = ''),
this.modalElement.classList.remove('modal-hidden'),
new Promise(e => {
this.resolvePromise = e;
})
);
}
hide() {
this.modalElement.classList.add('modal-hidden');
}
onSave() {
var e;
const t = this.contentContainer.querySelector('.form-field.selected'),
A = {};
if (t) {
const e = t.getAttribute('data-attr-key'),
n = this.attributes.find(t => t.key === e);
n && (A[n.key] = n.value);
}
(this.hide(),
null === (e = this.resolvePromise) || void 0 === e || e.call(this, A),
this.resetPromise());
}
resetPromise() {
this.resolvePromise = null;
}
}
class n {
constructor(e = 'Sample Text') {
((this.text = e), (this.modalComponent = new A()));
}
create(e) {
n.textAttributeConfig = e || [];
const t = document.createElement('div');
t.classList.add('text-component');
const A = document.createElement('span');
return (
(A.innerText = this.text),
(A.contentEditable = 'true'),
A.classList.add('component-text-content'),
t.appendChild(A),
A.addEventListener('click', e => {
e.stopPropagation();
const t = A.closest('.text-component');
t && t.click();
}),
t
);
}
setText(e) {
this.text = e;
}
seedFormulaValues(e) {
(document.querySelectorAll('.text-component').forEach(t => {
const A = t.querySelector('.component-controls'),
n = t.querySelector('.component-label'),
r = t.querySelector('.component-text-content'),
s = t.getAttribute('data-attribute-key');
(r &&
s &&
e.hasOwnProperty(s) &&
((r.textContent = e[s]), (t.style.color = '#000000')),
A && t.appendChild(A),
n && t.appendChild(n));
}),
Q.dispatchDesignChange());
}
updateInputValues(e) {
(document.querySelectorAll('.text-component').forEach(t => {
const A = t.querySelector('.component-controls'),
n = t.querySelector('.component-label'),
r = t.querySelector('.component-text-content'),
s = t.getAttribute('data-attribute-key'),
i = t.getAttribute('data-attribute-type');
(r && s && e.hasOwnProperty(s) && 'Input' === i && (r.textContent = e[s]),
A && t.appendChild(A),
n && t.appendChild(n));
}),
Q.dispatchDesignChange());
}
updateTextContent(e, t) {
const A = e.querySelector('.component-controls'),
n = e.querySelector('.component-label'),
r = e.querySelector('.component-text-content');
(e.setAttribute('data-attribute-key', t.key),
e.setAttribute('data-attribute-type', t.type),
'Formula' === t.type && r
? ((r.textContent = `${t.title}`),
(e.style.fontSize = '10px'),
(e.style.color = 'rgb(188 191 198)'),
(e.style.fontWeight = '500'))
: ('Constant' !== t.type && 'Input' !== t.type) ||
!r ||
(r.textContent = `${t.value}`),
A && e.appendChild(A),
n && e.appendChild(n),
null == Q || Q.dispatchDesignChange());
}
static restore(e) {
const t = e.closest('.text-component'),
A = t.querySelector('.component-text-content');
if (
(A.addEventListener('click', e => {
e.stopPropagation();
const t = A.closest('.text-component');
t && t.click();
}),
t && A)
) {
const e = t.getAttribute('data-attribute-key'),
r = t.getAttribute('data-attribute-type');
if (e) {
const s = n.textAttributeConfig.find(t => t.key === e);
if (s) {
const e = t.querySelector('.component-controls'),
n = t.querySelector('.component-label');
(!s.default_value || ('Formula' !== r && 'Input' !== r)
? 'Formula' === r &&
((A.textContent = `${s.title}`),
(t.style.fontSize = '10px'),
(t.style.color = 'rgb(188 191 198)'),
(t.style.fontWeight = '500'))
: ((A.textContent = `${s.default_value}`),
(t.style.color = '#000000')),
e && t.appendChild(e),
n && t.appendChild(n));
}
}
}
}
}
n.textAttributeConfig = [];
class r {
create(e = null, t) {
r.imageAttributeConfig = t;
const A = document.createElement('div');
A.classList.add('image-component');
const n = `image-container-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
((A.id = n),
(A.style.width = '300px'),
(A.style.height = '300px'),
(A.style.position = 'relative'),
(A.style.backgroundColor = e ? 'transparent' : '#f0f0f0'),
(A.style.display = 'flex'),
(A.style.border = 'none'),
(A.style.alignItems = 'center'),
(A.style.justifyContent = 'center'));
const s = document.createElement('div');
((s.style.color = '#666666'),
(s.style.border = 'none'),
(s.style.display = e ? 'none' : 'block'));
const i = document.createElement('input');
((i.type = 'file'),
(i.accept = 'image/*'),
(i.style.display = 'none'),
i.addEventListener('change', e => r.handleFileChange(e, A, s)));
const o = document.createElement('button');
(o.classList.add('upload-btn'),
(o.innerHTML = '🖊️'),
(o.style.position = 'absolute'),
(o.style.padding = '8px'),
(o.style.background = 'transparent'),
(o.style.border = 'none'),
(o.style.cursor = 'pointer'),
(o.style.opacity = '0'),
(o.style.transition = 'opacity 0.2s'),
(o.style.left = '50%'),
(o.style.top = '50%'),
(o.style.transform = 'translate(-50%, -50%)'),
(o.style.fontSize = '24px'),
o.addEventListener('click', () => i.click()));
const a = document.createElement('img'),
l = `${n}-img`;
return (
(a.id = l),
(a.style.width = '100%'),
(a.style.height = '100%'),
(a.style.objectFit = 'contain'),
(a.style.border = 'none'),
(a.style.display = 'none'),
e && ((a.src = e), (a.style.display = 'block')),
A.addEventListener('mouseenter', () => {
o.style.opacity = '1';
}),
A.addEventListener('mouseleave', () => {
o.style.opacity = '0';
}),
A.appendChild(s),
A.appendChild(i),
A.appendChild(o),
A.appendChild(a),
A
);
}
static handleFileChange(t, A, n) {
const s = t.target,
i = s.files ? s.files[0] : null;
if (i) {
const t = new FileReader();
((t.onload = function () {
return e(this, void 0, void 0, function* () {
const e = t.result,
s = A.querySelector('img');
if (s) {
if (r.imageAttributeConfig) {
const t = yield r.imageAttributeConfig(e);
s.src = t.url;
} else s.src = e;
((s.style.display = 'block'),
(n.style.display = 'none'),
(A.style.backgroundColor = 'transparent'),
null == Q || Q.dispatchDesignChange());
}
});
}),
t.readAsDataURL(i));
}
}
static restoreImageUpload(e, t, A) {
const n = e.querySelector('div:not(.upload-btn)'),
r = e.querySelector('input[type="file"]'),
s = e.querySelector('.upload-btn'),
i = e.querySelector('img');
!1 !== A
? (r.addEventListener('change', t => this.handleFileChange(t, e, n)),
s.addEventListener('click', () => r.click()),
t
? ((i.src = t),
(i.style.display = 'block'),
(n.style.display = 'none'),
(e.style.backgroundColor = 'transparent'))
: ((i.style.display = 'none'),
(n.style.display = 'block'),
(e.style.backgroundColor = '#f0f0f0')),
e.addEventListener('mouseenter', () => {
s.style.opacity = '1';
}),
e.addEventListener('mouseleave', () => {
s.style.opacity = '0';
}))
: s.remove();
}
}
class s {
constructor(e) {
this.captureStateHandler = e;
}
create(e = null) {
const t = document.createElement('div');
t.classList.add('video-component');
const A = document.createElement('input');
((A.type = 'file'),
(A.accept = 'video/*'),
(A.style.display = 'none'),
A.addEventListener('change', e => {
(this.handleFileChange(e, t), this.captureStateHandler());
}));
const n = document.createElement('div');
(n.classList.add('upload-text'), (n.innerText = e ? '' : 'Upload Video'));
const r = document.createElement('video');
((r.controls = !0),
(r.style.width = '100%'),
(r.style.height = '100%'),
(r.style.display = e ? 'block' : 'none'),
e && (r.src = e));
const s = document.createElement('button');
return (
(s.innerHTML = '🖊️'),
s.classList.add('pencil-button'),
s.addEventListener('click', () => A.click()),
t.appendChild(n),
t.appendChild(A),
t.appendChild(r),
t.appendChild(s),
t
);
}
handleFileChange(e, t) {
const A = e.target,
n = A.files ? A.files[0] : null;
if (n && n.type.startsWith('video/')) {
const e = new FileReader();
((e.onload = () => {
const A = t.querySelector('video'),
n = t.querySelector('.upload-text');
((A.src = e.result),
(A.style.display = 'block'),
(n.style.display = 'none'));
}),
e.readAsDataURL(n));
} else alert('Please upload a valid video file.');
}
}
class i {
create(e = 'Click Me') {
const t = document.createElement('button');
return (
(t.innerText = e),
t.classList.add('button-component'),
(t.style.padding = '10px 20px'),
(t.style.fontSize = '14px'),
(t.style.cursor = 'pointer'),
t
);
}
}
class o {
constructor() {
this.modalComponent = new A();
}
create(e = 1, t = 'Header', A) {
o.headerAttributeConfig = A || [];
const n = document.createElement(`h${e}`);
n.classList.add('header-component');
const r = document.createElement('span');
return (
(r.innerText = t),
(r.contentEditable = 'true'),
r.classList.add('component-text-content'),
n.appendChild(r),
r.addEventListener('click', e => {
e.stopPropagation();
const t = r.closest('.header-component');
t && t.click();
}),
n
);
}
seedFormulaValues(e) {
(document.querySelectorAll('.header-component').forEach(t => {
const A = t.querySelector('.component-controls'),
n = t.querySelector('.component-label'),
r = t.querySelector('.component-text-content'),
s = t.getAttribute('data-attribute-key');
(r &&
s &&
e.hasOwnProperty(s) &&
((r.textContent = e[s]), (t.style.color = '#000000')),
A && t.appendChild(A),
n && t.appendChild(n));
}),
Q.dispatchDesignChange());
}
updateInputValues(e) {
(document.querySelectorAll('.header-component').forEach(t => {
const A = t.querySelector('.component-controls'),
n = t.querySelector('.component-label'),
r = t.querySelector('.component-text-content'),
s = t.getAttribute('data-attribute-key'),
i = t.getAttribute('data-attribute-type');
(r && s && e.hasOwnProperty(s) && 'Input' === i && (r.textContent = e[s]),
A && t.appendChild(A),
n && t.appendChild(n));
}),
Q.dispatchDesignChange());
}
updateHeaderContent(e, t) {
const A = e.querySelector('.component-controls'),
n = e.querySelector('.component-label'),
r = e.querySelector('.component-text-content');
(e.setAttribute('data-attribute-key', t.key),
e.setAttribute('data-attribute-type', t.type),
'Formula' === t.type && r
? ((r.textContent = `${t.title}`),
(e.style.color = 'rgb(188 191 198)'),
(e.style.fontWeight = '500'))
: ('Constant' !== t.type && 'Input' !== t.type) ||
!r ||
(r.textContent = `${t.value}`),
A && e.appendChild(A),
n && e.appendChild(n),
null == Q || Q.dispatchDesignChange());
}
static restore(e) {
const t = e.closest('.header-component'),
A = t.querySelector('.component-text-content');
if (
(A.addEventListener('click', e => {
e.stopPropagation();
const t = A.closest('.header-component');
t && t.click();
}),
t && A)
) {
const e = t.getAttribute('data-attribute-key'),
n = t.getAttribute('data-attribute-type');
if (e) {
const r = o.headerAttributeConfig.find(t => t.key === e);
if (r) {
const e = t.querySelector('.component-controls'),
s = t.querySelector('.component-label');
(!r.default_value || ('Formula' !== n && 'Input' !== n)
? 'Formula' === n &&
((A.textContent = `${r.title}`),
(t.style.color = 'rgb(188 191 198)'),
(t.style.fontWeight = '500'))
: ((A.textContent = `${r.default_value}`),
(t.style.color = '#000000')),
e && t.appendChild(e),
s && t.appendChild(s));
}
}
}
}
}
o.headerAttributeConfig = [];
class a {
constructor() {
((this.MINIMUM_SIZE = 20),
(this.originalWidth = 0),
(this.originalHeight = 0),
(this.originalX = 0),
(this.originalY = 0),
(this.originalMouseX = 0),
(this.originalMouseY = 0),
(this.currentResizer = null),
(this.resize = e => {
if (!this.currentResizer) return;
const t = e.pageX - this.originalMouseX,
A = e.pageY - this.originalMouseY;
if (this.currentResizer.classList.contains('bottom-right')) {
const e = this.originalWidth + t,
n = this.originalHeight + A;
(e > this.MINIMUM_SIZE && (this.element.style.width = `${e}px`),
n > this.MINIMUM_SIZE && (this.element.style.height = `${n}px`));
} else if (this.currentResizer.classList.contains('bottom-left')) {
const e = this.originalHeight + A,
n = this.originalWidth - t;
(e > this.MINIMUM_SIZE && (this.element.style.height = `${e}px`),
n > this.MINIMUM_SIZE &&
((this.element.style.width = `${n}px`),
(this.element.style.left = `${this.originalX + t}px`)));
} else if (this.currentResizer.classList.contains('top-right')) {
const e = this.originalWidth + t,
n = this.originalHeight - A;
(e > this.MINIMUM_SIZE && (this.element.style.width = `${e}px`),
n > this.MINIMUM_SIZE &&
((this.element.style.height = `${n}px`),
(this.element.style.top = `${this.originalY + A}px`)));
} else if (this.currentResizer.classList.contains('top-left')) {
const e = this.originalWidth - t,
n = this.originalHeight - A;
(e > this.MINIMUM_SIZE &&
((this.element.style.width = `${e}px`),
(this.element.style.left = `${this.originalX + t}px`)),
n > this.MINIMUM_SIZE &&
((this.element.style.height = `${n}px`),
(this.element.style.top = `${this.originalY + A}px`)));
}
}),
(this.stopResize = () => {
(window.removeEventListener('mousemove', this.resize),
window.removeEventListener('mouseup', this.stopResize),
(this.currentResizer = null),
Q.historyManager.captureState());
}),
(this.element = document.createElement('div')),
this.element.classList.add('container-component'),
(this.resizers = document.createElement('div')),
this.resizers.classList.add('resizers'),
this.element.appendChild(this.resizers),
'absolute' === Q.layoutMode && this.addResizeHandles(),
this.addStyles(),
this.initializeEventListeners());
}
addResizeHandles() {
[
{ class: 'top-left', cursor: 'nwse-resize' },
{ class: 'top-right', cursor: 'nesw-resize' },
{ class: 'bottom-left', cursor: 'nesw-resize' },
{ class: 'bottom-right', cursor: 'nwse-resize' },
].forEach(e => {
const t = document.createElement('div');
(t.classList.add('resizer', e.class),
t.addEventListener('mousedown', e => this.initResize(e, t)),
this.resizers.appendChild(t));
});
}
initResize(e, t) {
(e.preventDefault(),
(this.currentResizer = t),
(this.originalWidth = parseFloat(
getComputedStyle(this.element).getPropertyValue('width')
)),
(this.originalHeight = parseFloat(
getComputedStyle(this.element).getPropertyValue('height')
)),
(this.originalX = this.element.getBoundingClientRect().left),
(this.originalY = this.element.getBoundingClientRect().top),
(this.originalMouseX = e.pageX),
(this.originalMouseY = e.pageY),
window.addEventListener('mousemove', this.resize),
window.addEventListener('mouseup', this.stopResize));
}
initializeEventListeners() {
(this.element.addEventListener('dragstart', this.onDragStart.bind(this)),
this.element.addEventListener('drop', this.onDrop.bind(this)),
this.element.addEventListener('dragover', e => e.preventDefault()),
this.element.addEventListener('mouseover', this.onMouseOver.bind(this)),
this.element.addEventListener(
'mouseleave',
this.onMouseLeave.bind(this)
));
}
onDragStart(e) {
e.target === this.element && e.stopPropagation();
}
onDrop(e) {
var t;
(e.preventDefault(), e.stopPropagation());
const A =
null === (t = e.dataTransfer) || void 0 === t
? void 0
: t.getData('component-type');
if (!A) return;
const n = Q.createComponent(A);
if (!n) return;
const r = this.element.classList[2],
s = Q.generateUniqueClass(A, !0, r);
n.classList.add(s);
const i = document.createElement('span');
((i.className = 'component-label'),
(i.textContent = s),
i.setAttribute('contenteditable', 'false'),
(n.id = s),
(i.style.display = 'none'),
n.appendChild(i),
'absolute' === Q.layoutMode
? ((n.style.position = 'absolute'),
(n.style.left = `${e.offsetX}px`),
(n.style.top = `${e.offsetY}px`),
Q.addDraggableListeners(n))
: 'grid' === Q.layoutMode &&
this.element.classList.add('container-grid-active'),
this.element.appendChild(n),
Q.historyManager.captureState());
}
showLabel(e, t) {
e.stopPropagation();
const A = t.querySelector('.component-label');
A && (A.style.display = 'block');
}
hideLabel(e, t) {
e.stopPropagation();
const A = t.querySelector('.component-label');
A && (A.style.display = 'none');
}
onMouseOver(e) {
e.stopPropagation();
(document.querySelectorAll('.container-highlight').forEach(e => {
e.classList.remove('container-highlight');
}),
e.target === this.element &&
this.element.classList.add('container-highlight'));
}
onMouseLeave(e) {
e.target === this.element &&
this.element.classList.remove('container-highlight');
}
addStyles() {
const e = document.createElement('style');
((e.textContent =
'\n .resizer {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: white;\n border: 2px solid #4286f4;\n position: absolute;\n }\n\n .resizer.top-left {\n left: -5px;\n top: -5px;\n cursor: nwse-resize;\n }\n\n .resizer.top-right {\n right: -5px;\n top: -5px;\n cursor: nesw-resize;\n }\n\n .resizer.bottom-left {\n left: -5px;\n bottom: -5px;\n cursor: nesw-resize;\n }\n\n .resizer.bottom-right {\n right: -5px;\n bottom: -5px;\n cursor: nwse-resize;\n }\n '),
document.head.appendChild(e));
}
create() {
return this.element;
}
static restoreResizer(e) {
const t = e.querySelector('.resizers');
t && t.remove();
const A = document.createElement('div');
A.classList.add('resizers');
const n = new a();
((n.element = e), (n.resizers = A), n.addResizeHandles(), e.appendChild(A));
}
static restoreContainer(e, t) {
const A = 'grid' === Q.layoutMode;
if (!1 === t || A) {
e.querySelectorAll('.resizers').forEach(e => e.remove());
} else a.restoreResizer(e);
const n = new a();
n.element = e;
e.querySelectorAll('.editable-component').forEach(e => {
var s;
if (!1 !== t)
(Q.controlsManager.addControlButtons(e),
A
? (e.classList.remove('component-resizer'),
e.removeAttribute('draggable'),
(e.style.cursor = 'default'),
(e.style.position = ''),
(e.style.left = ''),
(e.style.top = ''))
: (Q.addDraggableListeners(e),
(e.style.position = 'absolute'),
e.classList.add('component-resizer')),
e.addEventListener('mouseenter', t => n.showLabel(t, e)),
e.addEventListener('mouseleave', t => n.hideLabel(t, e)));
else {
const t = e.querySelectorAll('[contenteditable]');
(t.length > 0 &&
t.forEach(e => {
e.removeAttribute('contenteditable');
}),
e.classList.remove('editable-component'),
e.classList.remove('component-resizer'),
e.removeAttribute('draggable'),
e.removeAttribute('contenteditable'));
}
if (e.classList.contains('image-component')) {
const A =
(null === (s = e.querySelector('img')) || void 0 === s
? void 0
: s.getAttribute('src')) || '';
r.restoreImageUpload(e, A, t);
}
e.classList.contains('container-component') &&
this.restoreContainer(e, t);
});
}
}
class l {
constructor(e, t = `${e}Col-component`) {
((this.columnCount = e),
(this.element = document.createElement('div')),
this.element.classList.add(t),
this.element.setAttribute('draggable', 'true'));
for (let t = 1; t <= e; t++) {
const e = this.createColumn(`column-${t}`);
this.element.appendChild(e);
}
(this.addStyles(t), this.initializeEventListeners());
}
createColumn(e) {
const t = document.createElement('div');
(t.classList.add('column', e),
t.setAttribute('draggable', 'true'),
(t.style.width = 100 / this.columnCount + '%'));
const A = this.element.id;
return ((t.id = `${this.columnCount}Col-component${A}-${e}`), t);
}
initializeEventListeners() {
(this.element.addEventListener('dragover', e => e.preventDefault()),
this.element.addEventListener('drop', this.onDrop.bind(this)));
}
onDrop(e) {
var t;
(e.preventDefault(), e.stopPropagation());
const A =
null === (t = e.dataTransfer) || void 0 === t
? void 0
: t.getData('component-type');
if (!A) return;
const n = Q.createComponent(A);
if (!n) return;
const r = e.target;
if (r && r.classList.contains('column')) {
r.appendChild(n);
const e = `${this.element.id}-${`c${Array.from(r.parentElement.children).indexOf(r)}`}`;
((r.id = e), r.classList.add(e));
let t = r.querySelector('.column-label');
(t ||
((t = document.createElement('span')),
(t.className = 'column-label'),
r.appendChild(t)),
(t.textContent = e));
const s = Q.generateUniqueClass(A, !0, e);
(n.classList.add(s), (n.id = s));
let i = n.querySelector('.component-label');
(i ||
((i = document.createElement('span')),
(i.className = 'component-label'),
i.setAttribute('contenteditable', 'false'),
n.appendChild(i)),
(i.textContent = s),
Q.historyManager.captureState());
}
}
addStyles(e) {
const t = document.createElement('style');
((t.textContent = `\n .${e} {\n display: flex;\n min-width: 100px;\n min-height: 100px;\n }\n .column {\n flex-grow: 1;\n min-width: 50px;\n border: 1px dashed #ddd;\n position: relative;\n }\n .column:hover {\n outline: 1px solid #3498db;\n background: #f5f5f5;\n }\n `),
document.head.appendChild(t));
}
create() {
return this.element;
}
static restoreColumn(e) {
e.querySelectorAll('.editable-component').forEach(e => {
var t;
if (
(Q.controlsManager.addControlButtons(e),
Q.addDraggableListeners(e),
e.classList.contains('image-component'))
) {
const A =
(null === (t = e.querySelector('img')) || void 0 === t
? void 0
: t.getAttribute('src')) || '';
r.restoreImageUpload(e, A, null);
}
e.classList.contains('container-component') && a.restoreContainer(e);
});
}
}
class c extends l {
constructor() {
super(2, 'twoCol-component');
}
}
class u extends l {
constructor() {
super(3, 'threeCol-component');
}
}
class d {
constructor() {
((this.modalComponent = null), (this.modalComponent = new A() || null));
}
create(e, t, A = !1, n) {
d.tableAttributeConfig = n || [];
const r = document.createElement('div');
r.classList.add('table-component');
const s = Q.generateUniqueClass('table');
((r.id = s),
(r.style.minWidth = '250px'),
(r.style.border = '1px solid #2F3132'),
(r.style.borderRadius = '8px'),
(r.style.display = 'flex'),
(r.style.flexDirection = 'column'));
const i = document.createElement('div');
((i.style.display = 'flex'),
(i.style.flexDirection = 'column'),
i.classList.add('table-wrapper'));
for (let A = 0; A < e; A++) {
const e = this.createTableRow(A, t, s);
i.appendChild(e);
}
if ((r.appendChild(i), !A)) {
const e = document.createElement('div');
(e.classList.add('table-btn-container'),
(e.style.display = 'flex'),
(e.style.gap = '10px'),
(e.style.justifyContent = 'center'),
(e.style.marginTop = '10px'),
(e.style.marginBottom = '10px'));
const t = document.createElement('div');
((t.style.display = 'flex'),
(t.style.alignItems = 'center'),
(t.style.gap = '5px'));
const A = document.createElement('input');
((A.className = 'row-count-input'),
(A.type = 'number'),
(A.min = '1'),
(A.max = '20'),
(A.value = '1'),
(A.style.width = '60px'),
(A.style.padding = '4px 8px'),
(A.style.border = '1px solid #d1d5db'),
(A.style.borderRadius = '4px'),
(A.style.fontSize = '14px'));
const n = document.createElement('button');
((n.textContent = 'Add Row'),
(n.className = 'add-multiple-rows-button'),
(n.contentEditable = 'false'),
this.styleButton(n, '#10b981', '#059669'),
n.addEventListener('click', () => {
const e = parseInt(A.value) || 1;
this.addRows(i, s, Math.min(Math.max(e, 1), 20));
}),
t.appendChild(A),
t.appendChild(n),
e.appendChild(t),
r.appendChild(e));
}
return r;
}
evaluateRowVisibility(e, t) {
let A;
((A = t
? t.querySelectorAll('.table-row')
: document.querySelectorAll('.table-row')),
A.forEach(t => {
const A = t.getAttribute('data-visibility-rules');
if (A)
try {
const n = JSON.parse(A);
if (0 === n.length) return void (t.style.display = 'grid');
let r = !0;
(n.forEach(t => {
const A = e[t.inputKey];
if (A) {
this.evaluateRule(A, t.operator, t.value)
? 'hide' === t.action
? (r = !1)
: 'show' === t.action && (r = !0)
: 'show' === t.action && (r = !1);
}
}),
(t.style.display = r ? 'grid' : 'none'));
} catch (e) {
console.error('Failed to parse or evaluate visibility rules:', e);
}
else t.style.display = 'grid';
}));
}
evaluateRule(e, t, A) {
const n = parseFloat(e),
r = parseFloat(A),
s = e.toLowerCase(),
i = A.toLowerCase();
switch (t) {
case 'equals':
return s === i;
case 'not_equals':
return s !== i;
case 'greater_than':
return !isNaN(n) && !isNaN(r) && n > r;
case 'less_than':
return !isNaN(n) && !isNaN(r) && n < r;
case 'contains':
return s.includes(i);
default:
return !1;
}
}
createTableRow(e, t, A) {
const n = document.createElement('div');
((n.style.display = 'grid'),
(n.style.gridTemplateColumns = `repeat(${t}, 1fr)`),
(n.className = 'table-row'),
(n.id = `table-row-T-${A}-R${e}`),
(n.style.position = 'relative'),
(n.style.cursor = 'pointer'));
for (let r = 0; r < t; r++) {
const t = this.createTableCell(e, r, A);
n.appendChild(t);
}
return n;
}
createTableCell(e, t, A) {
const n = document.createElement('div');
((n.className = 'table-cell'),
(n.style.border = '1px solid #2F3132'),
(n.style.minHeight = '45px'),
(n.style.position = 'relative'),
(n.style.cursor = 'pointer'),
(n.style.transition = 'background-color 0.2s ease'),
(n.style.display = 'flex'),
(n.style.alignItems = 'center'),
(n.style.justifyContent = 'flex-start'));
const r = document.createElement('div');
((r.className = 'cell-controls'),
(r.style.position = 'absolute'),
(r.style.bottom = '5px'),
(r.style.right = '5px'),
(r.style.display = 'flex'),
(r.style.gap = '4px'),
(r.style.alignItems = 'center'),
(r.style.justifyContent = 'center'),
(r.contentEditable = 'false'));
const s = document.createElement('span');
((s.textContent = `R${e}C${t}`),
(s.contentEditable = 'true'),
s.classList.add('table-cell-content'),
(s.id = `table-cell-T-${A}-R${e}-C${t}`));
const i = document.createElement('button');
((i.textContent = '+'),
(i.className = 'add-cell-button'),
(i.style.width = '15px'),
(i.style.height = '15px'),
(i.style.border = 'none'),
(i.style.borderRadius = '3px'),
(i.style.backgroundColor = '#10b981'),
(i.style.color = 'white'),
(i.style.fontSize = '12px'),
(i.style.cursor = 'pointer'),
(i.style.display = 'flex'),
(i.style.alignItems = 'center'),
(i.style.justifyContent = 'center'),
(i.style.fontWeight = 'bold'),
i.addEventListener('mouseenter', () => {
i.style.backgroundColor = '#059669';
}),
i.addEventListener('mouseleave', () => {
i.style.backgroundColor = '#10b981';
}),
i.addEventListener('click', e => {
(e.stopPropagation(), this.addCellToRow(n, A));
}));
const o = document.createElement('button');
return (
(o.innerHTML = '×'),
(o.className = 'delete-cell-button'),
(o.style.width = '15px'),
(o.style.height = '15px'),
(o.style.border = 'none'),
(o.style.borderRadius = '3px'),
(o.style.backgroundColor = '#ef4444'),
(o.style.color = 'white'),
(o.style.fontSize = '14px'),
(o.style.cursor = 'pointer'),
(o.style.display = 'flex'),
(o.style.alignItems = 'center'),
(o.style.justifyContent = 'center'),
(o.style.fontWeight = 'bold'),
o.addEventListener('mouseenter', () => {
o.style.backgroundColor = '#dc2626';
}),
o.addEventListener('mouseleave', () => {
o.style.backgroundColor = '#ef4444';
}),
o.addEventListener('click', e => {
(e.stopPropagation(), this.deleteCell(n));
}),
r.appendChild(i),
r.appendChild(o),
n.appendChild(s),
n.appendChild(r),
n
);
}
addCellToRow(e, t) {
const A = e.parentElement;
if (!A) return;
const n = Array.from(A.parentElement.children).indexOf(A),
r = A.children.length;
let s = -1;
Array.from(A.querySelectorAll('.table-cell-content')).forEach(e => {
const t = e.id.match(/-C(\d+)$/);
t && (s = Math.max(s, parseInt(t[1], 10)));
});
const i = s + 1,
o = this.createTableCell(n, i, t);
(A.appendChild(o), (A.style.gridTemplateColumns = `repeat(${r + 1}, 1fr)`));
}
deleteCell(e) {
const t = e.parentElement;
if (!t) return;
const A = t.children.length;
if ((t.removeChild(e), 1 === A)) {
const e = t.parentElement;
e && e.children.length > 1 && e.removeChild(t);
} else t.style.gridTemplateColumns = `repeat(${A - 1}, 1fr)`;
}
styleButton(e, t, A) {
((e.style.padding = '8px 16px'),
(e.style.backgroundColor = t),
(e.style.color = 'white'),
(e.style.border = 'none'),
(e.style.borderRadius = '6px'),
(e.style.fontSize = '14px'),
(e.style.fontWeight = '500'),
(e.style.cursor = 'pointer'),
(e.style.transition = 'background-color 0.2s ease'),
e.addEventListener('mouseenter', () => {
e.style.backgroundColor = A;
}),
e.addEventListener('mouseleave', () => {
e.style.backgroundColor = t;
}));
}
seedFormulaValues(e) {
(document.querySelectorAll('.table-component').forEach(t => {
t.querySelectorAll('div[data-attribute-key]').forEach(t => {
const A = t.querySelector('.cell-controls'),
n = t.getAttribute('data-attribute-key'),
r = t.querySelector('.table-cell-content');
(r &&
n &&
e.hasOwnProperty(n) &&
((r.textContent = e[n]),
(t.style.color = '#000000'),
(t.style.fontSize = '16px')),
A && t.appendChild(A));
});
}),
Q.dispatchDesignChange());
}
updateInputValues(e) {
(document.querySelectorAll('.table-component').forEach(t => {
t.querySelectorAll('div[data-attribute-key]').forEach(t => {
const A = t.getAttribute('data-attribute-key'),
n = t.getAttribute('data-attribute-type'),
r = t.querySelector('.table-cell-content');
r &&
A &&
e.hasOwnProperty(A) &&
'Input' === n &&
(r.textContent = e[A]);
});
}),
Q.dispatchDesignChange());
}
updateCellContent(e, t) {
(e.setAttribute('data-attribute-key', t.key),
e.setAttribute('data-attribute-type', t.type));
const A = e.querySelector('.cell-controls'),
n = e.querySelector('.table-cell-content');
('Formula' === t.type && n
? ((n.textContent = `${t.title}`),
(e.style.fontSize = '10px'),
(e.style.color = 'rgb(188 191 198)'),
(e.style.fontWeight = '500'))
: (('Constant' === t.type && n) || ('Input' === t.type && n)) &&
(n.textContent = `${t.value}`),
A && e.appendChild(A),
null == Q || Q.dispatchDesignChange());
}
setModalComponent(e) {
this.modalComponent = e;
}
addRows(e, t, A = 1) {
const n = e.children,
r = n.length;
let s = 1;
r > 0 && (s = n[0].children.length);
for (let n = 0; n < A; n++) {
const A = r + n,
i = this.createTableRow(A, s, t);
e.appendChild(i);
}
Q.historyManager.captureState();
}
static getDefaultValuesOfInput() {
const e = {};
return (
d.tableAttributeConfig.forEach(t => {
'Input' === t.type &&
void 0 !== t.default_value &&
null !== t.default_value &&
(e[t.key] = t.default_value);
}),
e
);
}
static restore(e, t) {
const A = new d(),
n = e.querySelector('.table-wrapper'),
r = null == n ? void 0 : n.closest('.table-component'),
s = null == r ? void 0 : r.id;
if (!n) return void console.error('No table wrapper found in container');
const i = n.querySelectorAll('.table-cell');
(n.querySelectorAll('.table-row').forEach(e => {
const t = e;
t.classList.contains('selected') && t.classList.remove('selected');
}),
i.forEach(e => {
const n = e,
r = n.getAttribute('data-attribute-key'),
i = n.getAttribute('data-attribute-type'),
o = e.querySelector('.table-cell-content');
if (
((null == o ? void 0 : o.classList.contains('selected')) &&
o.classList.remove('selected'),
r && o)
) {
const t = d.tableAttributeConfig.find(e => e.key === r);
if (t) {
const A = e.querySelector('.cell-controls');
(!t.default_value || ('Formula' !== i && 'Input' !== i)
? 'Formula' === i &&
((o.textContent = `${t.title}`),
(n.style.fontSize = '10px'),
(n.style.color = 'rgb(188 191 198)'),
(n.style.fontWeight = '500'))
: ((o.textContent = `${t.default_value}`),
(n.style.fontSize = '14px'),
(n.style.color = '#000000')),
A && e.appendChild(A));
}
}
const a = n.querySelector('.cell-controls');
if (!1 === t)
return (
null == a || a.remove(),
void (null == o || o.removeAttribute('contenteditable'))
);
if (a) {
const e = a.querySelector('.add-cell-button'),
t = a.querySelector('.delete-cell-button');
(e &&
e.addEventListener('click', e => {
(e.stopPropagation(), A.addCellToRow(n, s));
}),
t &&
t.addEventListener('click', e => {
(e.stopPropagation(), A.deleteCell(n));
}));
}
}));
const o = e.querySelector('.add-multiple-rows-button'),
a = e.querySelector('.table-btn-container'),
l = e.querySelector('.row-count-input');
o && !1 !== t
? ((l.value = '1'),
o.addEventListener('click', () => {
const e = parseInt(l.value) || 1;
A.addRows(n, s, Math.min(Math.max(e, 1), 20));
}))
: !1 === t && a && (null == a || a.remove());
const c = d.getDefaultValuesOfInput();
A.evaluateRowVisibility(c, e);
}
}
class h {
constructor() {
((this.link = null), (this.isEditing = !1));
}
create(e = '#', t = 'Click Here') {
const A = document.createElement('div');
(A.classList.add('link-component'),
(this.link = document.createElement('a')),
(this.link.href = e),
(this.link.innerText = t),
this.link.classList.add('link-component-label'));
const n = document.createElement('button');
((n.innerHTML = '🖊️'), n.classList.add('edit-link'));
const r = document.createElement('div');
r.classList.add('edit-link-form');
const s = document.createElement('input');
((s.type = 'url'), (s.value = e), (s.placeholder = 'Enter URL'));
const i = document.createElement('input');
i.type = 'checkbox';
const o = document.createElement('label');
((o.innerHTML = 'Open in new tab'), o.appendChild(i));
const a = document.createElement('button');
return (
(a.innerHTML = 'Save'),
r.appendChild(s),
r.appendChild(o),
r.appendChild(a),
n.addEventListener('click', e => {
(e.preventDefault(),
(this.isEditing = !0),
this.link && (this.link.style.display = 'none'),
(n.style.display = 'none'),
(r.style.display = 'flex'));
}),
a.addEventListener('click', e => {
(e.preventDefault(),
e.stopPropagation(),
(this.isEditing = !1),
this.link &&
((this.link.href = s.value),
(this.link.style.display = 'inline'),
(this.link.target = i.checked ? '_blank' : '_self')),
(n.style.display = 'inline-flex'),
(r.style.display = 'none'));
}),
A.appendChild(this.link),
A.appendChild(n),
A.appendChild(r),
A
);
}
getLinkData() {
var e, t, A;
return {
href: (null === (e = this.link) || void 0 === e ? void 0 : e.href) || '#',
label:
(null === (t = this.link) || void 0 === t ? void 0 : t.innerText) ||
'Click Here',
target:
(null === (A = this.link) || void 0 === A ? void 0 : A.target) ||
'_self',
};
}
updateLink(e, t, A = '_self') {
this.link &&
((this.link.href = e), (this.link.innerText = t), (this.link.target = A));
}
isInEditMode() {
return this.isEditing;
}
static restore(e) {
var t, A;
const n = e.querySelector('.link-component-label'),
r = e.querySelector('.edit-link'),
s = e.querySelector('.edit-link-form'),
i = s.querySelector('button'),
o = s.querySelector('input[type="url"]'),
a = s.querySelector('input[type="checkbox"]');
if (!(n && r && s && i && o && a))
return void console.error('Required elements not found');
((n.style.display = 'inline'),
(r.style.display = 'inline-flex'),
(s.style.display = 'none'));
const l = r.cloneNode(!0),
c = i.cloneNode(!0);
(null === (t = r.parentNode) || void 0 === t || t.replaceChild(l, r),
null === (A = i.parentNode) || void 0 === A || A.replaceChild(c, i),
l.addEventListener('click', e => {
(e.preventDefault(),
(n.style.display = 'none'),
(l.style.display = 'none'),
(s.style.display = 'flex'));
}),
c.addEventListener('click', e => {
(e.preventDefault(),
e.stopPropagation(),
(n.href = o.value),
(n.style.display = 'inline'),
(n.target = a.checked ? '_blank' : '_self'),
(l.style.display = 'inline-flex'),
(s.style.display = 'none'));
}));
}
}
class f {
create() {
const e = e => {
let t,
A,
n,
r,
s = !1,
i = !1,
o = 0,
a = 0;
((e.style.position = 'relative'),
(e.style.cursor = 'move'),
e.addEventListener('mouse