: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
if (ul !== null && tabsWidth !== 0) {
ul.style.display = 'none';
ul.style.flexDirection = 'row';
const parentW = ul.parentNode.offsetWidth;
if (parentW <= tabsWidth || api.isDocked) {
ul.style.display = 'none';
const current = ul.tfClass('current')[0];
label = createElement('span',{class:'tb_ui_dropdown_label',tabindex:-1});
label.textContent = current.textContent;
setTimeout(() => {//avoid flick
} else if (label !== null) {
ul.style.flexDirection = '';
if (api.isDocked) {//avoud flick
Themify.on('tb_builder_tabsactive', callback)
.on('tb_resize_lightbox', callback)
.on('themify_builder_lightbox_close', () => {
Themify.off('tb_builder_tabsactive', callback).off('tb_resize_lightbox', callback);
ul = tabsWidth = label = callback = null;
static setupLightboxSizeClass(w) {
w = parseInt(getComputedStyle(el).width);
w = _this._getStorage().width || ~~el.offsetWidth;
cl.toggle('larger-lightbox', w > 750);
cl.toggle('tb_lightbox_small', w < 540);
if (_this.#size === null) {
let storage = localStorage.getItem(_this.#storageKey);
storage = storage ? JSON.parse(storage) : {};
left: Math.max(0, (topWindow.innerWidth / 2) - 300),
static _updateStorage() {
if (this.#isStandalone === false) {
matrix = tr ? new DOMMatrix(tr) : null,
box = el.tfClass('tb_lightbox_top_bar')[0].getBoundingClientRect(),
wH = topWindow.innerHeight - box.height,
wW = topWindow.innerWidth,
storage = _this._getStorage();
width: parseInt(st.width),
height: parseInt(st.height)
if (obj.height <= 0 || isNaN(obj.height)) {
if (obj.width <= 0 || isNaN(obj.width)) {
obj = {...storage, ...obj};
if (obj.left < 0 || (obj.left + box.width) > wW) {
obj.left = (obj.left < 0 ? 0 : (wW - box.width));
if (obj.top < 0 || obj.top > wH) {
obj.top = obj.top < 0 ? 0 : wH;
st.transform = 'translate(' + obj.left + 'px,' + obj.top + 'px)';
st.width = obj.width + 'px';
st.height = obj.height + 'px';
if (!api.isDocked && Object.entries(obj).toString() !== Object.entries(storage).toString()) {
localStorage.setItem(_this.#storageKey, JSON.stringify(obj));
api.LiteLightBox =class {
return this.el?.childElementCount>0;
modal = createElement('form','content tf_abs_c tf_textc tf_box');
const root = doc.tfId('tb_lite_lightbox_root'),
fr = root.firstElementChild,
toolBarRoot = api.ToolBar.el.getRootNode(),
baseCss = toolBarRoot.querySelector('#tf_base');
if (fr) { // shadowrootmode="open" isn't support
mode: fr.getAttribute('shadowrootmode')
}).appendChild(fr.content);
root.shadowRoot.prepend(baseCss.cloneNode(true));
_this.el = root.shadowRoot.tfId('wrapper');
_this.el.tfOn(_CLICK_, e => {
if (_this.el === t || t.classList.contains('tf_close')) {
topBody.appendChild(root);
modal.append(fragment, createElement('button',{class:'tf_close',type:'button'}));
_this.el.appendChild(modal);
_this.el.getRootNode().host.classList.remove('tf_hide');
if (this.el && this.isOpen()) {
Registry.trigger(this.el, 'close');
const fr = createDocumentFragment();
let btnWrap = createElement('','btns');
for (let btnKey in opt) {
let btn = createElement('button',{class:'tf_inline_b tf_textc','data-type':btnKey},i18n[opt[btnKey]] || opt[btnKey]);
if(options.input===undefined && (btnKey==='yes' || btnKey==='ok')){
btnWrap.appendChild(btn);
let msg = createElement('','msg');
msg.innerHTML = i18n[opt] || opt;
else if (k === 'input') {
let input = createElement('input',{class:opt.class + ' tf_w',value:opt.value || '',type:opt.type});
input.tfOn('keydown', e => {
static confirm(options={}) {
this.open(this.create(options));
return (new Promise(resolve => {
Registry.on(this.el, 'confirm', type => {
let inputValue = this.el.querySelector('.content').tfTag('input')[0];
inputValue = inputValue.value || '';
resolve([type, inputValue]);
.on(this.el, 'close', () => {
Registry.off(this.el, 'confirm').off(this.el, 'close').remove(this.el);
this.el.getRootNode().host.classList.add('tf_hide');
static prompt(message, value) {
const type = e.currentTarget.dataset.type;
Registry.trigger(this.el, 'confirm', type);
if (e.key === 'Enter') { // on enter
Registry.trigger(this.el, 'confirm', 'yes', e.currentTarget.value.trim());
parseSettings(item, repeat) {
const cl = item.classList,
option_id = repeat ? item.dataset.inputId : item.id;
if (!cl.contains('tb_row_js_wrapper')) {
let p = item.closest('.tb_field');
if (p !== null && !p.classList.contains('_tb_hide_binding') && !(p.style.display === 'none' && p.className.includes('tb_group_element_'))) {
if (p.classList.contains('tb_multi_fields') && p.parentNode.classList.contains('_tb_hide_binding')) {
if (cl.contains('tb_lb_wp_editor')) {
tiny = tinyMCE?.get(tid) || null;
value = tiny !== null ? (tiny.hidden === false ? tiny.getContent() : switchEditors.wpautop(tinymce.DOM.get(tid).value)) : item.value;
} else if (cl.contains('tb_checkbox_wrap')) {
chekboxes = item.tfClass('tb_checkbox'),
isSwitch = cl.contains('tb_switcher');
for (let i = 0; i < chekboxes.length; ++i) {
if ((isSwitch === true || chekboxes[i].checked === true) && chekboxes[i].value !== '') {
cselected.push(chekboxes[i].value);
value = cselected.length > 0 ? cselected.join('|') : (isSwitch ? '' : false);
else if (cl.contains('themify-layout-icon')) {
value = item.tfClass('selected')[0]?.id || '';
else if (cl.contains('tb_search_input')) {
value = item.dataset.value;
let parent = item.closest('.tb_input'),
multiple_cat = parent.tfClass('query_category_multiple')[0];
multiple_cat = multiple_cat?.value.trim() || '';
if (multiple_cat !== '') {
value = multiple_cat + '|' + (multiple_cat.includes(',') ? 'multiple' : 'single');
else if (cl.contains('tb_radio_wrap')) {
for (let radios = item.tfTag('input'),i = radios.length - 1; i > -1; --i) {
if (radios[i].checked === true) {
if (input !== null && (api.activeBreakPoint === 'desktop' || !input.classList.contains('tb_responsive_disable'))) {
else if (cl.contains('tb_search_container')) {
value = item.previousElementSibling.dataset.value;
else if (cl.contains('tb_row_js_wrapper')) {
for (let repeats = item.tfClass('tb_repeatable_field_content'),i = 0; i < repeats.length; ++i) {
let childs = repeats[i].tfClass('tb_lb_option_child');
for (let j = 0; j < childs.length; ++j) {
let v = this.parseSettings(childs[j], true);
else if (cl.contains('module-widget-form-container')) {
value = this.serializeObject(item);
else if (cl.contains('tb_widget_select')) {
value = item.tfClass('selected')[0]?.dataset.value ?? '';
else if (cl.contains('tb_sort_fields_parent')) {
for (let childs = item.children,i = 0; i < childs.length; ++i) {
let type = childs[i].dataset.type;
let wrap = childs[i].tfClass('tb_sort_field_dropdown')[0],
if (wrap !== undefined) {
let items = wrap.tfClass('tb_lb_sort_child');
for (let j = items.length - 1; j > -1; --j) {
let v2 = this.parseSettings(items[j], true);
let hidden = childs[i].tfTag('input')[0],
v.val = JSON.parse(temp);
if (value.length === 0) {
else if (cl.contains('tb_accordion_fields')) {
for (let childs = item.children,i = 0; i < childs.length; ++i) {
let id = childs[i].dataset.id;
let wrap = childs[i].tfClass('tb_accordion_fields_options')[0],
if (wrap !== undefined) {
v.val = this.serialize(wrap, null, true);
let temp = childs[i].tfTag('input')[0]?.value || '';
v.val = JSON.parse(temp);
else if (cl.contains('tb_toggleable_fields')) {
for (let childs = item.children,i = 0; i < childs.length; ++i) {
let id = childs[i].dataset.id;
let wrap = childs[i].tfClass('tb_toggleable_fields_options')[0],
on: childs[i].tfClass('tb_switcher')[0].tfClass('toggle_switch')[0].value
if (wrap !== undefined) {
v.val = this.serialize(wrap, null, true);
let temp = childs[i].tfTag('input')[0]?.value ||'';
v.val = JSON.parse(temp);
else if (item.multiple && item.nodeName === 'SELECT') {
for (let selected = item.selectedOptions, i = 0; i < selected.length; ++i) {
value.push(item.selectedOptions[ i ].value);
else if(cl.contains('tb_grid_root')){
for(let vals=item.shadowRoot.querySelectorAll('[data-col]'),i=vals.length-1;i>-1;--i){
let action=vals[i].dataset.col;
value.size=vals[i].tfClass('selected')[0].dataset.grid;
else if(action==='gutter'){
let p=vals[i].parentNode,
gutter = p.querySelector('#range').value;
gutter += p.querySelector('#range_unit').value;
value[action] = ThemifyStyles.getGutter(gutter);
else if(action!=='direction'){
if(action==='autoHeight'){
else if(action==='alignment'){
value[action]=vals[i].tfClass('selected')[0].dataset.value;
if (option_id === window.tbpDynamic?.field_name) {
if (typeof value === 'string') {
value = JSON.parse(value);
else if (option_id === api.GS.key && api.activeBreakPoint !== 'desktop') {
if (option_id === 'builder_content') {
if (typeof value === 'string') {
value = JSON.parse(value);
if (typeof value === 'string' && value.includes(':') && value.includes('{')) {
let v = JSON.parse(value);
let opacity = item.dataset.opacity;
if (opacity !== null && opacity !== '') {
opacity = parseFloat(parseFloat(Number(opacity).toFixed(2)).toString());