@innovastudio/contentbox 1.5.11 → 1.5.13

package/public/contentbox/contentbox.esm.js

@@ -4052,9 +4052,6 @@ class EditSection {
                             <button title="${out('Tablet (Portrait)')}" class="input-breakpoint on" data-value="sm" style="width:40px;height:25px;">
                                 <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
                             </button>
-
-                            <label for="chkReverseBoxes" style="margin:0;margin-left:70px;display:flex"><input id="chkReverseBoxes" type="checkbox"  style="margin:0 7px 0 0"/><span>${out('Reverse Boxes')}</span></label>
-                    
                         </div>
                     </div>
                     
@@ -4090,6 +4087,10 @@ class EditSection {
                             <span>${out('Hidden')}</span>
                         </button>
                     </div>
+
+                    <div id="divReverseBoxes" style="display:none">
+                        <label for="chkReverseBoxes" style="margin:20px 0 0 0;display:flex"><input id="chkReverseBoxes" type="checkbox"  style="margin:0 7px 0 0"/><span>${out('Reverse Boxes')}</span></label>
+                    </div>
                     ` + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
     '<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + // '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' +
@@ -4496,17 +4497,54 @@ class EditSection {
 
         this.builder.onChange();
       });
-    });
+    }); // const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
+    // chkReverseBoxes.addEventListener('click', ()=>{
+    //     let section = this.builder.activeSection;
+    //     if(!section) return;
+    //     this.builder.editor.saveForUndo();
+    //     if(chkReverseBoxes.checked) {
+    //         section.classList.add('box-reverse');
+    //     } else {
+    //         section.classList.remove('box-reverse');
+    //     }
+    //     //Trigger Change event
+    //     this.builder.settings.onChange();
+    // });
+
     const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
     chkReverseBoxes.addEventListener('click', () => {
       let section = this.builder.activeSection;
       if (!section) return;
       this.builder.editor.saveForUndo();
+      section.classList.remove('box-reverse'); // clear old
 
-      if (chkReverseBoxes.checked) {
-        section.classList.add('box-reverse');
-      } else {
-        section.classList.remove('box-reverse');
+      let divTarget = modalEditSection.querySelector('.div-target');
+      let target = this.builder.editor.responsive.readTarget(divTarget);
+
+      if (target === 'xs') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('xs-box-reverse');
+        } else {
+          section.classList.remove('xs-box-reverse');
+        }
+      } else if (target === 'sm') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('sm-box-reverse');
+        } else {
+          section.classList.remove('sm-box-reverse');
+        }
+      } else if (target === 'md') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('md-box-reverse');
+        } else {
+          section.classList.remove('md-box-reverse');
+        }
+      } else if (target === '') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('desktop-box-reverse');
+        } else {
+          section.classList.remove('desktop-box-reverse');
+        }
       } //Trigger Change event
 
 
@@ -4577,12 +4615,27 @@ class EditSection {
   } // Section Visibility
 
 
-  realtimeVisibility(cell) {
+  realtimeVisibility(section) {
     let divTarget = this.modalEditSection.querySelector('.div-target');
     let divVisibility = this.modalEditSection.querySelector('.div-visibility');
     let target = this.builder.editor.responsive.readTarget(divTarget);
-    let valVisibility = this.builder.editor.responsive.getVisibility(cell, target);
-    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility);
+    let valVisibility = this.builder.editor.responsive.getVisibility(section, target);
+    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility); // Column reverse 
+
+    let valReverse = false;
+
+    if (target === 'xs') {
+      valReverse = section.classList.contains('xs-box-reverse');
+    } else if (target === 'sm') {
+      valReverse = section.classList.contains('sm-box-reverse');
+    } else if (target === 'md') {
+      valReverse = section.classList.contains('md-box-reverse');
+    } else {
+      valReverse = section.classList.contains('desktop-box-reverse');
+    }
+
+    const chkReverseBoxes = this.modalEditSection.querySelector('#chkReverseBoxes');
+    chkReverseBoxes.checked = valReverse;
   }
 
   read() {
@@ -4800,12 +4853,12 @@ class EditSection {
       dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="sm"]'), 'on');
     }
 
-    const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
+    const divReverseBoxes = modalEditSection.querySelector('#divReverseBoxes');
 
-    if (activeSection.classList.contains('box-reverse')) {
-      chkReverseBoxes.checked = true;
+    if (activeSection.querySelectorAll('.is-box').length > 1) {
+      divReverseBoxes.style.display = 'flex';
     } else {
-      chkReverseBoxes.checked = false;
+      divReverseBoxes.style.display = 'none';
     }
   }
 
@@ -10786,9 +10839,9 @@ class EditBox {
     html += (this.builder.settings.enableContentStyle ? '<div style="padding-top:10px;display:flex;flex-direction: column;">' + // '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' +
     '<div style="display:flex">' + '<button title="' + out('Typography Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Typography Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>';
     html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">&#8598;</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">&#8593;</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">&#8599;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">&#8592;</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">&#9737;</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">&#8594;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">&#8601;</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">&#8595;</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">&#8600;</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>';
-    html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button>' + // '<button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button>' +
-    // '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' +
-    '<button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button>' + '<button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button>' + '<button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button>' + '<button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button>' + '<button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-spacing" data-value="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>';
+    html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div style="display:none;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button>' + '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' + '<button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button>' + '<button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button>' + '<button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button>' + '<button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button>' + '<button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-spacing" data-value="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom:0;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Top') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-topspacing on" data-value="0" style="width:40px">0</button>' + '<button title="10" class="cmd-box-content-topspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-topspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-topspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-topspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-topspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-topspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-topspacing" data-value="80" style="width:40px">80</button>' +
+    '<button title="' + out('Not Set') + '" class="cmd-box-content-topspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Bottom') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-bottomspacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-bottomspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-bottomspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-bottomspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-bottomspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-bottomspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-bottomspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-bottomspacing" data-value="80" style="width:40px">80</button>' +
+    '<button title="' + out('Not Set') + '" class="cmd-box-content-bottomspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>';
     html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') +
     /*
     '<label for="rdoKenBurns" style="display:flex;align-items:center;margin-bottom:10px;">' +
@@ -11436,6 +11489,78 @@ class EditBox {
         this.builder.settings.onChange();
       });
     });
+    const btnContentTopSpacing = modalEditBox.querySelectorAll('.cmd-box-content-topspacing');
+    btnContentTopSpacing.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let s = btn.getAttribute('data-value');
+        let activeBox = this.builder.activeBox;
+        let container = activeBox.querySelector('.is-container'); // cleanup old
+
+        container.classList.remove('content-py-0');
+        container.classList.remove('content-py-10');
+        container.classList.remove('content-py-20');
+        container.classList.remove('content-py-30');
+        container.classList.remove('content-py-40');
+        container.classList.remove('content-py-50');
+        container.classList.remove('content-py-60');
+        container.classList.remove('content-py-70');
+        container.classList.remove('content-py-80');
+        container.classList.remove('content-pt-0');
+        container.classList.remove('content-pt-10');
+        container.classList.remove('content-pt-20');
+        container.classList.remove('content-pt-30');
+        container.classList.remove('content-pt-40');
+        container.classList.remove('content-pt-50');
+        container.classList.remove('content-pt-60');
+        container.classList.remove('content-pt-70');
+        container.classList.remove('content-pt-80');
+        if (s !== '') container.classList.add(`content-pt-${s}`);
+        let btnPos = modalEditBox.querySelectorAll('.cmd-box-content-topspacing');
+        btnPos.forEach(btn => {
+          dom$l.removeClass(btn, 'on');
+        });
+        dom$l.addClass(btn, 'on'); //Trigger Change event
+
+        this.builder.settings.onChange();
+      });
+    });
+    const btnContentBottomSpacing = modalEditBox.querySelectorAll('.cmd-box-content-bottomspacing');
+    btnContentBottomSpacing.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let s = btn.getAttribute('data-value');
+        let activeBox = this.builder.activeBox;
+        let container = activeBox.querySelector('.is-container'); // cleanup old
+
+        container.classList.remove('content-py-0');
+        container.classList.remove('content-py-10');
+        container.classList.remove('content-py-20');
+        container.classList.remove('content-py-30');
+        container.classList.remove('content-py-40');
+        container.classList.remove('content-py-50');
+        container.classList.remove('content-py-60');
+        container.classList.remove('content-py-70');
+        container.classList.remove('content-py-80');
+        container.classList.remove('content-pb-0');
+        container.classList.remove('content-pb-10');
+        container.classList.remove('content-pb-20');
+        container.classList.remove('content-pb-30');
+        container.classList.remove('content-pb-40');
+        container.classList.remove('content-pb-50');
+        container.classList.remove('content-pb-60');
+        container.classList.remove('content-pb-70');
+        container.classList.remove('content-pb-80');
+        if (s !== '') container.classList.add(`content-pb-${s}`);
+        let btnPos = modalEditBox.querySelectorAll('.cmd-box-content-bottomspacing');
+        btnPos.forEach(btn => {
+          dom$l.removeClass(btn, 'on');
+        });
+        dom$l.addClass(btn, 'on'); //Trigger Change event
+
+        this.builder.settings.onChange();
+      });
+    });
     const btnBoxContentPos = modalEditBox.querySelectorAll('.cmd-box-content-pos');
     btnBoxContentPos.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -13226,6 +13351,92 @@ class EditBox {
       }
     }
 
+    const btnContentTopSpacing = modalEditBox.querySelectorAll('.cmd-box-content-topspacing');
+    btnContentTopSpacing.forEach(btn => {
+      dom$l.removeClass(btn, 'on');
+    });
+
+    if (container) {
+      if (container.classList.contains('content-pt-0')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="0"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-10')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="10"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-20')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="20"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-30')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="30"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-40')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="40"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-50')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="50"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-60')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="60"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-70')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="70"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pt-80')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-topspacing[data-value="80"]'), 'on');
+      }
+    }
+
+    const btnContentBottomSpacing = modalEditBox.querySelectorAll('.cmd-box-content-bottomspacing');
+    btnContentBottomSpacing.forEach(btn => {
+      dom$l.removeClass(btn, 'on');
+    });
+
+    if (container) {
+      if (container.classList.contains('content-pb-0')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="0"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-10')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="10"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-20')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="20"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-30')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="30"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-40')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="40"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-50')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="50"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-60')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="60"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-70')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="70"]'), 'on');
+      }
+
+      if (container.classList.contains('content-pb-80')) {
+        dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-bottomspacing[data-value="80"]'), 'on');
+      }
+    }
+
     if (modalEditBox.querySelector('#divBoxImage').style.display === 'flex' && modalEditBox.querySelector('#tabBoxImage').style.display === 'none') {
       modalEditBox.querySelector('#tabBoxGeneral').click();
     }
@@ -66467,138 +66678,138 @@ class ButtonEditor {
     /* rounded */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
                 `
     },
     /* colors */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
                 `
     },
     /* square */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
                 `
     },
     /* colors */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
                 `
     }, {
       text: 'Order Now',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
     }, {
       text: 'Explore',
-      className: 'transition-all inline-block cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
     }, {
       text: 'View Demo',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
     }, {
       text: 'Get Started',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
     }, {
       text: 'Create',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
     }, {
       text: 'Hello!',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
     }, {
       text: 'Build',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
     }, {
       text: 'Contact',
-      className: 'transition-all inline-block border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
     }, {
       text: 'Read More',
-      className: 'transition-all inline-block cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
     }, {
       text: 'Send a Message',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
     }, {
       text: 'Our Works',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
     }, {
       text: 'Read More',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
     }, {
       text: 'Get a Quote',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
     }, {
       text: 'Try Demo',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
     }, {
       text: 'Buy Now',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
     }, {
       text: 'Play',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
     }];
     let html = '';
 
@@ -66764,15 +66975,16 @@ class ButtonEditor {
   }
 
   applyDefault(link) {
-    // const dom = this.dom;
-    // dom.addClass(link, 'transition-all');
+    const dom = this.dom; // dom.addClass(link, 'transition-all');
     // if(!dom.hasClass(link,'flex')) dom.addClass(link, 'inline-block');
     // dom.addClass(link, 'cursor-pointer');
     // dom.addClass(link, 'border-solid');
     // dom.addClass(link, 'leading-relaxed');
+
     link.removeAttribute('data-hover-bgcolor');
     link.removeAttribute('data-hover-color');
     link.removeAttribute('data-hover-bordercolor');
+    dom.addClass(link, 'whitespace-nowrap');
   }
 
   cleanupOldClasses(link) {
@@ -71547,6 +71759,22 @@ class RowTool {
                                 <label class="label-row-grayscale label-checkbox" for="chkRowGrayscale"><input id="chkRowGrayscale" class="chk-row-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
                             </div>
 
+                            <div class="div-row-wrapcolumns" style="display:flex;flex-direction:column;padding-bottom:7px">
+                                <div style="padding-top:20px;padding-bottom:3px;">${util.out('Wrap Columns (Breakpoint)')}:</div>
+                                <div style="padding-top:3px;display:flex;align-items: center;">
+                                    <button title="${util.out('Tablet (Landscape)')}" class="input-breakpoint" data-value="md" style="width:40px;height:25px;">
+                                        <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </button>
+                                    <button title="${util.out('Tablet (Portrait)')}" class="input-breakpoint" data-value="sm" style="width:40px;height:25px;">
+                                        <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </button>
+                                    <button title="${util.out('Mobile')}" class="input-breakpoint on" data-value="xs" style="width:40px;height:25px;">
+                                        <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
+                                    </button>
+
+                                </div>
+                            </div>
+
                             <div class="is-separator"></div>
                          
                             <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
@@ -71579,6 +71807,9 @@ class RowTool {
                                 </button>
                             </div>
 
+                            <div id="divReverseColumns" style="diplay:none">
+                                <label for="chkReverseColumns" style="margin:20px 0 0;display:flex"><input id="chkReverseColumns" type="checkbox"  style="margin:0 7px 0 0"/><span>${util.out('Reverse Columns')}</span></label>
+                            </div>
                         </div>
 
                         <div id="divRowMore" class="is-tab-content" data-group="rowsettings" tabindex="-1">
@@ -71791,9 +72022,75 @@ class RowTool {
 
 
         this.builder.opts.onChange();
+      }); // Breakpoint
+
+      let btns = this.rowSettings.querySelectorAll('.input-breakpoint');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          let row = util.rowSelected();
+          if (!row) return;
+          this.builder.uo.saveForUndo();
+          let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
+          elms.forEach(elm => {
+            elm.classList.remove('on');
+          });
+          btn.classList.add('on');
+          let target = btn.getAttribute('data-value');
+
+          if (target === 'xs') {
+            row.classList.remove('sm-wrap');
+            row.classList.remove('md-wrap');
+          } else if (target === 'sm') {
+            row.classList.remove('md-wrap');
+            row.classList.add('sm-wrap');
+          } else if (target === 'md') {
+            row.classList.remove('smd-wrap');
+            row.classList.add('md-wrap');
+          } //Trigger Change event
+
+
+          this.builder.onChange();
+        });
+      });
+      const chkReverseBoxes = this.rowSettings.querySelector('#chkReverseColumns');
+      chkReverseBoxes.addEventListener('click', () => {
+        let row = util.rowSelected();
+        if (!row) return;
+        this.builder.uo.saveForUndo();
+        let divTarget = this.rowSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('xs-column-reverse');
+          } else {
+            row.classList.remove('xs-column-reverse');
+          }
+        } else if (target === 'sm') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('sm-column-reverse');
+          } else {
+            row.classList.remove('sm-column-reverse');
+          }
+        } else if (target === 'md') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('md-column-reverse');
+          } else {
+            row.classList.remove('md-column-reverse');
+          }
+        } else if (target === '') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('desktop-column-reverse');
+          } else {
+            row.classList.remove('desktop-column-reverse');
+          }
+        } //Trigger Change event
+
+
+        this.builder.settings.onChange();
       }); // Responsive Visibility
 
-      let btns = this.rowSettings.querySelectorAll('.input-device');
+      btns = this.rowSettings.querySelectorAll('.input-device');
       btns.forEach(btn => {
         btn.addEventListener('click', () => {
           let row = util.rowSelected();
@@ -71998,7 +72295,22 @@ class RowTool {
     let divVisibility = this.rowSettings.querySelector('.div-visibility');
     let target = this.builder.responsive.readTarget(divTarget);
     let valVisibility = this.builder.responsive.getVisibility(row, target);
-    this.builder.responsive.showVisibility(divVisibility, valVisibility);
+    this.builder.responsive.showVisibility(divVisibility, valVisibility); // Column reverse 
+
+    let valReverse = false;
+
+    if (target === 'xs') {
+      valReverse = row.classList.contains('xs-column-reverse');
+    } else if (target === 'sm') {
+      valReverse = row.classList.contains('sm-column-reverse');
+    } else if (target === 'md') {
+      valReverse = row.classList.contains('md-column-reverse');
+    } else {
+      valReverse = row.classList.contains('desktop-column-reverse');
+    }
+
+    const chkReverseColumns = this.rowSettings.querySelector('#chkReverseColumns');
+    chkReverseColumns.checked = valReverse;
   }
 
   render(row) {
@@ -72307,7 +72619,33 @@ class RowTool {
 
     let actualRow = row.parentNode; // row is actually row overlay
 
-    this.realtimeVisibility(actualRow); //More
+    this.realtimeVisibility(actualRow);
+    const divReverseBoxes = this.rowSettings.querySelector('#divReverseColumns');
+    let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
+
+    if (actualRow.querySelector('.is-row-overlay')) {
+      num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
+    }
+
+    if (actualRow.childElementCount - num > 1) {
+      divReverseBoxes.style.display = 'flex';
+    } else {
+      divReverseBoxes.style.display = 'none';
+    }
+
+    let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
+
+    if (actualRow.classList.contains('md-wrap')) {
+      this.rowSettings.querySelector('.input-breakpoint[data-value="md"]').classList.add('on');
+    } else if (actualRow.classList.contains('sm-wrap')) {
+      this.rowSettings.querySelector('.input-breakpoint[data-value="sm"]').classList.add('on');
+    } else {
+      this.rowSettings.querySelector('.input-breakpoint[data-value="xs"]').classList.add('on');
+    } //More
+
 
     let inpRowId = this.rowSettings.querySelector('.input-row-id');
     inpRowId.value = '';
@@ -88797,7 +89135,8 @@ class Resizeable {
       minWidth: 50,
       minHeight: 50,
       adj: 4,
-      onResize: function () {}
+      onResize: function () {},
+      resizeHeight: false
     };
     this.opts = Object.assign(this, defaults, opts);
     const pane = this.pane;
@@ -88914,8 +89253,7 @@ class Resizeable {
       if (clicked && clicked.isResizing) {
         let newWidth;
         let newWHeight;
-
-        if (clicked.onBottomEdge) {
+        if (this.resizeHeight) if (clicked.onBottomEdge) {
           newWHeight = Math.max(y / scale, minHeight) + adj;
           pane.style.height = newWHeight + 'px';
         }
@@ -88944,13 +89282,13 @@ class Resizeable {
 
 
       if (onRightEdge && onBottomEdge) {
-        pane.style.cursor = 'nwse-resize';
+        if (this.resizeHeight) pane.style.cursor = 'nwse-resize';
       } else if (onBottomEdge && onLeftEdge) {
-        pane.style.cursor = 'nesw-resize';
+        if (this.resizeHeight) pane.style.cursor = 'nesw-resize';
       } else if (onRightEdge || onLeftEdge) {
         pane.style.cursor = 'ew-resize';
       } else if (onBottomEdge) {
-        pane.style.cursor = 'ns-resize';
+        if (this.resizeHeight) pane.style.cursor = 'ns-resize';
       } else {
         pane.style.cursor = '';
       }
@@ -88999,6 +89337,7 @@ class Resize {
     const row = col.parentNode;
     this.resize = new Resizeable({
       pane: col,
+      resizeHeight: this.builder.resizeHeight,
       onResize: (width, height) => {
         this.builder.util.hideControls();
         let numOfCols = 1;
@@ -90988,6 +91327,7 @@ class ContentBuilder {
       toolbar: 'top',
       toolbarDisplay: 'auto',
       shortenHTML: true,
+      resizeHeight: false,
       snippetsSidebarDisplay: 'auto',
       // snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
       // onImageSelectClick: function () { },