@innovastudio/contentbuilder 1.3.86 → 1.4.0

package/public/contentbuilder/contentbuilder.esm.js

@@ -14683,7 +14683,7 @@ var loader = {
   __getMonacoInstance: __getMonacoInstance
 };
 
-const dom$h = new Dom();
+const dom$j = new Dom();
 let hash$1 = {};
 class HtmlUtil {
   constructor(builder) {
@@ -14731,28 +14731,28 @@ class HtmlUtil {
             </div>
             
             `;
-      dom$h.appendHtml(builderStuff, html);
+      dom$j.appendHtml(builderStuff, html);
       viewhtml = builderStuff.querySelector('.viewhtml');
       let viewhtmlmonaco = builderStuff.querySelector('.viewhtmlmonaco');
       let viewhtmlexternal = builderStuff.querySelector('.viewhtmlexternal');
       let elm = viewhtml.querySelector('.input-ok');
-      dom$h.addEventListener(elm, 'click', () => {
+      dom$j.addEventListener(elm, 'click', () => {
         this.applyHtml(viewhtml);
       });
       elm = viewhtml.querySelector('.input-cancel');
-      dom$h.addEventListener(elm, 'click', () => {
+      dom$j.addEventListener(elm, 'click', () => {
         this.builder.hideModal(viewhtml);
       });
       elm = viewhtmlmonaco.querySelector('.input-ok');
-      dom$h.addEventListener(elm, 'click', () => {
+      dom$j.addEventListener(elm, 'click', () => {
         this.applyHtml(viewhtmlmonaco);
       });
       elm = viewhtmlmonaco.querySelector('.input-cancel');
-      dom$h.addEventListener(elm, 'click', () => {
+      dom$j.addEventListener(elm, 'click', () => {
         this.builder.hideModal(viewhtmlmonaco);
       });
       elm = viewhtmlexternal.querySelector('.input-ok');
-      dom$h.addEventListener(elm, 'click', () => {
+      dom$j.addEventListener(elm, 'click', () => {
         const source = document.querySelector('textarea[data-source-active]');
         const selectorOk = source.getAttribute('data-source-ok');
         source.removeAttribute('data-source-active');
@@ -14762,7 +14762,7 @@ class HtmlUtil {
         this.builder.hideModal(viewhtmlexternal);
       });
       elm = viewhtmlexternal.querySelector('.input-cancel');
-      dom$h.addEventListener(elm, 'click', () => {
+      dom$j.addEventListener(elm, 'click', () => {
         const source = document.querySelector('textarea[data-source-active]');
         const selectorCancel = source.getAttribute('data-source-cancel');
         source.removeAttribute('data-source-active');
@@ -15049,7 +15049,7 @@ class HtmlUtil {
 
       this.builder.cleanHtmlFormatting = false; //Change to row selection
 
-      dom$h.removeClass(row, 'row-outline');
+      dom$j.removeClass(row, 'row-outline');
     }
 
     if (mode === 'full') {
@@ -15294,112 +15294,116 @@ class HtmlUtil {
 
       _builder.removeAttribute('data-sort');
 
-      dom$h.removeClass(_builder, 'builder-active');
-      const rows = dom$h.elementChildren(_builder);
+      dom$j.removeClass(_builder, 'builder-active');
+      const rows = dom$j.elementChildren(_builder);
       rows.forEach(row => {
-        const cols = dom$h.elementChildren(row);
+        const cols = dom$j.elementChildren(row);
         cols.forEach(col => {
           col.style.cursor = '';
         });
       });
     }); // cleanup cursor from drag to resize columns
 
-    const rows = dom$h.elementChildren(tmp);
+    const rows = dom$j.elementChildren(tmp);
     rows.forEach(row => {
       row.style.cursor = ''; //if tmp is row html, then this is a column
 
-      const cols = dom$h.elementChildren(row);
+      const cols = dom$j.elementChildren(row);
       cols.forEach(col => {
         col.style.cursor = '';
       });
     });
     let elms = tmp.querySelectorAll('.sortable-chosen');
-    dom$h.removeClasses(elms, 'sortable-chosen');
+    dom$j.removeClasses(elms, 'sortable-chosen');
     elms = tmp.querySelectorAll('.sortable-ghost');
-    dom$h.removeClasses(elms, 'sortable-ghost');
+    dom$j.removeClasses(elms, 'sortable-ghost');
     elms = tmp.querySelectorAll('.elm-active');
-    dom$h.removeClasses(elms, 'elm-active');
+    dom$j.removeClasses(elms, 'elm-active');
     elms = tmp.querySelectorAll('.elm-inspected');
-    dom$h.removeClasses(elms, 'elm-inspected');
+    dom$j.removeClasses(elms, 'elm-inspected');
     elms = tmp.querySelectorAll('.cell-active');
-    dom$h.removeClasses(elms, 'cell-active');
+    dom$j.removeClasses(elms, 'cell-active');
     elms = tmp.querySelectorAll('.row-active');
-    dom$h.removeClasses(elms, 'row-active');
+    dom$j.removeClasses(elms, 'row-active');
     elms = tmp.querySelectorAll('.row-outline');
-    dom$h.removeClasses(elms, 'row-outline');
+    dom$j.removeClasses(elms, 'row-outline');
     elms = tmp.querySelectorAll('.is-builder');
-    dom$h.removeClasses(elms, 'is-builder');
+    dom$j.removeClasses(elms, 'is-builder');
     elms = tmp.querySelectorAll('.row-outline');
-    dom$h.removeClasses(elms, 'row-outline');
+    dom$j.removeClasses(elms, 'row-outline');
     elms = tmp.querySelectorAll('[data-click]');
-    dom$h.removeAttributes(elms, 'data-click');
+    dom$j.removeAttributes(elms, 'data-click');
     elms = tmp.querySelectorAll('[contenteditable]');
-    dom$h.removeAttributes(elms, 'contenteditable');
+    dom$j.removeAttributes(elms, 'contenteditable');
     elms = tmp.querySelectorAll('[draggridoutline]');
-    dom$h.removeAttributes(elms, 'draggridoutline');
+    dom$j.removeAttributes(elms, 'draggridoutline');
     elms = tmp.querySelectorAll('[between-blocks-left]');
-    dom$h.removeAttributes(elms, 'between-blocks-left');
+    dom$j.removeAttributes(elms, 'between-blocks-left');
     elms = tmp.querySelectorAll('[between-blocks-center]');
-    dom$h.removeAttributes(elms, 'between-blocks-center');
+    dom$j.removeAttributes(elms, 'between-blocks-center');
     elms = tmp.querySelectorAll('[hideelementhighlight]');
-    dom$h.removeAttributes(elms, 'hideelementhighlight');
+    dom$j.removeAttributes(elms, 'hideelementhighlight');
     elms = tmp.querySelectorAll('[data-module-active]');
-    dom$h.removeAttributes(elms, 'data-module-active');
+    dom$j.removeAttributes(elms, 'data-module-active');
     elms = tmp.querySelectorAll('[draggable]');
-    dom$h.removeAttributes(elms, 'draggable');
+    dom$j.removeAttributes(elms, 'draggable');
     elms = tmp.querySelectorAll('[data-animated]');
-    dom$h.removeAttributes(elms, 'data-animated');
+    dom$j.removeAttributes(elms, 'data-animated');
     elms = tmp.querySelectorAll('[data-saveforundo]');
-    dom$h.removeAttributes(elms, 'data-saveforundo');
+    dom$j.removeAttributes(elms, 'data-saveforundo');
     elms = tmp.querySelectorAll('[hidesnippetaddtool]');
-    dom$h.removeAttributes(elms, 'hidesnippetaddtool');
+    dom$j.removeAttributes(elms, 'hidesnippetaddtool');
     elms = tmp.querySelectorAll('[gray]');
-    dom$h.removeAttributes(elms, 'gray');
+    dom$j.removeAttributes(elms, 'gray');
     elms = tmp.querySelectorAll('[rowoutline]');
-    dom$h.removeAttributes(elms, 'rowoutline');
+    dom$j.removeAttributes(elms, 'rowoutline');
     elms = tmp.querySelectorAll('[hidecolumntool]');
-    dom$h.removeAttributes(elms, 'hidecolumntool');
+    dom$j.removeAttributes(elms, 'hidecolumntool');
     elms = tmp.querySelectorAll('[grayoutline]');
-    dom$h.removeAttributes(elms, 'grayoutline');
+    dom$j.removeAttributes(elms, 'grayoutline');
     elms = tmp.querySelectorAll('[hideoutline]');
-    dom$h.removeAttributes(elms, 'hideoutline');
+    dom$j.removeAttributes(elms, 'hideoutline');
     elms = tmp.querySelectorAll('[leftrowtool]');
-    dom$h.removeAttributes(elms, 'leftrowtool');
+    dom$j.removeAttributes(elms, 'leftrowtool');
     elms = tmp.querySelectorAll('[minimal]');
-    dom$h.removeAttributes(elms, 'minimal');
+    dom$j.removeAttributes(elms, 'minimal');
     elms = tmp.querySelectorAll('[clean]');
-    dom$h.removeAttributes(elms, 'clean');
+    dom$j.removeAttributes(elms, 'clean');
     elms = tmp.querySelectorAll('[grideditor]');
-    dom$h.removeAttributes(elms, 'grideditor');
+    dom$j.removeAttributes(elms, 'grideditor');
     elms = tmp.querySelectorAll('[gridoutline]');
-    dom$h.removeAttributes(elms, 'gridoutline');
-    dom$h.removeElements(tmp.querySelectorAll('.is-row-tool'));
-    dom$h.removeElements(tmp.querySelectorAll('.is-col-tool'));
-    dom$h.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
-    dom$h.removeElements(tmp.querySelectorAll('.ovl'));
-    dom$h.removeElements(tmp.querySelectorAll('.row-add-initial')); //Extra cleaning
+    dom$j.removeAttributes(elms, 'gridoutline');
+    dom$j.removeElements(tmp.querySelectorAll('.is-row-tool'));
+    dom$j.removeElements(tmp.querySelectorAll('.is-col-tool'));
+    dom$j.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
+    dom$j.removeElements(tmp.querySelectorAll('.ovl'));
+    dom$j.removeElements(tmp.querySelectorAll('.row-add-initial')); //Extra cleaning
 
     elms = tmp.querySelectorAll('.aos-init');
-    dom$h.removeClasses(elms, 'aos-init');
+    dom$j.removeClasses(elms, 'aos-init');
     elms = tmp.querySelectorAll('.aos-animate');
-    dom$h.removeClasses(elms, 'aos-animate');
+    dom$j.removeClasses(elms, 'aos-animate');
     elms = tmp.querySelectorAll('.skrollable');
-    dom$h.removeClasses(elms, 'skrollable');
+    dom$j.removeClasses(elms, 'skrollable');
     elms = tmp.querySelectorAll('.skrollable-after');
-    dom$h.removeClasses(elms, 'skrollable-after');
+    dom$j.removeClasses(elms, 'skrollable-after');
     elms = tmp.querySelectorAll('.skrollable-before');
-    dom$h.removeClasses(elms, 'skrollable-before');
+    dom$j.removeClasses(elms, 'skrollable-before');
     elms = tmp.querySelectorAll('.skrollable-between');
-    dom$h.removeClasses(elms, 'skrollable-between');
+    dom$j.removeClasses(elms, 'skrollable-between');
     elms = tmp.querySelectorAll('.is-inview');
-    dom$h.removeClasses(elms, 'is-inview');
+    dom$j.removeClasses(elms, 'is-inview');
     let emptyclasses = tmp.querySelectorAll('[class=""]');
     Array.prototype.forEach.call(emptyclasses, emptyclass => {
       emptyclass.removeAttribute('class');
     });
-    dom$h.removeEmptyStyle(tmp);
+    let unusedOverlays = tmp.querySelectorAll('.is-row-overlay');
+    Array.prototype.forEach.call(unusedOverlays, unusedOverlay => {
+      if (!unusedOverlay.hasAttribute('style')) unusedOverlay.parentNode.removeChild(unusedOverlay);
+    });
+    dom$j.removeEmptyStyle(tmp);
     elms = tmp.querySelectorAll('[data-keep]');
-    dom$h.removeAttributes(elms, 'data-keep'); //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
+    dom$j.removeAttributes(elms, 'data-keep'); //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
 
     let links = tmp.querySelectorAll('a');
     Array.prototype.forEach.call(links, link => {
@@ -15415,77 +15419,77 @@ class HtmlUtil {
       //ContentBox
       // Remove dummy DIV after last section
       let elms = tmp.querySelectorAll('.is-dummy');
-      dom$h.removeElements(elms);
+      dom$j.removeElements(elms);
       elms = tmp.querySelectorAll('[data-scroll]');
-      dom$h.removeAttributes(elms, 'data-scroll');
+      dom$j.removeAttributes(elms, 'data-scroll');
       elms = tmp.querySelectorAll('[data-scroll-once]');
-      dom$h.removeAttributes(elms, 'data-scroll-once');
+      dom$j.removeAttributes(elms, 'data-scroll-once');
 
       if (this.builder.shortenOutput) {
         elms = tmp.querySelectorAll('[data-noedit]');
-        dom$h.removeAttributes(elms, 'data-noedit');
+        dom$j.removeAttributes(elms, 'data-noedit');
         elms = tmp.querySelectorAll('[data-module]');
-        dom$h.removeAttributes(elms, 'data-module');
+        dom$j.removeAttributes(elms, 'data-module');
         elms = tmp.querySelectorAll('[data-module-desc]');
-        dom$h.removeAttributes(elms, 'data-module-desc');
+        dom$j.removeAttributes(elms, 'data-module-desc');
         elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom$h.removeAttributes(elms, 'data-dialog-width');
+        dom$j.removeAttributes(elms, 'data-dialog-width');
         elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom$h.removeAttributes(elms, 'data-dialog-height');
+        dom$j.removeAttributes(elms, 'data-dialog-height');
         elms = tmp.querySelectorAll('[data-html]');
-        dom$h.removeAttributes(elms, 'data-html');
+        dom$j.removeAttributes(elms, 'data-html');
         elms = tmp.querySelectorAll('[data-settings]');
-        dom$h.removeAttributes(elms, 'data-settings');
+        dom$j.removeAttributes(elms, 'data-settings');
         elms = tmp.querySelectorAll('[data-html-1]');
-        dom$h.removeAttributes(elms, 'data-html-1');
+        dom$j.removeAttributes(elms, 'data-html-1');
         elms = tmp.querySelectorAll('[data-html-2]');
-        dom$h.removeAttributes(elms, 'data-html-2');
+        dom$j.removeAttributes(elms, 'data-html-2');
         elms = tmp.querySelectorAll('[data-html-3]');
-        dom$h.removeAttributes(elms, 'data-html-3');
+        dom$j.removeAttributes(elms, 'data-html-3');
         elms = tmp.querySelectorAll('[data-html-4]');
-        dom$h.removeAttributes(elms, 'data-html-4');
+        dom$j.removeAttributes(elms, 'data-html-4');
         elms = tmp.querySelectorAll('[data-html-5]');
-        dom$h.removeAttributes(elms, 'data-html-5');
+        dom$j.removeAttributes(elms, 'data-html-5');
         elms = tmp.querySelectorAll('[data-html-6]');
-        dom$h.removeAttributes(elms, 'data-html-6');
+        dom$j.removeAttributes(elms, 'data-html-6');
         elms = tmp.querySelectorAll('[data-html-7]');
-        dom$h.removeAttributes(elms, 'data-html-7');
+        dom$j.removeAttributes(elms, 'data-html-7');
         elms = tmp.querySelectorAll('[data-html-8]');
-        dom$h.removeAttributes(elms, 'data-html-8');
+        dom$j.removeAttributes(elms, 'data-html-8');
         elms = tmp.querySelectorAll('[data-html-9]');
-        dom$h.removeAttributes(elms, 'data-html-9');
+        dom$j.removeAttributes(elms, 'data-html-9');
         elms = tmp.querySelectorAll('[data-html-10]');
-        dom$h.removeAttributes(elms, 'data-html-10');
+        dom$j.removeAttributes(elms, 'data-html-10');
         elms = tmp.querySelectorAll('[data-html-12]');
-        dom$h.removeAttributes(elms, 'data-html-12');
+        dom$j.removeAttributes(elms, 'data-html-12');
         elms = tmp.querySelectorAll('[data-html-13]');
-        dom$h.removeAttributes(elms, 'data-html-13');
+        dom$j.removeAttributes(elms, 'data-html-13');
         elms = tmp.querySelectorAll('[data-html-14]');
-        dom$h.removeAttributes(elms, 'data-html-14');
+        dom$j.removeAttributes(elms, 'data-html-14');
         elms = tmp.querySelectorAll('[data-html-15]');
-        dom$h.removeAttributes(elms, 'data-html-15');
+        dom$j.removeAttributes(elms, 'data-html-15');
         elms = tmp.querySelectorAll('[data-html-16]');
-        dom$h.removeAttributes(elms, 'data-html-16');
+        dom$j.removeAttributes(elms, 'data-html-16');
         elms = tmp.querySelectorAll('[data-html-17]');
-        dom$h.removeAttributes(elms, 'data-html-17');
+        dom$j.removeAttributes(elms, 'data-html-17');
         elms = tmp.querySelectorAll('[data-html-18]');
-        dom$h.removeAttributes(elms, 'data-html-18');
+        dom$j.removeAttributes(elms, 'data-html-18');
         elms = tmp.querySelectorAll('[data-html-19]');
-        dom$h.removeAttributes(elms, 'data-html-19');
+        dom$j.removeAttributes(elms, 'data-html-19');
         elms = tmp.querySelectorAll('[data-html-20]');
-        dom$h.removeAttributes(elms, 'data-html-20');
+        dom$j.removeAttributes(elms, 'data-html-20');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$h.removeAttributes(elms, 'data-html-21');
+        dom$j.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$h.removeAttributes(elms, 'data-html-21');
+        dom$j.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-22]');
-        dom$h.removeAttributes(elms, 'data-html-22');
+        dom$j.removeAttributes(elms, 'data-html-22');
         elms = tmp.querySelectorAll('[data-html-23]');
-        dom$h.removeAttributes(elms, 'data-html-23');
+        dom$j.removeAttributes(elms, 'data-html-23');
         elms = tmp.querySelectorAll('[data-html-24]');
-        dom$h.removeAttributes(elms, 'data-html-24');
+        dom$j.removeAttributes(elms, 'data-html-24');
         elms = tmp.querySelectorAll('[data-html-25]');
-        dom$h.removeAttributes(elms, 'data-html-25');
+        dom$j.removeAttributes(elms, 'data-html-25');
       } // cleaning
 
 
@@ -15500,23 +15504,23 @@ class HtmlUtil {
       });
       elms = tmp.querySelectorAll('.is-animated');
       Array.prototype.forEach.call(elms, elm => {
-        dom$h.removeClass(elm, 'animated');
-        dom$h.removeClass(elm, 'pulse');
-        dom$h.removeClass(elm, 'bounceIn');
-        dom$h.removeClass(elm, 'fadeIn');
-        dom$h.removeClass(elm, 'fadeOut'); //new
-
-        dom$h.removeClass(elm, 'fadeInDown');
-        dom$h.removeClass(elm, 'fadeInLeft');
-        dom$h.removeClass(elm, 'fadeInRight');
-        dom$h.removeClass(elm, 'fadeInUp');
-        dom$h.removeClass(elm, 'flipInX');
-        dom$h.removeClass(elm, 'flipInY');
-        dom$h.removeClass(elm, 'slideInUp');
-        dom$h.removeClass(elm, 'slideInDown');
-        dom$h.removeClass(elm, 'slideInLeft');
-        dom$h.removeClass(elm, 'slideInRight');
-        dom$h.removeClass(elm, 'zoomIn');
+        dom$j.removeClass(elm, 'animated');
+        dom$j.removeClass(elm, 'pulse');
+        dom$j.removeClass(elm, 'bounceIn');
+        dom$j.removeClass(elm, 'fadeIn');
+        dom$j.removeClass(elm, 'fadeOut'); //new
+
+        dom$j.removeClass(elm, 'fadeInDown');
+        dom$j.removeClass(elm, 'fadeInLeft');
+        dom$j.removeClass(elm, 'fadeInRight');
+        dom$j.removeClass(elm, 'fadeInUp');
+        dom$j.removeClass(elm, 'flipInX');
+        dom$j.removeClass(elm, 'flipInY');
+        dom$j.removeClass(elm, 'slideInUp');
+        dom$j.removeClass(elm, 'slideInDown');
+        dom$j.removeClass(elm, 'slideInLeft');
+        dom$j.removeClass(elm, 'slideInRight');
+        dom$j.removeClass(elm, 'zoomIn');
         elm.style.animationDelay = '';
         elm.style.transitionDelay = '';
         elm.style.transitionDuration = '';
@@ -15530,39 +15534,39 @@ class HtmlUtil {
 
       elms = tmp.querySelectorAll('.is-appeared');
       Array.prototype.forEach.call(elms, elm => {
-        dom$h.removeClass(elm, 'is-appeared');
+        dom$j.removeClass(elm, 'is-appeared');
       });
       elms = tmp.querySelectorAll('.box-active');
       Array.prototype.forEach.call(elms, elm => {
-        dom$h.removeClass(elm, 'box-active');
+        dom$j.removeClass(elm, 'box-active');
       });
       elms = tmp.querySelectorAll('.section-active');
       Array.prototype.forEach.call(elms, elm => {
-        dom$h.removeClass(elm, 'section-active');
+        dom$j.removeClass(elm, 'section-active');
       });
       elms = tmp.querySelectorAll('.section-select');
       Array.prototype.forEach.call(elms, elm => {
-        dom$h.removeClass(elm, 'section-select');
+        dom$j.removeClass(elm, 'section-select');
       });
       elms = tmp.querySelectorAll('.box-select');
       Array.prototype.forEach.call(elms, elm => {
-        dom$h.removeClass(elm, 'box-select');
+        dom$j.removeClass(elm, 'box-select');
       });
       elms = tmp.querySelectorAll('.is-section-tool');
-      dom$h.removeElements(elms);
+      dom$j.removeElements(elms);
       elms = tmp.querySelectorAll('.is-box-tool');
-      dom$h.removeElements(elms);
+      dom$j.removeElements(elms);
       elms = tmp.querySelectorAll('.is-section-info');
-      dom$h.removeElements(elms);
+      dom$j.removeElements(elms);
       var html_content = '';
       var html_footer = '';
       var html_others = ''; // Apply behavior on each row
 
-      const sections = dom$h.elementChildren(tmp);
+      const sections = dom$j.elementChildren(tmp);
       sections.forEach(section => {
         let currentSection = section;
 
-        if (dom$h.hasClass(currentSection, 'is-section')) {
+        if (dom$j.hasClass(currentSection, 'is-section')) {
           var secclass = ''; // var secstyle = '';
 
           if (currentSection.getAttribute('class')) secclass = ' class="' + currentSection.getAttribute('class') + '"'; // if (currentSection.getAttribute('style')) secstyle = ' style="' + currentSection.getAttribute('style') + '"';
@@ -15604,69 +15608,69 @@ class HtmlUtil {
 
       if (this.builder.shortenOutput) {
         elms = tmp.querySelectorAll('[data-noedit]');
-        dom$h.removeAttributes(elms, 'data-noedit');
+        dom$j.removeAttributes(elms, 'data-noedit');
         elms = tmp.querySelectorAll('[data-module]');
-        dom$h.removeAttributes(elms, 'data-module');
+        dom$j.removeAttributes(elms, 'data-module');
         elms = tmp.querySelectorAll('[data-module-desc]');
-        dom$h.removeAttributes(elms, 'data-module-desc');
+        dom$j.removeAttributes(elms, 'data-module-desc');
         elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom$h.removeAttributes(elms, 'data-dialog-width');
+        dom$j.removeAttributes(elms, 'data-dialog-width');
         elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom$h.removeAttributes(elms, 'data-dialog-height');
+        dom$j.removeAttributes(elms, 'data-dialog-height');
         elms = tmp.querySelectorAll('[data-html]');
-        dom$h.removeAttributes(elms, 'data-html');
+        dom$j.removeAttributes(elms, 'data-html');
         elms = tmp.querySelectorAll('[data-settings]');
-        dom$h.removeAttributes(elms, 'data-settings');
+        dom$j.removeAttributes(elms, 'data-settings');
         elms = tmp.querySelectorAll('[data-html-1]');
-        dom$h.removeAttributes(elms, 'data-html-1');
+        dom$j.removeAttributes(elms, 'data-html-1');
         elms = tmp.querySelectorAll('[data-html-2]');
-        dom$h.removeAttributes(elms, 'data-html-2');
+        dom$j.removeAttributes(elms, 'data-html-2');
         elms = tmp.querySelectorAll('[data-html-3]');
-        dom$h.removeAttributes(elms, 'data-html-3');
+        dom$j.removeAttributes(elms, 'data-html-3');
         elms = tmp.querySelectorAll('[data-html-4]');
-        dom$h.removeAttributes(elms, 'data-html-4');
+        dom$j.removeAttributes(elms, 'data-html-4');
         elms = tmp.querySelectorAll('[data-html-5]');
-        dom$h.removeAttributes(elms, 'data-html-5');
+        dom$j.removeAttributes(elms, 'data-html-5');
         elms = tmp.querySelectorAll('[data-html-6]');
-        dom$h.removeAttributes(elms, 'data-html-6');
+        dom$j.removeAttributes(elms, 'data-html-6');
         elms = tmp.querySelectorAll('[data-html-7]');
-        dom$h.removeAttributes(elms, 'data-html-7');
+        dom$j.removeAttributes(elms, 'data-html-7');
         elms = tmp.querySelectorAll('[data-html-8]');
-        dom$h.removeAttributes(elms, 'data-html-8');
+        dom$j.removeAttributes(elms, 'data-html-8');
         elms = tmp.querySelectorAll('[data-html-9]');
-        dom$h.removeAttributes(elms, 'data-html-9');
+        dom$j.removeAttributes(elms, 'data-html-9');
         elms = tmp.querySelectorAll('[data-html-10]');
-        dom$h.removeAttributes(elms, 'data-html-10');
+        dom$j.removeAttributes(elms, 'data-html-10');
         elms = tmp.querySelectorAll('[data-html-12]');
-        dom$h.removeAttributes(elms, 'data-html-12');
+        dom$j.removeAttributes(elms, 'data-html-12');
         elms = tmp.querySelectorAll('[data-html-13]');
-        dom$h.removeAttributes(elms, 'data-html-13');
+        dom$j.removeAttributes(elms, 'data-html-13');
         elms = tmp.querySelectorAll('[data-html-14]');
-        dom$h.removeAttributes(elms, 'data-html-14');
+        dom$j.removeAttributes(elms, 'data-html-14');
         elms = tmp.querySelectorAll('[data-html-15]');
-        dom$h.removeAttributes(elms, 'data-html-15');
+        dom$j.removeAttributes(elms, 'data-html-15');
         elms = tmp.querySelectorAll('[data-html-16]');
-        dom$h.removeAttributes(elms, 'data-html-16');
+        dom$j.removeAttributes(elms, 'data-html-16');
         elms = tmp.querySelectorAll('[data-html-17]');
-        dom$h.removeAttributes(elms, 'data-html-17');
+        dom$j.removeAttributes(elms, 'data-html-17');
         elms = tmp.querySelectorAll('[data-html-18]');
-        dom$h.removeAttributes(elms, 'data-html-18');
+        dom$j.removeAttributes(elms, 'data-html-18');
         elms = tmp.querySelectorAll('[data-html-19]');
-        dom$h.removeAttributes(elms, 'data-html-19');
+        dom$j.removeAttributes(elms, 'data-html-19');
         elms = tmp.querySelectorAll('[data-html-20]');
-        dom$h.removeAttributes(elms, 'data-html-20');
+        dom$j.removeAttributes(elms, 'data-html-20');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$h.removeAttributes(elms, 'data-html-21');
+        dom$j.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$h.removeAttributes(elms, 'data-html-21');
+        dom$j.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-22]');
-        dom$h.removeAttributes(elms, 'data-html-22');
+        dom$j.removeAttributes(elms, 'data-html-22');
         elms = tmp.querySelectorAll('[data-html-23]');
-        dom$h.removeAttributes(elms, 'data-html-23');
+        dom$j.removeAttributes(elms, 'data-html-23');
         elms = tmp.querySelectorAll('[data-html-24]');
-        dom$h.removeAttributes(elms, 'data-html-24');
+        dom$j.removeAttributes(elms, 'data-html-24');
         elms = tmp.querySelectorAll('[data-html-25]');
-        dom$h.removeAttributes(elms, 'data-html-25');
+        dom$j.removeAttributes(elms, 'data-html-25');
       }
 
       html = tmp.innerHTML.trim();
@@ -22045,7 +22049,7 @@ _extends(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
-const dom$g = new Dom();
+const dom$i = new Dom();
 
 class Select {
   constructor(dropDown) {
@@ -22070,14 +22074,14 @@ class Select {
       this.toggle(false);
       dropDown.dispatchEvent(new Event('change'));
       toggler.focus();
-      let elms = dom$g.elementChildren(menu);
+      let elms = dom$i.elementChildren(menu);
       elms.forEach(elm => {
-        dom$g.removeClass(elm, 'selected');
+        dom$i.removeClass(elm, 'selected');
       });
       let optionselected = menu.querySelector('[data-value="' + val + '"]');
 
       if (optionselected) {
-        dom$g.addClass(optionselected, 'selected');
+        dom$i.addClass(optionselected, 'selected');
       }
     };
 
@@ -22132,7 +22136,7 @@ class Select {
         let optionselected = menu.querySelector('[data-value="' + this.value + '"]');
 
         if (optionselected) {
-          dom$g.addClass(optionselected, 'selected');
+          dom$i.addClass(optionselected, 'selected');
           optionselected.focus();
         }
 
@@ -55578,424 +55582,6 @@ class Element$1 {
 
 }
 
-class RowTool {
-  constructor(builder) {
-    this.builder = builder;
-    const util = this.builder.util;
-    this.util = util;
-    const builderStuff = this.builder.builderStuff;
-    const dom = this.builder.dom;
-    this.dom = dom;
-    this.grid = new Grid(builder);
-    let rowMore = builderStuff.querySelector('.rowmore');
-    let htmlbutton = '';
-    if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
-                <span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
-            </button>`;
-
-    if (!rowMore) {
-      let html = `<div class="is-pop rowmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div style="display:flex;flex-flow:wrap;">
-                    <button type="button" title="${util.out('Move Up')}" class="row-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
-                    <button type="button" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
-                    <button type="button" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
-                    ${htmlbutton}
-                </div>
-            </div>`;
-      dom.appendHtml(builderStuff, html);
-      rowMore = builderStuff.querySelector('.rowmore');
-      let elm = rowMore.querySelector('.row-up');
-      if (elm) dom.addEventListener(elm, 'click', () => {
-        this.grid.moveRowUp(); // util.clearControls();
-      });
-      elm = rowMore.querySelector('.row-down');
-      if (elm) dom.addEventListener(elm, 'click', () => {
-        this.grid.moveRowDown(); // util.clearControls();
-      });
-      elm = rowMore.querySelector('.row-duplicate');
-      if (elm) dom.addEventListener(elm, 'click', () => {
-        this.grid.duplicateRow(); // this.rowMore.style.display = '';
-
-        util.hidePop(rowMore); //Hide Column tool (new!)
-
-        util.hideColumnTool();
-        util.clearControls();
-      });
-      elm = rowMore.querySelector('.row-html');
-      if (elm) dom.addEventListener(elm, 'click', () => {
-        // const cell = util.cellSelected();
-        // if(!cell) return;
-        let row;
-        let cell = util.cellSelected();
-
-        if (cell) {
-          row = cell.parentNode;
-        } else {
-          row = util.rowSelected();
-        }
-
-        if (!row) return;
-        const htmlutil = new HtmlUtil(builder);
-        htmlutil.view('row');
-      });
-    }
-
-    this.rowMore = rowMore; // // Click anywhere will hide Column tool
-    // document.addEventListener('mousedown', (e) => {
-    //     e = e || window.event;
-    //     var target = e.target || e.srcElement;  
-    //     if(rowMore.style.display === 'flex'){
-    //         let a = dom.parentsHasClass(target, 'rowmore');
-    //         let b = dom.parentsHasClass(target, 'row-more');
-    //         if(a||b) {
-    //             return;
-    //         }
-    //         else {
-    //             // rowMore.style.display = '';
-    //             util.hidePop(rowMore);
-    //         }
-    //     }
-    // });
-  }
-
-  render(row) {
-    const dom = this.dom;
-    const util = this.builder.util;
-    const builderStuff = this.builder.builderStuff;
-    let rowMore = this.rowMore;
-    let rowtool = row.querySelector('.is-row-tool');
-
-    if (!rowtool) {
-      let html = `<div class="is-tool is-row-tool">
-                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-            </div>
-            <div class="is-tool is-col-tool">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-            </div>
-            `;
-      dom.appendHtml(row, html);
-      rowtool = row.querySelector('.is-row-tool'); // Prepare for tooltip
-
-      let elms = rowtool.querySelectorAll('[title]');
-      Array.prototype.forEach.call(elms, elm => {
-        elm.setAttribute('data-title', elm.getAttribute('title'));
-
-        if (!this.builder.iframe) {
-          this.builder.tooltip.set(elm, 5, 3);
-        } else {
-          this.builder.tooltip.set(elm, 5, 3, true);
-        }
-      });
-      let coltool = row.querySelector('.is-col-tool'); // Prepare for tooltip
-
-      elms = coltool.querySelectorAll('[title]');
-      Array.prototype.forEach.call(elms, elm => {
-        elm.setAttribute('data-title', elm.getAttribute('title'));
-
-        if (!this.builder.iframe) {
-          this.builder.tooltip.set(elm, 5, 3);
-        } else {
-          this.builder.tooltip.set(elm, 5, 3, true);
-        }
-      }); // Check for backward compatibility
-
-      let marginLeft = window.getComputedStyle(coltool, null).getPropertyValue('margin-left');
-
-      if (parseInt(marginLeft) === 0) {
-        this.builder.backwardCompatible();
-      }
-
-      const btnCellAdd = coltool.querySelector('.cell-add');
-      if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
-        let cell = util.cellSelected();
-        if (!cell) return;
-        let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
-        let tabs = quickadd.querySelector('.is-pop-tabs');
-        tabs.style.display = 'flex';
-        let top, left;
-
-        if (!this.builder.iframe) {
-          top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
-          left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
-        } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
-          left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
-        } // quickadd.style.display = 'flex';
-
-
-        util.showPop(quickadd, false, btnCellAdd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-        //const h = quickadd.offsetHeight;
-
-        quickadd.style.top = top + 35 + 'px';
-        quickadd.style.left = left + 'px';
-        dom.removeClass(quickadd, 'arrow-bottom');
-        dom.removeClass(quickadd, 'arrow-left');
-        dom.removeClass(quickadd, 'arrow-right');
-        dom.removeClass(quickadd, 'center');
-        dom.removeClass(quickadd, 'right');
-        dom.addClass(quickadd, 'arrow-top');
-        dom.addClass(quickadd, 'left');
-        let val = quickadd.querySelector('.active').getAttribute('data-value');
-
-        if (val === 'left') {
-          quickadd.setAttribute('data-mode', 'cell-left');
-        } else {
-          quickadd.setAttribute('data-mode', 'cell-right');
-        }
-      });
-      const btnCellMore = coltool.querySelector('.cell-more');
-      if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
-        let cell = util.cellSelected();
-        if (!cell) return;
-        let top, left;
-
-        if (!this.builder.iframe) {
-          top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
-          left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
-        } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnCellMore.getBoundingClientRect().top + adjY;
-          left = btnCellMore.getBoundingClientRect().left + adjX;
-        }
-
-        const columnMore = builderStuff.querySelector('.columnmore'); // columnMore.style.display = 'flex';
-
-        util.showPop(columnMore, false, btnCellMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-        //const h = columnMore.offsetHeight;
-
-        columnMore.style.top = top + 35 + 'px';
-        columnMore.style.left = left - 7 + 'px';
-        dom.removeClass(columnMore, 'arrow-bottom');
-        dom.removeClass(columnMore, 'arrow-left');
-        dom.removeClass(columnMore, 'arrow-right');
-        dom.removeClass(columnMore, 'center');
-        dom.removeClass(columnMore, 'right');
-        dom.addClass(columnMore, 'arrow-top');
-        dom.addClass(columnMore, 'left');
-        const btnCellLocking = columnMore.querySelector('.cell-locking');
-
-        if (cell.hasAttribute('data-noedit')) {
-          dom.addClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>';
-        } else {
-          dom.removeClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock-off"></use></svg>';
-        }
-      });
-      const btnCellRemove = coltool.querySelector('.cell-remove');
-      if (btnCellRemove) dom.addEventListener(btnCellRemove, 'click', () => {
-        const grid = new Grid(this.builder);
-        grid.removeColumn();
-        util.clearControls();
-      });
-      let btnGridEditor = rowtool.querySelector('.row-grideditor');
-      if (btnGridEditor) dom.addEventListener(btnGridEditor, 'click', () => {
-        const grideditor = builderStuff.querySelector('.grideditor');
-
-        if (dom.hasClass(grideditor, 'active')) {
-          dom.removeClass(grideditor, 'active');
-          const builders = document.querySelectorAll(this.builder.opts.container);
-          Array.prototype.forEach.call(builders, builder => {
-            builder.removeAttribute('grideditor');
-          });
-        } else {
-          // dom.addClass(grideditor, 'active');
-          this.util.showModal(grideditor, false, () => {
-            btnGridEditor.removeAttribute('data-focus');
-            btnGridEditor.focus();
-          });
-          btnGridEditor.setAttribute('data-focus', true);
-          const builders = document.querySelectorAll(this.builder.opts.container);
-          Array.prototype.forEach.call(builders, builder => {
-            builder.setAttribute('grideditor', '');
-          }); // Grid Editor Status
-          // On/off outline button
-
-          const btnGridOutline = grideditor.querySelector('.grid-outline');
-          const container = document.querySelector(this.builder.opts.container); // get one
-
-          if (container.hasAttribute('gridoutline')) {
-            dom.addClass(btnGridOutline, 'on');
-          } else {
-            dom.removeClass(btnGridOutline, 'on');
-          } // On/off lock button
-
-
-          const btnCellLocking = grideditor.querySelector('.cell-locking');
-          let cell = util.cellSelected();
-
-          if (cell) {
-            if (cell.hasAttribute('data-noedit')) {
-              dom.addClass(btnCellLocking, 'on');
-            } else {
-              dom.removeClass(btnCellLocking, 'on');
-            }
-          } else {
-            dom.removeClass(btnCellLocking, 'on');
-          }
-        }
-      });
-      const btnMore = rowtool.querySelector('.row-more');
-      if (btnMore) dom.addEventListener(btnMore, 'click', () => {
-        let row;
-        let cell = util.cellSelected();
-
-        if (cell) {
-          row = cell.parentNode;
-        } else {
-          row = util.rowSelected();
-        }
-
-        if (!row) return; //Change to row selection
-
-        dom.removeClass(row, 'row-outline'); //Hide Column tool (new!)
-
-        util.hideColumnTool(); // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
-        // const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
-
-        let top, left;
-
-        if (!this.builder.iframe) {
-          top = btnMore.getBoundingClientRect().top + window.pageYOffset;
-          left = btnMore.getBoundingClientRect().left + window.pageXOffset;
-        } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnMore.getBoundingClientRect().top + adjY;
-          left = btnMore.getBoundingClientRect().left + adjX;
-        } // rowMore.style.display = 'flex';
-
-
-        util.showPop(rowMore, false, btnMore); //const w = rowMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-        //const h = rowMore.offsetHeight;
-
-        rowMore.style.top = top - 8 + 'px';
-        dom.removeClass(rowMore, 'arrow-bottom');
-        dom.removeClass(rowMore, 'arrow-left');
-        dom.removeClass(rowMore, 'arrow-right');
-        dom.removeClass(rowMore, 'center');
-        dom.removeClass(rowMore, 'right');
-        dom.removeClass(rowMore, 'left');
-
-        if (this.builder.opts.rowTool === 'right') {
-          rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
-          dom.addClass(rowMore, 'arrow-right');
-          dom.addClass(rowMore, 'left');
-        } else {
-          rowMore.style.left = left + 35 + 'px';
-          dom.addClass(rowMore, 'arrow-left');
-          dom.addClass(rowMore, 'left');
-        }
-
-        let btnRowHtml = rowMore.querySelector('.row-html');
-        let btnRowDuplicate = rowMore.querySelector('.row-duplicate');
-
-        if (row.querySelector('[data-html]')) {
-          if (btnRowHtml) btnRowHtml.style.display = 'none';
-          if (btnRowDuplicate) btnRowDuplicate.style.display = 'none';
-        } else {
-          if (btnRowHtml) btnRowHtml.style.display = '';
-          if (btnRowDuplicate) btnRowDuplicate.style.display = '';
-        }
-      });
-      let elm = rowtool.querySelector('.row-remove');
-      if (elm) dom.addEventListener(elm, 'click', () => {
-        this.grid.removeRow();
-        util.clearControls();
-      });
-    }
-  }
-
-}
-
-class RowAddTool {
-  constructor(builder) {
-    this.builder = builder;
-    const dom = this.builder.dom;
-    this.dom = dom;
-  }
-
-  render(row) {
-    const dom = this.dom;
-    const util = this.builder.util;
-    const quickadd = renderQuickAdd(this.builder);
-    let rowaddtool = row.querySelector('.is-rowadd-tool');
-
-    if (!rowaddtool) {
-      const html = `<div class="is-rowadd-tool" style="height:0">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" title="${util.out('Add')}" style="outline:none;line-height:1;margin:0;padding:0;cursor:pointer;background-color:rgba(255,255,255,0.9);"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:17px;height:17px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-            </div>`;
-      dom.appendHtml(row, html);
-      rowaddtool = row.querySelector('.is-rowadd-tool'); // Prepare for tooltip
-
-      let elms = rowaddtool.querySelectorAll('[title]');
-      Array.prototype.forEach.call(elms, elm => {
-        elm.setAttribute('data-title', elm.getAttribute('title'));
-
-        if (!this.builder.iframe) {
-          this.builder.tooltip.set(elm, 5, 3);
-        } else {
-          this.builder.tooltip.set(elm, 5, 3, true);
-        }
-      });
-    }
-
-    let btnRowAdd = rowaddtool.querySelector('button');
-    dom.addEventListener(btnRowAdd, 'click', () => {
-      let tabs = quickadd.querySelector('.is-pop-tabs');
-      tabs.style.display = 'none';
-      const viewportHeight = window.innerHeight;
-      let top, left;
-
-      if (!this.builder.iframe) {
-        top = btnRowAdd.getBoundingClientRect().top;
-        left = btnRowAdd.getBoundingClientRect().left;
-      } else {
-        let adjY = this.builder.iframe.getBoundingClientRect().top;
-        let adjX = this.builder.iframe.getBoundingClientRect().left;
-        top = btnRowAdd.getBoundingClientRect().top + adjY;
-        left = btnRowAdd.getBoundingClientRect().left + adjX;
-      } // quickadd.style.display = 'flex';
-
-
-      util.showPop(quickadd, false, btnRowAdd);
-      const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-
-      const h = quickadd.offsetHeight;
-
-      if (viewportHeight - top > h) {
-        quickadd.style.top = top + window.pageYOffset + 27 + 'px';
-        quickadd.style.left = left - w / 2 + 7 + 'px';
-        dom.removeClass(quickadd, 'arrow-bottom');
-        dom.removeClass(quickadd, 'arrow-right');
-        dom.removeClass(quickadd, 'arrow-left');
-        dom.removeClass(quickadd, 'center');
-        dom.addClass(quickadd, 'arrow-top');
-        dom.addClass(quickadd, 'center');
-      } else {
-        quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
-        quickadd.style.left = left - w / 2 + 7 + 'px';
-        dom.removeClass(quickadd, 'arrow-top');
-        dom.removeClass(quickadd, 'arrow-right');
-        dom.removeClass(quickadd, 'arrow-left');
-        dom.removeClass(quickadd, 'center');
-        dom.addClass(quickadd, 'arrow-bottom');
-        dom.addClass(quickadd, 'center');
-      }
-
-      quickadd.setAttribute('data-mode', 'row');
-      return false;
-    });
-  }
-
-}
-
 class Modal {
   constructor(opts = {}) {
     let defaults = {
@@ -57781,6 +57367,939 @@ var parseGradient = function (regExpLib, input) {
   return result;
 };
 
+class RowTool {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    this.util = util;
+    const builderStuff = this.builder.builderStuff;
+    const dom = this.builder.dom;
+    this.dom = dom;
+    this.grid = new Grid(builder);
+    let rowMore = builderStuff.querySelector('.rowmore');
+    let htmlbutton = '';
+    if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
+                <span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
+            </button>`;
+
+    if (!rowMore) {
+      let html = `<div class="is-pop rowmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div style="display:flex;flex-flow:wrap;">
+                    <button type="button" title="${util.out('Move Up')}" class="row-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
+                    <button type="button" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
+                    <button type="button" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
+                    ${htmlbutton}
+                    <div class="is-separator"></div>
+                    <button type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
+                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
+                </div>
+            </div>
+            
+            <div class="is-modal rowsettings" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-content">
+                    <div class="is-modal-bar is-draggable">
+                        ${util.out('Row Settings')}
+                        <button class="is-modal-close" title="${util.out('Close')}" tabindex="-1">&#10005;</button>
+                    </div>
+
+                    <div style="padding:0;margin-top:35px;">
+
+                        <div class="is-tabs" data-group="rowsettings">
+                            <a title="${util.out('General')}" id="tabRowGeneral" href="#" data-content="divRowGeneral" class="active">${util.out('General')}</a>
+                            <a title="${util.out('More')}" id="tabRowMore" href="#" data-content="divRowMore">${util.out('More')}</a>
+                        </div>
+                        <div id="divRowGeneral" class="is-tab-content active" data-group="rowsettings" style="display:flex" tabindex="-1">
+                        
+                            <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                            <div style="display:flex;">
+                                <button title="${util.out('Background Color')}" class="input-row-bgcolor is-btn-color" style="margin-right:15px"></button>
+                                <button title="${util.out('Gradient')}" class="input-row-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                            </div>
+
+                            <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
+                            <div>
+                                <div class="cell-bgimage-preview"></div>
+                                <div style="display: flex">
+                                    <button title="${util.out('Image')}" class="input-cell-bgimage">
+                                        <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
+                                        <span>${util.out('Image')}</span>
+                                    </button>
+                                    <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                                    <button title="${util.out('Remove')}" class="input-row-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                                    <button title="${util.out('Adjust')}" class="input-row-bgimageadjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
+                                </div>
+                            </div>
+
+                            <div style="padding:30px 0 10px;">
+                                <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="is-separator"></div>
+                         
+                            <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
+                                <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
+                                </button>
+                                <button title="${util.out('Tablet')}" class="input-device" 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-device" 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 style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
+                            <div class="div-visibility" style="display:flex;">
+                                <button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
+                                    <span>${util.out('Visible')}</span>
+                                </button>
+                                <button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
+                                    <span>${util.out('Hidden')}</span>
+                                </button>
+                            </div>
+
+                        </div>
+
+                        <div id="divRowMore" class="is-tab-content" data-group="rowsettings" tabindex="-1">
+
+                            <label for="inpRowId">${util.out('Add Row ID')}:</label>
+                            <div>
+                                <input id="inpRowId" class="input-row-id" type="text" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)" style="height:38px">
+                            </div>
+        
+                            <label for="inpRowCssClasses" style="padding:20px 0 3px;">${util.out('Add Css Classes')}:</label>
+                            <div>
+                                <input id="inpRowCssClasses" class="input-row-classes" type="text" style="height:38px">
+                            </div>
+
+                        </div>
+                    
+                    </div>
+                        
+                </div>
+            </div>
+            
+            `;
+      dom.appendHtml(builderStuff, html);
+      rowMore = builderStuff.querySelector('.rowmore');
+      const rowSettings = builderStuff.querySelector('.is-modal.rowsettings');
+      const imageSource = document.querySelector('.is-modal.imagesource');
+      const imageAdjust = document.querySelector('.is-modal.imageadjust');
+      const imageAdjust2 = document.querySelector('.is-modal.imageadjust2');
+      this.rowSettings = rowSettings;
+      this.imageSource = imageSource;
+      this.imageAdjust = imageAdjust;
+      this.imageAdjust2 = imageAdjust2;
+      this.divRowGeneral = builderStuff.querySelector('#divRowGeneral'); // Open Row Settings
+
+      let elm = rowMore.querySelector('.row-settings');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        const row = this.rowOverlay();
+        if (!row) return;
+        this.readRowStyles(row); //save selection
+
+        util.saveSelection();
+        util.showModal(rowSettings, false, () => {
+          let rtetool = builderStuff.querySelector('.is-rte-tool');
+
+          if (rtetool.style.display === 'flex') {
+            // means text selection
+            util.restoreSelection();
+          }
+        }); // this.rowMore.style.display = '';
+
+        util.hidePop(this.rowMore);
+      }); // Row Background color
+
+      let btnRowBgColor = rowSettings.querySelector('.input-row-bgcolor');
+      btnRowBgColor.addEventListener('click', e => {
+        this.builder.uo.saveForUndo(true); // checkLater = true
+
+        let elm = e.target;
+        this.builder.colorPicker.open(color => {
+          const row = this.rowOverlay();
+          if (!row) return;
+          row.style.backgroundColor = color;
+          elm.style.backgroundColor = color; // preview
+          //Trigger Change event
+
+          this.builder.opts.onChange();
+        }, rowSettings.querySelector('.input-row-bgcolor').style.backgroundColor, () => {
+          btnRowBgColor.removeAttribute('data-focus');
+          btnRowBgColor.focus();
+        });
+        btnRowBgColor.setAttribute('data-focus', true);
+      }); // Row Background Image
+
+      const btnRowBgImage = rowSettings.querySelector('.input-cell-bgimage');
+      if (btnRowBgImage) dom.addEventListener(btnRowBgImage, 'click', () => {
+        const row = this.rowOverlay();
+        if (!row) return; //Get current value
+
+        let imgUrl = '';
+
+        if (row.style.backgroundImage) {
+          if (row.style.backgroundImage.indexOf('url(') !== -1) {
+            imgUrl = row.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+          }
+        }
+
+        this.builder.colTool.openImagePicker(imgUrl, url => {
+          const row = this.rowOverlay();
+          if (!row) return;
+          this.builder.uo.saveForUndo();
+          row.style.backgroundImage = `url("${url}")`;
+          row.style.backgroundSize = 'cover';
+          row.style.backgroundRepeat = 'no-repeat';
+          const div = rowSettings.querySelector('.cell-bgimage-preview');
+          const btnImageAdjust = this.rowSettings.querySelector('.input-row-bgimageadjust');
+          const btnImageRemove = this.rowSettings.querySelector('.input-row-bgremove');
+          btnImageAdjust.style.display = 'none';
+          btnImageRemove.style.display = 'none';
+
+          if (url !== '') {
+            div.innerHTML = `<img src="${url}">`;
+            btnImageAdjust.style.display = 'flex';
+            btnImageRemove.style.display = 'flex';
+          } else {
+            div.innerHTML = '';
+          } //Trigger Change event
+
+
+          this.builder.opts.onChange();
+        }, btnRowBgImage);
+      }); // Row Background Image Adjust
+
+      const btnImageAdjust = rowSettings.querySelector('.input-row-bgimageadjust');
+      if (btnImageAdjust) dom.addEventListener(btnImageAdjust, 'click', () => {
+        const row = this.rowOverlay();
+        if (!row) return;
+        this.builder.colTool.openImageAdjust(row, btnImageAdjust);
+      });
+      elm = rowSettings.querySelector('.input-row-bgremove');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        const row = this.rowOverlay();
+        if (!row) return;
+        this.builder.uo.saveForUndo();
+        row.style.backgroundImage = '';
+        row.style.backgroundSize = '';
+        row.style.backgroundRepeat = '';
+        row.style.backgroundPosition = '';
+        const div = rowSettings.querySelector('.cell-bgimage-preview');
+        const btnImageAdjust = this.rowSettings.querySelector('.input-row-bgimageadjust');
+        const btnImageRemove = this.rowSettings.querySelector('.input-row-bgremove');
+        btnImageAdjust.style.display = 'none';
+        btnImageRemove.style.display = 'none';
+        div.innerHTML = ''; //Trigger Change event
+
+        this.builder.opts.onChange();
+      }); // Row Background Image Open Asset
+
+      if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
+        this.divRowGeneral.querySelector('.input-select').style.display = 'none';
+      }
+
+      const btnRowBgImageOpenAsset = this.divRowGeneral.querySelector('.input-select');
+      this.builder.renderSelectAsset(btnRowBgImageOpenAsset, 'image', url => {
+        const row = this.rowOverlay();
+        if (!row) return;
+        this.builder.uo.saveForUndo();
+        row.style.backgroundImage = `url("${url}")`;
+        row.style.backgroundSize = 'cover';
+        row.style.backgroundRepeat = 'no-repeat';
+        const div = rowSettings.querySelector('.cell-bgimage-preview');
+        const btnImageAdjust = this.rowSettings.querySelector('.input-row-bgimageadjust');
+        const btnImageRemove = this.rowSettings.querySelector('.input-row-bgremove');
+        btnImageAdjust.style.display = 'none';
+        btnImageRemove.style.display = 'none';
+
+        if (url !== '') {
+          div.innerHTML = `<img src="${url}">`;
+          btnImageAdjust.style.display = 'flex';
+          btnImageRemove.style.display = 'flex';
+        } else {
+          div.innerHTML = '';
+        } //Trigger Change event
+
+
+        this.builder.opts.onChange();
+      }); // Background gradient
+
+      const gradientPicker = new GradientPicker({
+        colors: this.builder.colors,
+        gradientcolors: this.builder.opts.gradientcolors,
+        lang: this.builder.opts.lang
+      });
+      let btnRowGradient = rowSettings.querySelector('.input-row-gradient');
+      btnRowGradient.addEventListener('click', () => {
+        this.builder.uo.saveForUndo(true); // checkLater = true
+
+        const row = this.rowOverlay();
+        if (!row) return;
+        gradientPicker.open(row, () => {
+          const btnImageAdjust = this.rowSettings.querySelector('.input-row-bgimageadjust');
+          btnImageAdjust.style.display = 'none';
+          const btnImageRemove = this.rowSettings.querySelector('.input-row-bgremove');
+          btnImageRemove.style.display = 'none';
+          const div = this.rowSettings.querySelector('.cell-bgimage-preview');
+          div.innerHTML = '';
+          const inpSrc = this.imageSource.querySelector('.input-src');
+          inpSrc.value = ''; //Trigger Change event
+
+          this.builder.opts.onChange();
+        }, isChanged => {
+
+          btnRowGradient.removeAttribute('data-focus');
+          btnRowGradient.focus();
+        });
+        btnRowGradient.setAttribute('data-focus', true);
+      });
+      const chkRowGrayscale = rowSettings.querySelector('.chk-row-grayscale');
+      chkRowGrayscale.addEventListener('click', () => {
+        this.builder.uo.saveForUndo();
+        const row = this.rowOverlay();
+        if (!row) return;
+
+        if (chkRowGrayscale.checked) {
+          row.style.filter = 'grayscale(1)';
+        } else {
+          if (row.style.filter) {
+            row.style.filter = row.style.filter.replace('grayscale(1)', '');
+          }
+        } //Trigger Change event
+
+
+        this.builder.opts.onChange();
+      }); // Responsive Visibility
+
+      let btns = this.rowSettings.querySelectorAll('.input-device');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          let row = util.rowSelected();
+          if (!row) return;
+          let elms = this.rowSettings.querySelectorAll('.input-device');
+          elms.forEach(elm => {
+            elm.classList.remove('on');
+          });
+          btn.classList.add('on');
+          this.realtimeVisibility(row);
+        });
+      });
+      let btnVisible = this.rowSettings.querySelector('.input-visible');
+      let btnHidden = this.rowSettings.querySelector('.input-hidden');
+      btnVisible.addEventListener('click', () => {
+        let row = util.rowSelected();
+        if (!row) return;
+        row.classList.remove('hideonmobile');
+        let divTarget = this.rowSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          row.classList.remove('xs-hidden');
+        } else if (target === 'sm') {
+          row.classList.remove('sm-hidden');
+        } else if (target === '') {
+          row.classList.remove('desktop-hidden');
+        }
+
+        btnVisible.classList.add('on');
+        btnHidden.classList.remove('on');
+      });
+      btnHidden.addEventListener('click', () => {
+        let row = util.rowSelected();
+        if (!row) return;
+        row.classList.remove('hideonmobile');
+        let divTarget = this.rowSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          row.classList.add('xs-hidden');
+        } else if (target === 'sm') {
+          row.classList.add('sm-hidden');
+        } else if (target === '') {
+          row.classList.add('desktop-hidden');
+        }
+
+        btnVisible.classList.remove('on');
+        btnHidden.classList.add('on');
+      }); //More
+
+      let inpRowId = rowSettings.querySelector('.input-row-id');
+      inpRowId.addEventListener('change', () => {
+        let row = util.rowSelected();
+        if (!row) return;
+        this.builder.uo.saveForUndo();
+
+        if (inpRowId.value !== '') {
+          row.setAttribute('id', inpRowId.value);
+        } else {
+          row.removeAttribute('id');
+        } //Trigger Change event
+
+
+        this.builder.opts.onChange();
+      });
+      let inpRowCssClasses = rowSettings.querySelector('.input-row-classes');
+      inpRowCssClasses.addEventListener('change', () => {
+        let row = util.rowSelected();
+        if (!row) return;
+        this.builder.uo.saveForUndo();
+        let arrCurrentClasses = [];
+        let currentClasses = row.getAttribute('data-class');
+        if (currentClasses) arrCurrentClasses = currentClasses.split(' ');
+        let arrNewClasses = [];
+        let newClasses = inpRowCssClasses.value;
+        arrNewClasses = newClasses.split(' ');
+        arrCurrentClasses.forEach(item => {
+          if (!arrNewClasses.includes(item)) {
+            row.classList.remove(item);
+          }
+        });
+        arrNewClasses.forEach(item => {
+          if (item !== '') row.classList.add(item);
+        }); // save
+
+        row.setAttribute('data-class', newClasses);
+        if (row.getAttribute('data-class') === '') row.removeAttribute('data-class'); //Trigger Change event
+
+        this.builder.opts.onChange();
+      }); //-----------------
+
+      elm = rowMore.querySelector('.row-up');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        this.grid.moveRowUp(); // util.clearControls();
+      });
+      elm = rowMore.querySelector('.row-down');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        this.grid.moveRowDown(); // util.clearControls();
+      });
+      elm = rowMore.querySelector('.row-duplicate');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        this.grid.duplicateRow(); // this.rowMore.style.display = '';
+
+        util.hidePop(rowMore); //Hide Column tool (new!)
+
+        util.hideColumnTool();
+        util.clearControls();
+      });
+      elm = rowMore.querySelector('.row-html');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        // const cell = util.cellSelected();
+        // if(!cell) return;
+        let row;
+        let cell = util.cellSelected();
+
+        if (cell) {
+          row = cell.parentNode;
+        } else {
+          row = util.rowSelected();
+        }
+
+        if (!row) return;
+        const htmlutil = new HtmlUtil(builder);
+        htmlutil.view('row');
+      }); // Lock/Unlock Row
+
+      const btnRowLocking = rowMore.querySelector('.row-locking');
+      if (btnRowLocking) dom.addEventListener(btnRowLocking, 'click', e => {
+        let row = util.rowSelected();
+        if (!row) return;
+        let currentLocking = false;
+        let elms = row.querySelectorAll('[data-noedit]');
+        elms.forEach(elm => {
+          if (!elm.hasAttribute('data-html')) {
+            currentLocking = true;
+          }
+        });
+
+        if (!currentLocking) {
+          Array.from(row.children).map(cell => {
+            if (cell.classList.contains('is-row-tool')) return;
+            if (cell.classList.contains('is-col-tool')) return;
+            if (cell.classList.contains('is-rowadd-tool')) return;
+            if (cell.classList.contains('is-row-overlay')) return;
+            cell.setAttribute('data-noedit', '');
+            cell.contentEditable = false;
+            this.util.clearActiveElement(true);
+            this.builder.colTool.showHideLockIndicator(cell);
+            this.builder.element.applyBehavior(cell);
+          });
+          dom.addClass(btnRowLocking, 'on');
+        } else {
+          Array.from(row.children).map(cell => {
+            if (cell.classList.contains('is-row-tool')) return;
+            if (cell.classList.contains('is-col-tool')) return;
+            if (cell.classList.contains('is-rowadd-tool')) return;
+            if (cell.classList.contains('is-row-overlay')) return;
+            cell.removeAttribute('data-noedit');
+            cell.contentEditable = true;
+            this.builder.colTool.showHideLockIndicator(cell);
+            this.builder.element.applyBehavior(cell);
+          });
+          dom.removeClass(btnRowLocking, 'on');
+        }
+
+        util.hidePop(rowMore);
+        e.preventDefault();
+      });
+    }
+
+    this.rowMore = rowMore; // // Click anywhere will hide Column tool
+    // document.addEventListener('mousedown', (e) => {
+    //     e = e || window.event;
+    //     var target = e.target || e.srcElement;  
+    //     if(rowMore.style.display === 'flex'){
+    //         let a = dom.parentsHasClass(target, 'rowmore');
+    //         let b = dom.parentsHasClass(target, 'row-more');
+    //         if(a||b) {
+    //             return;
+    //         }
+    //         else {
+    //             // rowMore.style.display = '';
+    //             util.hidePop(rowMore);
+    //         }
+    //     }
+    // });
+  }
+
+  realtimeVisibility(row) {
+    let divTarget = this.rowSettings.querySelector('.div-target');
+    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);
+  }
+
+  render(row) {
+    const dom = this.dom;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    let rowMore = this.rowMore;
+    let rowtool = row.querySelector('.is-row-tool');
+
+    if (!rowtool) {
+      let html = `<div class="is-tool is-row-tool">
+                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+            </div>
+            <div class="is-tool is-col-tool">
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+            </div>
+            `;
+      dom.appendHtml(row, html);
+      rowtool = row.querySelector('.is-row-tool'); // Prepare for tooltip
+
+      let elms = rowtool.querySelectorAll('[title]');
+      Array.prototype.forEach.call(elms, elm => {
+        elm.setAttribute('data-title', elm.getAttribute('title'));
+
+        if (!this.builder.iframe) {
+          this.builder.tooltip.set(elm, 5, 3);
+        } else {
+          this.builder.tooltip.set(elm, 5, 3, true);
+        }
+      });
+      let coltool = row.querySelector('.is-col-tool'); // Prepare for tooltip
+
+      elms = coltool.querySelectorAll('[title]');
+      Array.prototype.forEach.call(elms, elm => {
+        elm.setAttribute('data-title', elm.getAttribute('title'));
+
+        if (!this.builder.iframe) {
+          this.builder.tooltip.set(elm, 5, 3);
+        } else {
+          this.builder.tooltip.set(elm, 5, 3, true);
+        }
+      }); // Check for backward compatibility
+
+      let marginLeft = window.getComputedStyle(coltool, null).getPropertyValue('margin-left');
+
+      if (parseInt(marginLeft) === 0) {
+        this.builder.backwardCompatible();
+      }
+
+      const btnCellAdd = coltool.querySelector('.cell-add');
+      if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
+        let tabs = quickadd.querySelector('.is-pop-tabs');
+        tabs.style.display = 'flex';
+        let top, left;
+
+        if (!this.builder.iframe) {
+          top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
+          left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
+        } else {
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+          top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
+          left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
+        } // quickadd.style.display = 'flex';
+
+
+        util.showPop(quickadd, false, btnCellAdd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        //const h = quickadd.offsetHeight;
+
+        quickadd.style.top = top + 35 + 'px';
+        quickadd.style.left = left + 'px';
+        dom.removeClass(quickadd, 'arrow-bottom');
+        dom.removeClass(quickadd, 'arrow-left');
+        dom.removeClass(quickadd, 'arrow-right');
+        dom.removeClass(quickadd, 'center');
+        dom.removeClass(quickadd, 'right');
+        dom.addClass(quickadd, 'arrow-top');
+        dom.addClass(quickadd, 'left');
+        let val = quickadd.querySelector('.active').getAttribute('data-value');
+
+        if (val === 'left') {
+          quickadd.setAttribute('data-mode', 'cell-left');
+        } else {
+          quickadd.setAttribute('data-mode', 'cell-right');
+        }
+      });
+      const btnCellMore = coltool.querySelector('.cell-more');
+      if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        let top, left;
+
+        if (!this.builder.iframe) {
+          top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
+          left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
+        } else {
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+          top = btnCellMore.getBoundingClientRect().top + adjY;
+          left = btnCellMore.getBoundingClientRect().left + adjX;
+        }
+
+        const columnMore = builderStuff.querySelector('.columnmore'); // columnMore.style.display = 'flex';
+
+        util.showPop(columnMore, false, btnCellMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        //const h = columnMore.offsetHeight;
+
+        columnMore.style.top = top + 35 + 'px';
+        columnMore.style.left = left - 7 + 'px';
+        dom.removeClass(columnMore, 'arrow-bottom');
+        dom.removeClass(columnMore, 'arrow-left');
+        dom.removeClass(columnMore, 'arrow-right');
+        dom.removeClass(columnMore, 'center');
+        dom.removeClass(columnMore, 'right');
+        dom.addClass(columnMore, 'arrow-top');
+        dom.addClass(columnMore, 'left');
+        const btnCellLocking = columnMore.querySelector('.cell-locking');
+
+        if (cell.hasAttribute('data-noedit')) {
+          dom.addClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>';
+        } else {
+          dom.removeClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock-off"></use></svg>';
+        }
+      });
+      const btnCellRemove = coltool.querySelector('.cell-remove');
+      if (btnCellRemove) dom.addEventListener(btnCellRemove, 'click', () => {
+        const grid = new Grid(this.builder);
+        grid.removeColumn();
+        util.clearControls();
+      });
+      let btnGridEditor = rowtool.querySelector('.row-grideditor');
+      if (btnGridEditor) dom.addEventListener(btnGridEditor, 'click', () => {
+        const grideditor = builderStuff.querySelector('.grideditor');
+
+        if (dom.hasClass(grideditor, 'active')) {
+          dom.removeClass(grideditor, 'active');
+          const builders = document.querySelectorAll(this.builder.opts.container);
+          Array.prototype.forEach.call(builders, builder => {
+            builder.removeAttribute('grideditor');
+          });
+        } else {
+          // dom.addClass(grideditor, 'active');
+          this.util.showModal(grideditor, false, () => {
+            btnGridEditor.removeAttribute('data-focus');
+            btnGridEditor.focus();
+          });
+          btnGridEditor.setAttribute('data-focus', true);
+          const builders = document.querySelectorAll(this.builder.opts.container);
+          Array.prototype.forEach.call(builders, builder => {
+            builder.setAttribute('grideditor', '');
+          }); // Grid Editor Status
+          // On/off outline button
+
+          const btnGridOutline = grideditor.querySelector('.grid-outline');
+          const container = document.querySelector(this.builder.opts.container); // get one
+
+          if (container.hasAttribute('gridoutline')) {
+            dom.addClass(btnGridOutline, 'on');
+          } else {
+            dom.removeClass(btnGridOutline, 'on');
+          } // On/off lock button
+
+
+          const btnCellLocking = grideditor.querySelector('.cell-locking');
+          let cell = util.cellSelected();
+
+          if (cell) {
+            if (cell.hasAttribute('data-noedit')) {
+              dom.addClass(btnCellLocking, 'on');
+            } else {
+              dom.removeClass(btnCellLocking, 'on');
+            }
+          } else {
+            dom.removeClass(btnCellLocking, 'on');
+          }
+        }
+      });
+      const btnMore = rowtool.querySelector('.row-more');
+      if (btnMore) dom.addEventListener(btnMore, 'click', () => {
+        let row;
+        let cell = util.cellSelected();
+
+        if (cell) {
+          row = cell.parentNode;
+        } else {
+          row = util.rowSelected();
+        }
+
+        if (!row) return; //Change to row selection
+
+        dom.removeClass(row, 'row-outline'); //Hide Column tool (new!)
+
+        util.hideColumnTool(); // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
+        // const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
+
+        let top, left;
+
+        if (!this.builder.iframe) {
+          top = btnMore.getBoundingClientRect().top + window.pageYOffset;
+          left = btnMore.getBoundingClientRect().left + window.pageXOffset;
+        } else {
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+          top = btnMore.getBoundingClientRect().top + adjY;
+          left = btnMore.getBoundingClientRect().left + adjX;
+        } // rowMore.style.display = 'flex';
+
+
+        util.showPop(rowMore, false, btnMore); //const w = rowMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        //const h = rowMore.offsetHeight;
+
+        rowMore.style.top = top - 8 + 'px';
+        dom.removeClass(rowMore, 'arrow-bottom');
+        dom.removeClass(rowMore, 'arrow-left');
+        dom.removeClass(rowMore, 'arrow-right');
+        dom.removeClass(rowMore, 'center');
+        dom.removeClass(rowMore, 'right');
+        dom.removeClass(rowMore, 'left');
+
+        if (this.builder.opts.rowTool === 'right') {
+          rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
+          dom.addClass(rowMore, 'arrow-right');
+          dom.addClass(rowMore, 'left');
+        } else {
+          rowMore.style.left = left + 35 + 'px';
+          dom.addClass(rowMore, 'arrow-left');
+          dom.addClass(rowMore, 'left');
+        }
+
+        let btnRowHtml = rowMore.querySelector('.row-html');
+        let btnRowDuplicate = rowMore.querySelector('.row-duplicate');
+
+        if (row.querySelector('[data-html]')) {
+          if (btnRowHtml) btnRowHtml.style.display = 'none';
+          if (btnRowDuplicate) btnRowDuplicate.style.display = 'none';
+        } else {
+          if (btnRowHtml) btnRowHtml.style.display = '';
+          if (btnRowDuplicate) btnRowDuplicate.style.display = '';
+        }
+
+        let currentLocking = false;
+        let elms = row.querySelectorAll('[data-noedit]');
+        elms.forEach(elm => {
+          if (!elm.hasAttribute('data-html')) {
+            currentLocking = true;
+          }
+        });
+        const btnRowLocking = rowMore.querySelector('.row-locking');
+
+        if (currentLocking) {
+          dom.addClass(btnRowLocking, 'on');
+        } else {
+          dom.removeClass(btnRowLocking, 'on');
+        }
+      });
+      let elm = rowtool.querySelector('.row-remove');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        this.grid.removeRow();
+        util.clearControls();
+      });
+    }
+  }
+
+  readRowStyles(row) {
+    this.util.clearActiveElement(); // Background color
+
+    let s = row.style.backgroundColor;
+    let btn = this.rowSettings.querySelector('.input-row-bgcolor');
+    if (s) btn.style.backgroundColor = s;else btn.style.backgroundColor = 'transparent';
+    let imgUrl = '';
+    const div = this.rowSettings.querySelector('.cell-bgimage-preview');
+    const btnImageAdjust = this.rowSettings.querySelector('.input-row-bgimageadjust');
+    btnImageAdjust.style.display = 'none';
+    const btnImageRemove = this.rowSettings.querySelector('.input-row-bgremove');
+    btnImageRemove.style.display = 'none';
+
+    if (row.style.backgroundImage) {
+      if (row.style.backgroundImage.indexOf('url(') !== -1) {
+        imgUrl = row.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        div.innerHTML = `<img src="${imgUrl}">`;
+        btnImageAdjust.style.display = 'flex';
+        btnImageRemove.style.display = 'flex';
+      } else {
+        div.innerHTML = '';
+      }
+    } else {
+      div.innerHTML = '';
+    }
+
+    const chkRowGrayscale = this.rowSettings.querySelector('.chk-row-grayscale');
+    chkRowGrayscale.checked = false;
+
+    if (row.style.filter) {
+      if (row.style.filter.indexOf('grayscale') !== -1) {
+        chkRowGrayscale.checked = true;
+      }
+    }
+
+    let actualRow = row.parentNode; // row is actually row overlay
+
+    this.realtimeVisibility(actualRow); //More
+
+    let inpRowId = this.rowSettings.querySelector('.input-row-id');
+    inpRowId.value = '';
+    const rowId = actualRow.getAttribute('id');
+
+    if (rowId) {
+      inpRowId.value = rowId;
+    }
+
+    let inpRowClasses = this.rowSettings.querySelector('.input-row-classes');
+    inpRowClasses.value = '';
+    const classes = actualRow.getAttribute('data-class');
+    inpRowClasses.value = classes;
+  }
+
+  rowOverlay() {
+    // let row;
+    // let cell = util.cellSelected();
+    // if(cell) {
+    //     row = cell.parentNode;  
+    // } else {
+    //     row = util.rowSelected();
+    // }
+    // if(!row) return;
+    let row = this.util.rowSelected();
+    if (!row) return false;
+    let rowOverlay = row.querySelector('.is-row-overlay');
+
+    if (!rowOverlay) {
+      this.dom.appendHtml(row, '<div class="is-row-overlay"></div>');
+      rowOverlay = row.querySelector('.is-row-overlay');
+    }
+
+    row.classList.add('relative');
+    return rowOverlay;
+  }
+
+}
+
+class RowAddTool {
+  constructor(builder) {
+    this.builder = builder;
+    const dom = this.builder.dom;
+    this.dom = dom;
+  }
+
+  render(row) {
+    const dom = this.dom;
+    const util = this.builder.util;
+    const quickadd = renderQuickAdd(this.builder);
+    let rowaddtool = row.querySelector('.is-rowadd-tool');
+
+    if (!rowaddtool) {
+      const html = `<div class="is-rowadd-tool" style="height:0">
+                <button type="button" tabindex="-1" title="${util.out('Add')}" title="${util.out('Add')}" style="outline:none;line-height:1;margin:0;padding:0;cursor:pointer;background-color:rgba(255,255,255,0.9);"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:17px;height:17px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+            </div>`;
+      dom.appendHtml(row, html);
+      rowaddtool = row.querySelector('.is-rowadd-tool'); // Prepare for tooltip
+
+      let elms = rowaddtool.querySelectorAll('[title]');
+      Array.prototype.forEach.call(elms, elm => {
+        elm.setAttribute('data-title', elm.getAttribute('title'));
+
+        if (!this.builder.iframe) {
+          this.builder.tooltip.set(elm, 5, 3);
+        } else {
+          this.builder.tooltip.set(elm, 5, 3, true);
+        }
+      });
+    }
+
+    let btnRowAdd = rowaddtool.querySelector('button');
+    dom.addEventListener(btnRowAdd, 'click', () => {
+      let tabs = quickadd.querySelector('.is-pop-tabs');
+      tabs.style.display = 'none';
+      const viewportHeight = window.innerHeight;
+      let top, left;
+
+      if (!this.builder.iframe) {
+        top = btnRowAdd.getBoundingClientRect().top;
+        left = btnRowAdd.getBoundingClientRect().left;
+      } else {
+        let adjY = this.builder.iframe.getBoundingClientRect().top;
+        let adjX = this.builder.iframe.getBoundingClientRect().left;
+        top = btnRowAdd.getBoundingClientRect().top + adjY;
+        left = btnRowAdd.getBoundingClientRect().left + adjX;
+      } // quickadd.style.display = 'flex';
+
+
+      util.showPop(quickadd, false, btnRowAdd);
+      const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+
+      const h = quickadd.offsetHeight;
+
+      if (viewportHeight - top > h) {
+        quickadd.style.top = top + window.pageYOffset + 27 + 'px';
+        quickadd.style.left = left - w / 2 + 7 + 'px';
+        dom.removeClass(quickadd, 'arrow-bottom');
+        dom.removeClass(quickadd, 'arrow-right');
+        dom.removeClass(quickadd, 'arrow-left');
+        dom.removeClass(quickadd, 'center');
+        dom.addClass(quickadd, 'arrow-top');
+        dom.addClass(quickadd, 'center');
+      } else {
+        quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
+        quickadd.style.left = left - w / 2 + 7 + 'px';
+        dom.removeClass(quickadd, 'arrow-top');
+        dom.removeClass(quickadd, 'arrow-right');
+        dom.removeClass(quickadd, 'arrow-left');
+        dom.removeClass(quickadd, 'center');
+        dom.addClass(quickadd, 'arrow-bottom');
+        dom.addClass(quickadd, 'center');
+      }
+
+      quickadd.setAttribute('data-mode', 'row');
+      return false;
+    });
+  }
+
+}
+
 class ColumnTool {
   constructor(builder) {
     this.builder = builder;
@@ -57850,6 +58369,7 @@ class ColumnTool {
                             ${this.builder.useLightbox ? `
                             <a title="${util.out('On Click')}" id="tabCellClick" href="#" data-content="divCellClick">${util.out('On Click')}</a>
                             ` : ''}
+                            <a title="${util.out('More')}" id="tabCellMore" href="#" data-content="divCellMore">${util.out('More')}</a>
                         </div>
                         <div id="divCellGeneral" class="is-tab-content active" data-group="cellsettings" style="display:flex" tabindex="-1">
                         
@@ -57869,7 +58389,7 @@ class ColumnTool {
                                     </button>
                                     <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                                     <button title="${util.out('Remove')}" class="input-cell-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
-                                    <button title="${util.out('Adjust')}" class="input-cell-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
+                                    <button title="${util.out('Adjust')}" class="input-cell-bgimageadjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
                                 </div>
                             </div>
 
@@ -58046,10 +58566,26 @@ class ColumnTool {
                             <p>${util.out('You can test the On-Click action on page if you lock the column by clicking the lock button')} <svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>.</p>
 
                         </div>
+
+                        <div id="divCellMore" class="is-tab-content" data-group="cellsettings" tabindex="-1">
+
+                            <label for="inpCellId">${util.out('Add Column ID')}:</label>
+                            <div>
+                                <input id="inpCellId" class="input-cell-id" type="text" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)" style="height:38px">
+                            </div>
+        
+                            <label for="inpCellCssClasses" style="padding:20px 0 3px;">${util.out('Add Css Classes')}:</label>
+                            <div>
+                                <input id="inpCellCssClasses" class="input-cell-classes" type="text" style="height:38px">
+                            </div>
+
+                        </div>
+
                     
                     </div>
                         
                 </div>
+                
             </div>
 
             <div class="is-modal imageadjust" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
@@ -58338,6 +58874,47 @@ class ColumnTool {
         }); // this.columnMore.style.display = '';
 
         util.hidePop(this.columnMore);
+      }); //More
+
+      let inpCellId = cellSettings.querySelector('.input-cell-id');
+      inpCellId.addEventListener('change', () => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        this.builder.uo.saveForUndo();
+
+        if (inpCellId.value !== '') {
+          cell.setAttribute('id', inpCellId.value);
+        } else {
+          cell.removeAttribute('id');
+        } //Trigger Change event
+
+
+        this.builder.opts.onChange();
+      });
+      let inpCellCssClasses = cellSettings.querySelector('.input-cell-classes');
+      inpCellCssClasses.addEventListener('change', () => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        this.builder.uo.saveForUndo();
+        let arrCurrentClasses = [];
+        let currentClasses = cell.getAttribute('data-class');
+        if (currentClasses) arrCurrentClasses = currentClasses.split(' ');
+        let arrNewClasses = [];
+        let newClasses = inpCellCssClasses.value;
+        arrNewClasses = newClasses.split(' ');
+        arrCurrentClasses.forEach(item => {
+          if (!arrNewClasses.includes(item)) {
+            cell.classList.remove(item);
+          }
+        });
+        arrNewClasses.forEach(item => {
+          if (item !== '') cell.classList.add(item);
+        }); // save
+
+        cell.setAttribute('data-class', newClasses);
+        if (cell.getAttribute('data-class') === '') cell.removeAttribute('data-class'); //Trigger Change event
+
+        this.builder.opts.onChange();
       }); // Column Background color
 
       let btnCellBgColor = cellSettings.querySelector('.input-cell-bgcolor');
@@ -58412,6 +58989,7 @@ class ColumnTool {
         cell.style.backgroundImage = '';
         cell.style.backgroundSize = '';
         cell.style.backgroundRepeat = '';
+        cell.style.backgroundPosition = '';
         const div = cellSettings.querySelector('.cell-bgimage-preview');
         const btnImageAdjust = this.cellSettings.querySelector('.input-cell-bgimageadjust');
         const btnImageRemove = this.cellSettings.querySelector('.input-cell-bgremove');
@@ -59766,7 +60344,20 @@ class ColumnTool {
       dom.addClass(btn, 'on');
     }
 
-    this.realtimeVisibility(cell);
+    this.realtimeVisibility(cell); //More
+
+    let inpCellId = this.cellSettings.querySelector('.input-cell-id');
+    inpCellId.value = '';
+    const rowId = cell.getAttribute('id');
+
+    if (rowId) {
+      inpCellId.value = rowId;
+    }
+
+    let inpCellClasses = this.cellSettings.querySelector('.input-cell-classes');
+    inpCellClasses.value = '';
+    const classes = cell.getAttribute('data-class');
+    inpCellClasses.value = classes;
   }
 
   realtimeVisibility(cell) {
@@ -59904,9 +60495,15 @@ class ColumnTool {
     inpImageHorSlider.value = 50;
     inpImageVertSlider.value = 60;
     inpImageScaleSlider.value = 0;
+
+    if (elm.classList.contains('cell-active') || elm.classList.contains('is-row-overlay')) {
+      inpImageHorSlider.value = 0;
+      inpImageVertSlider.value = 0;
+    }
+
     elm.style.backgroundPositionX = '';
     elm.style.backgroundPositionY = '';
-    elm.style.backgroundSize = ''; // Clean unused
+    elm.style.backgroundSize = 'cover'; // Clean unused
 
     elm.style.left = '';
     elm.style.top = '';
@@ -60418,7 +61015,7 @@ class ColumnTool {
 
 }
 
-const dom$f = new Dom();
+const dom$h = new Dom();
 
 class ELementStyleEditor {
   constructor(builder) {
@@ -60451,21 +61048,21 @@ class ELementStyleEditor {
                 </div>
             </div>           
             `;
-      dom$f.appendHtml(builderStuff, html);
+      dom$h.appendHtml(builderStuff, html);
       modalStyles = builderStuff.querySelector('.editstyles');
       let btn = modalStyles.querySelector('.is-modal-close');
-      dom$f.addEventListener(btn, 'click', () => {
-        dom$f.removeClass(modalStyles, 'active');
+      dom$h.addEventListener(btn, 'click', () => {
+        dom$h.removeClass(modalStyles, 'active');
         var panel = this.builderStuff.querySelector('.is-side.elementstyles'); // if all close
 
-        if (!dom$f.hasClass(panel, 'active')) {
+        if (!dom$h.hasClass(panel, 'active')) {
           let elms = document.querySelectorAll('[data-saveforundo]');
           Array.prototype.forEach.call(elms, elm => {
             elm.removeAttribute('data-saveforundo');
           });
           elms = document.querySelectorAll('.elm-inspected');
           Array.prototype.forEach.call(elms, elm => {
-            dom$f.removeClass(elm, 'elm-inspected');
+            dom$h.removeClass(elm, 'elm-inspected');
           });
         }
       });
@@ -60476,29 +61073,29 @@ class ELementStyleEditor {
 
         let bElmActive = false;
 
-        if (dom$f.hasClass(elm, 'elm-active')) {
+        if (dom$h.hasClass(elm, 'elm-active')) {
           bElmActive = true;
         }
 
         let bCellActive = false;
 
-        if (dom$f.hasClass(elm, 'elm-active')) {
+        if (dom$h.hasClass(elm, 'elm-active')) {
           bCellActive = true;
         }
 
         let bRowActive = false;
 
-        if (dom$f.hasClass(elm, 'row-active')) {
+        if (dom$h.hasClass(elm, 'row-active')) {
           bRowActive = true;
         }
 
         elm.setAttribute('class', val); //update
         //builder classes
 
-        if (bElmActive) dom$f.addClass(elm, 'elm-active');
-        if (bCellActive) dom$f.addClass(elm, 'cell-active');
-        if (bRowActive) dom$f.addClass(elm, 'row-active');
-        dom$f.addClass(elm, 'elm-inspected'); //Trigger Change event
+        if (bElmActive) dom$h.addClass(elm, 'elm-active');
+        if (bCellActive) dom$h.addClass(elm, 'cell-active');
+        if (bRowActive) dom$h.addClass(elm, 'row-active');
+        dom$h.addClass(elm, 'elm-inspected'); //Trigger Change event
 
         this.builder.opts.onChange();
       });
@@ -60514,10 +61111,10 @@ class ELementStyleEditor {
   }
 
   toggleStyleEditor() {
-    if (!dom$f.hasClass(this.modalStyles, 'active')) {
-      dom$f.addClass(this.modalStyles, 'active');
+    if (!dom$h.hasClass(this.modalStyles, 'active')) {
+      dom$h.addClass(this.modalStyles, 'active');
     } else {
-      dom$f.removeClass(this.modalStyles, 'active');
+      dom$h.removeClass(this.modalStyles, 'active');
     }
   }
 
@@ -60538,9 +61135,9 @@ class ELementStyleEditor {
 
 }
 
-const dom$e = new Dom();
+const dom$g = new Dom();
 
-class ElementBoxStyles {
+class ElementGeneralStyles {
   constructor(builder) {
     this.builder = builder;
     const util = this.builder.util;
@@ -60548,120 +61145,66 @@ class ElementBoxStyles {
     this.util = util;
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
-    let panelStuff = builderStuff.querySelector('#divElementBox');
+    let panelStuff = builderStuff.querySelector('#divElementGeneral');
     this.panelStuff = panelStuff;
     const html = `
-                <div class="is-settings">
-                    <div class="is-label">${util.out('Background Color')}:</div>
+                <div class="is-settings" style="width: 100%">
+                    <div class="is-label" style="margin:0 0 3px">${util.out('Background Color')}:</div>
                     <div>
                         <button title="${util.out('Background Color')}" class="input-elm-bgcolor is-btn-color" style="margin-right:15px"></button>
                         <button title="${util.out('Gradient')}" class="input-elm-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
                     </div>
                 </div>
 
-                <div style="margin-top: 25px;font-weight:bold;width:100%;">${util.out('Dimension')}</div>
-                
-                <div class="is-settings" style="width:110px">
-                    <div><label for="inpElmWidth">${util.out('Width')}:</label></div>
-                    <div style="display:flex">
-                        <input type="text" id="inpElmWidth" value="" style="width:45px"/>
-                        <select id="inpElmWidthUnit"">
-                            <option value="px">px</option>
-                            <option value="em">em</option>
-                            <option value="vw">vw</option>
-                            <option value="vh">vh</option>
-                            <option value="%">%</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="is-settings" style="width:110px;">
-                    <div><label for="inpElmHeight">${util.out('Height')}:</label></div>
-                    <div style="display:flex">
-                        <input type="text" id="inpElmHeight" value="" style="width:45px"/>
-                        <select id="inpElmHeightUnit"">
-                            <option value="px">px</option>
-                            <option value="em">em</option>
-                            <option value="vw">vw</option>
-                            <option value="vh">vh</option>
-                            <option value="%">%</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="is-settings" style="width:110px;">
-                    <div><label for="inpElmMaxWidth">${util.out('Max Width')}:</label></div>
-                    <div style="display:flex">
-                        <input type="text" id="inpElmMaxWidth" value="" style="width:45px"/>
-                        <select id="inpElmMaxWidthUnit"">
-                            <option value="px">px</option>
-                            <option value="em">em</option>
-                            <option value="vw">vw</option>
-                            <option value="vh">vh</option>
-                            <option value="%">%</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="is-settings" style="width:110px;">
-                    <div><label for="inpElmMaxHeight">${util.out('Max Height')}:</label></div>
-                    <div style="display:flex">
-                        <input type="text" id="inpElmMaxHeight" value="" style="width:45px"/>
-                        <select id="inpElmMaxHeightUnit"">
-                            <option value="px">px</option>
-                            <option value="em">em</option>
-                            <option value="vw">vw</option>
-                            <option value="vh">vh</option>
-                            <option value="%">%</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="is-settings" style="width:110px;">
-                    <div><label for="inpElmMinWidth">${util.out('Min Width')}:</label></div>
-                    <div style="display:flex">
-                        <input type="text" id="inpElmMinWidth" value="" style="width:45px"/>
-                        <select id="inpElmMinWidthUnit"">
-                            <option value="px">px</option>
-                            <option value="em">em</option>
-                            <option value="vw">vw</option>
-                            <option value="vh">vh</option>
-                            <option value="%">%</option>
-                        </select>
+                <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
+                <div class="is-settings" style="width: 100%">
+                    <div class="elm-bgimage-preview"></div>
+                    <div style="display: flex">
+                        <button title="${util.out('Image')}" class="input-elm-bgimage">
+                            <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
+                            <span style="margin-left: 5px;">${util.out('Image')}</span>
+                        </button>
+                        <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                        <button title="${util.out('Remove')}" class="input-elm-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                        <button title="${util.out('Adjust')}" class="input-elm-bgimageadjust" style="width:40px"><svg class="is-icon-flex" style="width:13px;height:13px;flex:none"><use xlink:href="#ion-wrench"></use></svg></button>
                     </div>
                 </div>
-                <div class="is-settings" style="width:110px;">
-                    <div><label for="inpElmMinHeight">${util.out('Min Height')}:</label></div>
-                    <div style="display:flex">
-                        <input type="text" id="inpElmMinHeight" value="" style="width:45px"/>
-                        <select id="inpElmMinHeightUnit"">
-                            <option value="px">px</option>
-                            <option value="em">em</option>
-                            <option value="vw">vw</option>
-                            <option value="vh">vh</option>
-                            <option value="%">%</option>
-                        </select>
-                    </div>
+
+                <div class="is-settings" style="padding-top:20px;width: 100%">
+                    <label class="label-elm-grayscale label-checkbox" for="chkElmGrayscale"><input id="chkElmGrayscale" class="chk-elm-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
                 </div>
-                
-                <div class="is-settings" style="width:110px;">
-                    <div>${util.out('Overflow x')}:</div>
-                    <div>
-                        <select id="inpElmOverflowX"">
-                            <option value=""></option>
-                            <option value="auto">Auto</option>
-                            <option value="hidden">Hidden</option>
-                        </select>
+
+                <div class="is-separator" style="margin-top:28px;margin-bottom:5px;"></div>
+                         
+                <div class="is-settings" style="padding-top:0;margin-top:0;width: 100%">
+                    <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
+                        <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
+                            <svg class="is-icon-flex" style="width:16px;height:16px;flex:none"><use xlink:href="#icon-device-desktop"></use></svg>
+                        </button>
+                        <button title="${util.out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
+                            <svg class="is-icon-flex" style="width:16px;height:16px;flex:none"><use xlink:href="#icon-device-tablet"></use></svg>
+                        </button>
+                        <button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
+                            <svg class="is-icon-flex" style="width:13px;height:13px;flex:none"><use xlink:href="#icon-device-mobile"></use></svg>
+                        </button>
                     </div>
-                </div>
-                <div class="is-settings" style="width:110px;">
-                    <div>${util.out('Overflow y')}:</div>
-                    <div>
-                        <select id="inpElmOverflowY"">
-                            <option value=""></option>
-                            <option value="auto">Auto</option>
-                            <option value="hidden">Hidden</option>
-                        </select>
+
+                    <div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
+                    <div class="div-visibility" style="display:flex;">
+                        <button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
+                            <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
+                            <span>${util.out('Visible')}</span>
+                        </button>
+                        <button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
+                            <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
+                            <span>${util.out('Hidden')}</span>
+                        </button>
                     </div>
                 </div>
+
+
         `;
-    dom$e.appendHtml(panelStuff, html); // Background color
+    dom$g.appendHtml(panelStuff, html); // Background color
 
     let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
     btnElmBgColor.addEventListener('click', e => {
@@ -60704,7 +61247,331 @@ class ElementBoxStyles {
         btnElmGradient.focus();
       });
       btnElmGradient.setAttribute('data-focus', true);
-    }); // Others
+    }); // Elm Background Image
+
+    const btnElmBgImage = panelStuff.querySelector('.input-elm-bgimage');
+    if (btnElmBgImage) dom$g.addEventListener(btnElmBgImage, 'click', () => {
+      const elm = this.builder.inspectedElement; //Get current value
+
+      let imgUrl = '';
+
+      if (elm.style.backgroundImage) {
+        if (elm.style.backgroundImage.indexOf('url(') !== -1) {
+          imgUrl = elm.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        }
+      }
+
+      this.builder.colTool.openImagePicker(imgUrl, url => {
+        this.builder.uo.saveForUndo();
+        const elm = this.builder.inspectedElement;
+        this.builder.uo.saveForUndo();
+        elm.style.backgroundImage = `url("${url}")`;
+        elm.style.backgroundSize = 'cover';
+        elm.style.backgroundRepeat = 'no-repeat';
+        const div = panelStuff.querySelector('.elm-bgimage-preview');
+        const btnImageAdjust = this.panelStuff.querySelector('.input-elm-bgimageadjust');
+        const btnImageRemove = this.panelStuff.querySelector('.input-elm-bgremove');
+        btnImageAdjust.style.display = 'none';
+        btnImageRemove.style.display = 'none';
+
+        if (url !== '') {
+          div.innerHTML = `<img src="${url}">`;
+          btnImageAdjust.style.display = 'flex';
+          btnImageRemove.style.display = 'flex';
+        } else {
+          div.innerHTML = '';
+        }
+
+        elementStyleEditor.refresh(); //Trigger Change event
+
+        this.builder.opts.onChange();
+      }, btnElmBgImage);
+    }); // Elm Background Image Adjust
+
+    const btnImageAdjust = panelStuff.querySelector('.input-elm-bgimageadjust');
+    if (btnImageAdjust) dom$g.addEventListener(btnImageAdjust, 'click', () => {
+      const elm = this.builder.inspectedElement;
+      this.builder.colTool.openImageAdjust(elm, btnImageAdjust);
+    });
+    const btnImageRemove = panelStuff.querySelector('.input-elm-bgremove');
+    if (btnImageRemove) dom$g.addEventListener(btnImageRemove, 'click', () => {
+      const elm = this.builder.inspectedElement;
+      this.builder.uo.saveForUndo();
+      elm.style.backgroundImage = '';
+      elm.style.backgroundSize = '';
+      elm.style.backgroundRepeat = '';
+      elm.style.backgroundPosition = '';
+      const div = panelStuff.querySelector('.elm-bgimage-preview');
+      const btnImageAdjust = this.panelStuff.querySelector('.input-elm-bgimageadjust');
+      const btnImageRemove = this.panelStuff.querySelector('.input-elm-bgremove');
+      btnImageAdjust.style.display = 'none';
+      btnImageRemove.style.display = 'none';
+      div.innerHTML = '';
+      elementStyleEditor.refresh(); //Trigger Change event
+
+      this.builder.opts.onChange();
+    }); // Elm Background Image Open Asset
+
+    if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
+      panelStuff.querySelector('.input-select').style.display = 'none';
+    }
+
+    const btnElmBgImageOpenAsset = panelStuff.querySelector('.input-select');
+    this.builder.renderSelectAsset(btnElmBgImageOpenAsset, 'image', url => {
+      const elm = this.builder.inspectedElement;
+      this.builder.uo.saveForUndo();
+      elm.style.backgroundImage = `url("${url}")`;
+      elm.style.backgroundSize = 'cover';
+      elm.style.backgroundRepeat = 'no-repeat';
+      const div = panelStuff.querySelector('.elm-bgimage-preview');
+      const btnImageAdjust = this.panelStuff.querySelector('.input-elm-bgimageadjust');
+      const btnImageRemove = this.panelStuff.querySelector('.input-elm-bgremove');
+      btnImageAdjust.style.display = 'none';
+      btnImageRemove.style.display = 'none';
+
+      if (url !== '') {
+        div.innerHTML = `<img src="${url}">`;
+        btnImageAdjust.style.display = 'flex';
+        btnImageRemove.style.display = 'flex';
+      } else {
+        div.innerHTML = '';
+      }
+
+      elementStyleEditor.refresh(); //Trigger Change event
+
+      this.builder.opts.onChange();
+    });
+    const chkElmGrayscale = panelStuff.querySelector('.chk-elm-grayscale');
+    chkElmGrayscale.addEventListener('click', () => {
+      this.builder.uo.saveForUndo();
+      const elm = this.builder.inspectedElement;
+
+      if (chkElmGrayscale.checked) {
+        elm.style.filter = 'grayscale(1)';
+      } else {
+        if (elm.style.filter) {
+          elm.style.filter = elm.style.filter.replace('grayscale(1)', '');
+        }
+      }
+
+      elementStyleEditor.refresh(); //Trigger Change event
+
+      this.builder.opts.onChange();
+    }); // Responsive Visibility
+
+    let btns = panelStuff.querySelectorAll('.input-device');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const elm = this.builder.inspectedElement;
+        let elms = panelStuff.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.realtimeVisibility(elm);
+      });
+    });
+    let btnVisible = panelStuff.querySelector('.input-visible');
+    let btnHidden = panelStuff.querySelector('.input-hidden');
+    btnVisible.addEventListener('click', () => {
+      const elm = this.builder.inspectedElement;
+      elm.classList.remove('hideonmobile');
+      let divTarget = panelStuff.querySelector('.div-target');
+      let target = this.builder.responsive.readTarget(divTarget);
+
+      if (target === 'xs') {
+        elm.classList.remove('xs-hidden');
+      } else if (target === 'sm') {
+        elm.classList.remove('sm-hidden');
+      } else if (target === '') {
+        elm.classList.remove('desktop-hidden');
+      }
+
+      btnVisible.classList.add('on');
+      btnHidden.classList.remove('on');
+    });
+    btnHidden.addEventListener('click', () => {
+      const elm = this.builder.inspectedElement;
+      elm.classList.remove('hideonmobile');
+      let divTarget = panelStuff.querySelector('.div-target');
+      let target = this.builder.responsive.readTarget(divTarget);
+
+      if (target === 'xs') {
+        elm.classList.add('xs-hidden');
+      } else if (target === 'sm') {
+        elm.classList.add('sm-hidden');
+      } else if (target === '') {
+        elm.classList.add('desktop-hidden');
+      }
+
+      btnVisible.classList.remove('on');
+      btnHidden.classList.add('on');
+    });
+  }
+
+  readElementStyles(elm) {
+    let panelStuff = this.panelStuff; // Background color
+
+    let s = elm.style.backgroundColor;
+    let btn = panelStuff.querySelector('.input-elm-bgcolor');
+    if (s) btn.style.backgroundColor = s;else btn.style.backgroundColor = 'transparent'; // Background image
+
+    let imgUrl = '';
+    const div = panelStuff.querySelector('.elm-bgimage-preview');
+    const btnImageAdjust = panelStuff.querySelector('.input-elm-bgimageadjust');
+    btnImageAdjust.style.display = 'none';
+    const btnImageRemove = panelStuff.querySelector('.input-elm-bgremove');
+    btnImageRemove.style.display = 'none';
+
+    if (elm.style.backgroundImage) {
+      if (elm.style.backgroundImage.indexOf('url(') !== -1) {
+        imgUrl = elm.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        div.innerHTML = `<img src="${imgUrl}">`;
+        btnImageAdjust.style.display = 'flex';
+        btnImageRemove.style.display = 'flex';
+      } else {
+        div.innerHTML = '';
+      }
+    } else {
+      div.innerHTML = '';
+    }
+
+    const chkRowGrayscale = panelStuff.querySelector('.chk-elm-grayscale');
+    chkRowGrayscale.checked = false;
+
+    if (elm.style.filter) {
+      if (elm.style.filter.indexOf('grayscale') !== -1) {
+        chkRowGrayscale.checked = true;
+      }
+    }
+
+    this.realtimeVisibility(elm);
+  }
+
+  realtimeVisibility(row) {
+    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);
+  }
+
+}
+
+const dom$f = new Dom();
+
+class ElementBoxStyles {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff;
+    const elementStyleEditor = new ELementStyleEditor(builder);
+    let panelStuff = builderStuff.querySelector('#divElementBox');
+    this.panelStuff = panelStuff;
+    const html = `
+                <div class="is-settings" style="width:110px">
+                    <div><label for="inpElmWidth">${util.out('Width')}:</label></div>
+                    <div style="display:flex">
+                        <input type="text" id="inpElmWidth" value="" style="width:45px"/>
+                        <select id="inpElmWidthUnit"">
+                            <option value="px">px</option>
+                            <option value="em">em</option>
+                            <option value="vw">vw</option>
+                            <option value="vh">vh</option>
+                            <option value="%">%</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="is-settings" style="width:110px;">
+                    <div><label for="inpElmHeight">${util.out('Height')}:</label></div>
+                    <div style="display:flex">
+                        <input type="text" id="inpElmHeight" value="" style="width:45px"/>
+                        <select id="inpElmHeightUnit"">
+                            <option value="px">px</option>
+                            <option value="em">em</option>
+                            <option value="vw">vw</option>
+                            <option value="vh">vh</option>
+                            <option value="%">%</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="is-settings" style="width:110px;">
+                    <div><label for="inpElmMaxWidth">${util.out('Max Width')}:</label></div>
+                    <div style="display:flex">
+                        <input type="text" id="inpElmMaxWidth" value="" style="width:45px"/>
+                        <select id="inpElmMaxWidthUnit"">
+                            <option value="px">px</option>
+                            <option value="em">em</option>
+                            <option value="vw">vw</option>
+                            <option value="vh">vh</option>
+                            <option value="%">%</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="is-settings" style="width:110px;">
+                    <div><label for="inpElmMaxHeight">${util.out('Max Height')}:</label></div>
+                    <div style="display:flex">
+                        <input type="text" id="inpElmMaxHeight" value="" style="width:45px"/>
+                        <select id="inpElmMaxHeightUnit"">
+                            <option value="px">px</option>
+                            <option value="em">em</option>
+                            <option value="vw">vw</option>
+                            <option value="vh">vh</option>
+                            <option value="%">%</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="is-settings" style="width:110px;">
+                    <div><label for="inpElmMinWidth">${util.out('Min Width')}:</label></div>
+                    <div style="display:flex">
+                        <input type="text" id="inpElmMinWidth" value="" style="width:45px"/>
+                        <select id="inpElmMinWidthUnit"">
+                            <option value="px">px</option>
+                            <option value="em">em</option>
+                            <option value="vw">vw</option>
+                            <option value="vh">vh</option>
+                            <option value="%">%</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="is-settings" style="width:110px;">
+                    <div><label for="inpElmMinHeight">${util.out('Min Height')}:</label></div>
+                    <div style="display:flex">
+                        <input type="text" id="inpElmMinHeight" value="" style="width:45px"/>
+                        <select id="inpElmMinHeightUnit"">
+                            <option value="px">px</option>
+                            <option value="em">em</option>
+                            <option value="vw">vw</option>
+                            <option value="vh">vh</option>
+                            <option value="%">%</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="is-settings" style="width:110px;">
+                    <div>${util.out('Overflow x')}:</div>
+                    <div>
+                        <select id="inpElmOverflowX"">
+                            <option value=""></option>
+                            <option value="auto">Auto</option>
+                            <option value="hidden">Hidden</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="is-settings" style="width:110px;">
+                    <div>${util.out('Overflow y')}:</div>
+                    <div>
+                        <select id="inpElmOverflowY"">
+                            <option value=""></option>
+                            <option value="auto">Auto</option>
+                            <option value="hidden">Hidden</option>
+                        </select>
+                    </div>
+                </div>
+        `;
+    dom$f.appendHtml(panelStuff, html); // Others
 
     let inpElmMaxWidth = panelStuff.querySelector('#inpElmMaxWidth');
     inpElmMaxWidth.addEventListener('click', () => {
@@ -60945,17 +61812,13 @@ class ElementBoxStyles {
   }
 
   readElementStyles(elm) {
-    let panelStuff = this.panelStuff; // Background color
-
-    let s = elm.style.backgroundColor;
-    let btn = panelStuff.querySelector('.input-elm-bgcolor');
-    if (s) btn.style.backgroundColor = s;else btn.style.backgroundColor = 'transparent'; // Max Width
+    let panelStuff = this.panelStuff; // Max Width
 
     const inpElmMaxWidth = panelStuff.querySelector('#inpElmMaxWidth');
     const inpElmMaxWidthUnit = panelStuff.querySelector('#inpElmMaxWidthUnit');
     inpElmMaxWidth.value = '';
     inpElmMaxWidthUnit.value = 'px';
-    s = elm.style.maxWidth;
+    let s = elm.style.maxWidth;
     let nMaxWidth = parseInt(s);
 
     if (!isNaN(nMaxWidth)) {
@@ -61064,7 +61927,7 @@ class ElementBoxStyles {
 
 }
 
-const dom$d = new Dom();
+const dom$e = new Dom();
 
 class ElementSpacingStyles {
   constructor(builder) {
@@ -61206,7 +62069,7 @@ class ElementSpacingStyles {
                 </div>
             </div>
         `;
-    dom$d.appendHtml(panelStuff, html); // Margin
+    dom$e.appendHtml(panelStuff, html); // Margin
 
     let inpElmMarginLeft = panelStuff.querySelector('#inpElmMarginLeft');
     inpElmMarginLeft.addEventListener('click', () => {
@@ -61524,9 +62387,9 @@ class ElementSpacingStyles {
       let elm = this.builder.inspectedElement;
 
       if (chkResetMarginLeft.checked) {
-        dom$d.addClass(elm, 'margin-left-1024-reset');
+        dom$e.addClass(elm, 'margin-left-1024-reset');
       } else {
-        dom$d.removeClass(elm, 'margin-left-1024-reset');
+        dom$e.removeClass(elm, 'margin-left-1024-reset');
       }
 
       elementStyleEditor.refresh(); //Trigger Change event
@@ -61539,9 +62402,9 @@ class ElementSpacingStyles {
       let elm = this.builder.inspectedElement;
 
       if (chkResetMarginRight.checked) {
-        dom$d.addClass(elm, 'margin-right-1024-reset');
+        dom$e.addClass(elm, 'margin-right-1024-reset');
       } else {
-        dom$d.removeClass(elm, 'margin-right-1024-reset');
+        dom$e.removeClass(elm, 'margin-right-1024-reset');
       }
 
       elementStyleEditor.refresh(); //Trigger Change event
@@ -61704,13 +62567,13 @@ class ElementSpacingStyles {
     } // Responsive Positioning
 
 
-    if (dom$d.hasClass(elm, 'margin-left-1024-reset')) {
+    if (dom$e.hasClass(elm, 'margin-left-1024-reset')) {
       panelStuff.querySelector('#chkResetMarginLeft').checked = true;
     } else {
       panelStuff.querySelector('#chkResetMarginLeft').checked = false;
     }
 
-    if (dom$d.hasClass(elm, 'margin-right-1024-reset')) {
+    if (dom$e.hasClass(elm, 'margin-right-1024-reset')) {
       panelStuff.querySelector('#chkResetMarginRight').checked = true;
     } else {
       panelStuff.querySelector('#chkResetMarginRight').checked = false;
@@ -61719,7 +62582,7 @@ class ElementSpacingStyles {
 
 }
 
-const dom$c = new Dom();
+const dom$d = new Dom();
 
 class ElementBorderStyles {
   constructor(builder) {
@@ -61840,7 +62703,7 @@ class ElementBorderStyles {
                     </div>
                 </div>                
         `;
-    dom$c.appendHtml(panelStuff, html); // Border color
+    dom$d.appendHtml(panelStuff, html); // Border color
 
     let btnElmBorderColor = panelStuff.querySelector('.input-elm-bordercolor');
     btnElmBorderColor.addEventListener('click', e => {
@@ -62461,7 +63324,7 @@ class ElementBorderStyles {
 
 }
 
-const dom$b = new Dom();
+const dom$c = new Dom();
 
 class ElementTextStyles {
   constructor(builder) {
@@ -62603,7 +63466,7 @@ class ElementTextStyles {
                 </div>
             </div>
         `;
-    dom$b.appendHtml(panelStuff, html);
+    dom$c.appendHtml(panelStuff, html);
     const htmlmodal = `
             <div class="is-modal pickfontfamily" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content">
@@ -62614,7 +63477,7 @@ class ElementTextStyles {
                 </div>
             </div>
         `;
-    dom$b.appendHtml(builderStuff, htmlmodal);
+    dom$c.appendHtml(builderStuff, htmlmodal);
     const fontModal = builderStuff.querySelector('.is-modal.pickfontfamily'); // Text color
 
     let btnElmTextColor = panelStuff.querySelector('.input-elm-color');
@@ -62720,8 +63583,8 @@ class ElementTextStyles {
       const arrSizes = this.builder.opts.fontSizeClassValues;
 
       for (var i = 0; i <= arrSizes.length - 1; i++) {
-        if (dom$b.hasClass(elm, 'size-' + arrSizes[i])) {
-          dom$b.removeClass(elm, 'size-' + arrSizes[i]);
+        if (dom$c.hasClass(elm, 'size-' + arrSizes[i])) {
+          dom$c.removeClass(elm, 'size-' + arrSizes[i]);
         }
       }
 
@@ -62871,9 +63734,9 @@ class ElementTextStyles {
             f = f.trim().toLowerCase();
 
             if (f === fontname && f !== '') {
-              dom$b.addClass(e, 'on');
+              dom$c.addClass(e, 'on');
             } else {
-              dom$b.removeClass(e, 'on');
+              dom$c.removeClass(e, 'on');
             }
           }); //Select active font
 
@@ -62888,7 +63751,7 @@ class ElementTextStyles {
       } else {
         if (iframeDocument) {
           [].forEach.call(iframeDocument.querySelectorAll('#divFontList > li'), e => {
-            dom$b.removeClass(e, 'on');
+            dom$c.removeClass(e, 'on');
           });
         }
       }
@@ -63010,7 +63873,7 @@ class ElementTextStyles {
 
 }
 
-const dom$a = new Dom();
+const dom$b = new Dom();
 
 class ElementCornerStyles {
   constructor(builder) {
@@ -63062,7 +63925,7 @@ class ElementCornerStyles {
                 </div>
             </div>
         `;
-    dom$a.appendHtml(panelStuff, html);
+    dom$b.appendHtml(panelStuff, html);
     const inpElmBorderRadius = panelStuff.querySelector('#inpElmBorderRadius');
     inpElmBorderRadius.addEventListener('click', () => {
       this.builder.uo.saveForUndo();
@@ -63205,7 +64068,7 @@ class ElementCornerStyles {
 
 }
 
-const dom$9 = new Dom();
+const dom$a = new Dom();
 
 class ElementShadowStyles {
   constructor(builder) {
@@ -63281,7 +64144,7 @@ class ElementShadowStyles {
                 </div>
             </div>
         `;
-    dom$9.appendHtml(panelStuff, html); // Shadow color
+    dom$a.appendHtml(panelStuff, html); // Shadow color
 
     let btnElmShadowColor = panelStuff.querySelector('.input-elm-shadowcolor');
     btnElmShadowColor.addEventListener('click', () => {
@@ -63472,7 +64335,7 @@ class ElementShadowStyles {
 
 }
 
-const dom$8 = new Dom();
+const dom$9 = new Dom();
 
 class ElementDisplayStyles {
   constructor(builder) {
@@ -63570,7 +64433,7 @@ class ElementDisplayStyles {
                 </div>
             </div>
         `;
-    dom$8.appendHtml(panelStuff, html);
+    dom$9.appendHtml(panelStuff, html);
     const inpElmDisplay = panelStuff.querySelector('#inpElmDisplay');
     inpElmDisplay.addEventListener('change', () => {
       this.builder.uo.saveForUndo();
@@ -63663,7 +64526,7 @@ class ElementDisplayStyles {
 
 }
 
-const dom$7 = new Dom();
+const dom$8 = new Dom();
 
 class ElementPositionStyles {
   constructor(builder) {
@@ -63758,7 +64621,7 @@ class ElementPositionStyles {
                 </div>
             </div>
         `;
-    dom$7.appendHtml(panelStuff, html);
+    dom$8.appendHtml(panelStuff, html);
     const inpElmPosition = panelStuff.querySelector('#inpElmPosition');
     inpElmPosition.addEventListener('change', () => {
       this.builder.uo.saveForUndo();
@@ -64002,7 +64865,7 @@ class ElementPositionStyles {
 
 }
 
-const dom$6 = new Dom();
+const dom$7 = new Dom();
 
 class ElementEffectStyles {
   constructor(builder) {
@@ -64082,7 +64945,7 @@ class ElementEffectStyles {
                 </div>
             </div>
         `;
-    dom$6.appendHtml(panelStuff, html);
+    dom$7.appendHtml(panelStuff, html);
     const inpElmOpacity = panelStuff.querySelector('#inpElmOpacity');
     inpElmOpacity.addEventListener('click', () => {
       this.builder.uo.saveForUndo();
@@ -64557,7 +65420,7 @@ class ElementEffectStyles {
 
 }
 
-const dom$5 = new Dom();
+const dom$6 = new Dom();
 
 class ElementAttributeStyles {
   constructor(builder) {
@@ -64633,7 +65496,7 @@ class ElementAttributeStyles {
                 </div>
             </div>
         `;
-    dom$5.appendHtml(panelStuff, html);
+    dom$6.appendHtml(panelStuff, html);
     let inps = panelStuff.querySelectorAll('#inpElmAttr1,#inpElmAttr2,#inpElmAttr3,#inpElmAttr4,#inpElmAttr5,#inpElmAttrVal1,#inpElmAttrVal2,#inpElmAttrVal3,#inpElmAttrVal4,#inpElmAttrVal5');
     Array.prototype.forEach.call(inps, inp => {
       inp.addEventListener('click', () => {
@@ -64701,6 +65564,93 @@ class ElementAttributeStyles {
 
 }
 
+const dom$5 = new Dom();
+
+class ElementMoreStyles {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff;
+    let panelStuff = builderStuff.querySelector('#divElementMore');
+    this.panelStuff = panelStuff;
+    const html = `
+
+            <div class="is-settings" style="width:100%;margin-bottom:9px;">
+                <div>${util.out('Add Element ID')}:</div>
+                <div>
+                    <input type="text" id="inpElmId" value="" style="width:100%"/>
+                </div>
+            </div>
+
+            <div class="is-settings" style="width:100%;margin-bottom:9px;">
+                <div>${util.out('Add Css Classes')}:</div>
+                <div>
+                    <input type="text" id="inpElmCssClasses" value="" style="width:100%"/>
+                </div>
+            </div>
+
+        `;
+    dom$5.appendHtml(panelStuff, html);
+    const inpElmId = panelStuff.querySelector('#inpElmId');
+    inpElmId.addEventListener('change', () => {
+      let elm = this.builder.inspectedElement;
+      this.builder.uo.saveForUndo();
+
+      if (inpElmId.value !== '') {
+        elm.setAttribute('id', inpElmId.value);
+      } else {
+        elm.removeAttribute('id');
+      } //Trigger Change event
+
+
+      this.builder.opts.onChange();
+    });
+    const inpElmCssClasses = panelStuff.querySelector('#inpElmCssClasses');
+    inpElmCssClasses.addEventListener('change', () => {
+      let elm = this.builder.inspectedElement;
+      this.builder.uo.saveForUndo();
+      let arrCurrentClasses = [];
+      let currentClasses = elm.getAttribute('data-class');
+      if (currentClasses) arrCurrentClasses = currentClasses.split(' ');
+      let arrNewClasses = [];
+      let newClasses = inpElmCssClasses.value;
+      arrNewClasses = newClasses.split(' ');
+      arrCurrentClasses.forEach(item => {
+        if (!arrNewClasses.includes(item)) {
+          elm.classList.remove(item);
+        }
+      });
+      arrNewClasses.forEach(item => {
+        if (item !== '') elm.classList.add(item);
+      }); // save
+
+      elm.setAttribute('data-class', newClasses);
+      if (elm.getAttribute('data-class') === '') elm.removeAttribute('data-class'); //Trigger Change event
+
+      this.builder.opts.onChange();
+    });
+  }
+
+  readElementStyles(elm) {
+    let panelStuff = this.panelStuff;
+    const inpElmId = panelStuff.querySelector('#inpElmId');
+    inpElmId.value = '';
+    const rowId = elm.getAttribute('id');
+
+    if (rowId) {
+      inpElmId.value = rowId;
+    }
+
+    const inpElmCssClasses = panelStuff.querySelector('#inpElmCssClasses');
+    inpElmCssClasses.value = '';
+    const classes = elm.getAttribute('data-class');
+    inpElmCssClasses.value = classes;
+  }
+
+}
+
 const dom$4 = new Dom();
 
 class ElementAnimationStyles {
@@ -64977,24 +65927,29 @@ class ElementPanel {
                     <div style="width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:absolute;top:0px;left:0px;box-sizing:border-box;border-top:100px solid transparent;padding:0px;">
                             
                         <div class="is-tabs" data-group="element" style="padding-right:0;padding-bottom:0;">
-                            <a title="${util.out('Box')}" id="tabElementBox" href="" data-content="divElementBox" class="active">${util.out('Box')}</a>
+                            <a title="${util.out('General')}" id="tabElementGeneral" href="" data-content="divElementGeneral" class="active">${util.out('General')}</a>
+                            <a title="${util.out('Box')}" id="tabElementBox" href="" data-content="divElementBox">${util.out('Box')}</a>
                             <a title="${util.out('Spacing')}" id="tabElementSpacing" href="" data-content="divElementSpacing">${util.out('Spacing')}</a>
-                            <a title="${util.out('Border')}" id="tabElementBorder" href="" data-content="divElementBorder">${util.out('Border')}</a>
                             <a title="${util.out('Text')}" id="tabElementText" href="" data-content="divElementText">${util.out('Text')}</a>
-                            <a title="${util.out('More')}" id="tabElementMore" data-menu="divElementMore" href=""><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-more"></use></svg></a>
+                            <a title="${util.out('More')}" id="tabElementMore" data-menu="divElementMoreItems" href=""><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-more"></use></svg></a>
                         </div>
                         
-                        <ul id="divElementMore" class="is-tabs-more" data-group="element" tabindex="-1" aria-modal="true" aria-hidden="true">
+                        <ul id="divElementMoreItems" style="top: 50px;left: 140px;" class="is-tabs-more" data-group="element" tabindex="-1" aria-modal="true" aria-hidden="true">
+                            <li title="${util.out('Border')}" id="tabElementBorder" data-content="divElementBorder" tabindex="0">${util.out('Border')}</li>
                             <li title="${util.out('Corners')}" id="tabElementCorner" data-content="divElementCorner" tabindex="0">${util.out('Corners')}</li>
                             <li title="${util.out('Shadow')}" id="tabElementShadow" data-content="divElementShadow" tabindex="0">${util.out('Shadow')}</li>
                             <li title="${util.out('Display')}" id="tabElementDisplay" data-content="divElementDisplay" tabindex="0">${util.out('Display')}</li>
                             <li title="${util.out('Position')}" id="tabElementPosition" data-content="divElementPosition" tabindex="0">${util.out('Position')}</li>
                             <li title="${util.out('Effects')}" id="tabElementEffect" data-content="divElementEffect" tabindex="0">${util.out('Effects')}</li>
-                            <li title="${util.out('Attributes')}" id="tabElementAttribute" data-content="divElementAttribute" tabindex="0">${util.out('Attributes')}</li>
+                            <li style="display:none" title="${util.out('Attributes')}" id="tabElementAttribute" data-content="divElementAttribute" tabindex="0">${util.out('Attributes')}</li>
                             ${this.builder.opts.elementAnimate === true ? `<li title="${util.out('Animation')}" id="tabElementAnimation" data-content="divElementAnimation" tabindex="0">${util.out('Animation')}</li>` : ''}
+                            <li title="${util.out('More')}" id="tabElementMore" data-content="divElementMore" tabindex="0">${util.out('More')}</li>
                         </ul>
                         
-                        <div id="divElementBox" class="is-tab-content active" tabindex="-1" data-group="element" style="display:flex;flex-flow:wrap;padding:12px 20px;">
+                        <div id="divElementGeneral" class="is-tab-content active" tabindex="-1" data-group="element" style="display:flex;flex-flow:wrap;padding:12px 20px;">
+                        </div>
+                        
+                        <div id="divElementBox" class="is-tab-content active" tabindex="-1" data-group="element" style="display:none;flex-flow:wrap;padding:12px 20px;">
                         </div>
 
                         <div id="divElementSpacing" class="is-tab-content" tabindex="-1" data-group="element" style="display:none;flex-flow:wrap;padding:12px 20px;">
@@ -65027,6 +65982,8 @@ class ElementPanel {
                         <div id="divElementAnimation" class="is-tab-content" tabindex="-1" data-group="element" style="display:none;flex-flow:wrap;padding:12px 20px;">
                         </div>
 
+                        <div id="divElementMore" class="is-tab-content" tabindex="-1" data-group="element" style="display:none;flex-flow:wrap;padding:12px 20px;">
+                        </div>
                     </div>
             </div>              
             `;
@@ -65046,6 +66003,8 @@ class ElementPanel {
     this.panel = panel;
     const elementBoxStyles = new ElementBoxStyles(builder);
     this.elementBoxStyles = elementBoxStyles;
+    const elementGeneralStyles = new ElementGeneralStyles(builder);
+    this.elementGeneralStyles = elementGeneralStyles;
     const elementSpacingStyles = new ElementSpacingStyles(builder);
     this.elementSpacingStyles = elementSpacingStyles;
     const elementBorderStyles = new ElementBorderStyles(builder);
@@ -65064,6 +66023,8 @@ class ElementPanel {
     this.elementEffectStyles = elementEffectStyles;
     const elementAttributeStyles = new ElementAttributeStyles(builder);
     this.elementAttributeStyles = elementAttributeStyles;
+    const elementMoreStyles = new ElementMoreStyles(builder);
+    this.elementMoreStyles = elementMoreStyles;
     const elementAnimationStyles = new ElementAnimationStyles(builder);
     this.elementAnimationStyles = elementAnimationStyles;
   }
@@ -65075,6 +66036,7 @@ class ElementPanel {
   }
 
   inspect(elm) {
+    this.elementGeneralStyles.readElementStyles(elm);
     this.elementBoxStyles.readElementStyles(elm);
     this.elementSpacingStyles.readElementStyles(elm);
     this.elementBorderStyles.readElementStyles(elm);
@@ -65085,6 +66047,7 @@ class ElementPanel {
     this.elementPositionStyles.readElementStyles(elm);
     this.elementEffectStyles.readElementStyles(elm);
     this.elementAttributeStyles.readElementStyles(elm);
+    this.elementMoreStyles.readElementStyles(elm);
     this.elementAnimationStyles.readElementStyles(elm);
     let panel = this.panel;
     let elms = this.builder.doc.querySelectorAll('[data-saveforundo]');