npm - @innovastudio/contentbuilder - Versions diffs - 1.3.85 → 1.3.87 - Mend

@innovastudio/contentbuilder 1.3.85 → 1.3.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/public/contentbuilder/contentbuilder.esm.js CHANGED Viewed

@@ -7212,6 +7212,167 @@ class Util {
     return html;
   }
+  getPageTemplate(framework) {
+    let pageTemplate = '';
+    if (framework === '') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <style>
+                    .container {
+                        margin: 150px auto 0;
+                        max-width: 800px;
+                        width: 100%;
+                        padding: 0 20px;
+                        box-sizing: border-box;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else if (framework === 'tailwind') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link href="[%PATH%]/assets/minimalist-blocks/content-tailwind.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <link rel="stylesheet" href="[%PATH%]/assets/frameworks/tailwindcss/styles.css">
+                <!-- To build your own, please see: https://tailwindcss.com/docs/installation -->
+                <style>
+                    .container {
+                        margin: 150px auto 0;
+                        max-width: 800px;
+                        width: 100%;
+                        padding: 0 20px;
+                        box-sizing: border-box;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else if (framework === 'bootstrap') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <style>
+                    .container {margin: 140px auto; max-width: 800px; width:100%; padding:0 35px; box-sizing: border-box;}
+                    /* Bootstrap css adjustment to enable column drag to resize */
+                    .row > *,
+                    .column {
+                        max-width: unset !important;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else if (framework === 'foundation') {
+      pageTemplate = `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation-float.min.css">
+                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                <style>
+                    .container {
+                        margin: 150px auto 0;
+                        max-width: 800px;
+                        width: 100%;
+                        padding: 0 20px;
+                        box-sizing: border-box;
+                    }
+                </style>
+            </head>
+            <body>
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            </body>
+            </html>
+            `;
+    } else {
+      pageTemplate = '[%CONTENT%]';
+    }
+    return pageTemplate;
+  }
 }
 class Dom {
   constructor(builder) {
@@ -14522,7 +14683,7 @@ var loader = {
   __getMonacoInstance: __getMonacoInstance
 };
-const dom$h = new Dom();
+const dom$j = new Dom();
 let hash$1 = {};
 class HtmlUtil {
   constructor(builder) {
@@ -14570,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');
@@ -14601,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');
@@ -14888,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') {
@@ -15133,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 => {
@@ -15254,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
@@ -15339,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 = '';
@@ -15369,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') + '"';
@@ -15443,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();
@@ -21884,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) {
@@ -21909,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');
       }
     };
@@ -21971,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();
         }
@@ -55417,589 +55582,171 @@ 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>`;
+class Modal {
+  constructor(opts = {}) {
+    let defaults = {
+      animateModal: false,
+      elementToAnimate: '',
+      stuffPlacement: '#_cbhtml'
+    };
+    this.opts = Object.assign(this, defaults, opts);
+    this.id = this.makeId();
+    let builderStuff = document.querySelector(this.opts.stuffPlacement);
-    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 = '';
+    if (!builderStuff) {
+      builderStuff = document.createElement('div');
+      builderStuff.id = '_cbhtml';
+      document.body.appendChild(builderStuff);
+    }
-        util.hidePop(rowMore); //Hide Column tool (new!)
+    this.builderStuff = builderStuff; // Stuff placement for this (single) instance
-        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();
+    const objStuff = document.createElement('div');
+    objStuff.id = this.id;
+    builderStuff.appendChild(objStuff);
+    this.objStuff = objStuff;
+  }
-        if (cell) {
-          row = cell.parentNode;
-        } else {
-          row = util.rowSelected();
-        }
+  confirm(message, callback, animated) {
+    let html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal-content" style="padding-bottom:20px;">
+                <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
+                <button title="${this.out('Delete')}" class="input-ok classic">${this.out('Delete')}</button>
+            </div>
+        </div>`;
+    let confirmModal = this.objStuff.querySelector('.is-confirm');
-        if (!row) return;
-        const htmlutil = new HtmlUtil(builder);
-        htmlutil.view('row');
-      });
+    if (!confirmModal) {
+      this.objStuff.insertAdjacentHTML('beforeend', html);
+      confirmModal = this.builderStuff.querySelector('.is-confirm');
     }
-    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);
-    //         }
-    //     }
-    // });
-  }
+    this.show(confirmModal, false, () => {
+      //this function runs when overlay is clicked. Remove modal.
+      confirmModal.parentNode.removeChild(confirmModal); //do task
-  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');
+      callback(false);
+    }, animated);
+    let buttonok = confirmModal.querySelector('.is-confirm .input-ok');
+    this.addEventListener(buttonok, 'click', () => {
+      this.hide(confirmModal);
+      confirmModal.parentNode.removeChild(confirmModal); //remove modal
+      //do task
-    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
+      callback(true);
+    });
+  }
-      let elms = rowtool.querySelectorAll('[title]');
-      Array.prototype.forEach.call(elms, elm => {
-        elm.setAttribute('data-title', elm.getAttribute('title'));
+  show(modal, overlayStay, cancelCallback, animated) {
+    this.addClass(modal, 'active'); // animated param (if set) will overide global setting
-        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
+    let animate = false;
-      elms = coltool.querySelectorAll('[title]');
-      Array.prototype.forEach.call(elms, elm => {
-        elm.setAttribute('data-title', elm.getAttribute('title'));
+    if (!(typeof animated === 'undefined' || animated === null)) {
+      // animated param is set
+      animate = animated;
+    } else {
+      // if animated param is not set
+      animate = this.opts.animateModal; // use global setting
+    }
-        if (!this.builder.iframe) {
-          this.builder.tooltip.set(elm, 5, 3);
-        } else {
-          this.builder.tooltip.set(elm, 5, 3, true);
-        }
-      }); // Check for backward compatibility
+    if (animate) {
+      const buildercontainers = document.querySelectorAll(this.opts.elementToAnimate);
+      Array.prototype.forEach.call(buildercontainers, buildercontainer => {
+        // buildercontainer.style.transform = 'scale(0.98)';
+        // buildercontainer.style.WebkitTransform= 'scale(0.98)';
+        // buildercontainer.style.MozTransform= 'scale(0.98)';
+        buildercontainer.style.transform = `scale(${this.builder.opts.zoom - 0.02})`;
+        buildercontainer.style.WebkitTransform = `scale(${this.builder.opts.zoom - 0.02})`;
+        buildercontainer.style.MozTransform = `scale(${this.builder.opts.zoom - 0.02})`;
+        buildercontainer.setAttribute('scaled-down', '1');
+      });
+    }
-      let marginLeft = window.getComputedStyle(coltool, null).getPropertyValue('margin-left');
+    if (!modal.querySelector('.is-modal-overlay')) {
+      let html;
-      if (parseInt(marginLeft) === 0) {
-        this.builder.backwardCompatible();
+      if (overlayStay) {
+        html = '<div class="is-modal-overlay overlay-stay"></div>';
+      } else {
+        html = '<div class="is-modal-overlay"></div>';
       }
-      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;
+      modal.insertAdjacentHTML('afterbegin', html);
-        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 (!overlayStay) {
+        let overlay = modal.querySelector('.is-modal-overlay');
+        this.addEventListener(overlay, 'click', () => {
+          //cancelCallback
+          if (cancelCallback) cancelCallback();
+          this.hide(modal);
+        });
+      }
+    }
+  }
-        if (val === 'left') {
-          quickadd.setAttribute('data-mode', 'cell-left');
-        } else {
-          quickadd.setAttribute('data-mode', 'cell-right');
+  hide(modal) {
+    if (this.opts.elementToAnimate !== '') {
+      const buildercontainers = document.querySelectorAll(this.opts.elementToAnimate);
+      Array.prototype.forEach.call(buildercontainers, buildercontainer => {
+        // buildercontainer.style.transform = '';
+        // buildercontainer.style.WebkitTransform= '';
+        // buildercontainer.style.MozTransform= '';
+        if (buildercontainer.getAttribute('scaled-down')) {
+          buildercontainer.style.transform = `scale(${this.builder.opts.zoom})`;
+          buildercontainer.style.WebkitTransform = `scale(${this.builder.opts.zoom})`;
+          buildercontainer.style.MozTransform = `scale(${this.builder.opts.zoom})`;
+          buildercontainer.removeAttribute('scaled-down');
         }
       });
-      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;
+    this.removeClass(modal, 'active');
+  } // http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
-        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');
+  makeId() {
+    let text = '';
+    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-        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
+    for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
-          const btnGridOutline = grideditor.querySelector('.grid-outline');
-          const container = document.querySelector(this.builder.opts.container); // get one
+    let text2 = '';
+    let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-          if (container.hasAttribute('gridoutline')) {
-            dom.addClass(btnGridOutline, 'on');
-          } else {
-            dom.removeClass(btnGridOutline, 'on');
-          } // On/off lock button
+    for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
+    return text + text2;
+  }
-          const btnCellLocking = grideditor.querySelector('.cell-locking');
-          let cell = util.cellSelected();
+  addClass(element, classname) {
+    if (!element) return;
+    if (this.hasClass(element, classname)) return;
+    if (element.classList.length === 0) element.className = classname;else element.className = element.className + ' ' + classname;
+  }
-          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();
+  removeClass(element, classname) {
+    if (!element) return;
-        if (cell) {
-          row = cell.parentNode;
-        } else {
-          row = util.rowSelected();
-        }
+    if (element.classList.length > 0) {
+      element.className = element.className.replace(classname, '');
+    }
+  }
-        if (!row) return; //Change to row selection
+  hasClass(element, classname) {
+    if (!element) return false;
+    return element.classList ? element.classList.contains(classname) : new RegExp('\\b' + classname + '\\b').test(element.className);
+  }
-        dom.removeClass(row, 'row-outline'); //Hide Column tool (new!)
+  addEventListener(parent, type, listener) {
+    parent.addEventListener(type, listener);
+  }
-        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 = {
-      animateModal: false,
-      elementToAnimate: '',
-      stuffPlacement: '#_cbhtml'
-    };
-    this.opts = Object.assign(this, defaults, opts);
-    this.id = this.makeId();
-    let builderStuff = document.querySelector(this.opts.stuffPlacement);
-    if (!builderStuff) {
-      builderStuff = document.createElement('div');
-      builderStuff.id = '_cbhtml';
-      document.body.appendChild(builderStuff);
-    }
-    this.builderStuff = builderStuff; // Stuff placement for this (single) instance
-    const objStuff = document.createElement('div');
-    objStuff.id = this.id;
-    builderStuff.appendChild(objStuff);
-    this.objStuff = objStuff;
-  }
-  confirm(message, callback, animated) {
-    let html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-            <div class="is-modal-content" style="padding-bottom:20px;">
-                <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
-                <button title="${this.out('Delete')}" class="input-ok classic">${this.out('Delete')}</button>
-            </div>
-        </div>`;
-    let confirmModal = this.objStuff.querySelector('.is-confirm');
-    if (!confirmModal) {
-      this.objStuff.insertAdjacentHTML('beforeend', html);
-      confirmModal = this.builderStuff.querySelector('.is-confirm');
-    }
-    this.show(confirmModal, false, () => {
-      //this function runs when overlay is clicked. Remove modal.
-      confirmModal.parentNode.removeChild(confirmModal); //do task
-      callback(false);
-    }, animated);
-    let buttonok = confirmModal.querySelector('.is-confirm .input-ok');
-    this.addEventListener(buttonok, 'click', () => {
-      this.hide(confirmModal);
-      confirmModal.parentNode.removeChild(confirmModal); //remove modal
-      //do task
-      callback(true);
-    });
-  }
-  show(modal, overlayStay, cancelCallback, animated) {
-    this.addClass(modal, 'active'); // animated param (if set) will overide global setting
-    let animate = false;
-    if (!(typeof animated === 'undefined' || animated === null)) {
-      // animated param is set
-      animate = animated;
-    } else {
-      // if animated param is not set
-      animate = this.opts.animateModal; // use global setting
-    }
-    if (animate) {
-      const buildercontainers = document.querySelectorAll(this.opts.elementToAnimate);
-      Array.prototype.forEach.call(buildercontainers, buildercontainer => {
-        // buildercontainer.style.transform = 'scale(0.98)';
-        // buildercontainer.style.WebkitTransform= 'scale(0.98)';
-        // buildercontainer.style.MozTransform= 'scale(0.98)';
-        buildercontainer.style.transform = `scale(${this.builder.opts.zoom - 0.02})`;
-        buildercontainer.style.WebkitTransform = `scale(${this.builder.opts.zoom - 0.02})`;
-        buildercontainer.style.MozTransform = `scale(${this.builder.opts.zoom - 0.02})`;
-        buildercontainer.setAttribute('scaled-down', '1');
-      });
-    }
-    if (!modal.querySelector('.is-modal-overlay')) {
-      let html;
-      if (overlayStay) {
-        html = '<div class="is-modal-overlay overlay-stay"></div>';
-      } else {
-        html = '<div class="is-modal-overlay"></div>';
-      }
-      modal.insertAdjacentHTML('afterbegin', html);
-      if (!overlayStay) {
-        let overlay = modal.querySelector('.is-modal-overlay');
-        this.addEventListener(overlay, 'click', () => {
-          //cancelCallback
-          if (cancelCallback) cancelCallback();
-          this.hide(modal);
-        });
-      }
-    }
-  }
-  hide(modal) {
-    if (this.opts.elementToAnimate !== '') {
-      const buildercontainers = document.querySelectorAll(this.opts.elementToAnimate);
-      Array.prototype.forEach.call(buildercontainers, buildercontainer => {
-        // buildercontainer.style.transform = '';
-        // buildercontainer.style.WebkitTransform= '';
-        // buildercontainer.style.MozTransform= '';
-        if (buildercontainer.getAttribute('scaled-down')) {
-          buildercontainer.style.transform = `scale(${this.builder.opts.zoom})`;
-          buildercontainer.style.WebkitTransform = `scale(${this.builder.opts.zoom})`;
-          buildercontainer.style.MozTransform = `scale(${this.builder.opts.zoom})`;
-          buildercontainer.removeAttribute('scaled-down');
-        }
-      });
-    }
-    this.removeClass(modal, 'active');
-  } // http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
-  makeId() {
-    let text = '';
-    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-    for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
-    let text2 = '';
-    let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
-    return text + text2;
-  }
-  addClass(element, classname) {
-    if (!element) return;
-    if (this.hasClass(element, classname)) return;
-    if (element.classList.length === 0) element.className = classname;else element.className = element.className + ' ' + classname;
-  }
-  removeClass(element, classname) {
-    if (!element) return;
-    if (element.classList.length > 0) {
-      element.className = element.className.replace(classname, '');
-    }
-  }
-  hasClass(element, classname) {
-    if (!element) return false;
-    return element.classList ? element.classList.contains(classname) : new RegExp('\\b' + classname + '\\b').test(element.className);
-  }
-  addEventListener(parent, type, listener) {
-    parent.addEventListener(type, listener);
-  }
-}
-/*
-- doesn't accept 3 digit hex
-*/
+/*
+- doesn't accept 3 digit hex
+*/
 class ColorPicker {
   constructor(opts = {}) {
@@ -57620,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;
@@ -57689,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">
@@ -57708,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>
@@ -57885,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">
@@ -58177,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');
@@ -58251,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');
@@ -59605,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) {
@@ -59743,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 = '';
@@ -60257,7 +61015,7 @@ class ColumnTool {
 }
-const dom$f = new Dom();
+const dom$h = new Dom();
 class ELementStyleEditor {
   constructor(builder) {
@@ -60290,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');
           });
         }
       });
@@ -60315,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();
       });
@@ -60353,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');
     }
   }
@@ -60377,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;
@@ -60387,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 => {
@@ -60543,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', () => {
@@ -60784,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)) {
@@ -60903,7 +61927,7 @@ class ElementBoxStyles {
 }
-const dom$d = new Dom();
+const dom$e = new Dom();
 class ElementSpacingStyles {
   constructor(builder) {
@@ -61045,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', () => {
@@ -61363,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
@@ -61378,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
@@ -61543,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;
@@ -61558,7 +62582,7 @@ class ElementSpacingStyles {
 }
-const dom$c = new Dom();
+const dom$d = new Dom();
 class ElementBorderStyles {
   constructor(builder) {
@@ -61679,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 => {
@@ -62300,7 +63324,7 @@ class ElementBorderStyles {
 }
-const dom$b = new Dom();
+const dom$c = new Dom();
 class ElementTextStyles {
   constructor(builder) {
@@ -62442,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">
@@ -62453,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');
@@ -62559,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]);
         }
       }
@@ -62710,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
@@ -62727,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');
           });
         }
       }
@@ -62849,7 +63873,7 @@ class ElementTextStyles {
 }
-const dom$a = new Dom();
+const dom$b = new Dom();
 class ElementCornerStyles {
   constructor(builder) {
@@ -62901,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();
@@ -63044,7 +64068,7 @@ class ElementCornerStyles {
 }
-const dom$9 = new Dom();
+const dom$a = new Dom();
 class ElementShadowStyles {
   constructor(builder) {
@@ -63120,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', () => {
@@ -63311,7 +64335,7 @@ class ElementShadowStyles {
 }
-const dom$8 = new Dom();
+const dom$9 = new Dom();
 class ElementDisplayStyles {
   constructor(builder) {
@@ -63409,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();
@@ -63502,7 +64526,7 @@ class ElementDisplayStyles {
 }
-const dom$7 = new Dom();
+const dom$8 = new Dom();
 class ElementPositionStyles {
   constructor(builder) {
@@ -63597,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();
@@ -63841,7 +64865,7 @@ class ElementPositionStyles {
 }
-const dom$6 = new Dom();
+const dom$7 = new Dom();
 class ElementEffectStyles {
   constructor(builder) {
@@ -63921,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();
@@ -64396,7 +65420,7 @@ class ElementEffectStyles {
 }
-const dom$5 = new Dom();
+const dom$6 = new Dom();
 class ElementAttributeStyles {
   constructor(builder) {
@@ -64472,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', () => {
@@ -64540,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 {
@@ -64816,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;">
@@ -64866,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>
             `;
@@ -64885,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);
@@ -64903,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;
   }
@@ -64914,6 +66036,7 @@ class ElementPanel {
   }
   inspect(elm) {
+    this.elementGeneralStyles.readElementStyles(elm);
     this.elementBoxStyles.readElementStyles(elm);
     this.elementSpacingStyles.readElementStyles(elm);
     this.elementBorderStyles.readElementStyles(elm);
@@ -64924,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]');
@@ -75467,39 +76591,6 @@ class ContentBuilder {
                 </div>
             </div>
             `,
-      pageTemplate: `<!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="utf-8">
-                <title>Page</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1">
-                <meta name="description" content="">
-                <link rel="shortcut icon" href="#" />
-                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
-                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
-                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
-                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
-                <style>
-                    .container {
-                        margin: 150px auto 0;
-                        max-width: 800px;
-                        width: 100%;
-                        padding: 0 20px;
-                        box-sizing: border-box;
-                    }
-                </style>
-            </head>
-            <body>
-            <div class="container">
-            [%CONTENT%]
-            </div>
-            </body>
-            </html>`,
       /*
       onZoomStart: () => {
@@ -76015,6 +77106,11 @@ class ContentBuilder {
     const util = new Util(this); // General utilities
     this.util = util;
+    if (!this.pageTemplate) {
+      this.pageTemplate = util.getPageTemplate(this.framework);
+    }
     const responsive = new Responsive(this); // General utilities
     this.responsive = responsive; // Content stuff