@innovastudio/contentbox 1.5.12 → 1.5.14

package/public/contentbox/contentbox.esm.js

@@ -676,7 +676,7 @@ class SideBar {
     */
 
 
-    html += `<div class="is-pop page-quick-settings arrow-left" style="z-index:10004;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    html += `<div class="is-pop page-quick-settings arrow-left" style="z-index:10006;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div style="display:flex;flex-flow:wrap;flex-direction: column;width: 190px;margin:12px 12px 14px;">
                 <div class="is-label"><span>${out('Zoom')}</span>:</div>
                 <div style="padding-top:4px">
@@ -4046,15 +4046,15 @@ class EditSection {
                     <div class="div-section-wrapboxes" style="display:flex;flex-direction:column;">
                         <div style="padding-top:20px;padding-bottom:3px;">${out('Wrap Boxes (Breakpoint)')}:</div>
                         <div style="padding-top:3px;display:flex;align-items: center;">
-                            <button title="${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="${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>
-                    
+                            <label class="flex mr-5" title="${out('Tablet (Landscape)')}">
+                                <input type="radio" id="rdoBoxMdWrap" name="boxWrap" value="md">
+                                <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </label>
+                            <label class="flex" title="${out('Tablet (Portrait)')}">
+                                <input type="radio" id="rdoBoxSmWrap" name="boxWrap" value="sm">
+                                <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </label>
                         </div>
                     </div>
                     
@@ -4090,6 +4090,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>' +
@@ -4474,22 +4478,15 @@ class EditSection {
       }
     }); // Breakpoint
 
-    let btns = modalEditSection.querySelectorAll('.input-breakpoint');
-    btns.forEach(btn => {
-      btn.addEventListener('click', () => {
+    modalEditSection.querySelectorAll('input[name="boxWrap"]').forEach(input => {
+      input.addEventListener('change', () => {
         let section = this.builder.activeSection;
         if (!section) return;
         this.builder.editor.saveForUndo();
-        let elms = modalEditSection.querySelectorAll('.input-breakpoint');
-        elms.forEach(elm => {
-          elm.classList.remove('on');
-        });
-        btn.classList.add('on');
-        let target = btn.getAttribute('data-value');
 
-        if (target === 'sm') {
+        if (input.value === 'sm') {
           section.classList.remove('md-wrap');
-        } else if (target === 'md') {
+        } else if (input.value === 'md') {
           section.classList.add('md-wrap');
         } //Trigger Change event
 
@@ -4502,18 +4499,42 @@ class EditSection {
       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
 
 
       this.builder.settings.onChange();
     }); // Section Visibility
 
-    btns = modalEditSection.querySelectorAll('.input-device');
+    let btns = modalEditSection.querySelectorAll('.input-device');
     btns.forEach(btn => {
       btn.addEventListener('click', () => {
         let section = this.builder.activeSection;
@@ -4577,12 +4598,55 @@ class EditSection {
   } // Section Visibility
 
 
-  realtimeVisibility(cell) {
+  realtimeVisibility(section, initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.modalEditSection.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.modalEditSection.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.modalEditSection.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.modalEditSection.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     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');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(375);
+    } else if (target === 'sm') {
+      valReverse = section.classList.contains('sm-box-reverse');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(768);
+    } else if (target === 'md') {
+      valReverse = section.classList.contains('md-box-reverse');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(1024);
+    } else {
+      valReverse = section.classList.contains('desktop-box-reverse');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(1920);
+    }
+
+    const chkReverseBoxes = this.modalEditSection.querySelector('#chkReverseBoxes');
+    chkReverseBoxes.checked = valReverse;
   }
 
   read() {
@@ -4788,24 +4852,20 @@ class EditSection {
     } // Section Visibility
 
 
-    this.realtimeVisibility(activeSection);
-    btns = modalEditSection.querySelectorAll('.input-breakpoint');
-    btns.forEach(btn => {
-      dom$m.removeClass(btn, 'on');
-    });
+    this.realtimeVisibility(activeSection, true);
 
     if (activeSection.classList.contains('md-wrap')) {
-      dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="md"]'), 'on');
+      modalEditSection.querySelector('#rdoBoxMdWrap').checked = true;
     } else {
-      dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="sm"]'), 'on');
+      modalEditSection.querySelector('#rdoBoxSmWrap').checked = true;
     }
 
-    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';
     }
   }
 
@@ -71708,16 +71768,20 @@ class RowTool {
 
                             <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 style="padding-top:3px;padding-bottom:5px;display:flex;align-items: center;">
+
+                                    <label class="flex mr-3" title="${util.out('Tablet (Landscape)')}">
+                                        <input type="radio" id="rdoColMdWrap" name="boxWrap" value="md">
+                                        <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </label>
+                                    <label class="flex mr-3" title="${util.out('Tablet (Portrait)')}">
+                                        <input type="radio" id="rdoColSmWrap" name="boxWrap" value="sm">
+                                        <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </label>
+                                    <label class="flex" title="${util.out('Mobile')}">
+                                        <input type="radio" id="rdoColXsWrap" name="boxWrap" value="xs">
+                                        <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </label>
 
                                 </div>
                             </div>
@@ -71754,8 +71818,9 @@ class RowTool {
                                 </button>
                             </div>
 
-                            <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 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">
@@ -71970,32 +72035,25 @@ class RowTool {
         this.builder.opts.onChange();
       }); // Breakpoint
 
-      let btns = this.rowSettings.querySelectorAll('.input-breakpoint');
-      btns.forEach(btn => {
-        btn.addEventListener('click', () => {
+      rowSettings.querySelectorAll('input[name="boxWrap"]').forEach(input => {
+        input.addEventListener('change', () => {
           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') {
+          if (input.value === 'xs') {
             row.classList.remove('sm-wrap');
             row.classList.remove('md-wrap');
-          } else if (target === 'sm') {
+          } else if (input.value === 'sm') {
             row.classList.remove('md-wrap');
             row.classList.add('sm-wrap');
-          } else if (target === 'md') {
-            row.classList.remove('smd-wrap');
+          } else if (input.value === 'md') {
+            row.classList.remove('sm-wrap');
             row.classList.add('md-wrap');
           } //Trigger Change event
 
 
-          this.builder.onChange();
+          this.builder.opts.onChange();
         });
       });
       const chkReverseBoxes = this.rowSettings.querySelector('#chkReverseColumns');
@@ -72036,7 +72094,7 @@ class RowTool {
         this.builder.settings.onChange();
       }); // Responsive Visibility
 
-      btns = this.rowSettings.querySelectorAll('.input-device');
+      let btns = this.rowSettings.querySelectorAll('.input-device');
       btns.forEach(btn => {
         btn.addEventListener('click', () => {
           let row = util.rowSelected();
@@ -72236,7 +72294,31 @@ class RowTool {
     // });
   }
 
-  realtimeVisibility(row) {
+  realtimeVisibility(row, initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.rowSettings.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.rowSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.rowSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.rowSettings.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.rowSettings.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.rowSettings.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     let divTarget = this.rowSettings.querySelector('.div-target');
     let divVisibility = this.rowSettings.querySelector('.div-visibility');
     let target = this.builder.responsive.readTarget(divTarget);
@@ -72247,12 +72329,16 @@ class RowTool {
 
     if (target === 'xs') {
       valReverse = row.classList.contains('xs-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
     } else if (target === 'sm') {
       valReverse = row.classList.contains('sm-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
     } else if (target === 'md') {
       valReverse = row.classList.contains('md-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
     } else {
       valReverse = row.classList.contains('desktop-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
     }
 
     const chkReverseColumns = this.rowSettings.querySelector('#chkReverseColumns');
@@ -72565,7 +72651,28 @@ class RowTool {
 
     let actualRow = row.parentNode; // row is actually row overlay
 
-    this.realtimeVisibility(actualRow); //More
+    this.realtimeVisibility(actualRow, true);
+    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';
+    }
+
+    if (actualRow.classList.contains('md-wrap')) {
+      this.rowSettings.querySelector('#rdoColMdWrap').checked = true;
+    } else if (actualRow.classList.contains('sm-wrap')) {
+      this.rowSettings.querySelector('#rdoColSmWrap').checked = true;
+    } else {
+      this.rowSettings.querySelector('#rdoColXsWrap').checked = true;
+    } //More
+
 
     let inpRowId = this.rowSettings.querySelector('.input-row-id');
     inpRowId.value = '';
@@ -74511,6 +74618,12 @@ class ColumnTool {
       });
       let btnVisible = this.cellSettings.querySelector('.input-visible');
       let btnHidden = this.cellSettings.querySelector('.input-hidden');
+
+      const rowHasHiddenColumns = (row, target) => {
+        let cols = row.querySelectorAll(`.${target}-hidden`);
+        return cols.length > 0;
+      };
+
       btnVisible.addEventListener('click', () => {
         let cell = this.util.cellSelected();
         if (!cell) return;
@@ -74523,12 +74636,13 @@ class ColumnTool {
           cell.classList.remove('xs-hidden');
         } else if (target === 'sm') {
           cell.classList.remove('sm-hidden');
-          cell.parentNode.classList.remove('sm-autofit');
+          if (!rowHasHiddenColumns(cell.parentNode, 'sm')) cell.parentNode.classList.remove('sm-autofit');
         } else if (target === 'md') {
           cell.classList.remove('md-hidden');
-          cell.parentNode.classList.remove('md-autofit');
+          if (!rowHasHiddenColumns(cell.parentNode, 'md')) cell.parentNode.classList.remove('md-autofit');
         } else if (target === '') {
           cell.classList.remove('desktop-hidden');
+          if (!rowHasHiddenColumns(cell.parentNode, 'desktop')) cell.parentNode.classList.remove('desktop-autofit');
         }
 
         btnVisible.classList.add('on');
@@ -74554,6 +74668,7 @@ class ColumnTool {
           cell.parentNode.classList.add('md-autofit');
         } else if (target === '') {
           cell.classList.add('desktop-hidden');
+          cell.parentNode.classList.add('desktop-autofit');
         }
 
         btnVisible.classList.remove('on');
@@ -74751,7 +74866,7 @@ class ColumnTool {
       dom.addClass(btn, 'on');
     }
 
-    this.realtimeVisibility(cell); //More
+    this.realtimeVisibility(cell, true); //More
 
     let inpCellId = this.cellSettings.querySelector('.input-cell-id');
     inpCellId.value = '';
@@ -74767,12 +74882,46 @@ class ColumnTool {
     inpCellClasses.value = classes;
   }
 
-  realtimeVisibility(cell) {
+  realtimeVisibility(cell, initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.cellSettings.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.cellSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.cellSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.cellSettings.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.cellSettings.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.cellSettings.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     let divTarget = this.cellSettings.querySelector('.div-target');
     let divVisibility = this.cellSettings.querySelector('.div-visibility');
     let target = this.builder.responsive.readTarget(divTarget);
     let valVisibility = this.builder.responsive.getVisibility(cell, target);
-    this.builder.responsive.showVisibility(divVisibility, valVisibility);
+    this.builder.responsive.showVisibility(divVisibility, valVisibility); // Live Preview Sync
+
+    if (target === 'xs') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
+    } else if (target === 'sm') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
+    } else if (target === 'md') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
+    } else {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
+    }
   }
 
   openImagePicker(currentUrl, callback, btn) {
@@ -75868,15 +76017,49 @@ class ElementGeneralStyles {
       }
     }
 
-    this.realtimeVisibility(elm);
+    this.realtimeVisibility(elm, true);
   }
 
-  realtimeVisibility(row) {
+  realtimeVisibility(row, initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.panelStuff.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.panelStuff.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.panelStuff.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.panelStuff.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     let divTarget = this.panelStuff.querySelector('.div-target');
     let divVisibility = this.panelStuff.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); // Live Preview Sync
+
+    if (target === 'xs') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
+    } else if (target === 'sm') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
+    } else if (target === 'md') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
+    } else {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
+    }
   }
 
 }
@@ -90922,7 +91105,7 @@ class LivePreview {
                 z-index:100021 !important
             }
             </style>
-            <div style="z-index:10002;${this.builder.previewStyle}" class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div style="z-index:10004;${this.builder.previewStyle}" class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-bar is-draggable" draggable=""> 
                     <span>${util.out('Live Preview')}</span>
                     <button class="is-modal-device" tabindex="-1" style="user-select:none;cursor:default">
@@ -90955,41 +91138,18 @@ class LivePreview {
         this.closePreview();
       });
       const btnModalSize = modal.querySelector('.is-modal-size');
-      const infoDevice = modal.querySelector('.is-modal-device');
       btnModalSize.addEventListener('click', () => {
         if (modal.classList.contains('is-screen-1920')) {
-          modal.classList.remove('is-screen-1920');
-          modal.classList.add('is-screen-1440');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
-          infoDevice.setAttribute('title', util.out('Laptop'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
+          this.resizePreview(1440);
         } else if (modal.classList.contains('is-screen-1440')) {
-          modal.classList.remove('is-screen-1440');
-          modal.classList.add('is-screen-1024');
-          infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
-          localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
+          this.resizePreview(1024);
         } else if (modal.classList.contains('is-screen-1024')) {
-          modal.classList.remove('is-screen-1024');
-          modal.classList.add('is-screen-768');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-768');
-          infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
+          this.resizePreview(768);
         } else if (modal.classList.contains('is-screen-768')) {
-          modal.classList.remove('is-screen-768');
-          modal.classList.add('is-screen-375');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-375');
-          infoDevice.setAttribute('title', util.out('Mobile'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
+          this.resizePreview(375);
         } else if (modal.classList.contains('is-screen-375')) {
-          modal.classList.remove('is-screen-375');
-          modal.classList.add('is-screen-1920');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
-          infoDevice.setAttribute('title', util.out('Desktop'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
+          this.resizePreview(1920);
         }
-
-        this.previewRefresh(true);
       });
       const btnModalRefresh = modal.querySelector('.is-modal-refresh');
       btnModalRefresh.addEventListener('click', () => {
@@ -91005,6 +91165,47 @@ class LivePreview {
     }
   }
 
+  resizePreview(size) {
+    let modal = this.modal;
+    let util = this.util;
+    modal.classList.remove('is-screen-1440');
+    modal.classList.remove('is-screen-1920');
+    modal.classList.remove('is-screen-1024');
+    modal.classList.remove('is-screen-768');
+    modal.classList.remove('is-screen-375');
+    const infoDevice = modal.querySelector('.is-modal-device');
+
+    if (size === 1440) {
+      modal.classList.add('is-screen-1440');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
+      infoDevice.setAttribute('title', util.out('Laptop'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
+    } else if (size === 1024) {
+      modal.classList.remove('is-screen-1440');
+      modal.classList.add('is-screen-1024');
+      infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
+      localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
+    } else if (size === 768) {
+      modal.classList.add('is-screen-768');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-768');
+      infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
+    } else if (size === 375) {
+      modal.classList.add('is-screen-375');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-375');
+      infoDevice.setAttribute('title', util.out('Mobile'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
+    } else if (size === 1920) {
+      modal.classList.add('is-screen-1920');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
+      infoDevice.setAttribute('title', util.out('Desktop'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
+    }
+
+    this.previewRefresh(true);
+  }
+
   previewRefresh(disableOnContentLoad) {
     if (this.modal.classList.contains('active')) {
       // let html = this.builder.html();