: 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
max: this.getMaxGutter('px')
holder.replaceChildren(input);
_slider = holder.parentNode.querySelector('#slider'),
rangeInput = holder.querySelector('#range'),
unit = holder.querySelector('#' + rangeInput.id + '_unit'),
isSame=this.isLightboxOpen(),
sel=this.type==='subrow'?'module_subrow':this.type + '_inner',
e.stopImmediatePropagation();
const isChange = e.type === 'change',
target = e.currentTarget,
model=api.Registry.get(cid);
if (isChange === false && target === unit) {
inner = model.el.tfClass(sel)[0];
api.undoManager.start('style', model);
interval = setInterval(() => {//workaround for firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=559561
if (!rangeInput.isConnected) {
Themify.triggerEvent(rangeInput, 'change');
rangeInput = gutterRange=null;
if (isChange && interval) {
req = requestAnimationFrame(() => {
const unitVal = unit.value;
if (target === _slider) {
rangeInput.value = _slider.value;
else if (target === unit) {
let maxValue = model.getMaxGutter(unitVal);
rangeInput.max = _slider.max = maxValue;
rangeInput.value = _slider.value = parseInt(_slider.value);
if (parseFloat(rangeInput.value) > maxValue) {
rangeInput.value = _slider.value = maxValue;
_slider.value = rangeInput.value;
let gutter = rangeInput.value;
cancelAnimationFrame(req);
gutter = model.setMaxGutter(gutter);
const sizes = rangeInput.closest('#grid').tfClass('gutter')[0].children;
for (let presentGutter=ThemifyStyles.getGutter(gutter),i = sizes.length - 1; i > -1; --i) {
sizes[i].classList.toggle('selected', presentGutter === sizes[i].dataset.value);
model.setCols({gutter: gutter});
inner.style.setProperty('--colg', '');
if(!api.LightBox.el.contains(rangeInput.getRootNode().host)){
model.syncLightbox('gutterVal',gutter);
api.Utils.onResize(true);
if(api.undoManager.has('style')){
api.undoManager.end('style');
inner.style.setProperty('--colg', gutter);
_slider.tfOn('input change', gutterRange, {passive: true});
rangeInput.tfOn('input change', gutterRange, {passive: true});
unit.tfOn('change', gutterRange, {passive: true});
setMaxGutter(gutter,bp) {
bp??= api.activeBreakPoint;
gutter= this.getSizes('gutter', bp) || 'gutter';
gutter = ThemifyStyles.getGutterValue(gutter);
let gutterVal = parseFloat(gutter), //trailing zeros
unit = gutter.toString().replace(gutterVal.toString(), '') || '%',
maxGutter = this.getMaxGutter(unit, bp);
if (maxGutter < gutterVal) {
const msg=i18n.gutterChanged
.replace('%from',gutterVal+unit)
.replace('%to',maxGutter+unit)
.replace('%bp',api.Helper.getBreakpointName(bp));
TF_Notification.showHide('info',msg,3000);*/
this.setCols({gutter: (maxGutter + unit)}, bp);
bp??= api.activeBreakPoint;
const sel=this.type==='subrow'?'module_subrow':this.type + '_inner',
inner = this.el.tfClass(sel)[0],
count = api.Utils.getColumns(inner).length;
allSizes = this.getSizes('', bp),
computed = getComputedStyle(inner),
fontSize = parseFloat(computed.getPropertyValue('font-size')),
frSize = computed.getPropertyValue('--col'),
sizes = frSize && frSize !== 'none' && !frSize.includes('repeat') ? frSize.replace(/\s\s+/g, ' ').trim().split(' ') : null;
let gutter = allSizes.gutter || 'gutter';
gutter = ThemifyStyles.getGutterValue(gutter);
let gutterVal = parseFloat(gutter);
unit = gutter.toString().replace(gutterVal.toString(), '') || '%';
let cols = allSizes.size;
if (cols.includes(' ')) {
areaLength = cols.replace(/\s\s+/g, ' ').split(' ').length;
area = this.getGridCss({size: 'auto'}, bp)['--area'];
if (area?.includes('var')) {
area = computed.getPropertyValue(area.replace('var(', '').replace(')', ''));
areaLength = area ? area.replace(/ +/g, ' ').trim().split('" "')[0].split(' ').length : count;
for (let i = sizes.length - 1; i > -1; --i) {
let v = parseFloat(sizes[i]);
if (!sizes[i].includes('fr')) {
if (sizes[i].includes('%')) {
} else if (sizes[i].includes('em')) {
max -= summPX - parseFloat((summPercent * w) / 100) - summEm * fontSize;
max = parseFloat((max * 100) / w) - _MIN_COL_W * areaLength;
max = parseFloat(max / (areaLength - 1));
if (fontSize>0 && (unit === 'px' || unit === 'em')) {
max = unit === 'em' ? parseFloat(max / fontSize) : ~~max;
return parseFloat(parseFloat(max.toFixed(2)).toString());
bp??= api.activeBreakPoint;
const selector = ThemifyStyles.getStyleOptions(this.type).grid.selector;
const live = api.createStyleInstance();
live.init(true, false, this);
if (Object.keys(css).length > 0) {
live.setLiveStyle(k, css[k], selector);
const sheet = ThemifyStyles.getSheet(bp),
points = api.breakpointsReverse,
index = points.indexOf(bp),
const index = api.Utils.findCssRule(rules, fullSelector);
if (index === false || !rules[index]) {
if (v !== '' && v !== undefined) {
sheet.insertRule(fullSelector + '{' + p + ':' + v + ';}', rules.length);
rules[index].style.setProperty(p, v);
bid=api.Builder.get().id;
for (let i = index; i > -1; --i) {
_selectors.push(ThemifyStyles.getBaseSelector(this.type, bid,elId, points[i]) + ' ' + selector);
fullSelector = _selectors.join(',');
if (Object.keys(css).length > 0) {
static builderSave(settings,type='row') {
const bps=api.breakpointsReverse,
sides=['top','left','right','bottom'],
stVal=this.getStylingValue;
for (let i = 6; i>0;--i) {
units.push('font_size_h'+i,'f_s_h'+i+'_h','line_height_h'+i,'l_h_h'+i+'_h','letter_spacing_h'+i,'l_s_h'+i+'_h','h'+i+'_margin_top','h'+i+'_margin_bottom','h'+i+'_margin_top_h','h'+i+'_margin_bottom_h');
if(!settings.row_anchor || !settings.hide_anchor || settings.hide_anchor==='|' || settings.hide_anchor==='false'){
delete settings.hide_anchor;
if(settings.row_user_role===false || settings.row_user_role==='|' || settings.row_user_role==='false'){
delete settings.row_user_role;
if ( ! settings._link || settings._link_n === 'no' ) {
if ( ! settings._link || settings._link_o === 'no' ) {
delete settings.tb_grid_lb_root;
if(settings.background_slider_videos?.length===0){
delete settings.background_slider_videos;
if(!settings.background_slider_videos){
delete settings.background_slider_videos_autoplay;
delete settings.background_slider_videos_controls;
delete settings.background_slider_videos_mute;
delete settings.background_slider_videos_progressbar;
for(let i=bps.length-1;i>-1;--i){
isDesktop=bp==='desktop',
vals=isDesktop?settings:settings['breakpoint_'+bp];
let bgType=stVal('background_type',bp,settings) || 'image';
if(!isDesktop || bgType!=='slider'){
delete vals.background_slider;
if(!isDesktop || bgType!=='video'){
delete vals.background_video;
if(!vals.background_video || !vals.background_video_options || vals.background_video_options==='|' || vals.background_video_options==='false'){
delete vals.background_video_options;
delete vals.background_type;
if(!vals.background_slider){
delete vals.background_slider_size;
delete vals.background_slider_mode;
delete vals.background_slider_speed;
delete vals.background_type;
if((bgType!=='image' && bgType!=='video') || stVal('resp_no_bg',bp,settings)==='none'){
delete vals.background_image;
let bgImage=stVal('background_image',bp,settings);
delete vals.background_repeat;
delete vals.background_position;
if(bgType==='slider' || bgType==='video'){
let bgRepeat=stVal('background_repeat',bp,settings),
bgHover=bgType==='image' || bgType==='gradient'? stVal('b_t_h',bp,settings):null;
if(bgRepeat!=='repeat-none'){
delete vals.background_zoom;
if(bgRepeat!=='repeat' && bgRepeat!=='repeat-x' && bgRepeat!=='repeat-y' && bgRepeat!=='fullcover'&&bgRepeat!=='best-fit-image'){
delete vals.background_attachment;
else if(vals.background_zoom==='false' || vals.background_zoom==='|'){
vals.background_zoom=false;
if(isDesktop && vals.background_zoom===false){
delete vals.background_zoom;
delete vals['background_gradient-gradient'];
delete vals.background_color;
if(bgType==='image' && !bgImage && stVal('background_color',bp,settings)===undefined){
delete vals.background_type;
this.clearGradient('background_gradient',bp,settings);
if(bgHover!=='gradient'){
delete vals['b_g_h-gradient'];
bgImage=stVal('bg_i_h',bp,settings);
this.clearGradient('b_g_h',bp,settings);
if(!bgImage && !stVal('b_g_h-gradient',bp,settings) && stVal('b_c_h',bp,settings)===undefined){
if(stVal('cover_color-type',bp,settings)!=='color'){
delete vals['cover_gradient-gradient'];
this.clearGradient('cover_gradient',bp,settings);
if(stVal('cover_color',bp,settings)===undefined && !stVal('cover_gradient-gradient',bp,settings)){
delete vals['cover_color-type'];
if(stVal('cover_color_hover-type',bp,settings)!=='hover_color'){
delete vals.cover_color_hover;
delete vals['cover_gradient_hover-gradient'];
this.clearGradient('cover_gradient_hover',bp,settings);
if(stVal('cover_color_hover',bp,settings)===undefined && !stVal('cover_gradient_hover-gradient',bp,settings)){
delete vals['cover_color_hover-type'];
delete vals.background_image_inner;
delete vals.background_color_inner;
for(let j=sides.length-1;j>-1;--j){
delete vals['padding_inner_'+side];
delete vals['p_i_h_'+side];
delete vals['border_inner_'+side+'_width'];
delete vals['b_i_h_'+side+'_width'];
delete vals['border_inner_'+side+'_style'];
delete vals['b_i_h_'+side+'_style'];
if(!stVal('background_image_inner',bp,settings)){
delete vals.background_repeat_inner;
delete vals.background_attachment_inner;
delete vals.background_position_inner;
if(!stVal('b_i_i_h',bp,settings)){
this.clearPadding('padding_inner',bp,settings);
this.clearPadding('p_i_h',bp,settings);
this.clearBorder('border_inner',bp,settings);
this.clearBorder('b_i_h',bp,settings);
for(let j=sides.length-1;j>-1;--j){
let k=sides[j]+'-frame_';
if(stVal(k+'type',bp,settings)===(sides[j]+'-custom')){
let layout=stVal(k+'layout',bp,settings);
if((!layout || layout==='none') && !stVal(k+'custom',bp,settings)){
delete vals[k+'ani_dur'];
delete vals[k+'location'];
if(isDesktop && layout==='none'){
delete vals[k+'location'];
if(!stVal(k+'width',bp,settings) || (isDesktop && stVal(k+'width_unit',bp,settings)==='%')){
delete vals[k+'width_unit'];
if(!stVal(k+'height',bp,settings) || (isDesktop && stVal(k+'height_unit',bp,settings)==='%')){
delete vals[k+'height_unit'];
if(stVal(k+'sh_b',bp,settings)===undefined || stVal(k+'sh_c',bp,settings)===undefined){
let animDur=stVal(k+'ani_dur',bp,settings),
animRev=stVal(k+'ani_rev',bp,settings);
if(!animDur || animDur==='0'){
delete vals[k+'ani_dur'];
delete vals[k+'ani_rev'];
}else if(animRev==='0' || animRev===0){
delete vals[k+'ani_rev'];
if(!stVal('font_family',bp,settings)){
delete vals.font_family_w;
if(!stVal('f_f_h',bp,settings)){
this.clearShadow('text-shadow',0,bp,settings);
this.clearShadow('t_sh_h',0,bp,settings);
this.clearPadding('padding',bp,settings);
this.clearPadding('p_h',bp,settings);
this.clearMarginOpposity('margin-top',bp,settings);
this.clearMarginOpposity('m_t_h',bp,settings);
this.clearBorder('border',bp,settings);