@innovastudio/contentbuilder 1.2.6 → 1.2.7

package/public/contentbuilder/contentbuilder.esm.js

@@ -14137,7 +14137,7 @@ var loader = {
   __getMonacoInstance: __getMonacoInstance
 };
 
-const dom$J = new Dom();
+const dom$K = new Dom();
 let hash$1 = {};
 class HtmlUtil {
   constructor(builder) {
@@ -14185,28 +14185,28 @@ class HtmlUtil {
             </div>
             
             `;
-      dom$J.appendHtml(builderStuff, html);
+      dom$K.appendHtml(builderStuff, html);
       viewhtml = builderStuff.querySelector('.viewhtml');
       let viewhtmlmonaco = builderStuff.querySelector('.viewhtmlmonaco');
       let viewhtmlexternal = builderStuff.querySelector('.viewhtmlexternal');
       let elm = viewhtml.querySelector('.input-ok');
-      dom$J.addEventListener(elm, 'click', () => {
+      dom$K.addEventListener(elm, 'click', () => {
         this.applyHtml(viewhtml);
       });
       elm = viewhtml.querySelector('.input-cancel');
-      dom$J.addEventListener(elm, 'click', () => {
+      dom$K.addEventListener(elm, 'click', () => {
         this.builder.hideModal(viewhtml);
       });
       elm = viewhtmlmonaco.querySelector('.input-ok');
-      dom$J.addEventListener(elm, 'click', () => {
+      dom$K.addEventListener(elm, 'click', () => {
         this.applyHtml(viewhtmlmonaco);
       });
       elm = viewhtmlmonaco.querySelector('.input-cancel');
-      dom$J.addEventListener(elm, 'click', () => {
+      dom$K.addEventListener(elm, 'click', () => {
         this.builder.hideModal(viewhtmlmonaco);
       });
       elm = viewhtmlexternal.querySelector('.input-ok');
-      dom$J.addEventListener(elm, 'click', () => {
+      dom$K.addEventListener(elm, 'click', () => {
         const source = document.querySelector('textarea[data-source-active]');
         const selectorOk = source.getAttribute('data-source-ok');
         source.removeAttribute('data-source-active');
@@ -14216,7 +14216,7 @@ class HtmlUtil {
         this.builder.hideModal(viewhtmlexternal);
       });
       elm = viewhtmlexternal.querySelector('.input-cancel');
-      dom$J.addEventListener(elm, 'click', () => {
+      dom$K.addEventListener(elm, 'click', () => {
         const source = document.querySelector('textarea[data-source-active]');
         const selectorCancel = source.getAttribute('data-source-cancel');
         source.removeAttribute('data-source-active');
@@ -14482,10 +14482,10 @@ class HtmlUtil {
 
       this.builder.cleanHtmlFormatting = false; //Change to row selection
 
-      dom$J.removeClass(row, 'row-outline'); //Hide Column tool
+      dom$K.removeClass(row, 'row-outline'); //Hide Column tool
 
       let columnTool = builderStuff.querySelector('.is-column-tool');
-      dom$J.removeClass(columnTool, 'active');
+      dom$K.removeClass(columnTool, 'active');
     }
 
     if (mode === 'full') {
@@ -14613,7 +14613,7 @@ class HtmlUtil {
 
         elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.extend.unset}`);
         Array.prototype.forEach.call(elmNormals, elm => {
-          dom$J.removeClass(elm, this.builder.cssClasses.extend.unset);
+          dom$K.removeClass(elm, this.builder.cssClasses.extend.unset);
         });
       } // Clean unused spans
       // dom.cleanUnusedSpan(content); // REVIEW 
@@ -14629,7 +14629,7 @@ class HtmlUtil {
     if (elm) builderStuff.removeChild(elm);
     let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
             <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
-    dom$J.appendHtml(builderStuff, html);
+    dom$K.appendHtml(builderStuff, html);
     let tmp = builderStuff.querySelector('#tmp_content');
     tmp.innerHTML = content.innerHTML; //Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
 
@@ -14771,85 +14771,85 @@ class HtmlUtil {
 
       _builder.removeAttribute('data-sort');
 
-      dom$J.removeClass(_builder, 'builder-active');
+      dom$K.removeClass(_builder, 'builder-active');
     });
     let elms = tmp.querySelectorAll('.sortable-chosen');
-    dom$J.removeClasses(elms, 'sortable-chosen');
+    dom$K.removeClasses(elms, 'sortable-chosen');
     elms = tmp.querySelectorAll('.sortable-ghost');
-    dom$J.removeClasses(elms, 'sortable-ghost');
+    dom$K.removeClasses(elms, 'sortable-ghost');
     elms = tmp.querySelectorAll('.elm-active');
-    dom$J.removeClasses(elms, 'elm-active');
+    dom$K.removeClasses(elms, 'elm-active');
     elms = tmp.querySelectorAll('.elm-inspected');
-    dom$J.removeClasses(elms, 'elm-inspected');
+    dom$K.removeClasses(elms, 'elm-inspected');
     elms = tmp.querySelectorAll('.cell-active');
-    dom$J.removeClasses(elms, 'cell-active');
+    dom$K.removeClasses(elms, 'cell-active');
     elms = tmp.querySelectorAll('.row-active');
-    dom$J.removeClasses(elms, 'row-active');
+    dom$K.removeClasses(elms, 'row-active');
     elms = tmp.querySelectorAll('.row-outline');
-    dom$J.removeClasses(elms, 'row-outline');
+    dom$K.removeClasses(elms, 'row-outline');
     elms = tmp.querySelectorAll('.is-builder');
-    dom$J.removeClasses(elms, 'is-builder');
+    dom$K.removeClasses(elms, 'is-builder');
     elms = tmp.querySelectorAll('.row-outline');
-    dom$J.removeClasses(elms, 'row-outline');
+    dom$K.removeClasses(elms, 'row-outline');
     elms = tmp.querySelectorAll('[data-click]');
-    dom$J.removeAttributes(elms, 'data-click');
+    dom$K.removeAttributes(elms, 'data-click');
     elms = tmp.querySelectorAll('[contenteditable]');
-    dom$J.removeAttributes(elms, 'contenteditable');
+    dom$K.removeAttributes(elms, 'contenteditable');
     elms = tmp.querySelectorAll('[draggridoutline]');
-    dom$J.removeAttributes(elms, 'draggridoutline');
+    dom$K.removeAttributes(elms, 'draggridoutline');
     elms = tmp.querySelectorAll('[between-blocks-left]');
-    dom$J.removeAttributes(elms, 'between-blocks-left');
+    dom$K.removeAttributes(elms, 'between-blocks-left');
     elms = tmp.querySelectorAll('[between-blocks-center]');
-    dom$J.removeAttributes(elms, 'between-blocks-center');
+    dom$K.removeAttributes(elms, 'between-blocks-center');
     elms = tmp.querySelectorAll('[hideelementhighlight]');
-    dom$J.removeAttributes(elms, 'hideelementhighlight');
+    dom$K.removeAttributes(elms, 'hideelementhighlight');
     elms = tmp.querySelectorAll('[data-module-active]');
-    dom$J.removeAttributes(elms, 'data-module-active');
+    dom$K.removeAttributes(elms, 'data-module-active');
     elms = tmp.querySelectorAll('[draggable]');
-    dom$J.removeAttributes(elms, 'draggable');
+    dom$K.removeAttributes(elms, 'draggable');
     elms = tmp.querySelectorAll('[data-animated]');
-    dom$J.removeAttributes(elms, 'data-animated');
+    dom$K.removeAttributes(elms, 'data-animated');
     elms = tmp.querySelectorAll('[data-saveforundo]');
-    dom$J.removeAttributes(elms, 'data-saveforundo');
+    dom$K.removeAttributes(elms, 'data-saveforundo');
     elms = tmp.querySelectorAll('[hidesnippetaddtool]');
-    dom$J.removeAttributes(elms, 'hidesnippetaddtool');
+    dom$K.removeAttributes(elms, 'hidesnippetaddtool');
     elms = tmp.querySelectorAll('[gray]');
-    dom$J.removeAttributes(elms, 'gray');
+    dom$K.removeAttributes(elms, 'gray');
     elms = tmp.querySelectorAll('[rowoutline]');
-    dom$J.removeAttributes(elms, 'rowoutline');
+    dom$K.removeAttributes(elms, 'rowoutline');
     elms = tmp.querySelectorAll('[grayoutline]');
-    dom$J.removeAttributes(elms, 'grayoutline');
+    dom$K.removeAttributes(elms, 'grayoutline');
     elms = tmp.querySelectorAll('[hideoutline]');
-    dom$J.removeAttributes(elms, 'hideoutline');
+    dom$K.removeAttributes(elms, 'hideoutline');
     elms = tmp.querySelectorAll('[leftrowtool]');
-    dom$J.removeAttributes(elms, 'leftrowtool');
+    dom$K.removeAttributes(elms, 'leftrowtool');
     elms = tmp.querySelectorAll('[minimal]');
-    dom$J.removeAttributes(elms, 'minimal');
+    dom$K.removeAttributes(elms, 'minimal');
     elms = tmp.querySelectorAll('[clean]');
-    dom$J.removeAttributes(elms, 'clean');
+    dom$K.removeAttributes(elms, 'clean');
     elms = tmp.querySelectorAll('[grideditor]');
-    dom$J.removeAttributes(elms, 'grideditor');
+    dom$K.removeAttributes(elms, 'grideditor');
     elms = tmp.querySelectorAll('[gridoutline]');
-    dom$J.removeAttributes(elms, 'gridoutline');
-    dom$J.removeElements(tmp.querySelectorAll('.is-row-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
+    dom$K.removeAttributes(elms, 'gridoutline');
+    dom$K.removeElements(tmp.querySelectorAll('.is-row-tool'));
+    dom$K.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
+    dom$K.removeElements(tmp.querySelectorAll('.ovl'));
+    dom$K.removeElements(tmp.querySelectorAll('.row-add-initial')); //Extra cleaning
 
     elms = tmp.querySelectorAll('.aos-init');
-    dom$J.removeClasses(elms, 'aos-init');
+    dom$K.removeClasses(elms, 'aos-init');
     elms = tmp.querySelectorAll('.aos-animate');
-    dom$J.removeClasses(elms, 'aos-animate');
+    dom$K.removeClasses(elms, 'aos-animate');
     elms = tmp.querySelectorAll('.skrollable');
-    dom$J.removeClasses(elms, 'skrollable');
+    dom$K.removeClasses(elms, 'skrollable');
     elms = tmp.querySelectorAll('.skrollable-after');
-    dom$J.removeClasses(elms, 'skrollable-after');
+    dom$K.removeClasses(elms, 'skrollable-after');
     elms = tmp.querySelectorAll('.skrollable-before');
-    dom$J.removeClasses(elms, 'skrollable-before');
+    dom$K.removeClasses(elms, 'skrollable-before');
     elms = tmp.querySelectorAll('.skrollable-between');
-    dom$J.removeClasses(elms, 'skrollable-between');
+    dom$K.removeClasses(elms, 'skrollable-between');
     elms = tmp.querySelectorAll('.is-inview');
-    dom$J.removeClasses(elms, 'is-inview');
+    dom$K.removeClasses(elms, 'is-inview');
     let emptyclasses = tmp.querySelectorAll('[class=""]');
     Array.prototype.forEach.call(emptyclasses, emptyclass => {
       emptyclass.removeAttribute('class');
@@ -14858,9 +14858,9 @@ class HtmlUtil {
     Array.prototype.forEach.call(emptystyles, emptystyle => {
       emptystyle.removeAttribute('style');
     });
-    dom$J.removeEmptyStyle(tmp);
+    dom$K.removeEmptyStyle(tmp);
     elms = tmp.querySelectorAll('[data-keep]');
-    dom$J.removeAttributes(elms, 'data-keep'); //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
+    dom$K.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 => {
@@ -14876,52 +14876,52 @@ class HtmlUtil {
       //ContentBox
       // Remove dummy DIV after last section
       let elms = tmp.querySelectorAll('.is-dummy');
-      dom$J.removeElements(elms);
+      dom$K.removeElements(elms);
       elms = tmp.querySelectorAll('.is-animated');
       Array.prototype.forEach.call(elms, elm => {
-        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');
+        dom$K.removeClass(elm, 'animated');
+        dom$K.removeClass(elm, 'pulse');
+        dom$K.removeClass(elm, 'bounceIn');
+        dom$K.removeClass(elm, 'fadeIn');
+        dom$K.removeClass(elm, 'fadeOut'); //new
+
+        dom$K.removeClass(elm, 'fadeInDown');
+        dom$K.removeClass(elm, 'fadeInLeft');
+        dom$K.removeClass(elm, 'fadeInRight');
+        dom$K.removeClass(elm, 'fadeInUp');
+        dom$K.removeClass(elm, 'flipInX');
+        dom$K.removeClass(elm, 'flipInY');
+        dom$K.removeClass(elm, 'slideInUp');
+        dom$K.removeClass(elm, 'slideInDown');
+        dom$K.removeClass(elm, 'slideInLeft');
+        dom$K.removeClass(elm, 'slideInRight');
+        dom$K.removeClass(elm, 'zoomIn');
         elm.style.animationDelay = '';
       }); //Cleanup utils
 
       elms = tmp.querySelectorAll('.is-appeared');
       Array.prototype.forEach.call(elms, elm => {
-        dom$J.removeClass(elm, 'is-appeared');
+        dom$K.removeClass(elm, 'is-appeared');
       });
       elms = tmp.querySelectorAll('.box-active');
       Array.prototype.forEach.call(elms, elm => {
-        dom$J.removeClass(elm, 'box-active');
+        dom$K.removeClass(elm, 'box-active');
       });
       elms = tmp.querySelectorAll('.section-active');
       Array.prototype.forEach.call(elms, elm => {
-        dom$J.removeClass(elm, 'section-active');
+        dom$K.removeClass(elm, 'section-active');
       });
       elms = tmp.querySelectorAll('.is-section-tool');
-      dom$J.removeElements(elms);
+      dom$K.removeElements(elms);
       var html_content = '';
       var html_footer = '';
       var html_others = ''; // Apply behavior on each row
 
-      const sections = dom$J.elementChildren(tmp);
+      const sections = dom$K.elementChildren(tmp);
       sections.forEach(section => {
         let currentSection = section;
 
-        if (dom$J.hasClass(currentSection, 'is-section')) {
+        if (dom$K.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') + '"';
@@ -14971,7 +14971,7 @@ class HtmlUtil {
 
 }
 
-const dom$I = new Dom();
+const dom$J = new Dom();
 
 class UndoRedo {
   constructor(builder) {
@@ -15022,7 +15022,7 @@ class UndoRedo {
     }
 
     let head = document.getElementsByTagName('head')[0];
-    dom$I.appendHtml(head, styles);
+    dom$J.appendHtml(head, styles);
   }
 
   readHtml() {
@@ -15056,14 +15056,14 @@ class UndoRedo {
       builder.removeAttribute('data-sort');
     });
     let elms = tmp.querySelectorAll('[data-click]');
-    dom$I.removeAttributes(elms, 'data-click');
-    dom$I.removeElements(tmp.querySelectorAll('.is-row-tool'));
-    dom$I.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
-    dom$I.removeElements(tmp.querySelectorAll('.ovl'));
-    dom$I.removeElements(tmp.querySelectorAll('.row-add-initial')); //ContentBox
+    dom$J.removeAttributes(elms, 'data-click');
+    dom$J.removeElements(tmp.querySelectorAll('.is-row-tool'));
+    dom$J.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
+    dom$J.removeElements(tmp.querySelectorAll('.ovl'));
+    dom$J.removeElements(tmp.querySelectorAll('.row-add-initial')); //ContentBox
 
     elms = tmp.querySelectorAll('.is-section-tool');
-    dom$I.removeElements(elms);
+    dom$J.removeElements(elms);
   }
 
   writeHtml(html) {
@@ -15237,13 +15237,13 @@ class UndoRedo {
 
     if (elm) {
       let panel = document.querySelector('.is-side.elementstyles');
-      dom$I.addClass(panel, 'active');
+      dom$J.addClass(panel, 'active');
       setTimeout(() => {
         elm.click();
       }, 700);
     } else {
       let panel = document.querySelector('.is-side.elementstyles');
-      dom$I.removeClass(panel, 'active');
+      dom$J.removeClass(panel, 'active');
     }
 
     if (this.builder.opts.onUndo) {
@@ -15328,13 +15328,13 @@ class UndoRedo {
 
     if (elm) {
       let panel = document.querySelector('.is-side.elementstyles');
-      dom$I.addClass(panel, 'active');
+      dom$J.addClass(panel, 'active');
       setTimeout(() => {
         elm.click();
       }, 700);
     } else {
       let panel = document.querySelector('.is-side.elementstyles');
-      dom$I.removeClass(panel, 'active');
+      dom$J.removeClass(panel, 'active');
     }
 
     if (this.builder.opts.onRedo) {
@@ -15347,7 +15347,7 @@ class UndoRedo {
 }
 
 const util = new Util();
-const dom$H = new Dom();
+const dom$I = new Dom();
 /*!
 Ionicons
 License: MIT
@@ -15469,11 +15469,17 @@ const prepareSvgIcons = () => {
                 <polyline points="17 8 21 12 17 16" />
                 <line x1="14" y1="4" x2="10" y2="20" />
             </symbol>
-
+            <symbol viewBox="0 0 512 512" id="ion-ios-cloud-upload-outline">
+                <path d="M193.3 260.4l-11.6-11.6 74.5-74.3 74.5 74.3-11.7 11.6-54.6-54.6v241.8h-16.5V205.8z"/>
+                <path d="M399.3 183.6c0-1.2.2-2.4.2-3.6 0-64.3-52.8-116.4-116.8-116.4-46.1 0-85.8 27.1-104.4 66.3-8.1-4.1-17.1-6.4-26.8-6.4-29.6 0-54.1 23.6-58.9 52C57.4 187.6 32 222.2 32 261.8c0 49.7 40.1 90.2 89.6 90.2H213v-16h-90.6c-40.9 0-74.2-33.5-74.2-74.6 0-31.8 20.2-61.2 50.2-71.6l8.4-2.9 1.5-8.8c3.6-21.6 22.1-39.3 43.9-39.3 6.9 0 13.7 1.6 19.9 4.8l13.5 6.8 6.5-13.7c16.6-34.9 52.1-57.4 90.4-57.4 55.3 0 100.9 43.3 100.9 98.9 0 13.3-.2 20.3-.2 20.3l15.2.1c36.6.5 65.6 33.4 65.6 70.3 0 36.8-29.8 66.9-66.5 67.1H297v16h101c45 0 82-37.3 82-82.8s-35.5-85.5-80.7-85.6z"/>
+            </symbol>
+            <symbol viewBox="0 0 512 512" id="ion-volume-medium">
+                <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
+            </symbol>
             </defs>
         </svg>`;
   const builderstuff = util.builderStuff();
-  dom$H.appendHtml(builderstuff, html);
+  dom$I.appendHtml(builderstuff, html);
 };
 
 class Snippets {
@@ -16645,7 +16651,7 @@ class Snippets {
 
 }
 
-const dom$G = new Dom();
+const dom$H = new Dom();
 
 const renderQuickAdd = builder => {
   const util = builder.util;
@@ -16674,12 +16680,14 @@ const renderQuickAdd = builder => {
             ${builder.opts.emailMode ? '' : `<button title="${util.out('Two Button')}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Two Button')}</button>`}
             <button title="${util.out('Youtube')}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${util.out('Youtube')}</button>
             <button title="${util.out('Video')}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${util.out('Video')}</button>
+            <button style="display:none" title="${util.out('Audio')}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${util.out('Audio')}</button>
             <button title="${util.out('Map')}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${util.out('Map')}</button>
             <button title="${util.out('Table')}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${util.out('Table')}</button>
             <button title="${util.out('Icon')}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${util.out('Icon')}</button>
             <button title="${util.out('Social Links')}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${util.out('Social Links')}</button>
             <button title="${util.out('HTML/JS')}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${util.out('HTML/JS')}</button>
             <button title="${util.out('Spacer')}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${util.out('Spacer')}</button>
+            <button style="display:none" title="${util.out('Line')}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${util.out('Line')}</button>
             <div class="pop-separator"></div>
             <button title="${util.out('More...')}" class="add-more" style="flex-direction:initial;">${util.out('More...')}</button>
         </div>
@@ -16691,19 +16699,19 @@ const renderQuickAdd = builder => {
             </div>
         </div>
         `;
-    dom$G.appendHtml(builderStuff, html);
+    dom$H.appendHtml(builderStuff, html);
     quickadd = builderStuff.querySelector('.quickadd');
     document.addEventListener('click', e => {
       e = e || window.event;
       var target = e.target || e.srcElement;
 
       if (quickadd.style.display === 'flex') {
-        let a = dom$G.parentsHasClass(target, 'quickadd');
-        let b = dom$G.parentsHasClass(target, 'row-add');
-        let c = dom$G.parentsHasClass(target, 'is-rowadd-tool');
-        let d = dom$G.parentsHasClass(target, 'cell-add');
-        let f = dom$G.parentsHasClass(target, 'elm-add');
-        let g = dom$G.parentsHasClass(target, 'row-add-initial');
+        let a = dom$H.parentsHasClass(target, 'quickadd');
+        let b = dom$H.parentsHasClass(target, 'row-add');
+        let c = dom$H.parentsHasClass(target, 'is-rowadd-tool');
+        let d = dom$H.parentsHasClass(target, 'cell-add');
+        let f = dom$H.parentsHasClass(target, 'elm-add');
+        let g = dom$H.parentsHasClass(target, 'row-add-initial');
 
         if (a || b || c || d || f || g) {
           return;
@@ -16715,12 +16723,12 @@ const renderQuickAdd = builder => {
     });
     let tabs = quickadd.querySelectorAll('.is-pop-tab-item');
     Array.prototype.forEach.call(tabs, tab => {
-      dom$G.addEventListener(tab, 'click', e => {
+      dom$H.addEventListener(tab, 'click', e => {
         let elms = quickadd.querySelectorAll('.is-pop-tab-item');
         Array.prototype.forEach.call(elms, elm => {
-          dom$G.removeClass(elm, 'active');
+          dom$H.removeClass(elm, 'active');
         });
-        dom$G.addClass(e.target, 'active');
+        dom$H.addClass(e.target, 'active');
         let val = quickadd.querySelector('.active').getAttribute('data-value');
 
         if (val === 'left') {
@@ -16731,7 +16739,7 @@ const renderQuickAdd = builder => {
       });
     });
     let elm = quickadd.querySelector('.add-paragraph');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
             Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
@@ -16739,7 +16747,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-headline');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<div class="display">
                 <h1>Headline Goes Here</h1>
@@ -16748,7 +16756,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-image');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<img onload="imageLoaded(this)" src="${builder.opts.snippetPath}example.png" alt="" />`;
 
@@ -16759,31 +16767,31 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-heading1');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = '<h1>Heading 1 here</h1>';
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-heading2');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = '<h2>Heading 2 here</h2>';
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-heading3');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = '<h3>Heading 3 here</h3>';
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-heading4');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = '<h4>Heading 4 here</h4>';
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-preformatted');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<pre>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
             Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
@@ -16791,7 +16799,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-list');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<ul style="list-style: initial;padding-left: 20px;">
                 <li>Lorem Ipsum is simply dummy text</li>
@@ -16800,13 +16808,13 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-quote');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = '<blockquote>Lorem Ipsum is simply dummy text</blockquote>';
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-button');
-    if (elm) dom$G.addEventListener(elm, 'click', () => {
+    if (elm) dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
@@ -16819,7 +16827,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-twobutton');
-    if (elm) dom$G.addEventListener(elm, 'click', () => {
+    if (elm) dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
@@ -16836,14 +16844,21 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-spacer');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = '<div class="spacer height-80"></div>'; // util.addContent(html, mode, 'data-noedit');
 
       util.addContent(html, mode);
     });
+    elm = quickadd.querySelector('.add-line');
+    dom$H.addEventListener(elm, 'click', () => {
+      const mode = quickadd.getAttribute('data-mode');
+      const html = '<hr>'; // util.addContent(html, mode, 'data-noedit');
+
+      util.addContent(html, mode);
+    });
     elm = quickadd.querySelector('.add-code');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       // const mode = quickadd.getAttribute('data-mode');
       let html = '<div class="row clearfix">' + '<div class="column full" data-noedit data-html="' + encodeURIComponent('<h1 id="{id}">Lorem ipsum</h1>' + '<p>This is a code block. You can edit this block using the source dialog.</p>' + '<scr' + 'ipt>' + 'var docReady = function (fn) {' + 'var stateCheck = setInterval(function () {' + 'if (document.readyState !== "complete") return;' + 'clearInterval(stateCheck);' + 'try{fn()}catch(e){}' + '}, 1);' + '};' + 'docReady(function() {' + 'document.querySelector(\'#{id}\').innerHTML =\'<b>Hello World..!</b>\';' + '});' + '</scr' + 'ipt>') + '">' + '</div>' + '</div>';
       let noedit = true;
@@ -16884,7 +16899,7 @@ const renderQuickAdd = builder => {
       builder.addSnippet(html, bSnippet, noedit);
     });
     elm = quickadd.querySelector('.add-table');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<table class="default" style="border-collapse:collapse;width:100%;">
                 <thead>
@@ -16901,7 +16916,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-icon');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<div style="text-align: center;">
             <i class="icon ion-android-alarm-clock size-80"></i>
@@ -16909,7 +16924,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-social');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<div class="is-social" style="text-align: center;">
                 <a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>
@@ -16919,7 +16934,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-map');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<div class="embed-responsive embed-responsive-16by9">
             <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&amp;hl=en&amp;sll=-7.981898,112.626504&amp;sspn=0.009084,0.016512&amp;oq=melbourne&amp;hnear=Melbourne+Victoria,+Australia&amp;t=m&amp;z=10&amp;output=embed"></iframe>
@@ -16927,7 +16942,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-youtube');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<div class="embed-responsive embed-responsive-16by9">
                 <iframe width="560" height="315" src="https://www.youtube.com/embed/P5yHEKqx86U?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
@@ -16935,7 +16950,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-video');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<video style="width: 100%;" loop="" autoplay="">
                 <source src="${builder.opts.snippetPath}example.mp4" type="video/mp4"></video>`;
@@ -16947,9 +16962,30 @@ const renderQuickAdd = builder => {
 
       util.addContent(html, mode);
     });
+    elm = quickadd.querySelector('.add-audio');
+    dom$H.addEventListener(elm, 'click', () => {
+      const mode = quickadd.getAttribute('data-mode');
+      let html = `<div style="display:flex;position:relative;margin:15px 0;background:transparent;">
+                        <audio controls="" style="width:100%">
+                            <source src="${builder.opts.snippetPath}example.mp3" type="audio/mpeg">
+                            Your browser does not support the audio element.
+                        </audio>
+                    </div>`;
+
+      if (builder.opts.snippetSampleAudio) {
+        html = `<div style="display:flex;position:relative;margin:15px 0;background:transparent;">
+                            <audio controls="" style="width:100%">
+                                <source src="${builder.opts.snippetSampleAudio}" type="audio/mpeg">
+                                Your browser does not support the audio element.
+                            </audio>
+                    </div>`;
+      }
+
+      util.addContent(html, mode);
+    });
     const snippets = new Snippets(builder);
     elm = quickadd.querySelector('.add-more');
-    dom$G.addEventListener(elm, 'click', () => {
+    dom$H.addEventListener(elm, 'click', () => {
       let modal = builderStuff.querySelector('.snippets');
       util.showModal(modal, false, null, false); // let iframe = modal.querySelector('iframe');
       // if(iframe.src==='about:blank') {
@@ -16973,7 +17009,7 @@ const renderQuickAdd = builder => {
   return quickadd;
 };
 
-const dom$F = new Dom();
+const dom$G = new Dom();
 class Grid {
   constructor(builder) {
     this.builder = builder;
@@ -17148,7 +17184,7 @@ class Grid {
       var rowElement = row.cloneNode(true);
       rowElement.innerHTML = '';
       rowElement.appendChild(cell);
-      dom$F.moveAfter(rowElement, row); //re-add tool
+      dom$G.moveAfter(rowElement, row); //re-add tool
 
       let builderActive = document.querySelector('.builder-active');
       builder.applyBehaviorOn(builderActive);
@@ -17173,7 +17209,7 @@ class Grid {
     if (!cell) return;
     this.builder.uo.saveForUndo();
     var cellElement = cell.cloneNode(true);
-    dom$F.removeClass(cellElement, 'cell-active');
+    dom$G.removeClass(cellElement, 'cell-active');
     cellElement.removeAttribute('data-click');
     let row = cell.parentNode;
     let num = 2; //is-row-tool & is-rowadd-tool
@@ -17273,15 +17309,15 @@ class Grid {
 
           for (let j = 0; j < group.length; j++) {
             if (group[j].length === 3) {
-              if (dom$F.hasClass(cell, group[j][0]) && dom$F.hasClass(cellnext, group[j][1]) && dom$F.hasClass(cellnext2, group[j][2])) {
+              if (dom$G.hasClass(cell, group[j][0]) && dom$G.hasClass(cellnext, group[j][1]) && dom$G.hasClass(cellnext2, group[j][2])) {
                 if (j + 1 === group.length) ; else {
                   this.builder.uo.saveForUndo();
-                  dom$F.removeClass(cell, group[j][0]);
-                  dom$F.removeClass(cellnext, group[j][1]);
-                  dom$F.removeClass(cellnext2, group[j][2]);
-                  dom$F.addClass(cell, group[j + 1][0]);
-                  dom$F.addClass(cellnext, group[j + 1][1]);
-                  dom$F.addClass(cellnext2, group[j + 1][2]);
+                  dom$G.removeClass(cell, group[j][0]);
+                  dom$G.removeClass(cellnext, group[j][1]);
+                  dom$G.removeClass(cellnext2, group[j][2]);
+                  dom$G.addClass(cell, group[j + 1][0]);
+                  dom$G.addClass(cellnext, group[j + 1][1]);
+                  dom$G.addClass(cellnext2, group[j + 1][2]);
                   columnTool.position(cell);
                   this.builder.opts.onChange();
                   return;
@@ -17297,13 +17333,13 @@ class Grid {
 
         for (let j = 0; j < group.length; j++) {
           if (group[j].length === 2) {
-            if (dom$F.hasClass(cell, group[j][0]) && dom$F.hasClass(cellnext, group[j][1])) {
+            if (dom$G.hasClass(cell, group[j][0]) && dom$G.hasClass(cellnext, group[j][1])) {
               if (j + 1 === group.length) ; else {
                 this.builder.uo.saveForUndo();
-                dom$F.removeClass(cell, group[j][0]);
-                dom$F.removeClass(cellnext, group[j][1]);
-                dom$F.addClass(cell, group[j + 1][0]);
-                dom$F.addClass(cellnext, group[j + 1][1]);
+                dom$G.removeClass(cell, group[j][0]);
+                dom$G.removeClass(cellnext, group[j][1]);
+                dom$G.addClass(cell, group[j + 1][0]);
+                dom$G.addClass(cellnext, group[j + 1][1]);
                 columnTool.position(cell);
                 this.builder.opts.onChange();
                 return;
@@ -17319,86 +17355,86 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
-      if (!dom$F.hasClass(cell, colClass[11])) {
+      if (!dom$G.hasClass(cell, colClass[11])) {
         //if not column full
-        if (dom$F.hasClass(cell, colClass[11])) {
+        if (dom$G.hasClass(cell, colClass[11])) {
           return;
         }
 
-        if (dom$F.hasClass(cellnext, colClass[0])) {
+        if (dom$G.hasClass(cellnext, colClass[0])) {
           return;
         }
 
         this.builder.uo.saveForUndo();
 
-        if (dom$F.hasClass(cell, colClass[10])) {
-          dom$F.removeClass(cell, colClass[10]);
-          dom$F.addClass(cell, colClass[11]);
-        } else if (dom$F.hasClass(cell, colClass[9])) {
-          dom$F.removeClass(cell, colClass[9]);
-          dom$F.addClass(cell, colClass[10]);
-        } else if (dom$F.hasClass(cell, colClass[8])) {
-          dom$F.removeClass(cell, colClass[8]);
-          dom$F.addClass(cell, colClass[9]);
-        } else if (dom$F.hasClass(cell, colClass[7])) {
-          dom$F.removeClass(cell, colClass[7]);
-          dom$F.addClass(cell, colClass[8]);
-        } else if (dom$F.hasClass(cell, colClass[6])) {
-          dom$F.removeClass(cell, colClass[6]);
-          dom$F.addClass(cell, colClass[7]);
-        } else if (dom$F.hasClass(cell, colClass[5])) {
-          dom$F.removeClass(cell, colClass[5]);
-          dom$F.addClass(cell, colClass[6]);
-        } else if (dom$F.hasClass(cell, colClass[4])) {
-          dom$F.removeClass(cell, colClass[4]);
-          dom$F.addClass(cell, colClass[5]);
-        } else if (dom$F.hasClass(cell, colClass[3])) {
-          dom$F.removeClass(cell, colClass[3]);
-          dom$F.addClass(cell, colClass[4]);
-        } else if (dom$F.hasClass(cell, colClass[2])) {
-          dom$F.removeClass(cell, colClass[2]);
-          dom$F.addClass(cell, colClass[3]);
-        } else if (dom$F.hasClass(cell, colClass[1])) {
-          dom$F.removeClass(cell, colClass[1]);
-          dom$F.addClass(cell, colClass[2]);
-        } else if (dom$F.hasClass(cell, colClass[0])) {
-          dom$F.removeClass(cell, colClass[0]);
-          dom$F.addClass(cell, colClass[1]);
-        }
-
-        if (dom$F.hasClass(cellnext, colClass[1])) {
-          dom$F.removeClass(cellnext, colClass[1]);
-          dom$F.addClass(cellnext, colClass[0]);
-        } else if (dom$F.hasClass(cellnext, colClass[2])) {
-          dom$F.removeClass(cellnext, colClass[2]);
-          dom$F.addClass(cellnext, colClass[1]);
-        } else if (dom$F.hasClass(cellnext, colClass[3])) {
-          dom$F.removeClass(cellnext, colClass[3]);
-          dom$F.addClass(cellnext, colClass[2]);
-        } else if (dom$F.hasClass(cellnext, colClass[4])) {
-          dom$F.removeClass(cellnext, colClass[4]);
-          dom$F.addClass(cellnext, colClass[3]);
-        } else if (dom$F.hasClass(cellnext, colClass[5])) {
-          dom$F.removeClass(cellnext, colClass[5]);
-          dom$F.addClass(cellnext, colClass[4]);
-        } else if (dom$F.hasClass(cellnext, colClass[6])) {
-          dom$F.removeClass(cellnext, colClass[6]);
-          dom$F.addClass(cellnext, colClass[5]);
-        } else if (dom$F.hasClass(cellnext, colClass[7])) {
-          dom$F.removeClass(cellnext, colClass[7]);
-          dom$F.addClass(cellnext, colClass[6]);
-        } else if (dom$F.hasClass(cellnext, colClass[8])) {
-          dom$F.removeClass(cellnext, colClass[8]);
-          dom$F.addClass(cellnext, colClass[7]);
-        } else if (dom$F.hasClass(cellnext, colClass[9])) {
-          dom$F.removeClass(cellnext, colClass[9]);
-          dom$F.addClass(cellnext, colClass[8]);
-        } else if (dom$F.hasClass(cellnext, colClass[10])) {
-          dom$F.removeClass(cellnext, colClass[10]);
-          dom$F.addClass(cellnext, colClass[9]);
-        } else if (dom$F.hasClass(cellnext, colClass[11])) {
-          dom$F.removeClass(cellnext, colClass[11]);
-          dom$F.addClass(cellnext, colClass[10]);
+        if (dom$G.hasClass(cell, colClass[10])) {
+          dom$G.removeClass(cell, colClass[10]);
+          dom$G.addClass(cell, colClass[11]);
+        } else if (dom$G.hasClass(cell, colClass[9])) {
+          dom$G.removeClass(cell, colClass[9]);
+          dom$G.addClass(cell, colClass[10]);
+        } else if (dom$G.hasClass(cell, colClass[8])) {
+          dom$G.removeClass(cell, colClass[8]);
+          dom$G.addClass(cell, colClass[9]);
+        } else if (dom$G.hasClass(cell, colClass[7])) {
+          dom$G.removeClass(cell, colClass[7]);
+          dom$G.addClass(cell, colClass[8]);
+        } else if (dom$G.hasClass(cell, colClass[6])) {
+          dom$G.removeClass(cell, colClass[6]);
+          dom$G.addClass(cell, colClass[7]);
+        } else if (dom$G.hasClass(cell, colClass[5])) {
+          dom$G.removeClass(cell, colClass[5]);
+          dom$G.addClass(cell, colClass[6]);
+        } else if (dom$G.hasClass(cell, colClass[4])) {
+          dom$G.removeClass(cell, colClass[4]);
+          dom$G.addClass(cell, colClass[5]);
+        } else if (dom$G.hasClass(cell, colClass[3])) {
+          dom$G.removeClass(cell, colClass[3]);
+          dom$G.addClass(cell, colClass[4]);
+        } else if (dom$G.hasClass(cell, colClass[2])) {
+          dom$G.removeClass(cell, colClass[2]);
+          dom$G.addClass(cell, colClass[3]);
+        } else if (dom$G.hasClass(cell, colClass[1])) {
+          dom$G.removeClass(cell, colClass[1]);
+          dom$G.addClass(cell, colClass[2]);
+        } else if (dom$G.hasClass(cell, colClass[0])) {
+          dom$G.removeClass(cell, colClass[0]);
+          dom$G.addClass(cell, colClass[1]);
+        }
+
+        if (dom$G.hasClass(cellnext, colClass[1])) {
+          dom$G.removeClass(cellnext, colClass[1]);
+          dom$G.addClass(cellnext, colClass[0]);
+        } else if (dom$G.hasClass(cellnext, colClass[2])) {
+          dom$G.removeClass(cellnext, colClass[2]);
+          dom$G.addClass(cellnext, colClass[1]);
+        } else if (dom$G.hasClass(cellnext, colClass[3])) {
+          dom$G.removeClass(cellnext, colClass[3]);
+          dom$G.addClass(cellnext, colClass[2]);
+        } else if (dom$G.hasClass(cellnext, colClass[4])) {
+          dom$G.removeClass(cellnext, colClass[4]);
+          dom$G.addClass(cellnext, colClass[3]);
+        } else if (dom$G.hasClass(cellnext, colClass[5])) {
+          dom$G.removeClass(cellnext, colClass[5]);
+          dom$G.addClass(cellnext, colClass[4]);
+        } else if (dom$G.hasClass(cellnext, colClass[6])) {
+          dom$G.removeClass(cellnext, colClass[6]);
+          dom$G.addClass(cellnext, colClass[5]);
+        } else if (dom$G.hasClass(cellnext, colClass[7])) {
+          dom$G.removeClass(cellnext, colClass[7]);
+          dom$G.addClass(cellnext, colClass[6]);
+        } else if (dom$G.hasClass(cellnext, colClass[8])) {
+          dom$G.removeClass(cellnext, colClass[8]);
+          dom$G.addClass(cellnext, colClass[7]);
+        } else if (dom$G.hasClass(cellnext, colClass[9])) {
+          dom$G.removeClass(cellnext, colClass[9]);
+          dom$G.addClass(cellnext, colClass[8]);
+        } else if (dom$G.hasClass(cellnext, colClass[10])) {
+          dom$G.removeClass(cellnext, colClass[10]);
+          dom$G.addClass(cellnext, colClass[9]);
+        } else if (dom$G.hasClass(cellnext, colClass[11])) {
+          dom$G.removeClass(cellnext, colClass[11]);
+          dom$G.addClass(cellnext, colClass[10]);
         }
 
         columnTool.position(cell);
@@ -17436,15 +17472,15 @@ class Grid {
 
           for (let j = 0; j < group.length; j++) {
             if (group[j].length === 3) {
-              if (dom$F.hasClass(cell, group[j][0]) && dom$F.hasClass(cellnext, group[j][1]) && dom$F.hasClass(cellnext2, group[j][2])) {
+              if (dom$G.hasClass(cell, group[j][0]) && dom$G.hasClass(cellnext, group[j][1]) && dom$G.hasClass(cellnext2, group[j][2])) {
                 if (j === 0) ; else {
                   this.builder.uo.saveForUndo();
-                  dom$F.removeClass(cell, group[j][0]);
-                  dom$F.removeClass(cellnext, group[j][1]);
-                  dom$F.removeClass(cellnext2, group[j][2]);
-                  dom$F.addClass(cell, group[j - 1][0]);
-                  dom$F.addClass(cellnext, group[j - 1][1]);
-                  dom$F.addClass(cellnext2, group[j - 1][2]);
+                  dom$G.removeClass(cell, group[j][0]);
+                  dom$G.removeClass(cellnext, group[j][1]);
+                  dom$G.removeClass(cellnext2, group[j][2]);
+                  dom$G.addClass(cell, group[j - 1][0]);
+                  dom$G.addClass(cellnext, group[j - 1][1]);
+                  dom$G.addClass(cellnext2, group[j - 1][2]);
                   columnTool.position(cell);
                   this.builder.opts.onChange();
                   return;
@@ -17460,13 +17496,13 @@ class Grid {
 
         for (let j = 0; j < group.length; j++) {
           if (group[j].length === 2) {
-            if (dom$F.hasClass(cell, group[j][0]) && dom$F.hasClass(cellnext, group[j][1])) {
+            if (dom$G.hasClass(cell, group[j][0]) && dom$G.hasClass(cellnext, group[j][1])) {
               if (j === 0) ; else {
                 this.builder.uo.saveForUndo();
-                dom$F.removeClass(cell, group[j][0]);
-                dom$F.removeClass(cellnext, group[j][1]);
-                dom$F.addClass(cell, group[j - 1][0]);
-                dom$F.addClass(cellnext, group[j - 1][1]);
+                dom$G.removeClass(cell, group[j][0]);
+                dom$G.removeClass(cellnext, group[j][1]);
+                dom$G.addClass(cell, group[j - 1][0]);
+                dom$G.addClass(cellnext, group[j - 1][1]);
                 columnTool.position(cell);
                 this.builder.opts.onChange();
                 return;
@@ -17484,86 +17520,86 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
-      if (!dom$F.hasClass(cell, colClass[11])) {
+      if (!dom$G.hasClass(cell, colClass[11])) {
         //if not column full
-        if (dom$F.hasClass(cell, colClass[0])) {
+        if (dom$G.hasClass(cell, colClass[0])) {
           return;
         }
 
-        if (dom$F.hasClass(cellnext, colClass[11])) {
+        if (dom$G.hasClass(cellnext, colClass[11])) {
           return;
         }
 
         this.builder.uo.saveForUndo();
 
-        if (dom$F.hasClass(cell, colClass[11])) {
-          dom$F.removeClass(cell, colClass[11]);
-          dom$F.addClass(cell, colClass[10]);
-        } else if (dom$F.hasClass(cell, colClass[10])) {
-          dom$F.removeClass(cell, colClass[10]);
-          dom$F.addClass(cell, colClass[9]);
-        } else if (dom$F.hasClass(cell, colClass[9])) {
-          dom$F.removeClass(cell, colClass[9]);
-          dom$F.addClass(cell, colClass[8]);
-        } else if (dom$F.hasClass(cell, colClass[8])) {
-          dom$F.removeClass(cell, colClass[8]);
-          dom$F.addClass(cell, colClass[7]);
-        } else if (dom$F.hasClass(cell, colClass[7])) {
-          dom$F.removeClass(cell, colClass[7]);
-          dom$F.addClass(cell, colClass[6]);
-        } else if (dom$F.hasClass(cell, colClass[6])) {
-          dom$F.removeClass(cell, colClass[6]);
-          dom$F.addClass(cell, colClass[5]);
-        } else if (dom$F.hasClass(cell, colClass[5])) {
-          dom$F.removeClass(cell, colClass[5]);
-          dom$F.addClass(cell, colClass[4]);
-        } else if (dom$F.hasClass(cell, colClass[4])) {
-          dom$F.removeClass(cell, colClass[4]);
-          dom$F.addClass(cell, colClass[3]);
-        } else if (dom$F.hasClass(cell, colClass[3])) {
-          dom$F.removeClass(cell, colClass[3]);
-          dom$F.addClass(cell, colClass[2]);
-        } else if (dom$F.hasClass(cell, colClass[2])) {
-          dom$F.removeClass(cell, colClass[2]);
-          dom$F.addClass(cell, colClass[1]);
-        } else if (dom$F.hasClass(cell, colClass[1])) {
-          dom$F.removeClass(cell, colClass[1]);
-          dom$F.addClass(cell, colClass[0]);
-        }
-
-        if (dom$F.hasClass(cellnext, colClass[0])) {
-          dom$F.removeClass(cellnext, colClass[0]);
-          dom$F.addClass(cellnext, colClass[1]);
-        } else if (dom$F.hasClass(cellnext, colClass[1])) {
-          dom$F.removeClass(cellnext, colClass[1]);
-          dom$F.addClass(cellnext, colClass[2]);
-        } else if (dom$F.hasClass(cellnext, colClass[2])) {
-          dom$F.removeClass(cellnext, colClass[2]);
-          dom$F.addClass(cellnext, colClass[3]);
-        } else if (dom$F.hasClass(cellnext, colClass[3])) {
-          dom$F.removeClass(cellnext, colClass[3]);
-          dom$F.addClass(cellnext, colClass[4]);
-        } else if (dom$F.hasClass(cellnext, colClass[4])) {
-          dom$F.removeClass(cellnext, colClass[4]);
-          dom$F.addClass(cellnext, colClass[5]);
-        } else if (dom$F.hasClass(cellnext, colClass[5])) {
-          dom$F.removeClass(cellnext, colClass[5]);
-          dom$F.addClass(cellnext, colClass[6]);
-        } else if (dom$F.hasClass(cellnext, colClass[6])) {
-          dom$F.removeClass(cellnext, colClass[6]);
-          dom$F.addClass(cellnext, colClass[7]);
-        } else if (dom$F.hasClass(cellnext, colClass[7])) {
-          dom$F.removeClass(cellnext, colClass[7]);
-          dom$F.addClass(cellnext, colClass[8]);
-        } else if (dom$F.hasClass(cellnext, colClass[8])) {
-          dom$F.removeClass(cellnext, colClass[8]);
-          dom$F.addClass(cellnext, colClass[9]);
-        } else if (dom$F.hasClass(cellnext, colClass[9])) {
-          dom$F.removeClass(cellnext, colClass[9]);
-          dom$F.addClass(cellnext, colClass[10]);
-        } else if (dom$F.hasClass(cellnext, colClass[10])) {
-          dom$F.removeClass(cellnext, colClass[10]);
-          dom$F.addClass(cellnext, colClass[11]);
+        if (dom$G.hasClass(cell, colClass[11])) {
+          dom$G.removeClass(cell, colClass[11]);
+          dom$G.addClass(cell, colClass[10]);
+        } else if (dom$G.hasClass(cell, colClass[10])) {
+          dom$G.removeClass(cell, colClass[10]);
+          dom$G.addClass(cell, colClass[9]);
+        } else if (dom$G.hasClass(cell, colClass[9])) {
+          dom$G.removeClass(cell, colClass[9]);
+          dom$G.addClass(cell, colClass[8]);
+        } else if (dom$G.hasClass(cell, colClass[8])) {
+          dom$G.removeClass(cell, colClass[8]);
+          dom$G.addClass(cell, colClass[7]);
+        } else if (dom$G.hasClass(cell, colClass[7])) {
+          dom$G.removeClass(cell, colClass[7]);
+          dom$G.addClass(cell, colClass[6]);
+        } else if (dom$G.hasClass(cell, colClass[6])) {
+          dom$G.removeClass(cell, colClass[6]);
+          dom$G.addClass(cell, colClass[5]);
+        } else if (dom$G.hasClass(cell, colClass[5])) {
+          dom$G.removeClass(cell, colClass[5]);
+          dom$G.addClass(cell, colClass[4]);
+        } else if (dom$G.hasClass(cell, colClass[4])) {
+          dom$G.removeClass(cell, colClass[4]);
+          dom$G.addClass(cell, colClass[3]);
+        } else if (dom$G.hasClass(cell, colClass[3])) {
+          dom$G.removeClass(cell, colClass[3]);
+          dom$G.addClass(cell, colClass[2]);
+        } else if (dom$G.hasClass(cell, colClass[2])) {
+          dom$G.removeClass(cell, colClass[2]);
+          dom$G.addClass(cell, colClass[1]);
+        } else if (dom$G.hasClass(cell, colClass[1])) {
+          dom$G.removeClass(cell, colClass[1]);
+          dom$G.addClass(cell, colClass[0]);
+        }
+
+        if (dom$G.hasClass(cellnext, colClass[0])) {
+          dom$G.removeClass(cellnext, colClass[0]);
+          dom$G.addClass(cellnext, colClass[1]);
+        } else if (dom$G.hasClass(cellnext, colClass[1])) {
+          dom$G.removeClass(cellnext, colClass[1]);
+          dom$G.addClass(cellnext, colClass[2]);
+        } else if (dom$G.hasClass(cellnext, colClass[2])) {
+          dom$G.removeClass(cellnext, colClass[2]);
+          dom$G.addClass(cellnext, colClass[3]);
+        } else if (dom$G.hasClass(cellnext, colClass[3])) {
+          dom$G.removeClass(cellnext, colClass[3]);
+          dom$G.addClass(cellnext, colClass[4]);
+        } else if (dom$G.hasClass(cellnext, colClass[4])) {
+          dom$G.removeClass(cellnext, colClass[4]);
+          dom$G.addClass(cellnext, colClass[5]);
+        } else if (dom$G.hasClass(cellnext, colClass[5])) {
+          dom$G.removeClass(cellnext, colClass[5]);
+          dom$G.addClass(cellnext, colClass[6]);
+        } else if (dom$G.hasClass(cellnext, colClass[6])) {
+          dom$G.removeClass(cellnext, colClass[6]);
+          dom$G.addClass(cellnext, colClass[7]);
+        } else if (dom$G.hasClass(cellnext, colClass[7])) {
+          dom$G.removeClass(cellnext, colClass[7]);
+          dom$G.addClass(cellnext, colClass[8]);
+        } else if (dom$G.hasClass(cellnext, colClass[8])) {
+          dom$G.removeClass(cellnext, colClass[8]);
+          dom$G.addClass(cellnext, colClass[9]);
+        } else if (dom$G.hasClass(cellnext, colClass[9])) {
+          dom$G.removeClass(cellnext, colClass[9]);
+          dom$G.addClass(cellnext, colClass[10]);
+        } else if (dom$G.hasClass(cellnext, colClass[10])) {
+          dom$G.removeClass(cellnext, colClass[10]);
+          dom$G.addClass(cellnext, colClass[11]);
         }
 
         columnTool.position(cell);
@@ -17591,7 +17627,7 @@ class Grid {
 
     if (!row) return; //Change to row selection
 
-    dom$F.removeClass(row, 'row-outline');
+    dom$G.removeClass(row, 'row-outline');
     this.columnTool.hide(); //Hide Column tool
 
     util.confirm(util.out('Are you sure you want to delete this block?'), ok => {
@@ -17636,7 +17672,7 @@ class Grid {
 
     if (!row) return; //Change to row selection
 
-    dom$F.removeClass(row, 'row-outline');
+    dom$G.removeClass(row, 'row-outline');
     columnTool.hide(); //Hide Column tool
 
     if (row.previousElementSibling) {
@@ -17652,7 +17688,7 @@ class Grid {
       Array.prototype.forEach.call(builders, builder => {
         if (builder.innerHTML === currContainer.innerHTML) {
           if (prev) {
-            dom$F.moveAfter(row, prev.lastChild);
+            dom$G.moveAfter(row, prev.lastChild);
             this.rowTool.position(row);
             util.checkEmpty();
             this.builder.opts.onChange();
@@ -17683,7 +17719,7 @@ class Grid {
 
     if (!row) return; //Change to row selection
 
-    dom$F.removeClass(row, 'row-outline');
+    dom$G.removeClass(row, 'row-outline');
     columnTool.hide(); //Hide Column tool
 
     if (row.nextElementSibling) {
@@ -17730,14 +17766,14 @@ class Grid {
 
     if (!row) return; //Change to row selection
 
-    dom$F.removeClass(row, 'row-outline');
+    dom$G.removeClass(row, 'row-outline');
     columnTool.hide(); //Hide Column tool
 
     this.builder.uo.saveForUndo(); //Clone row & cleanup attached tool & event
 
     const rowElement = row.cloneNode(true);
     rowElement.removeChild(rowElement.querySelector('.is-row-tool'));
-    let cols = dom$F.elementChildren(rowElement);
+    let cols = dom$G.elementChildren(rowElement);
     cols.forEach(col => {
       col.removeAttribute('data-click');
 
@@ -17745,13 +17781,13 @@ class Grid {
         builder.activeCol = col;
       }
     });
-    dom$F.moveAfter(rowElement, row); //Unselect current row
+    dom$G.moveAfter(rowElement, row); //Unselect current row
 
-    dom$F.removeClass(row, 'row-active');
-    dom$F.removeClass(row, 'row-outline');
-    cols = dom$F.elementChildren(row);
+    dom$G.removeClass(row, 'row-active');
+    dom$G.removeClass(row, 'row-outline');
+    cols = dom$G.elementChildren(row);
     cols.forEach(col => {
-      dom$F.removeClass(col, 'cell-active');
+      dom$G.removeClass(col, 'cell-active');
     }); //re-add tool
 
     let builderActive = document.querySelector('.builder-active');
@@ -17787,31 +17823,31 @@ class RowTool$1 {
     const builderStuff = this.builder.builderStuff;
     let rowTool = row.querySelector('.is-row-tool');
     let rowMore = builderStuff.querySelector('.rowmore');
-    dom$F.addClass(rowMore, 'transition1');
+    dom$G.addClass(rowMore, 'transition1');
     const elm = rowTool.querySelector('.row-more');
     const top = elm.getBoundingClientRect().top + window.pageYOffset;
     const left = elm.getBoundingClientRect().left + window.pageXOffset; // const w = rowMore.offsetWidth; 
 
     rowMore.style.top = top - 8 + 'px';
-    dom$F.removeClass(rowMore, 'arrow-bottom');
-    dom$F.removeClass(rowMore, 'arrow-left');
-    dom$F.removeClass(rowMore, 'arrow-right');
-    dom$F.removeClass(rowMore, 'center');
-    dom$F.removeClass(rowMore, 'right');
-    dom$F.removeClass(rowMore, 'left');
+    dom$G.removeClass(rowMore, 'arrow-bottom');
+    dom$G.removeClass(rowMore, 'arrow-left');
+    dom$G.removeClass(rowMore, 'arrow-right');
+    dom$G.removeClass(rowMore, 'center');
+    dom$G.removeClass(rowMore, 'right');
+    dom$G.removeClass(rowMore, 'left');
 
     if (this.builder.opts.rowTool === 'right') {
       rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
-      dom$F.addClass(rowMore, 'arrow-right');
-      dom$F.addClass(rowMore, 'left');
+      dom$G.addClass(rowMore, 'arrow-right');
+      dom$G.addClass(rowMore, 'left');
     } else {
       rowMore.style.left = left + 35 + 'px';
-      dom$F.addClass(rowMore, 'arrow-left');
-      dom$F.addClass(rowMore, 'left');
+      dom$G.addClass(rowMore, 'arrow-left');
+      dom$G.addClass(rowMore, 'left');
     }
 
     setTimeout(() => {
-      dom$F.removeClass(rowMore, 'transition1');
+      dom$G.removeClass(rowMore, 'transition1');
     }, 300);
   }
 
@@ -17826,7 +17862,7 @@ class ColumnTool$1 {
     const builderStuff = this.builder.builderStuff;
     this.columnTool = builderStuff.querySelector('.is-column-tool');
     this.columnMore = builderStuff.querySelector('.columnmore');
-    dom$F.addClass(this.columnMore, 'transition1');
+    dom$G.addClass(this.columnMore, 'transition1');
     setTimeout(() => {
       this.columnTool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
       this.columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
@@ -17835,7 +17871,7 @@ class ColumnTool$1 {
       this.columnMore.style.top = top + 35 + 'px';
       this.columnMore.style.left = left + 19 + 'px';
       setTimeout(() => {
-        dom$F.removeClass(this.columnMore, 'transition1');
+        dom$G.removeClass(this.columnMore, 'transition1');
       }, 300);
     }, 300);
   }
@@ -17844,14 +17880,14 @@ class ColumnTool$1 {
     const builderStuff = this.builder.builderStuff;
     this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
 
-    dom$F.removeClass(this.columnTool, 'active');
+    dom$G.removeClass(this.columnTool, 'active');
   }
 
   show() {
     const builderStuff = this.builder.builderStuff;
     this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
 
-    dom$F.addClass(this.columnTool, 'active');
+    dom$G.addClass(this.columnTool, 'active');
   }
 
 }
@@ -17969,7 +18005,7 @@ class Draggable$1 {
 
 }
 
-const dom$E = new Dom();
+const dom$F = new Dom();
 
 const renderGridEditor = builder => {
   const util = builder.util;
@@ -18020,7 +18056,7 @@ const renderGridEditor = builder => {
     </div>`; //LATER:
   //<button title="${util.out('Element Tool')}" class="cell-elmtool"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></button>
 
-  dom$E.appendHtml(builderStuff, html);
+  dom$F.appendHtml(builderStuff, html);
   new Draggable$1({
     selector: '.is-draggable'
   });
@@ -18029,12 +18065,12 @@ const renderGridEditor = builder => {
     e = e || window.event;
     var target = e.target || e.srcElement;
 
-    if (dom$E.hasClass(grideditor, 'active')) {
-      let a = dom$E.parentsHasClass(target, 'is-builder');
-      let b = dom$E.parentsHasClass(target, 'grideditor');
-      let c = dom$E.parentsHasClass(target, 'is-modal');
-      let d = dom$E.parentsHasClass(target, 'is-pop');
-      let f = dom$E.parentsHasClass(target, 'rte-grideditor') || dom$E.hasClass(target, 'rte-grideditor');
+    if (dom$F.hasClass(grideditor, 'active')) {
+      let a = dom$F.parentsHasClass(target, 'is-builder');
+      let b = dom$F.parentsHasClass(target, 'grideditor');
+      let c = dom$F.parentsHasClass(target, 'is-modal');
+      let d = dom$F.parentsHasClass(target, 'is-pop');
+      let f = dom$F.parentsHasClass(target, 'rte-grideditor') || dom$F.hasClass(target, 'rte-grideditor');
 
       if (a || b || c || d || f) {
         grideditor.style.display = '';
@@ -18045,30 +18081,30 @@ const renderGridEditor = builder => {
     }
   }, false);
   let elm = grideditor.querySelector('.is-modal-close');
-  dom$E.addEventListener(elm, 'click', () => {
-    dom$E.removeClass(grideditor, 'active');
+  dom$F.addEventListener(elm, 'click', () => {
+    dom$F.removeClass(grideditor, 'active');
     const builders = document.querySelectorAll(builder.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       builder.removeAttribute('grideditor');
     });
   });
   const btnGridOutline = grideditor.querySelector('.grid-outline');
-  dom$E.addEventListener(btnGridOutline, 'click', () => {
+  dom$F.addEventListener(btnGridOutline, 'click', () => {
     const builders = document.querySelectorAll(builder.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       if (builder.hasAttribute('gridoutline')) {
         builder.removeAttribute('gridoutline');
-        dom$E.removeClass(btnGridOutline, 'on');
+        dom$F.removeClass(btnGridOutline, 'on');
       } else {
         builder.setAttribute('gridoutline', '');
-        dom$E.addClass(btnGridOutline, 'on');
+        dom$F.addClass(btnGridOutline, 'on');
       }
     });
   });
   const quickadd = renderQuickAdd(builder); // CELL
 
   const btnAdd = grideditor.querySelector('.cell-add');
-  dom$E.addEventListener(btnAdd, 'click', () => {
+  dom$F.addEventListener(btnAdd, 'click', () => {
     let tabs = quickadd.querySelector('.is-pop-tabs');
     tabs.style.display = 'flex';
     const top = btnAdd.getBoundingClientRect().top + window.pageYOffset;
@@ -18080,13 +18116,13 @@ const renderGridEditor = builder => {
 
     quickadd.style.top = top + 'px';
     quickadd.style.left = left - w - 8 + 'px';
-    dom$E.removeClass(quickadd, 'arrow-bottom');
-    dom$E.removeClass(quickadd, 'arrow-left');
-    dom$E.removeClass(quickadd, 'arrow-top');
-    dom$E.removeClass(quickadd, 'center');
-    dom$E.removeClass(quickadd, 'left');
-    dom$E.addClass(quickadd, 'arrow-right');
-    dom$E.addClass(quickadd, 'right');
+    dom$F.removeClass(quickadd, 'arrow-bottom');
+    dom$F.removeClass(quickadd, 'arrow-left');
+    dom$F.removeClass(quickadd, 'arrow-top');
+    dom$F.removeClass(quickadd, 'center');
+    dom$F.removeClass(quickadd, 'left');
+    dom$F.addClass(quickadd, 'arrow-right');
+    dom$F.addClass(quickadd, 'right');
     let val = quickadd.querySelector('.active').getAttribute('data-value');
 
     if (val === 'left') {
@@ -18096,53 +18132,53 @@ const renderGridEditor = builder => {
     }
   });
   elm = grideditor.querySelector('.cell-prev');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.moveColumnPrevious();
     util.clearControls();
   });
   elm = grideditor.querySelector('.cell-next');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.moveColumnNext();
     util.clearControls();
   });
   elm = grideditor.querySelector('.cell-increase');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.increaseColumn();
     util.clearControls();
   });
   elm = grideditor.querySelector('.cell-decrease');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.decreaseColumn();
     util.clearControls();
   });
   elm = grideditor.querySelector('.cell-up');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.moveColumnUp();
     util.clearControls();
   });
   elm = grideditor.querySelector('.cell-down');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.moveColumnDown();
     util.clearControls();
   });
   elm = grideditor.querySelector('.cell-duplicate');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.duplicateColumn();
     util.clearControls();
   });
   elm = grideditor.querySelector('.cell-remove');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.removeColumn();
     util.clearControls();
   });
   const btnCellHtml = grideditor.querySelector('.cell-html');
-  if (btnCellHtml) dom$E.addEventListener(btnCellHtml, 'click', () => {
+  if (btnCellHtml) dom$F.addEventListener(btnCellHtml, 'click', () => {
     const cell = util.cellSelected();
     if (!cell) return;
     htmlutil.view('cell', false, btnCellHtml);
   });
   const btnCellSettings = grideditor.querySelector('.cell-settings');
-  if (btnCellSettings) dom$E.addEventListener(btnCellSettings, 'click', () => {
+  if (btnCellSettings) dom$F.addEventListener(btnCellSettings, 'click', () => {
     const cell = util.cellSelected();
     if (!cell) return;
     builder.colTool.readCellStyles(cell); //save selection
@@ -18167,19 +18203,19 @@ const renderGridEditor = builder => {
   }); // Lock/Unlock Column
 
   const btnCellLocking = grideditor.querySelector('.cell-locking');
-  if (btnCellLocking) dom$E.addEventListener(btnCellLocking, 'click', e => {
+  if (btnCellLocking) dom$F.addEventListener(btnCellLocking, 'click', e => {
     let cell = util.cellSelected();
     if (!cell) return;
 
     if (!cell.hasAttribute('data-noedit')) {
       cell.setAttribute('data-noedit', '');
       cell.contentEditable = false;
-      dom$E.addClass(btnCellLocking, 'on');
+      dom$F.addClass(btnCellLocking, 'on');
       util.clearActiveElement(true);
     } else {
       cell.removeAttribute('data-noedit');
       cell.contentEditable = true;
-      dom$E.removeClass(btnCellLocking, 'on');
+      dom$F.removeClass(btnCellLocking, 'on');
     }
 
     builder.colTool.showHideLockIndicator(cell);
@@ -18188,7 +18224,7 @@ const renderGridEditor = builder => {
   }); // ROW
 
   const btnRowAdd = grideditor.querySelector('.row-add');
-  dom$E.addEventListener(btnRowAdd, 'click', () => {
+  dom$F.addEventListener(btnRowAdd, 'click', () => {
     let tabs = quickadd.querySelector('.is-pop-tabs');
     tabs.style.display = 'none';
     const top = btnRowAdd.getBoundingClientRect().top + window.pageYOffset;
@@ -18200,37 +18236,37 @@ const renderGridEditor = builder => {
 
     quickadd.style.top = top + 'px';
     quickadd.style.left = left - w - 8 + 'px';
-    dom$E.removeClass(quickadd, 'arrow-bottom');
-    dom$E.removeClass(quickadd, 'arrow-left');
-    dom$E.removeClass(quickadd, 'arrow-top');
-    dom$E.removeClass(quickadd, 'center');
-    dom$E.removeClass(quickadd, 'left');
-    dom$E.addClass(quickadd, 'arrow-right');
-    dom$E.addClass(quickadd, 'right');
+    dom$F.removeClass(quickadd, 'arrow-bottom');
+    dom$F.removeClass(quickadd, 'arrow-left');
+    dom$F.removeClass(quickadd, 'arrow-top');
+    dom$F.removeClass(quickadd, 'center');
+    dom$F.removeClass(quickadd, 'left');
+    dom$F.addClass(quickadd, 'arrow-right');
+    dom$F.addClass(quickadd, 'right');
     quickadd.setAttribute('data-mode', 'row');
   });
   elm = grideditor.querySelector('.row-up');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.moveRowUp();
     util.clearControls();
   });
   elm = grideditor.querySelector('.row-down');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.moveRowDown();
     util.clearControls();
   });
   elm = grideditor.querySelector('.row-duplicate');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.duplicateRow();
     util.clearControls();
   });
   elm = grideditor.querySelector('.row-remove');
-  dom$E.addEventListener(elm, 'click', () => {
+  dom$F.addEventListener(elm, 'click', () => {
     grid.removeRow();
     util.clearControls();
   });
   const btnRowHtml = grideditor.querySelector('.row-html');
-  if (btnRowHtml) dom$E.addEventListener(btnRowHtml, 'click', () => {
+  if (btnRowHtml) dom$F.addEventListener(btnRowHtml, 'click', () => {
     const cell = util.cellSelected();
     if (!cell) return;
     htmlutil.view('row', false, btnRowHtml);
@@ -21249,7 +21285,7 @@ _extends(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
-const dom$D = new Dom();
+const dom$E = new Dom();
 
 class Select {
   constructor(dropDown) {
@@ -21274,14 +21310,14 @@ class Select {
       this.toggle(false);
       dropDown.dispatchEvent(new Event('change'));
       toggler.focus();
-      let elms = dom$D.elementChildren(menu);
+      let elms = dom$E.elementChildren(menu);
       elms.forEach(elm => {
-        dom$D.removeClass(elm, 'selected');
+        dom$E.removeClass(elm, 'selected');
       });
       let optionselected = menu.querySelector('[data-value="' + val + '"]');
 
       if (optionselected) {
-        dom$D.addClass(optionselected, 'selected');
+        dom$E.addClass(optionselected, 'selected');
       }
     };
 
@@ -21336,7 +21372,7 @@ class Select {
         let optionselected = menu.querySelector('[data-value="' + this.value + '"]');
 
         if (optionselected) {
-          dom$D.addClass(optionselected, 'selected');
+          dom$E.addClass(optionselected, 'selected');
           optionselected.focus();
         }
 
@@ -21352,7 +21388,7 @@ class Select {
 
 }
 
-const dom$C = new Dom();
+const dom$D = new Dom();
 
 const renderSnippetPanel = builder => {
   const util = builder.util;
@@ -21363,7 +21399,7 @@ const renderSnippetPanel = builder => {
   if (builder.opts.snippetList === '#divSnippetList') {
     const html = `<div id="divSnippetList" class="is-side ${sidePanel === 'right' ? '' : ' fromleft'} snippetlist scroll-darker" tabindex="-1" role="dialog" aria-modal="true" title="${util.out('Snippets')}">
             </div>`;
-    dom$C.appendHtml(builderStuff, html);
+    dom$D.appendHtml(builderStuff, html);
 
     if (!builder.opts.snippetHandle) {
       hideHandle = 'display:none;';
@@ -21398,7 +21434,7 @@ const renderSnippetPanel = builder => {
 
   let html_snippets = '' + '<div class="is-dropdown selectsnippet" style="position:absolute;top:0;right:0;padding: 0;width:100%;z-index:2;">' + '<button tabindex="0" class="dropdown-toggle no-outline" title="' + util.out('Snippet Categories') + '" type="button" aria-haspopup="true" data-value="' + defaultcatval + '">' + '<span>' + defaultcat + '</span>' + '</button>' + '<ul class="dropdown-menu" role="listbox" title="' + util.out('Snippets') + '" aria-expanded="false">' + catitems + '</ul>' + '</div>' + (sidePanel === 'right' ? '<div id="divSnippetScrollUp" role="button" tabindex="-1" style="top:calc(50% - 27px);right:25px;">&#9650;</div>' + '<div id="divSnippetScrollDown" role="button" tabindex="-1" style="top:calc(50% + 27px);right:25px;">&#9660;</div>' + '<div id="divSnippetHandle" role="button" tabindex="-1" title="' + util.out('Snippets') + '" data-title="' + util.out('Snippets') + '" style="' + hideHandle + '">' + '<svg class="is-icon-flex"><use xlink:href="#ion-ios-arrow-left"></use></svg>' + '</div>' : '<div id="divSnippetScrollUp" role="button" tabindex="-1" style="top:calc(50% - 27px);left:10px;">&#9650;</div>' + '<div id="divSnippetScrollDown" role="button" tabindex="-1" style="top:calc(50% + 27px);left:10px;">&#9660;</div>' + '<div id="divSnippetHandle" role="button" tabindex="-1" title="' + util.out('Snippets') + '" data-title="' + util.out('Snippets') + '" style="' + hideHandle + '">' + '<svg class="is-icon-flex"><use xlink:href="#ion-ios-arrow-right"></use></svg>' + '</div>') + '<div class="is-design-list" tabindex="0">' + '</div>';
   let snippetPanel = document.querySelector(builder.opts.snippetList);
-  dom$C.appendHtml(snippetPanel, html_snippets);
+  dom$D.appendHtml(snippetPanel, html_snippets);
   const dropDown = new Select(snippetPanel.querySelector('.selectsnippet'));
   dropDown.element.addEventListener('change', () => {
     let cat = dropDown.value;
@@ -21411,7 +21447,7 @@ const renderSnippetPanel = builder => {
     if (!exist) {
       builder.opts.snippetJSON.snippets.forEach(item => {
         if (item.category === cat) {
-          dom$C.appendHtml(snippetlist, '<div class="snippet-item" data-id="' + item.id + '" data-cat="' + item.category + '"><img alt="' + util.out('Snippet') + '" alt="" src="' + snippetPath + item.thumbnail + '"><span class="is-overlay"></span></div>');
+          dom$D.appendHtml(snippetlist, '<div class="snippet-item" data-id="' + item.id + '" data-cat="' + item.category + '"><img alt="' + util.out('Snippet') + '" alt="" src="' + snippetPath + item.thumbnail + '"><span class="is-overlay"></span></div>');
         }
       });
     }
@@ -21419,7 +21455,7 @@ const renderSnippetPanel = builder => {
     if (cat) {
       //let elms = snippetlist.querySelectorAll('.snippet-item');
       Array.prototype.forEach.call(elms, elm => {
-        dom$C.addClass(elm, 'hide');
+        dom$D.addClass(elm, 'hide');
       });
       Array.prototype.forEach.call(elms, elm => {
         if (elm.getAttribute('data-cat') === cat) {
@@ -21439,13 +21475,13 @@ const renderSnippetPanel = builder => {
       var target = e.target || e.srcElement;
 
       if (builder.opts.snippetsSidebarDisplay === 'auto') {
-        if (dom$C.hasClass(snippetPanel, 'active')) {
+        if (dom$D.hasClass(snippetPanel, 'active')) {
           // let a = dom.parentsHasAttribute(target, 'contenteditable');
           // let b = dom.parentsHasClass(target, 'is-builder'); // builder area
           // if(a||b) {
           //     hideSnippets(builder);
           // }
-          let a = dom$C.parentsHasClass(target, 'is-builder'); // builder area
+          let a = dom$D.parentsHasClass(target, 'is-builder'); // builder area
 
           if (a) {
             hideSnippets(builder);
@@ -21517,7 +21553,7 @@ const renderSnippetPanel = builder => {
       item.id = index; //Give id to each record
 
       if (item.category === builder.opts.defaultEmailSnippetCategory + '') {
-        dom$C.appendHtml(snippetlist, '<div class="snippet-item" data-id="' + item.id + '" data-cat="' + item.category + '"><img alt="' + util.out('Snippet') + '" src="' + snippetPath + item.thumbnail + '"><span class="is-overlay"></span></div>');
+        dom$D.appendHtml(snippetlist, '<div class="snippet-item" data-id="' + item.id + '" data-cat="' + item.category + '"><img alt="' + util.out('Snippet') + '" src="' + snippetPath + item.thumbnail + '"><span class="is-overlay"></span></div>');
       }
 
       index++;
@@ -21527,7 +21563,7 @@ const renderSnippetPanel = builder => {
       item.id = index; //Give id to each record
 
       if (item.category === builder.opts.defaultSnippetCategory + '') {
-        dom$C.appendHtml(snippetlist, '<div class="snippet-item" data-id="' + item.id + '" data-cat="' + item.category + '"><img alt="' + util.out('Snippet') + '" src="' + snippetPath + item.thumbnail + '"><span class="is-overlay"></span></div>');
+        dom$D.appendHtml(snippetlist, '<div class="snippet-item" data-id="' + item.id + '" data-cat="' + item.category + '"><img alt="' + util.out('Snippet') + '" src="' + snippetPath + item.thumbnail + '"><span class="is-overlay"></span></div>');
       }
 
       index++;
@@ -21566,7 +21602,7 @@ const renderSnippetPanel = builder => {
 
       if (area) {
         activeBuilderArea = area;
-        dom$C.removeClass(activeBuilderArea, 'builder-active');
+        dom$D.removeClass(activeBuilderArea, 'builder-active');
       }
 
       builder.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change 
@@ -21584,14 +21620,14 @@ const renderSnippetPanel = builder => {
       if (emptyinfo) emptyinfo.style.display = ''; // Return back the .builder-active
 
       if (activeBuilderArea) {
-        dom$C.addClass(activeBuilderArea, 'builder-active');
+        dom$D.addClass(activeBuilderArea, 'builder-active');
       }
     }
   });
 
   if (builder.opts.snippetList === '#divSnippetList') {
     const snippethandle = snippetPanel.querySelector('#divSnippetHandle');
-    dom$C.addEventListener(snippethandle, 'click', () => {
+    dom$D.addEventListener(snippethandle, 'click', () => {
       toggleSnippets(builder);
       util.clearActiveCell();
       util.clearControls();
@@ -21670,8 +21706,8 @@ function toggleSnippets(builder) {
   let snippetPanel = document.querySelector('#divSnippetList');
   const snippethandle = snippetPanel.querySelector('#divSnippetHandle');
 
-  if (dom$C.hasClass(snippetPanel, 'active')) {
-    dom$C.removeClass(snippetPanel, 'active');
+  if (dom$D.hasClass(snippetPanel, 'active')) {
+    dom$D.removeClass(snippetPanel, 'active');
 
     if (builder.opts.sidePanel === 'right') {
       snippethandle.innerHTML = '<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-ios-arrow-left"></use></svg>';
@@ -21687,7 +21723,7 @@ function toggleSnippets(builder) {
     snippetPanel.querySelector('.selectsnippet').style.display = 'block';
     snippetPanel.querySelector('.is-design-list').style.display = 'block';
     setTimeout(() => {
-      dom$C.addClass(snippetPanel, 'active');
+      dom$D.addClass(snippetPanel, 'active');
 
       if (builder.opts.sidePanel === 'right') {
         snippethandle.innerHTML = '<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-ios-arrow-right"></use></svg>';
@@ -21701,7 +21737,7 @@ function toggleSnippets(builder) {
 function hideSnippets(builder) {
   let snippetPanel = document.querySelector('#divSnippetList');
   const snippethandle = snippetPanel.querySelector('#divSnippetHandle');
-  dom$C.removeClass(snippetPanel, 'active');
+  dom$D.removeClass(snippetPanel, 'active');
 
   if (builder.opts.sidePanel === 'right') {
     snippethandle.innerHTML = '<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-ios-arrow-left"></use></svg>';
@@ -47348,7 +47384,7 @@ var loadImageOrientation = {exports: {}};
 
 var js = loadImage.exports;
 
-const dom$B = new Dom();
+const dom$C = new Dom();
 class Image {
   constructor(builder) {
     this.builder = builder;
@@ -47405,7 +47441,7 @@ class Image {
                             <div class="image-larger1" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId1" name="hidRefId" type="hidden" value="" />
-                                    <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
+                                    <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
                                     <input title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                                 </form>
 
@@ -47452,7 +47488,7 @@ class Image {
                 <div id="divImageResizer" data-x=0 data-y=0 class="is-tool moveable resizable">
                 </div>
                 `;
-      dom$B.appendHtml(builderStuff, html); // Image Tool (#divImageTool) ~~~~~~~~~~~~
+      dom$C.appendHtml(builderStuff, html); // Image Tool (#divImageTool) ~~~~~~~~~~~~
 
       imageTool = builderStuff.querySelector('#divImageTool');
       this.imageTool = imageTool; // Image Resizer (#divImageResizer)
@@ -47484,7 +47520,7 @@ class Image {
         let activeImage = this.builder.activeImage;
         let bCircular = false;
 
-        if (dom$B.hasClass(activeImage.parentNode, 'img-circular')) {
+        if (dom$C.hasClass(activeImage.parentNode, 'img-circular')) {
           activeImage = activeImage.parentNode;
           bCircular = true;
         }
@@ -47527,14 +47563,14 @@ class Image {
 
 
         let columnTool = builderStuff.querySelector('.is-column-tool');
-        dom$B.removeClass(columnTool, 'active');
+        dom$C.removeClass(columnTool, 'active');
       }).on('resizeEnd', ({
         target
       }) => {
         let activeImage = this.builder.activeImage;
         let bCircular = false;
 
-        if (dom$B.hasClass(activeImage.parentNode, 'img-circular')) {
+        if (dom$C.hasClass(activeImage.parentNode, 'img-circular')) {
           activeImage = activeImage.parentNode;
           bCircular = true;
         } //target = imageResizer
@@ -47574,7 +47610,7 @@ class Image {
         this.builder.opts.onChange(); // Show column tool
 
         let columnTool = builderStuff.querySelector('.is-column-tool');
-        dom$B.addClass(columnTool, 'active');
+        dom$C.addClass(columnTool, 'active');
       });
       document.querySelector('.moveable-control-box').style.display = 'none';
       imageResizer.addEventListener('click', () => {
@@ -47583,7 +47619,7 @@ class Image {
       }); // Browse local image
 
       let elm = imageTool.querySelector('#fileEmbedImage');
-      dom$B.addEventListener(elm, 'change', e => {
+      dom$C.addEventListener(elm, 'change', e => {
         this.builder.uo.saveForUndo();
         var input = e.target;
         let img = this.builder.activeImage;
@@ -47635,7 +47671,7 @@ class Image {
 
       if (this.builder.opts.onImageBrowseClick) {
         elm = imageTool.querySelector('.image-embed');
-        dom$B.addEventListener(elm, 'click', e => {
+        dom$C.addEventListener(elm, 'click', e => {
           this.builder.opts.onImageBrowseClick();
           e.preventDefault();
           return false;
@@ -47657,7 +47693,7 @@ class Image {
 
 
       const btnImageLink = imageTool.querySelector('.image-link');
-      dom$B.addEventListener(btnImageLink, 'click', () => {
+      dom$C.addEventListener(btnImageLink, 'click', () => {
         //imageTool.style.display = 'none';
         document.querySelector('.moveable-control-box').style.display = 'none'; //needed by Safari (prevent z-index problem)
 
@@ -47710,7 +47746,7 @@ class Image {
             inputTarget.checked = false;
           }
 
-          if (dom$B.hasClass(lnk, 'is-lightbox')) {
+          if (dom$C.hasClass(lnk, 'is-lightbox')) {
             inputLightbox.checked = true;
           } else {
             inputLightbox.checked = false;
@@ -47726,13 +47762,13 @@ class Image {
       }); // Cancel
 
       elm = modalImageLink.querySelector('.input-cancel');
-      dom$B.addEventListener(elm, 'click', () => {
+      dom$C.addEventListener(elm, 'click', () => {
         util.hideModal(modalImageLink);
         document.querySelector('.moveable-control-box').style.display = 'block'; //needed by Safari (prevent z-index problem)
       }); // Apply link to image
 
       elm = modalImageLink.querySelector('.input-ok');
-      dom$B.addEventListener(elm, 'click', () => {
+      dom$C.addEventListener(elm, 'click', () => {
         this.builder.uo.saveForUndo();
         let img = this.builder.activeImage;
         let lnk;
@@ -47763,9 +47799,9 @@ class Image {
             }
 
             if (modalImageLink.querySelector('.input-openlightbox').checked) {
-              dom$B.addClass(lnk, 'is-lightbox');
+              dom$C.addClass(lnk, 'is-lightbox');
             } else {
-              dom$B.removeClass(lnk, 'is-lightbox');
+              dom$C.removeClass(lnk, 'is-lightbox');
             } // if(link.toLowerCase().indexOf('.jpg')!==-1 || link.toLowerCase().indexOf('.jpeg')!==-1 || link.toLowerCase().indexOf('.png')!==-1 || link.toLowerCase().indexOf('.gif')!==-1) {
             //     dom.addClass(lnk, 'is-lightbox');
             // } else {
@@ -47774,7 +47810,7 @@ class Image {
 
           } else {
             //Create link
-            lnk = dom$B.createElement('a');
+            lnk = dom$C.createElement('a');
             lnk.setAttribute('href', link);
             lnk.setAttribute('title', title);
             lnk.innerHTML = img.outerHTML;
@@ -47786,9 +47822,9 @@ class Image {
             }
 
             if (modalImageLink.querySelector('.input-openlightbox').checked) {
-              dom$B.addClass(lnk, 'is-lightbox');
+              dom$C.addClass(lnk, 'is-lightbox');
             } else {
-              dom$B.removeClass(lnk, 'is-lightbox');
+              dom$C.removeClass(lnk, 'is-lightbox');
             } // if(link.toLowerCase().indexOf('.jpg')!==-1 || link.toLowerCase().indexOf('.jpeg')!==-1 || link.toLowerCase().indexOf('.png')!==-1 || link.toLowerCase().indexOf('.gif')!==-1) {
             //     dom.addClass(lnk, 'is-lightbox');
             // } else {
@@ -47819,7 +47855,7 @@ class Image {
 
       if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
         const btnImageSelect = modalImageLink.querySelector('.input-select');
-        if (btnImageSelect) dom$B.addEventListener(btnImageSelect, 'click', () => {
+        if (btnImageSelect) dom$C.addEventListener(btnImageSelect, 'click', () => {
           if (this.builder.opts.onImageSelectClick) {
             this.builder.opts.onImageSelectClick({
               targetInput: modalImageLink.querySelector('.input-src'),
@@ -47851,7 +47887,7 @@ class Image {
           this.builder.targetAssetType = 'image';
         });
         const btnImageSelect2 = modalImageLink.querySelector('.input-select2');
-        if (btnImageSelect2) dom$B.addEventListener(btnImageSelect2, 'click', () => {
+        if (btnImageSelect2) dom$C.addEventListener(btnImageSelect2, 'click', () => {
           if (this.builder.opts.onImageSelectClick) {
             this.builder.opts.onImageSelectClick({
               targetInput: modalImageLink.querySelector('.input-link'),
@@ -47883,11 +47919,11 @@ class Image {
           this.builder.targetAssetType = 'media';
         });
       } else {
-        dom$B.removeClass(divImageSrc, 'image-select');
+        dom$C.removeClass(divImageSrc, 'image-select');
       }
 
       let fileLargerImage1 = modalImageLink.querySelector('#fileImage1');
-      dom$B.addEventListener(fileLargerImage1, 'change', e => {
+      dom$C.addEventListener(fileLargerImage1, 'change', e => {
         let element = fileLargerImage1;
 
         while (element.nodeName.toLowerCase() !== 'form') {
@@ -47895,7 +47931,7 @@ class Image {
         }
 
         let frmUpload = element;
-        dom$B.addClass(frmUpload, 'please-wait');
+        dom$C.addClass(frmUpload, 'please-wait');
         modalImageLink.querySelector('#hidRefId1').value = this.builder.opts.customval;
 
         if (this.builder.opts.onLargerImageUpload) {
@@ -47907,7 +47943,7 @@ class Image {
         fileLargerImage1.value = ''; // Clear Input
       });
       let fileLargerImage2 = modalImageLink.querySelector('#fileImage2');
-      dom$B.addEventListener(fileLargerImage2, 'change', e => {
+      dom$C.addEventListener(fileLargerImage2, 'change', e => {
         let element = fileLargerImage2;
 
         while (element.nodeName.toLowerCase() !== 'form') {
@@ -47915,7 +47951,7 @@ class Image {
         }
 
         let frmUpload = element;
-        dom$B.addClass(frmUpload, 'please-wait');
+        dom$C.addClass(frmUpload, 'please-wait');
         modalImageLink.querySelector('#hidRefId2').value = this.builder.opts.customval;
 
         if (this.builder.opts.onLargerImageUpload) {
@@ -47930,7 +47966,7 @@ class Image {
       let modalImageEdit = builderStuff.querySelector('.imageedit'); // Edit (crop) image
 
       const btnImageEdit = imageTool.querySelector('.image-edit');
-      dom$B.addEventListener(btnImageEdit, 'click', () => {
+      dom$C.addEventListener(btnImageEdit, 'click', () => {
         let img = this.builder.activeImage;
         let preview = modalImageEdit.querySelector('.imageedit-preview');
         preview.innerHTML = '<img style="max-width:100%;object-fit:contain;height:100%;"/>';
@@ -47984,20 +48020,20 @@ class Image {
       let cropOptions = modalImageEdit.querySelector('.imageedit-crop');
       let btns = cropOptions.querySelectorAll('button');
       Array.prototype.forEach.call(btns, btn => {
-        dom$B.addEventListener(btn, 'click', () => {
+        dom$C.addEventListener(btn, 'click', () => {
           let aspectRatio = btn.getAttribute('data-crop-size') * 1;
           this.cropper.setAspectRatio(aspectRatio);
         });
       }); // Cancel image edit
 
       let btnCancel = modalImageEdit.querySelector('.input-cancel');
-      dom$B.addEventListener(btnCancel, 'click', () => {
+      dom$C.addEventListener(btnCancel, 'click', () => {
         util.hideModal(modalImageEdit);
         document.querySelector('.moveable-control-box').style.display = 'block'; //needed by Safari (prevent z-index problem)
       }); // Apply (crop) image
 
       elm = modalImageEdit.querySelector('.input-ok');
-      dom$B.addEventListener(elm, 'click', () => {
+      dom$C.addEventListener(elm, 'click', () => {
         this.builder.uo.saveForUndo();
         let img = this.builder.activeImage;
         let attr = img.getAttribute('data-filename');
@@ -48017,9 +48053,9 @@ class Image {
 
           if (img.src.indexOf('base64') === -1) {
             let filename = img.src.substring(img.src.lastIndexOf('/') + 1);
-            basename = dom$B.baseName(filename);
+            basename = dom$C.baseName(filename);
           } else {
-            basename = dom$B.baseName(img.getAttribute('data-filename'));
+            basename = dom$C.baseName(img.getAttribute('data-filename'));
           }
 
           let newname = '';
@@ -48054,7 +48090,7 @@ class Image {
 
 
   refreshIfIsModule(elm) {
-    let isModule = dom$B.parentsHasAttribute(elm, 'data-html');
+    let isModule = dom$C.parentsHasAttribute(elm, 'data-html');
 
     if (isModule) {
       this.imageTool.style.display = ''; // Extra: make image[data-image-embed] clickable/editable
@@ -48100,7 +48136,7 @@ class Image {
         let elm = this.builder.activeImage;
         if (!elm) return;
 
-        if (dom$B.hasClass(elm.parentNode, 'img-circular')) {
+        if (dom$C.hasClass(elm.parentNode, 'img-circular')) {
           elm = elm.parentNode;
         }
 
@@ -48152,7 +48188,7 @@ class Image {
       let imageTool = this.imageTool;
       let elm = this.builder.activeImage;
 
-      if (dom$B.hasClass(elm.parentNode, 'img-circular')) {
+      if (dom$C.hasClass(elm.parentNode, 'img-circular')) {
         elm = elm.parentNode;
       }
 
@@ -48195,7 +48231,7 @@ class Image {
       if (!fixedImage) {
         this.builder.activeImage = elm;
 
-        if (dom$B.hasClass(elm.parentNode, 'img-circular')) {
+        if (dom$C.hasClass(elm.parentNode, 'img-circular')) {
           elm = elm.parentNode;
         }
 
@@ -48495,7 +48531,7 @@ class Image {
 
 }
 
-const dom$A = new Dom();
+const dom$B = new Dom();
 
 class ButtonEditor {
   constructor(builder) {
@@ -48793,11 +48829,11 @@ class ButtonEditor {
                 </div>
             </div>
             `;
-      dom$A.appendHtml(builderStuff, html);
+      dom$B.appendHtml(builderStuff, html);
       buttonModal = builderStuff.querySelector('.is-modal.buttoneditor');
       let btnClose = buttonModal.querySelector('.is-modal-close');
-      dom$A.addEventListener(btnClose, 'click', () => {
-        dom$A.removeClass(buttonModal, 'active');
+      dom$B.addEventListener(btnClose, 'click', () => {
+        dom$B.removeClass(buttonModal, 'active');
       });
       let btns; //background color
 
@@ -48822,7 +48858,7 @@ class ButtonEditor {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
           activeButton.style.backgroundColor = color;
           activeButton.setAttribute('data-bg', color);
-          dom$A.removeClassesByPrefix(activeButton, 'bg-');
+          dom$B.removeClassesByPrefix(activeButton, 'bg-');
           elm.style.backgroundColor = color; // preview
           //Trigger Change event
 
@@ -48854,7 +48890,7 @@ class ButtonEditor {
         this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
           activeButton.style.color = color;
-          dom$A.removeClassesByPrefix(activeButton, 'text-');
+          dom$B.removeClassesByPrefix(activeButton, 'text-');
           elm.style.backgroundColor = color; // preview
           //Trigger Change event
 
@@ -48886,7 +48922,7 @@ class ButtonEditor {
         this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
           activeButton.setAttribute('data-hover-bg', color);
-          dom$A.removeClassesByPrefix(activeButton, 'hover:bg-');
+          dom$B.removeClassesByPrefix(activeButton, 'hover:bg-');
           activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
           activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
           elm.style.backgroundColor = color; // preview
@@ -48911,19 +48947,19 @@ class ButtonEditor {
           if (activeButton.classList) {
             activeButton.classList.forEach(item => {
               if (item.indexOf('hover:text-') === 0) {
-                dom$A.removeClass(activeButton, item);
+                dom$B.removeClass(activeButton, item);
               }
             });
           }
 
-          if (val === 'dark') dom$A.addClass(activeButton, 'hover:text-black');else if (val === 'light') dom$A.addClass(activeButton, 'hover:text-white');else ;
+          if (val === 'dark') dom$B.addClass(activeButton, 'hover:text-black');else if (val === 'light') dom$B.addClass(activeButton, 'hover:text-white');else ;
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.text-color-hover-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //border color
@@ -48934,16 +48970,16 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClass(activeButton, 'border-transparent');
-          dom$A.removeClass(activeButton, 'border-current');
-          if (val === 'transparent') dom$A.addClass(activeButton, 'border-transparent');else if (val === 'current') dom$A.addClass(activeButton, 'border-current');
+          dom$B.removeClass(activeButton, 'border-transparent');
+          dom$B.removeClass(activeButton, 'border-current');
+          if (val === 'transparent') dom$B.addClass(activeButton, 'border-transparent');else if (val === 'current') dom$B.addClass(activeButton, 'border-current');
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.border-color-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //hover border color
@@ -48954,16 +48990,16 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClass(activeButton, 'hover:border-transparent');
-          dom$A.removeClass(activeButton, 'hover:border-current');
-          if (val === 'transparent') dom$A.addClass(activeButton, 'hover:border-transparent');else if (val === 'current') dom$A.addClass(activeButton, 'hover:border-current');
+          dom$B.removeClass(activeButton, 'hover:border-transparent');
+          dom$B.removeClass(activeButton, 'hover:border-current');
+          if (val === 'transparent') dom$B.addClass(activeButton, 'hover:border-transparent');else if (val === 'current') dom$B.addClass(activeButton, 'hover:border-current');
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.border-color-hover-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //border width
@@ -48974,17 +49010,17 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClass(activeButton, 'border-0');
-          dom$A.removeClass(activeButton, 'border-2');
-          dom$A.removeClass(activeButton, 'border');
-          if (val === '0') dom$A.addClass(activeButton, 'border-0');else if (val === '1') dom$A.addClass(activeButton, 'border');else if (val === '2') dom$A.addClass(activeButton, 'border-2');
+          dom$B.removeClass(activeButton, 'border-0');
+          dom$B.removeClass(activeButton, 'border-2');
+          dom$B.removeClass(activeButton, 'border');
+          if (val === '0') dom$B.addClass(activeButton, 'border-0');else if (val === '1') dom$B.addClass(activeButton, 'border');else if (val === '2') dom$B.addClass(activeButton, 'border-2');
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.border-width-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //border radius
@@ -48995,16 +49031,16 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClass(activeButton, 'rounded');
-          dom$A.removeClassesByPrefix(activeButton, 'rounded-');
-          if (val === 'normal') dom$A.addClass(activeButton, 'rounded');else dom$A.addClass(activeButton, 'rounded-' + val);
+          dom$B.removeClass(activeButton, 'rounded');
+          dom$B.removeClassesByPrefix(activeButton, 'rounded-');
+          if (val === 'normal') dom$B.addClass(activeButton, 'rounded');else dom$B.addClass(activeButton, 'rounded-' + val);
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.border-radius-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //padding x
@@ -49015,51 +49051,51 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'px-');
+          dom$B.removeClassesByPrefix(activeButton, 'px-');
 
           if (val === '2') {
-            dom$A.addClass(activeButton, 'px-2');
+            dom$B.addClass(activeButton, 'px-2');
           }
 
           if (val === '3') {
-            dom$A.addClass(activeButton, 'px-3');
+            dom$B.addClass(activeButton, 'px-3');
           }
 
           if (val === '4') {
-            dom$A.addClass(activeButton, 'px-4');
+            dom$B.addClass(activeButton, 'px-4');
           }
 
           if (val === '5') {
-            dom$A.addClass(activeButton, 'px-5');
+            dom$B.addClass(activeButton, 'px-5');
           }
 
           if (val === '6') {
-            dom$A.addClass(activeButton, 'px-6');
+            dom$B.addClass(activeButton, 'px-6');
           }
 
           if (val === '8') {
-            dom$A.addClass(activeButton, 'px-8');
+            dom$B.addClass(activeButton, 'px-8');
           }
 
           if (val === '11') {
-            dom$A.addClass(activeButton, 'px-11');
+            dom$B.addClass(activeButton, 'px-11');
           }
 
           if (val === '12') {
-            dom$A.addClass(activeButton, 'px-12');
+            dom$B.addClass(activeButton, 'px-12');
           }
 
           if (val === '14') {
-            dom$A.addClass(activeButton, 'px-14');
+            dom$B.addClass(activeButton, 'px-14');
           }
 
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.paddingx-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //padding y
@@ -49070,43 +49106,43 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'py-');
+          dom$B.removeClassesByPrefix(activeButton, 'py-');
 
           if (val === '0') {
-            dom$A.addClass(activeButton, 'py-0');
+            dom$B.addClass(activeButton, 'py-0');
           }
 
           if (val === '1') {
-            dom$A.addClass(activeButton, 'py-1');
+            dom$B.addClass(activeButton, 'py-1');
           }
 
           if (val === '2') {
-            dom$A.addClass(activeButton, 'py-2');
+            dom$B.addClass(activeButton, 'py-2');
           }
 
           if (val === '3') {
-            dom$A.addClass(activeButton, 'py-3');
+            dom$B.addClass(activeButton, 'py-3');
           }
 
           if (val === '4') {
-            dom$A.addClass(activeButton, 'py-4');
+            dom$B.addClass(activeButton, 'py-4');
           }
 
           if (val === '5') {
-            dom$A.addClass(activeButton, 'py-5');
+            dom$B.addClass(activeButton, 'py-5');
           }
 
           if (val === '6') {
-            dom$A.addClass(activeButton, 'py-6');
+            dom$B.addClass(activeButton, 'py-6');
           }
 
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.paddingy-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //Font size
@@ -49117,15 +49153,15 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'size-');
-          dom$A.addClass(activeButton, 'size-' + val);
+          dom$B.removeClassesByPrefix(activeButton, 'size-');
+          dom$B.addClass(activeButton, 'size-' + val);
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.font-size-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //width
@@ -49138,26 +49174,26 @@ class ButtonEditor {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
 
           if (val === 'auto') {
-            dom$A.removeClass(activeButton, 'flex');
-            dom$A.removeClass(activeButton, 'justify-center');
-            dom$A.removeClass(activeButton, 'items-center');
-            dom$A.addClass(activeButton, 'inline-block');
+            dom$B.removeClass(activeButton, 'flex');
+            dom$B.removeClass(activeButton, 'justify-center');
+            dom$B.removeClass(activeButton, 'items-center');
+            dom$B.addClass(activeButton, 'inline-block');
           }
 
           if (val === 'full') {
-            dom$A.removeClass(activeButton, 'inline-block');
-            dom$A.addClass(activeButton, 'flex');
-            dom$A.addClass(activeButton, 'justify-center');
-            dom$A.addClass(activeButton, 'items-center');
+            dom$B.removeClass(activeButton, 'inline-block');
+            dom$B.addClass(activeButton, 'flex');
+            dom$B.addClass(activeButton, 'justify-center');
+            dom$B.addClass(activeButton, 'items-center');
           }
 
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.width-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //text case
@@ -49167,20 +49203,20 @@ class ButtonEditor {
         this.builder.uo.saveForUndo();
         const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
 
-        if (dom$A.hasClass(activeButton, 'uppercase')) {
-          dom$A.removeClass(activeButton, 'uppercase');
+        if (dom$B.hasClass(activeButton, 'uppercase')) {
+          dom$B.removeClass(activeButton, 'uppercase');
         } else {
-          dom$A.addClass(activeButton, 'uppercase');
+          dom$B.addClass(activeButton, 'uppercase');
         }
 
         this.applyDefault(activeButton); // Button on/off
 
         const btnTextCase = buttonModal.querySelector('.textcase-command');
 
-        if (dom$A.hasClass(btnTextCase, 'on')) {
-          dom$A.removeClass(btnTextCase, 'on');
+        if (dom$B.hasClass(btnTextCase, 'on')) {
+          dom$B.removeClass(btnTextCase, 'on');
         } else {
-          dom$A.addClass(btnTextCase, 'on');
+          dom$B.addClass(btnTextCase, 'on');
         }
 
         this.builder.opts.onChange();
@@ -49191,22 +49227,22 @@ class ButtonEditor {
         this.builder.uo.saveForUndo();
         const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
 
-        if (dom$A.hasClass(activeButton, 'underline')) {
-          dom$A.removeClass(activeButton, 'underline');
-          dom$A.addClass(activeButton, 'no-underline');
+        if (dom$B.hasClass(activeButton, 'underline')) {
+          dom$B.removeClass(activeButton, 'underline');
+          dom$B.addClass(activeButton, 'no-underline');
         } else {
-          dom$A.removeClass(activeButton, 'no-underline');
-          dom$A.addClass(activeButton, 'underline');
+          dom$B.removeClass(activeButton, 'no-underline');
+          dom$B.addClass(activeButton, 'underline');
         }
 
         this.applyDefault(activeButton); // Button on/off
 
         const btnTextUnderline = buttonModal.querySelector('.textunderline-command');
 
-        if (dom$A.hasClass(btnTextUnderline, 'on')) {
-          dom$A.removeClass(btnTextUnderline, 'on');
+        if (dom$B.hasClass(btnTextUnderline, 'on')) {
+          dom$B.removeClass(btnTextUnderline, 'on');
         } else {
-          dom$A.addClass(btnTextUnderline, 'on');
+          dom$B.addClass(btnTextUnderline, 'on');
         }
 
         this.builder.opts.onChange();
@@ -49217,22 +49253,22 @@ class ButtonEditor {
         this.builder.uo.saveForUndo();
         const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
 
-        if (dom$A.hasClass(activeButton, 'font-semibold')) {
-          dom$A.removeClass(activeButton, 'font-semibold');
-          dom$A.addClass(activeButton, 'font-normal');
+        if (dom$B.hasClass(activeButton, 'font-semibold')) {
+          dom$B.removeClass(activeButton, 'font-semibold');
+          dom$B.addClass(activeButton, 'font-normal');
         } else {
-          dom$A.removeClass(activeButton, 'font-normal');
-          dom$A.addClass(activeButton, 'font-semibold');
+          dom$B.removeClass(activeButton, 'font-normal');
+          dom$B.addClass(activeButton, 'font-semibold');
         }
 
         this.applyDefault(activeButton); // Button on/off
 
         const btnTextBold = buttonModal.querySelector('.textbold-command');
 
-        if (dom$A.hasClass(btnTextBold, 'on')) {
-          dom$A.removeClass(btnTextBold, 'on');
+        if (dom$B.hasClass(btnTextBold, 'on')) {
+          dom$B.removeClass(btnTextBold, 'on');
         } else {
-          dom$A.addClass(btnTextBold, 'on');
+          dom$B.addClass(btnTextBold, 'on');
         }
 
         this.builder.opts.onChange();
@@ -49244,15 +49280,15 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'tracking-');
-          dom$A.addClass(activeButton, 'tracking-' + val);
+          dom$B.removeClassesByPrefix(activeButton, 'tracking-');
+          dom$B.addClass(activeButton, 'tracking-' + val);
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.letter-spacing-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //Margin Left
@@ -49263,15 +49299,15 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'ml-');
-          dom$A.addClass(activeButton, 'ml-' + val);
+          dom$B.removeClassesByPrefix(activeButton, 'ml-');
+          dom$B.addClass(activeButton, 'ml-' + val);
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.ml-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //Margin Right
@@ -49282,15 +49318,15 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'mr-');
-          dom$A.addClass(activeButton, 'mr-' + val);
+          dom$B.removeClassesByPrefix(activeButton, 'mr-');
+          dom$B.addClass(activeButton, 'mr-' + val);
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.mr-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //Margin Top
@@ -49301,15 +49337,15 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'mt-');
-          dom$A.addClass(activeButton, 'mt-' + val);
+          dom$B.removeClassesByPrefix(activeButton, 'mt-');
+          dom$B.addClass(activeButton, 'mt-' + val);
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.mt-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //Margin Bottom
@@ -49320,15 +49356,15 @@ class ButtonEditor {
           this.builder.uo.saveForUndo();
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          dom$A.removeClassesByPrefix(activeButton, 'mb-');
-          dom$A.addClass(activeButton, 'mb-' + val);
+          dom$B.removeClassesByPrefix(activeButton, 'mb-');
+          dom$B.addClass(activeButton, 'mb-' + val);
           this.applyDefault(activeButton); // Button on/off
 
           const items = document.querySelectorAll('.mb-command');
           items.forEach(item => {
-            dom$A.removeClass(item, 'on');
+            dom$B.removeClass(item, 'on');
           });
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
           this.builder.opts.onChange();
         });
       }); //save button
@@ -49343,8 +49379,8 @@ class ButtonEditor {
         } // cleanup before saving
 
 
-        dom$A.removeClass(activeButton, 'active');
-        dom$A.removeClass(activeButton, 'elm-active');
+        dom$B.removeClass(activeButton, 'active');
+        dom$B.removeClass(activeButton, 'elm-active');
         const dataBg = activeButton.getAttribute('data-bg');
         const dataHoverBg = activeButton.getAttribute('data-hover-bg');
         const color = activeButton.style.color;
@@ -49408,7 +49444,7 @@ class ButtonEditor {
 
     if (!currColor) {
       // if no text-[color] found
-      currColor = dom$A.getStyle(activeButton, 'color');
+      currColor = dom$B.getStyle(activeButton, 'color');
       btnTextColor.style.backgroundColor = currColor;
     } // NEW: inline color
 
@@ -49419,111 +49455,111 @@ class ButtonEditor {
     if (activeButton.style.color) btnTextColor.style.backgroundColor = activeButton.style.color;
     let btn;
     btn = this.buttonModal.querySelector('.text-color-hover-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
 
-    if (dom$A.hasClass(activeButton, 'hover:text-black')) {
+    if (dom$B.hasClass(activeButton, 'hover:text-black')) {
       btn = this.buttonModal.querySelector('.text-color-hover-command[data-command="dark"]');
-      dom$A.addClass(btn, 'on');
-    } else if (dom$A.hasClass(activeButton, 'hover:text-white')) {
+      dom$B.addClass(btn, 'on');
+    } else if (dom$B.hasClass(activeButton, 'hover:text-white')) {
       btn = this.buttonModal.querySelector('.text-color-hover-command[data-command="light"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     } else {
       btn = this.buttonModal.querySelector('.text-color-hover-command[data-command="current"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     }
 
     btn = this.buttonModal.querySelector('.border-color-hover-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
 
-    if (dom$A.hasClass(activeButton, 'hover:border-transparent')) {
+    if (dom$B.hasClass(activeButton, 'hover:border-transparent')) {
       btn = this.buttonModal.querySelector('.border-color-hover-command[data-command="transparent"]');
-      dom$A.addClass(btn, 'on');
-    } else if (dom$A.hasClass(activeButton, 'hover:border-current')) {
+      dom$B.addClass(btn, 'on');
+    } else if (dom$B.hasClass(activeButton, 'hover:border-current')) {
       btn = this.buttonModal.querySelector('.border-color-hover-command[data-command="current"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     }
 
     btn = this.buttonModal.querySelector('.border-color-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
 
-    if (dom$A.hasClass(activeButton, 'border-transparent')) {
+    if (dom$B.hasClass(activeButton, 'border-transparent')) {
       btn = this.buttonModal.querySelector('.border-color-command[data-command="transparent"]');
-      dom$A.addClass(btn, 'on');
-    } else if (dom$A.hasClass(activeButton, 'border-current')) {
+      dom$B.addClass(btn, 'on');
+    } else if (dom$B.hasClass(activeButton, 'border-current')) {
       btn = this.buttonModal.querySelector('.border-color-command[data-command="current"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     }
 
     btn = this.buttonModal.querySelector('.width-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
 
-    if (dom$A.hasClass(activeButton, 'flex')) {
+    if (dom$B.hasClass(activeButton, 'flex')) {
       btn = this.buttonModal.querySelector('.width-command[data-command="full"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     } else {
       btn = this.buttonModal.querySelector('.width-command[data-command="auto"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     }
 
     btn = this.buttonModal.querySelector('.textcase-command');
 
-    if (dom$A.hasClass(activeButton, 'uppercase')) {
-      dom$A.addClass(btn, 'on');
+    if (dom$B.hasClass(activeButton, 'uppercase')) {
+      dom$B.addClass(btn, 'on');
     } else {
-      dom$A.removeClass(btn, 'on');
+      dom$B.removeClass(btn, 'on');
     }
 
     btn = this.buttonModal.querySelector('.textunderline-command');
 
-    if (dom$A.hasClass(activeButton, 'underline')) {
-      dom$A.addClass(btn, 'on');
+    if (dom$B.hasClass(activeButton, 'underline')) {
+      dom$B.addClass(btn, 'on');
     } else {
-      dom$A.removeClass(btn, 'on');
+      dom$B.removeClass(btn, 'on');
     }
 
     btn = this.buttonModal.querySelector('.font-size-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.paddingx-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.paddingy-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.border-radius-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.letter-spacing-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.ml-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.mr-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.mt-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.mb-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
     btn = this.buttonModal.querySelector('.textbold-command');
 
-    if (dom$A.hasClass(activeButton, 'font-semibold')) {
-      dom$A.addClass(btn, 'on');
+    if (dom$B.hasClass(activeButton, 'font-semibold')) {
+      dom$B.addClass(btn, 'on');
     } else {
-      dom$A.removeClass(btn, 'on');
+      dom$B.removeClass(btn, 'on');
     }
 
-    if (dom$A.hasClass(activeButton, 'rounded')) {
+    if (dom$B.hasClass(activeButton, 'rounded')) {
       btn = this.buttonModal.querySelector('.border-radius-command[data-command="normal"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     }
 
     btn = this.buttonModal.querySelector('.border-width-command.on');
-    dom$A.removeClass(btn, 'on');
+    dom$B.removeClass(btn, 'on');
 
-    if (dom$A.hasClass(activeButton, 'border-0')) {
+    if (dom$B.hasClass(activeButton, 'border-0')) {
       btn = this.buttonModal.querySelector('.border-width-command[data-command="0"]');
-      dom$A.addClass(btn, 'on');
-    } else if (dom$A.hasClass(activeButton, 'border-2')) {
+      dom$B.addClass(btn, 'on');
+    } else if (dom$B.hasClass(activeButton, 'border-2')) {
       btn = this.buttonModal.querySelector('.border-width-command[data-command="2"]');
-      dom$A.addClass(btn, 'on');
-    } else if (dom$A.hasClass(activeButton, 'border')) {
+      dom$B.addClass(btn, 'on');
+    } else if (dom$B.hasClass(activeButton, 'border')) {
       btn = this.buttonModal.querySelector('.border-width-command[data-command="1"]');
-      dom$A.addClass(btn, 'on');
+      dom$B.addClass(btn, 'on');
     }
 
     if (activeButton.classList) {
@@ -49531,69 +49567,69 @@ class ButtonEditor {
         if (item.indexOf('size-') === 0) {
           let val = item.replace('size-', '');
           let btn = this.buttonModal.querySelector(`.font-size-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('px-') === 0) {
           let val = item.replace('px-', '');
           let btn = this.buttonModal.querySelector(`.paddingx-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('py-') === 0) {
           let val = item.replace('py-', '');
           let btn = this.buttonModal.querySelector(`.paddingy-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('rounded-') === 0) {
           let val = item.replace('rounded-', '');
           let btn = this.buttonModal.querySelector(`.border-radius-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('tracking-') === 0) {
           let val = item.replace('tracking-', '');
           let btn = this.buttonModal.querySelector(`.letter-spacing-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('ml-') === 0) {
           let val = item.replace('ml-', '');
           let btn = this.buttonModal.querySelector(`.ml-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('mr-') === 0) {
           let val = item.replace('mr-', '');
           let btn = this.buttonModal.querySelector(`.mr-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('mt-') === 0) {
           let val = item.replace('mt-', '');
           let btn = this.buttonModal.querySelector(`.mt-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
 
         if (item.indexOf('mb-') === 0) {
           let val = item.replace('mb-', '');
           let btn = this.buttonModal.querySelector(`.mb-command[data-command="${val}"]`);
-          dom$A.addClass(btn, 'on');
+          dom$B.addClass(btn, 'on');
         }
       });
     }
   }
 
   hide() {
-    dom$A.removeClass(this.buttonModal, 'active');
+    dom$B.removeClass(this.buttonModal, 'active');
   }
 
   getVisibleBgColor(className, callback) {
     const elm = document.createElement('div');
     elm.className = className;
     this.builderStuff.appendChild(elm);
-    let currColor = dom$A.getStyle(elm, 'background-color');
+    let currColor = dom$B.getStyle(elm, 'background-color');
     callback(currColor);
     this.builderStuff.removeChild(elm);
   }
@@ -49602,7 +49638,7 @@ class ButtonEditor {
     const elm = document.createElement('div');
     elm.className = className;
     this.builderStuff.appendChild(elm);
-    let currColor = dom$A.getStyle(elm, 'color');
+    let currColor = dom$B.getStyle(elm, 'color');
     callback(currColor);
     this.builderStuff.removeChild(elm);
   }
@@ -49697,9 +49733,9 @@ class ButtonEditor {
         const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
         var links = this.buttonModal.querySelectorAll('#divMyButtonList a');
         Array.prototype.forEach.call(links, link => {
-          dom$A.removeClass(link, 'active');
+          dom$B.removeClass(link, 'active');
         });
-        dom$A.addClass(btn, 'active');
+        dom$B.addClass(btn, 'active');
         this.applyStyles(activeButton, btn);
         this.cleanupOldClasses(activeButton);
         this.builder.opts.onChange();
@@ -49763,12 +49799,12 @@ class ButtonEditor {
   }
 
   applyDefault(link) {
-    dom$A.addClass(link, 'transition-all');
-    if (!dom$A.hasClass(link, 'flex')) dom$A.addClass(link, 'inline-block');
-    dom$A.addClass(link, 'cursor-pointer'); // dom.addClass(link, 'border-2');
+    dom$B.addClass(link, 'transition-all');
+    if (!dom$B.hasClass(link, 'flex')) dom$B.addClass(link, 'inline-block');
+    dom$B.addClass(link, 'cursor-pointer'); // dom.addClass(link, 'border-2');
 
-    dom$A.addClass(link, 'border-solid');
-    dom$A.addClass(link, 'leading-relaxed'); // dom.addClass(link, 'mt-2');
+    dom$B.addClass(link, 'border-solid');
+    dom$B.addClass(link, 'leading-relaxed'); // dom.addClass(link, 'mt-2');
     // dom.addClass(link, 'mb-2');
     // link.removeAttribute('style');
     // link.removeAttribute('onmouseover');
@@ -49782,20 +49818,20 @@ class ButtonEditor {
   }
 
   cleanupOldClasses(link) {
-    dom$A.removeClass(link, 'is-btn-ghost1');
-    dom$A.removeClass(link, 'is-btn-ghost2');
-    dom$A.removeClass(link, 'is-upper');
-    dom$A.removeClass(link, 'is-btn-small');
-    dom$A.removeClass(link, 'is-btn');
-    dom$A.removeClass(link, 'is-rounded-30');
-    dom$A.removeClass(link, 'btn-primary');
-    dom$A.removeClass(link, 'btn-default');
-    dom$A.removeClass(link, 'btn');
+    dom$B.removeClass(link, 'is-btn-ghost1');
+    dom$B.removeClass(link, 'is-btn-ghost2');
+    dom$B.removeClass(link, 'is-upper');
+    dom$B.removeClass(link, 'is-btn-small');
+    dom$B.removeClass(link, 'is-btn');
+    dom$B.removeClass(link, 'is-rounded-30');
+    dom$B.removeClass(link, 'btn-primary');
+    dom$B.removeClass(link, 'btn-default');
+    dom$B.removeClass(link, 'btn');
   }
 
 }
 
-const dom$z = new Dom();
+const dom$A = new Dom();
 
 class Hyperlink {
   constructor(builder) {
@@ -49846,27 +49882,27 @@ class Hyperlink {
                 </div>
             </div>
             `;
-      dom$z.appendHtml(builderStuff, html);
+      dom$A.appendHtml(builderStuff, html);
       linkTool = builderStuff.querySelector('#divLinkTool');
       let linkEdit = linkTool.querySelector('.link-edit');
-      dom$z.addEventListener(linkEdit, 'click', () => {
+      dom$A.addEventListener(linkEdit, 'click', () => {
         // old: 10853
         this.editLink();
       });
       let buttonEdit = linkTool.querySelector('.link-button-edit');
-      dom$z.addEventListener(buttonEdit, 'click', () => {
+      dom$A.addEventListener(buttonEdit, 'click', () => {
         // old: 10853
         this.editButton();
       });
       let linkDuplicate = linkTool.querySelector('.link-duplicate');
-      dom$z.addEventListener(linkDuplicate, 'click', () => {
+      dom$A.addEventListener(linkDuplicate, 'click', () => {
         if (this.builder.activeLink) {
           this.builder.uo.saveForUndo();
 
           if (this.builder.opts.emailMode) {
             var element = this.builder.activeLink;
 
-            while (element.tagName.toLowerCase() !== 'table' && !dom$z.hasClass(element, 'button')) {
+            while (element.tagName.toLowerCase() !== 'table' && !dom$A.hasClass(element, 'button')) {
               element = element.parentNode;
             }
 
@@ -49875,7 +49911,7 @@ class Hyperlink {
             const newlinkTD = activeLinkTD.cloneNode(true); // if there is active icon class, do not copy the class
 
             let iconActive = newlinkTD.querySelector('.icon-active');
-            if (iconActive) dom$z.removeClass(iconActive, 'icon-active');
+            if (iconActive) dom$A.removeClass(iconActive, 'icon-active');
             newlinkTD.style.paddingRight = '15px';
             activeLinkTD.parentNode.insertBefore(newlinkTD, activeLinkTD);
             this.showTool(this.builder.activeLink);
@@ -49883,20 +49919,20 @@ class Hyperlink {
             const newlink = this.builder.activeLink.cloneNode(true); // if there is active icon class, do not copy the class
 
             let iconActive = newlink.querySelector('.icon-active');
-            if (iconActive) dom$z.removeClass(iconActive, 'icon-active');
+            if (iconActive) dom$A.removeClass(iconActive, 'icon-active');
             this.builder.activeLink.parentNode.insertBefore(newlink, this.builder.activeLink);
             this.showTool(this.builder.activeLink);
           }
         }
       });
       let linkRemove = linkTool.querySelector('.link-remove');
-      dom$z.addEventListener(linkRemove, 'click', () => {
+      dom$A.addEventListener(linkRemove, 'click', () => {
         this.builder.uo.saveForUndo();
 
         if (this.builder.opts.emailMode) {
           var element = this.builder.activeLink;
 
-          while (element.tagName.toLowerCase() !== 'table' && !dom$z.hasClass(element, 'button')) {
+          while (element.tagName.toLowerCase() !== 'table' && !dom$A.hasClass(element, 'button')) {
             element = element.parentNode;
           }
 
@@ -49915,7 +49951,7 @@ class Hyperlink {
       });
       let modal = this.builderStuff.querySelector('.is-modal.createlink');
       let inputOk = modal.querySelector('.input-ok');
-      dom$z.addEventListener(inputOk, 'click', () => {
+      dom$A.addEventListener(inputOk, 'click', () => {
         this.builder.uo.saveForUndo();
         let link = this.builder.activeLink;
 
@@ -49936,9 +49972,9 @@ class Hyperlink {
             }
 
             if (modal.querySelector('.input-openlightbox').checked) {
-              dom$z.addClass(link, 'is-lightbox');
+              dom$A.addClass(link, 'is-lightbox');
             } else {
-              dom$z.removeClass(link, 'is-lightbox');
+              dom$A.removeClass(link, 'is-lightbox');
             }
 
             if (this.builder.activeIcon) ; else {
@@ -49988,9 +50024,9 @@ class Hyperlink {
               }
 
               if (modal.querySelector('.input-openlightbox').checked) {
-                dom$z.addClass(activeLink, 'is-lightbox');
+                dom$A.addClass(activeLink, 'is-lightbox');
               } else {
-                dom$z.removeClass(activeLink, 'is-lightbox');
+                dom$A.removeClass(activeLink, 'is-lightbox');
               }
 
               activeLink.setAttribute('title', title);
@@ -49998,7 +50034,7 @@ class Hyperlink {
 
               if (!util.appleMobile) {
                 this.builder.activeIcon.click();
-                dom$z.selectElementContents(this.builder.activeIcon); // https://stackoverflow.com/questions/29908261/prevent-text-selection-on-mouse-drag
+                dom$A.selectElementContents(this.builder.activeIcon); // https://stackoverflow.com/questions/29908261/prevent-text-selection-on-mouse-drag
                 // prevent text selection
 
                 if (document.selection) {
@@ -50027,9 +50063,9 @@ class Hyperlink {
                 }
 
                 if (modal.querySelector('.input-openlightbox').checked) {
-                  dom$z.addClass(link, 'is-lightbox');
+                  dom$A.addClass(link, 'is-lightbox');
                 } else {
-                  dom$z.removeClass(link, 'is-lightbox');
+                  dom$A.removeClass(link, 'is-lightbox');
                 }
 
                 link.appendChild(fragment);
@@ -50050,14 +50086,14 @@ class Hyperlink {
                 }
 
                 if (modal.querySelector('.input-openlightbox').checked) {
-                  dom$z.addClass(link, 'is-lightbox');
+                  dom$A.addClass(link, 'is-lightbox');
                 } else {
-                  dom$z.removeClass(link, 'is-lightbox');
+                  dom$A.removeClass(link, 'is-lightbox');
                 } // if(!util.appleMobile) dom.selectElementContents(link); 
 
 
-                dom$z.selectElementContents(link);
-                dom$z.removeClass(link, 'dummylink');
+                dom$A.selectElementContents(link);
+                dom$A.removeClass(link, 'dummylink');
               }
             }
           } //save selection
@@ -50073,7 +50109,7 @@ class Hyperlink {
         util.hideModal(modal);
       });
       let inputCancel = modal.querySelector('.input-cancel');
-      dom$z.addEventListener(inputCancel, 'click', () => {
+      dom$A.addEventListener(inputCancel, 'click', () => {
         util.hideModal(modal);
         if (!util.appleMobile) util.restoreSelection();
       });
@@ -50108,16 +50144,16 @@ class Hyperlink {
     this.builder.activeLink = null;
     this.builder.activeLinkButton = null;
 
-    if ((elm.tagName.toLowerCase() === 'a' || dom$z.parentsHasTag(elm, 'a')) && !customcode && !noedit && !_protected) {
+    if ((elm.tagName.toLowerCase() === 'a' || dom$A.parentsHasTag(elm, 'a')) && !customcode && !noedit && !_protected) {
       if (elm.childNodes.length > 0) {
         // Sometimes happens when click a link icon, but not exactly on the icon <i>, but the link <a>
         if (elm.childNodes[0].tagName) if (elm.childNodes[0].tagName.toLowerCase() === 'i' && elm.childNodes.length === 1 && elm.childNodes[0].innerHTML === '') {
           const icons = document.querySelectorAll('.icon-active');
           Array.prototype.forEach.call(icons, icon => {
-            dom$z.removeClass(icon, 'icon-active');
+            dom$A.removeClass(icon, 'icon-active');
           });
-          dom$z.addClass(elm.childNodes[0], 'icon-active');
-          dom$z.selectElementContents(elm.childNodes[0]);
+          dom$A.addClass(elm.childNodes[0], 'icon-active');
+          dom$A.selectElementContents(elm.childNodes[0]);
           this.builder.activeIcon = elm.childNodes[0];
         }
       }
@@ -50143,7 +50179,7 @@ class Hyperlink {
       this.builder.activeLink = link; // Button Stuff
 
       let isButton;
-      let display = dom$z.getStyle(link, 'display');
+      let display = dom$A.getStyle(link, 'display');
 
       if (display === 'inline-block' || display === 'block' || display === 'flex') {
         isButton = true;
@@ -50164,7 +50200,7 @@ class Hyperlink {
   showTool(link) {
     // Link tool
     const linkTool = this.linkTool;
-    let linkDisplay = dom$z.getStyle(link, 'display');
+    let linkDisplay = dom$A.getStyle(link, 'display');
 
     if (linkDisplay === 'inline-block' || linkDisplay === 'flex') {
       linkTool.querySelector('.link-duplicate').style.display = 'block';
@@ -50186,7 +50222,7 @@ class Hyperlink {
       if (link && this.builder.activeLinkButton) linkTool.querySelector('.link-button-edit').style.display = 'block';else linkTool.querySelector('.link-button-edit').style.display = 'none';
     }
 
-    if (dom$z.hasClass(this.buttonEditor.buttonModal, 'active')) {
+    if (dom$A.hasClass(this.buttonEditor.buttonModal, 'active')) {
       this.buttonEditor.realtime();
     } // /Button Stuff
 
@@ -50269,14 +50305,14 @@ class Hyperlink {
     const util = new Util(this.builder);
     util.getSelection(); // new
 
-    var text = dom$z.getSelected();
+    var text = dom$A.getSelected();
     let modal = this.builderStuff.querySelector('.is-modal.createlink');
 
     if (this.builder.opts.onFileSelectClick || this.builder.opts.fileselect !== '') {
       modal.querySelector('.input-select').style.display = 'block'; // modal.querySelector('.input-url').style.width = '444px';
 
       let inputSelect = modal.querySelector('.input-select');
-      dom$z.addEventListener(inputSelect, 'click', e => {
+      dom$A.addEventListener(inputSelect, 'click', e => {
         if (this.builder.opts.onFileSelectClick) {
           this.builder.opts.onFileSelectClick({
             targetInput: modal.querySelector('.input-url'),
@@ -50335,7 +50371,7 @@ class Hyperlink {
         modal.querySelector('.input-newwindow').checked = false;
       }
 
-      if (dom$z.hasClass(link, 'is-lightbox')) {
+      if (dom$A.hasClass(link, 'is-lightbox')) {
         modal.querySelector('.input-openlightbox').checked = true;
       } else {
         modal.querySelector('.input-openlightbox').checked = false;
@@ -50368,7 +50404,7 @@ class Hyperlink {
     modal.querySelector('#inpCreateLinkText').style.display = '';
 
     if (link.childElementCount === 1 && icon) {
-      if (dom$z.hasClass(icon, 'icon')) {
+      if (dom$A.hasClass(icon, 'icon')) {
         modal.querySelector('#lblCreateLinkText').style.display = 'none';
         modal.querySelector('#inpCreateLinkText').style.display = 'none';
       }
@@ -50378,7 +50414,7 @@ class Hyperlink {
       modal.querySelector('.input-select').style.display = 'block';
       modal.querySelector('.input-url').style.width = '444px';
       let inputSelect = modal.querySelector('.input-select');
-      dom$z.addEventListener(inputSelect, 'click', () => {
+      dom$A.addEventListener(inputSelect, 'click', () => {
         if (this.builder.opts.onFileSelectClick) {
           this.builder.opts.onFileSelectClick({
             targetInput: modal.querySelector('.input-url'),
@@ -50422,7 +50458,7 @@ class Hyperlink {
       modal.querySelector('.input-newwindow').checked = false;
     }
 
-    if (dom$z.hasClass(link, 'is-lightbox')) {
+    if (dom$A.hasClass(link, 'is-lightbox')) {
       modal.querySelector('.input-openlightbox').checked = true;
     } else {
       modal.querySelector('.input-openlightbox').checked = false;
@@ -50437,7 +50473,7 @@ class Hyperlink {
 
 }
 
-const dom$y = new Dom();
+const dom$z = new Dom();
 
 class Button {
   constructor(builder) {
@@ -50455,26 +50491,26 @@ class Button {
                 <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
             </div>
             `;
-      dom$y.appendHtml(builderStuff, html);
+      dom$z.appendHtml(builderStuff, html);
       buttonTool = builderStuff.querySelector('#divButtonTool');
       let buttonEdit = buttonTool.querySelector('.button-edit');
-      dom$y.addEventListener(buttonEdit, 'click', () => {
+      dom$z.addEventListener(buttonEdit, 'click', () => {
         // old: 10853
         this.editButton();
       });
       let buttonDuplicate = buttonTool.querySelector('.button-duplicate');
-      dom$y.addEventListener(buttonDuplicate, 'click', () => {
+      dom$z.addEventListener(buttonDuplicate, 'click', () => {
         if (this.builder.activeButton) {
           this.builder.uo.saveForUndo();
           const newButton = this.builder.activeButton.cloneNode(true);
           let elmActive = newButton.querySelector('.elm-active');
-          if (elmActive) dom$y.removeClass(elmActive, 'elm-active');
+          if (elmActive) dom$z.removeClass(elmActive, 'elm-active');
           this.builder.activeButton.parentNode.insertBefore(newButton, this.builder.activeButton);
           this.showTool(this.builder.activeButton);
         }
       });
       let buttonRemove = buttonTool.querySelector('.button-remove');
-      dom$y.addEventListener(buttonRemove, 'click', () => {
+      dom$z.addEventListener(buttonRemove, 'click', () => {
         this.builder.uo.saveForUndo();
         if (this.builder.activeButton) this.builder.activeButton.parentNode.removeChild(this.builder.activeButton);
         buttonTool.style.display = '';
@@ -50525,7 +50561,7 @@ class Button {
   }
 
   showTool(activeButton) {
-    if (dom$y.hasClass(this.buttonEditor.buttonModal, 'active')) {
+    if (dom$z.hasClass(this.buttonEditor.buttonModal, 'active')) {
       this.buttonEditor.realtime();
     }
 
@@ -50546,7 +50582,7 @@ class Button {
 
 }
 
-const dom$x = new Dom();
+const dom$y = new Dom();
 
 class Spacer {
   constructor(builder) {
@@ -50564,103 +50600,103 @@ class Spacer {
                 <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
             </div>
             `;
-      dom$x.appendHtml(builderStuff, html);
+      dom$y.appendHtml(builderStuff, html);
       spacerTool = builderStuff.querySelector('.is-spacer-tool');
       const btns = spacerTool.querySelectorAll('button');
       Array.prototype.forEach.call(btns, btn => {
-        dom$x.addEventListener(btn, 'click', () => {
+        dom$y.addEventListener(btn, 'click', () => {
           this.builder.uo.saveForUndo();
           const command = btn.getAttribute('data-value');
           let spacer = this.builder.activeSpacer;
 
           if (command === '-') {
-            if (dom$x.hasClass(spacer, 'height-300')) {
-              dom$x.removeClass(spacer, 'height-300');
-              dom$x.addClass(spacer, 'height-280');
-            } else if (dom$x.hasClass(spacer, 'height-280')) {
-              dom$x.removeClass(spacer, 'height-280');
-              dom$x.addClass(spacer, 'height-260');
-            } else if (dom$x.hasClass(spacer, 'height-260')) {
-              dom$x.removeClass(spacer, 'height-260');
-              dom$x.addClass(spacer, 'height-240');
-            } else if (dom$x.hasClass(spacer, 'height-240')) {
-              dom$x.removeClass(spacer, 'height-240');
-              dom$x.addClass(spacer, 'height-220');
-            } else if (dom$x.hasClass(spacer, 'height-220')) {
-              dom$x.removeClass(spacer, 'height-220');
-              dom$x.addClass(spacer, 'height-200');
-            } else if (dom$x.hasClass(spacer, 'height-200')) {
-              dom$x.removeClass(spacer, 'height-200');
-              dom$x.addClass(spacer, 'height-180');
-            } else if (dom$x.hasClass(spacer, 'height-180')) {
-              dom$x.removeClass(spacer, 'height-180');
-              dom$x.addClass(spacer, 'height-160');
-            } else if (dom$x.hasClass(spacer, 'height-160')) {
-              dom$x.removeClass(spacer, 'height-160');
-              dom$x.addClass(spacer, 'height-140');
-            } else if (dom$x.hasClass(spacer, 'height-140')) {
-              dom$x.removeClass(spacer, 'height-140');
-              dom$x.addClass(spacer, 'height-120');
-            } else if (dom$x.hasClass(spacer, 'height-120')) {
-              dom$x.removeClass(spacer, 'height-120');
-              dom$x.addClass(spacer, 'height-100');
-            } else if (dom$x.hasClass(spacer, 'height-100')) {
-              dom$x.removeClass(spacer, 'height-100');
-              dom$x.addClass(spacer, 'height-80');
-            } else if (dom$x.hasClass(spacer, 'height-80')) {
-              dom$x.removeClass(spacer, 'height-80');
-              dom$x.addClass(spacer, 'height-60');
-            } else if (dom$x.hasClass(spacer, 'height-60')) {
-              dom$x.removeClass(spacer, 'height-60');
-              dom$x.addClass(spacer, 'height-40');
-            } else if (dom$x.hasClass(spacer, 'height-40')) {
-              dom$x.removeClass(spacer, 'height-40');
-              dom$x.addClass(spacer, 'height-20');
+            if (dom$y.hasClass(spacer, 'height-300')) {
+              dom$y.removeClass(spacer, 'height-300');
+              dom$y.addClass(spacer, 'height-280');
+            } else if (dom$y.hasClass(spacer, 'height-280')) {
+              dom$y.removeClass(spacer, 'height-280');
+              dom$y.addClass(spacer, 'height-260');
+            } else if (dom$y.hasClass(spacer, 'height-260')) {
+              dom$y.removeClass(spacer, 'height-260');
+              dom$y.addClass(spacer, 'height-240');
+            } else if (dom$y.hasClass(spacer, 'height-240')) {
+              dom$y.removeClass(spacer, 'height-240');
+              dom$y.addClass(spacer, 'height-220');
+            } else if (dom$y.hasClass(spacer, 'height-220')) {
+              dom$y.removeClass(spacer, 'height-220');
+              dom$y.addClass(spacer, 'height-200');
+            } else if (dom$y.hasClass(spacer, 'height-200')) {
+              dom$y.removeClass(spacer, 'height-200');
+              dom$y.addClass(spacer, 'height-180');
+            } else if (dom$y.hasClass(spacer, 'height-180')) {
+              dom$y.removeClass(spacer, 'height-180');
+              dom$y.addClass(spacer, 'height-160');
+            } else if (dom$y.hasClass(spacer, 'height-160')) {
+              dom$y.removeClass(spacer, 'height-160');
+              dom$y.addClass(spacer, 'height-140');
+            } else if (dom$y.hasClass(spacer, 'height-140')) {
+              dom$y.removeClass(spacer, 'height-140');
+              dom$y.addClass(spacer, 'height-120');
+            } else if (dom$y.hasClass(spacer, 'height-120')) {
+              dom$y.removeClass(spacer, 'height-120');
+              dom$y.addClass(spacer, 'height-100');
+            } else if (dom$y.hasClass(spacer, 'height-100')) {
+              dom$y.removeClass(spacer, 'height-100');
+              dom$y.addClass(spacer, 'height-80');
+            } else if (dom$y.hasClass(spacer, 'height-80')) {
+              dom$y.removeClass(spacer, 'height-80');
+              dom$y.addClass(spacer, 'height-60');
+            } else if (dom$y.hasClass(spacer, 'height-60')) {
+              dom$y.removeClass(spacer, 'height-60');
+              dom$y.addClass(spacer, 'height-40');
+            } else if (dom$y.hasClass(spacer, 'height-40')) {
+              dom$y.removeClass(spacer, 'height-40');
+              dom$y.addClass(spacer, 'height-20');
             } // else { }
 
           } else {
-            if (dom$x.hasClass(spacer, 'height-20')) {
-              dom$x.removeClass(spacer, 'height-20');
-              dom$x.addClass(spacer, 'height-40');
-            } else if (dom$x.hasClass(spacer, 'height-40')) {
-              dom$x.removeClass(spacer, 'height-40');
-              dom$x.addClass(spacer, 'height-60');
-            } else if (dom$x.hasClass(spacer, 'height-60')) {
-              dom$x.removeClass(spacer, 'height-60');
-              dom$x.addClass(spacer, 'height-80');
-            } else if (dom$x.hasClass(spacer, 'height-80')) {
-              dom$x.removeClass(spacer, 'height-80');
-              dom$x.addClass(spacer, 'height-100');
-            } else if (dom$x.hasClass(spacer, 'height-100')) {
-              dom$x.removeClass(spacer, 'height-100');
-              dom$x.addClass(spacer, 'height-120');
-            } else if (dom$x.hasClass(spacer, 'height-120')) {
-              dom$x.removeClass(spacer, 'height-120');
-              dom$x.addClass(spacer, 'height-140');
-            } else if (dom$x.hasClass(spacer, 'height-140')) {
-              dom$x.removeClass(spacer, 'height-140');
-              dom$x.addClass(spacer, 'height-160');
-            } else if (dom$x.hasClass(spacer, 'height-160')) {
-              dom$x.removeClass(spacer, 'height-160');
-              dom$x.addClass(spacer, 'height-180');
-            } else if (dom$x.hasClass(spacer, 'height-180')) {
-              dom$x.removeClass(spacer, 'height-180');
-              dom$x.addClass(spacer, 'height-200');
-            } else if (dom$x.hasClass(spacer, 'height-200')) {
-              dom$x.removeClass(spacer, 'height-200');
-              dom$x.addClass(spacer, 'height-220');
-            } else if (dom$x.hasClass(spacer, 'height-220')) {
-              dom$x.removeClass(spacer, 'height-220');
-              dom$x.addClass(spacer, 'height-240');
-            } else if (dom$x.hasClass(spacer, 'height-240')) {
-              dom$x.removeClass(spacer, 'height-240');
-              dom$x.addClass(spacer, 'height-260');
-            } else if (dom$x.hasClass(spacer, 'height-260')) {
-              dom$x.removeClass(spacer, 'height-260');
-              dom$x.addClass(spacer, 'height-280');
-            } else if (dom$x.hasClass(spacer, 'height-280')) {
-              dom$x.removeClass(spacer, 'height-280');
-              dom$x.addClass(spacer, 'height-300');
+            if (dom$y.hasClass(spacer, 'height-20')) {
+              dom$y.removeClass(spacer, 'height-20');
+              dom$y.addClass(spacer, 'height-40');
+            } else if (dom$y.hasClass(spacer, 'height-40')) {
+              dom$y.removeClass(spacer, 'height-40');
+              dom$y.addClass(spacer, 'height-60');
+            } else if (dom$y.hasClass(spacer, 'height-60')) {
+              dom$y.removeClass(spacer, 'height-60');
+              dom$y.addClass(spacer, 'height-80');
+            } else if (dom$y.hasClass(spacer, 'height-80')) {
+              dom$y.removeClass(spacer, 'height-80');
+              dom$y.addClass(spacer, 'height-100');
+            } else if (dom$y.hasClass(spacer, 'height-100')) {
+              dom$y.removeClass(spacer, 'height-100');
+              dom$y.addClass(spacer, 'height-120');
+            } else if (dom$y.hasClass(spacer, 'height-120')) {
+              dom$y.removeClass(spacer, 'height-120');
+              dom$y.addClass(spacer, 'height-140');
+            } else if (dom$y.hasClass(spacer, 'height-140')) {
+              dom$y.removeClass(spacer, 'height-140');
+              dom$y.addClass(spacer, 'height-160');
+            } else if (dom$y.hasClass(spacer, 'height-160')) {
+              dom$y.removeClass(spacer, 'height-160');
+              dom$y.addClass(spacer, 'height-180');
+            } else if (dom$y.hasClass(spacer, 'height-180')) {
+              dom$y.removeClass(spacer, 'height-180');
+              dom$y.addClass(spacer, 'height-200');
+            } else if (dom$y.hasClass(spacer, 'height-200')) {
+              dom$y.removeClass(spacer, 'height-200');
+              dom$y.addClass(spacer, 'height-220');
+            } else if (dom$y.hasClass(spacer, 'height-220')) {
+              dom$y.removeClass(spacer, 'height-220');
+              dom$y.addClass(spacer, 'height-240');
+            } else if (dom$y.hasClass(spacer, 'height-240')) {
+              dom$y.removeClass(spacer, 'height-240');
+              dom$y.addClass(spacer, 'height-260');
+            } else if (dom$y.hasClass(spacer, 'height-260')) {
+              dom$y.removeClass(spacer, 'height-260');
+              dom$y.addClass(spacer, 'height-280');
+            } else if (dom$y.hasClass(spacer, 'height-280')) {
+              dom$y.removeClass(spacer, 'height-280');
+              dom$y.addClass(spacer, 'height-300');
             } // else { }
 
           }
@@ -50680,7 +50716,7 @@ class Spacer {
   click(e) {
     const elm = e.target;
 
-    if (dom$x.hasClass(elm, 'spacer')) {
+    if (dom$y.hasClass(elm, 'spacer')) {
       this.builder.activeSpacer = elm; // prevent text selection
 
       if (document.selection) {
@@ -50712,7 +50748,7 @@ class Spacer {
 
 }
 
-const dom$w = new Dom();
+const dom$x = new Dom();
 
 class Module {
   constructor(builder) {
@@ -50747,15 +50783,15 @@ class Module {
                 </div>
             </div> 
             `;
-      dom$w.appendHtml(builderStuff, html);
+      dom$x.appendHtml(builderStuff, html);
       moduleTool = builderStuff.querySelector('.is-module-tool');
       moduleModal = builderStuff.querySelector('.is-modal.custommodule');
       let btn = moduleTool.querySelector('button');
-      dom$w.addEventListener(btn, 'click', async () => {
+      dom$x.addEventListener(btn, 'click', async () => {
         // old: 10100
         let module = this.builder.activeModule; //-------- Set a flag to indicate active module -----------
 
-        dom$w.removeAttributes(document.querySelectorAll('[data-module-active]'), 'data-module-active');
+        dom$x.removeAttributes(document.querySelectorAll('[data-module-active]'), 'data-module-active');
         module.setAttribute('data-module-active', '1'); //-------- /Set a flag to indicate active module -----------
         //show modal
 
@@ -50783,7 +50819,7 @@ class Module {
         moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
         moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
         let btnClose = moduleModal.querySelector('.is-modal-close');
-        dom$w.addEventListener(btnClose, 'click', () => {
+        dom$x.addEventListener(btnClose, 'click', () => {
           this.util.hideModal(moduleModal);
         }); // OLD
         // Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
@@ -50797,7 +50833,7 @@ class Module {
         const builders = module.querySelectorAll('[data-subblock]');
         Array.prototype.forEach.call(builders, builder => {
           // Glide Slider Support
-          if (dom$w.hasClass(builder.parentNode, 'glide__slide--clone')) return;
+          if (dom$x.hasClass(builder.parentNode, 'glide__slide--clone')) return;
           let builderhtml = builder.innerHTML;
           module.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
           index++;
@@ -50881,7 +50917,7 @@ class Module {
         doc.close();
       });
       let btnOk = moduleModal.querySelector('.input-ok');
-      dom$w.addEventListener(btnOk, 'click', () => {
+      dom$x.addEventListener(btnOk, 'click', () => {
         let modalIframe = moduleModal.querySelector('iframe');
         if (modalIframe.contentWindow.construct) modalIframe.contentWindow.construct(); //Save for Undo
 
@@ -50932,7 +50968,7 @@ class Module {
         this.builder.hideModal(moduleModal);
       });
       let btnCancel = moduleModal.querySelector('.input-cancel');
-      dom$w.addEventListener(btnCancel, 'click', () => {
+      dom$x.addEventListener(btnCancel, 'click', () => {
         this.builder.hideModal(moduleModal);
       });
     }
@@ -50972,7 +51008,7 @@ class Module {
 
 }
 
-const dom$v = new Dom();
+const dom$w = new Dom();
 
 class Code {
   constructor(builder) {
@@ -50993,16 +51029,16 @@ class Code {
             `; // <input id="hidContentModuleCode" type="hidden" />
       // <input id="hidContentModuleSettings" type="hidden" />
 
-      dom$v.appendHtml(builderStuff, html);
+      dom$w.appendHtml(builderStuff, html);
       codeTool = builderStuff.querySelector('.is-code-tool');
       let btn = codeTool.querySelector('button');
-      dom$v.addEventListener(btn, 'click', () => {
+      dom$w.addEventListener(btn, 'click', () => {
         let codeblock = this.builder.activeCodeBlock; // var html = plugin.readCustomCodeBlock($block);
         // Find editable areas (is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
 
         let tmpbuilder = this.builderStuff.querySelector('#tmp_buildercontent');
         if (tmpbuilder) tmpbuilder.parentNode.removeChild(tmpbuilder);
-        dom$v.appendHtml(this.builderStuff, '<div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>');
+        dom$w.appendHtml(this.builderStuff, '<div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>');
         tmpbuilder = this.builderStuff.querySelector('#tmp_buildercontent');
         var index = 1;
         const builders = codeblock.querySelectorAll('is-builder');
@@ -51032,31 +51068,31 @@ class Code {
           tmpbuilder = this.builderStuff.querySelector('#tmp_buildercontent');
           tmpbuilder.innerHTML = builderhtml;
           let elms = tmpbuilder.querySelectorAll('.elm-active');
-          dom$v.removeClasses(elms, 'elm-active');
+          dom$w.removeClasses(elms, 'elm-active');
           elms = tmpbuilder.querySelectorAll('.elm-inspected');
-          dom$v.removeClasses(elms, 'elm-inspected');
+          dom$w.removeClasses(elms, 'elm-inspected');
           elms = tmpbuilder.querySelectorAll('.cell-active');
-          dom$v.removeClasses(elms, 'cell-active');
+          dom$w.removeClasses(elms, 'cell-active');
           elms = tmpbuilder.querySelectorAll('.row-active');
-          dom$v.removeClasses(elms, 'row-active');
+          dom$w.removeClasses(elms, 'row-active');
           elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom$v.removeClasses(elms, 'row-outline'); //elms = tmpbuilder.querySelectorAll('.is-builder');
+          dom$w.removeClasses(elms, 'row-outline'); //elms = tmpbuilder.querySelectorAll('.is-builder');
           //dom.removeClasses(elms, 'is-builder');
 
           elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom$v.removeClasses(elms, 'row-outline');
+          dom$w.removeClasses(elms, 'row-outline');
           elms = tmpbuilder.querySelectorAll('[data-click]');
-          dom$v.removeAttributes(elms, 'data-click');
+          dom$w.removeAttributes(elms, 'data-click');
           elms = tmpbuilder.querySelectorAll('[contenteditable]');
-          dom$v.removeAttributes(elms, 'contenteditable');
+          dom$w.removeAttributes(elms, 'contenteditable');
           elms = tmpbuilder.querySelectorAll('[data-module-active]');
-          dom$v.removeAttributes(elms, 'data-module-active');
-          dom$v.removeElements(tmpbuilder.querySelectorAll('.is-row-tool'));
-          dom$v.removeElements(tmpbuilder.querySelectorAll('.is-rowadd-tool'));
-          dom$v.removeElements(tmpbuilder.querySelectorAll('.ovl'));
-          dom$v.removeElements(tmpbuilder.querySelectorAll('.row-add-initial'));
+          dom$w.removeAttributes(elms, 'data-module-active');
+          dom$w.removeElements(tmpbuilder.querySelectorAll('.is-row-tool'));
+          dom$w.removeElements(tmpbuilder.querySelectorAll('.is-rowadd-tool'));
+          dom$w.removeElements(tmpbuilder.querySelectorAll('.ovl'));
+          dom$w.removeElements(tmpbuilder.querySelectorAll('.row-add-initial'));
           elms = tmpbuilder.querySelectorAll('[data-keep]');
-          dom$v.removeAttributes(elms, 'data-keep');
+          dom$w.removeAttributes(elms, 'data-keep');
           builderhtml = tmpbuilder.innerHTML.trim();
           builderhtml = builderhtml.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
           codeblock.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
@@ -51116,7 +51152,7 @@ class Code {
 
 }
 
-const dom$u = new Dom();
+const dom$v = new Dom();
 
 class Iframe {
   constructor(builder) {
@@ -51146,11 +51182,11 @@ class Iframe {
             </div>
             
             `;
-      dom$u.appendHtml(builderStuff, html);
+      dom$v.appendHtml(builderStuff, html);
       iframeTool = builderStuff.querySelector('.is-iframe-tool');
       iframeModal = builderStuff.querySelector('.is-modal.iframelink');
       let btn = iframeTool.querySelector('button');
-      dom$u.addEventListener(btn, 'click', () => {
+      dom$v.addEventListener(btn, 'click', () => {
         let iframe = this.builder.activeIframe; //get values                    
 
         var src = iframe.src;
@@ -51177,7 +51213,7 @@ class Iframe {
         btn.setAttribute('data-focus', true);
       });
       let btnOk = iframeModal.querySelector('.input-ok');
-      dom$u.addEventListener(btnOk, 'click', () => {
+      dom$v.addEventListener(btnOk, 'click', () => {
         this.builder.uo.saveForUndo();
         let iframe = this.builder.activeIframe;
         let iframeParent = iframe.parentNode;
@@ -51224,7 +51260,7 @@ class Iframe {
         this.util.hideModal(iframeModal);
       });
       let btnCancel = iframeModal.querySelector('.input-cancel');
-      dom$u.addEventListener(btnCancel, 'click', () => {
+      dom$v.addEventListener(btnCancel, 'click', () => {
         this.util.hideModal(iframeModal);
       });
     }
@@ -51234,7 +51270,9 @@ class Iframe {
   }
 
   click(e) {
-    if (dom$u.hasClass(e.target, 'ovl')) {
+    if (dom$v.hasClass(e.target, 'ovl') && e.target.parentNode.querySelector('audio')) return;
+
+    if (dom$v.hasClass(e.target, 'ovl')) {
       //iframe overlay
       e.target.style.display = 'none';
       this.builder.activeIframe = e.target.parentNode.querySelector('iframe');
@@ -51263,7 +51301,7 @@ class Iframe {
 
 }
 
-const dom$t = new Dom();
+const dom$u = new Dom();
 
 class Table {
   constructor(builder) {
@@ -51373,23 +51411,23 @@ class Table {
             </div>
             
             `;
-      dom$t.appendHtml(builderStuff, html);
+      dom$u.appendHtml(builderStuff, html);
       tableTool = builderStuff.querySelector('.is-table-tool');
       tableModal = builderStuff.querySelector('.is-modal.edittable');
       let btn = tableTool.querySelector('button');
-      dom$t.addEventListener(btn, 'click', () => {
+      dom$u.addEventListener(btn, 'click', () => {
         // old 10317
-        if (dom$t.hasClass(tableModal, 'active')) {
+        if (dom$u.hasClass(tableModal, 'active')) {
           // dom.removeClass(tableModal, 'active');
           util.hideModal(tableModal);
         } else {
-          dom$t.addClass(tableModal, 'active');
+          dom$u.addClass(tableModal, 'active');
           util.showModal(tableModal);
         }
       });
       let btnClose = tableModal.querySelector('.is-modal-close');
-      dom$t.addEventListener(btnClose, 'click', () => {
-        dom$t.removeClass(tableModal, 'active');
+      dom$u.addEventListener(btnClose, 'click', () => {
+        dom$u.removeClass(tableModal, 'active');
       });
       const btnBgColor = tableModal.querySelector('.input-table-bgcolor');
       btnBgColor.addEventListener('click', e => {
@@ -51704,7 +51742,7 @@ class Table {
   }
 
   click(e) {
-    if (dom$t.parentsHasElement(e.target, 'table')) {
+    if (dom$u.parentsHasElement(e.target, 'table')) {
       // only edit table.default
       let element = e.target;
       let td;
@@ -51726,7 +51764,7 @@ class Table {
 
       table = element;
 
-      if (dom$t.hasClass(table, 'default')) {
+      if (dom$u.hasClass(table, 'default')) {
         // only edit table.default
         this.builder.activeTd = td;
         this.builder.activeTable = table;
@@ -51754,7 +51792,7 @@ class Table {
       this.tableTool.style.display = '';
     }
 
-    if (dom$t.hasClass(this.tableModal, 'active') && this.builder.activeTable) {
+    if (dom$u.hasClass(this.tableModal, 'active') && this.builder.activeTable) {
       let activeTd = this.builder.activeTd;
       this.tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
       this.tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
@@ -51792,7 +51830,7 @@ function getCellIndex(oTable, oTR, oTD) {
   return nCellIndex;
 }
 
-const dom$s = new Dom();
+const dom$t = new Dom();
 
 class Video {
   constructor(builder) {
@@ -51818,7 +51856,7 @@ class Video {
                         <div class="video-larger1 input-upload" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                             <form class="form-upload-larger" target="frameTargetVideoUpload" method="post" action="${this.builder.opts.videoHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
                                 <input id="hidRefId5" name="hidRefId" type="hidden" value="" />
-                                <svg class="is-icon-flex" style="width:18px;height:18px;margin-top:3px;margin-left:3px;"><use xlink:href="#ion-ios-film-outline"></use></svg>
+                                <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
                                 <input title="${util.out('Select')}" id="fileVideo1" name="fileImage" type="file" accept="video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                             </form>
 
@@ -51849,13 +51887,13 @@ class Video {
                 </div>
             </div>
             `;
-      dom$s.appendHtml(builderStuff, html);
+      dom$t.appendHtml(builderStuff, html);
       videoTool = builderStuff.querySelector('.is-video-tool');
       const videoModal = builderStuff.querySelector('.is-modal.videolink');
       this.videoTool = videoTool;
       this.videoModal = videoModal;
       let btn = this.videoTool.querySelector('button');
-      dom$s.addEventListener(btn, 'click', () => {
+      dom$t.addEventListener(btn, 'click', () => {
         let video = this.builder.activeVideo;
         let source = video.querySelector('source');
         let url = '';
@@ -51901,7 +51939,7 @@ class Video {
       }
 
       let inpSelectVideo = videoModal.querySelector('.input-select');
-      if (inpSelectVideo) dom$s.addEventListener(inpSelectVideo, 'click', () => {
+      if (inpSelectVideo) dom$t.addEventListener(inpSelectVideo, 'click', () => {
         if (this.builder.opts.onVideoSelectClick) {
           this.builder.opts.onVideoSelectClick({
             targetInput: videoModal.querySelector('.input-url'),
@@ -51932,7 +51970,7 @@ class Video {
         this.builder.targetAssetType = 'video';
       });
       let fileLargerVideo = videoModal.querySelector('#fileVideo1');
-      dom$s.addEventListener(fileLargerVideo, 'change', e => {
+      dom$t.addEventListener(fileLargerVideo, 'change', e => {
         let element = fileLargerVideo;
 
         while (element.nodeName.toLowerCase() !== 'form') {
@@ -51940,7 +51978,7 @@ class Video {
         }
 
         let frmUpload = element;
-        dom$s.addClass(frmUpload, 'please-wait');
+        dom$t.addClass(frmUpload, 'please-wait');
         videoModal.querySelector('#hidRefId5').value = this.builder.opts.customval;
 
         if (this.builder.opts.onVideoUpload) {
@@ -51952,7 +51990,7 @@ class Video {
         fileLargerVideo.value = ''; // Clear Input
       });
       let btnOk = videoModal.querySelector('.input-ok');
-      dom$s.addEventListener(btnOk, 'click', () => {
+      dom$t.addEventListener(btnOk, 'click', () => {
         this.builder.uo.saveForUndo();
         let video = this.builder.activeVideo;
 
@@ -51994,7 +52032,7 @@ class Video {
         this.builder.hideModal(videoModal);
       });
       let btnCancel = videoModal.querySelector('.input-cancel');
-      dom$s.addEventListener(btnCancel, 'click', () => {
+      dom$t.addEventListener(btnCancel, 'click', () => {
         this.builder.hideModal(videoModal);
       });
     }
@@ -52025,6 +52063,188 @@ class Video {
 
 }
 
+const dom$s = new Dom();
+
+class Audio {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff;
+    let audioTool = builderStuff.querySelector('.is-audio-tool');
+
+    if (!audioTool) {
+      let html = `
+            <div class="is-tool is-audio-tool">
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            </div>
+            
+            <div class="is-modal audiolink" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-content">
+                    <label for="inpAudioLinkSource" style="display:block">${util.out('Source')}:</label>
+                    <div class="audio-url">
+                        <input id="inpAudioLinkSource" class="input-url" type="text"/>
+                        <button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                        <div class="audio-file-upload input-upload" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
+                            <form class="form-upload-larger" target="frameTargetAudioUpload" method="post" action="${this.builder.opts.audioHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
+                                <input id="hidRefAudio" name="hidRefId" type="hidden" value="" />
+                                <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                <input title="${util.out('Select')}" id="fileAudio1" name="fileImage" type="file" accept="audio/mp3" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                            </form>
+
+                            <iframe tabindex="0" id="frameTargetAudioUpload" name="frameTargetAudioUpload" tabIndex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                        </div>
+                    </div>
+                    
+                    <div style="text-align:right;margin-top:14px;">
+                        <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
+                        <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="is-modal audioselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div style="max-width:800px;height:80%;padding:0;">
+                    <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
+                </div>
+            </div>
+            `;
+      dom$s.appendHtml(builderStuff, html);
+      audioTool = builderStuff.querySelector('.is-audio-tool');
+      const audioModal = builderStuff.querySelector('.is-modal.audiolink');
+      this.audioTool = audioTool;
+      this.audioModal = audioModal;
+      let btn = this.audioTool.querySelector('button');
+      dom$s.addEventListener(btn, 'click', () => {
+        let audio = this.builder.activeAudio;
+        let source = audio.querySelector('source');
+        let url = '';
+        if (source) url = source.getAttribute('src');
+        audioModal.querySelector('.input-url').value = url;
+        this.util.showModal(audioModal, true, () => {
+          btn.removeAttribute('data-focus');
+          btn.focus();
+        });
+        btn.setAttribute('data-focus', true);
+      });
+
+      if (this.builder.opts.audioHandler === '' && !this.builder.opts.onAudioUpload) {
+        audioModal.querySelector('.audio-file-upload').style.display = 'none';
+      }
+
+      if (!this.builder.opts.onAudioSelectClick && this.builder.opts.audioSelect === '') {
+        audioModal.querySelector('.input-select').style.display = 'none';
+      }
+
+      let inpSelectAudio = audioModal.querySelector('.input-select');
+      if (inpSelectAudio) dom$s.addEventListener(inpSelectAudio, 'click', () => {
+        if (this.builder.opts.onAudioSelectClick) {
+          this.builder.opts.onAudioSelectClick({
+            targetInput: audioModal.querySelector('.input-url'),
+            theTrigger: inpSelectAudio
+          });
+        } else {
+          let modalAudioSelect = builderStuff.querySelector('.is-modal.audioselect');
+          let iframe = modalAudioSelect.querySelector('iframe');
+
+          if (this.builder.opts.assetRefresh) {
+            iframe.src = this.builder.opts.audioSelect;
+          }
+
+          if (iframe.src === 'about:blank') {
+            iframe.src = this.builder.opts.audioSelect;
+          }
+
+          util.showModal(modalAudioSelect, true, () => {
+            inpSelectAudio.removeAttribute('data-focus');
+            inpSelectAudio.focus();
+          });
+          inpSelectAudio.setAttribute('data-focus', true);
+        }
+
+        this.builder.targetInput = audioModal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
+
+        this.builder.targetCallback = null;
+        this.builder.targetAssetType = 'audio';
+      });
+      let fileLargerAudio = audioModal.querySelector('#fileAudio1');
+      dom$s.addEventListener(fileLargerAudio, 'change', e => {
+        let element = fileLargerAudio;
+
+        while (element.nodeName.toLowerCase() !== 'form') {
+          element = element.parentNode;
+        }
+
+        let frmUpload = element;
+        dom$s.addClass(frmUpload, 'please-wait');
+        audioModal.querySelector('#hidRefAudio').value = this.builder.opts.customval;
+
+        if (this.builder.opts.onAudioUpload) {
+          this.builder.opts.onAudioUpload(e);
+        } else {
+          frmUpload.submit();
+        }
+
+        fileLargerAudio.value = ''; // Clear Input
+      });
+      let btnOk = audioModal.querySelector('.input-ok');
+      dom$s.addEventListener(btnOk, 'click', () => {
+        this.builder.uo.saveForUndo();
+        let audio = this.builder.activeAudio;
+
+        if (audioModal.querySelector('.input-url').value !== '') {
+          let url = audioModal.querySelector('.input-url').value; //Render
+
+          let source = audio.querySelector('source');
+
+          if (url !== source.getAttribute('src')) {
+            if (source) source.setAttribute('src', url);
+            setTimeout(function () {
+              // refresh
+              audio.pause();
+              audio.load(); // audio.play();
+            }, 100);
+          } //Trigger Change event
+
+
+          this.builder.opts.onChange();
+        }
+
+        this.builder.hideModal(audioModal);
+      });
+      let btnCancel = audioModal.querySelector('.input-cancel');
+      dom$s.addEventListener(btnCancel, 'click', () => {
+        this.builder.hideModal(audioModal);
+      });
+    }
+  }
+
+  click(e) {
+    if (dom$s.hasClass(e.target, 'ovl') && e.target.parentNode.querySelector('audio')) {
+      e.target.style.display = 'none';
+      let elm = e.target.parentNode.querySelector('audio');
+      this.builder.activeAudio = elm;
+      this.audioTool.style.display = 'flex';
+      let _toolwidth = this.audioTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+
+      let w = elm.offsetWidth * this.builder.opts.zoom;
+      let top = elm.getBoundingClientRect().top + window.pageYOffset;
+      let left = elm.getBoundingClientRect().left;
+      left = left + (w - _toolwidth); //Adjust left in case an element is outside the screen
+
+      const _screenwidth = window.innerWidth;
+      if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
+      this.audioTool.style.top = top + 'px';
+      this.audioTool.style.left = left + 'px';
+    } else {
+      this.builder.activeAudio = null;
+      this.audioTool.style.display = '';
+    }
+  }
+
+}
+
 // Currently not used
 const dom$r = new Dom();
 
@@ -52107,6 +52327,7 @@ class Element$1 {
     this.iframe = new Iframe(builder);
     this.table = new Table(builder);
     this.video = new Video(builder);
+    this.audio = new Audio(builder);
     this.svg = new Svg(builder);
   }
 
@@ -52185,6 +52406,28 @@ class Element$1 {
         dom$q.appendHtml(div, '<div class="ovl" style="position:absolute;background:#fff;opacity:0.01;cursor:pointer;top:0;left:0px;width:100%;height:100%;z-index:1"></div>');
         overlay = div.querySelector('.ovl');
         dom$q.addEventListener(overlay, 'click', () => {
+          // show iframe overlay to make it clickable => for others
+          let ovls = document.querySelectorAll('.ovl');
+          Array.prototype.forEach.call(ovls, ovl => {
+            ovl.style.display = 'block';
+          });
+          overlay.style.display = 'none';
+        });
+      }
+    });
+    let audios = col.querySelectorAll('audio');
+    Array.prototype.forEach.call(audios, audio => {
+      let overlay = audio.parentNode.querySelector('.ovl');
+
+      if (!overlay) {
+        dom$q.appendHtml(audio.parentNode, '<div class="ovl" style="position:absolute;background:#fff;opacity:0.01;cursor:pointer;top:0;left:0px;width:100%;height:100%;z-index:1"></div>');
+        overlay = audio.parentNode.querySelector('.ovl');
+        dom$q.addEventListener(overlay, 'click', () => {
+          // show iframe overlay to make it clickable => for others
+          let ovls = document.querySelectorAll('.ovl');
+          Array.prototype.forEach.call(ovls, ovl => {
+            ovl.style.display = '';
+          });
           overlay.style.display = 'none';
         });
       }
@@ -52259,7 +52502,9 @@ class Element$1 {
 
       this.iframe.click(e); //Video
 
-      this.video.click(e); // spacer
+      this.video.click(e); //Audio
+
+      this.audio.click(e); // spacer
 
       this.spacer.click(e); // svg
 
@@ -68549,6 +68794,7 @@ class ContentBuilder {
       //      snippetPathReplace: ['assets/','https://innovastudio.com/builderdemo/assets/'],
       // snippetSampleImage: 'uploads/office2.png', // if enabled, will be used to insert image block
       // snippetSampleVideo: 'uploads/person1.mp4', // if enabled, will be used to insert video block
+      // snippetSampleAudio: 'uploads/intro.mp4', // if enabled, will be used to insert audio block
       snippetCategories: [[120, 'Basic'], [118, 'Article'], [101, 'Headline'], [119, 'Buttons'], [102, 'Photos'], [103, 'Profile'], [116, 'Contact'], [104, 'Products'], [105, 'Features'], [106, 'Process'], [107, 'Pricing'], [108, 'Skills'], [109, 'Achievements'], [110, 'Quotes'], [111, 'Partners'], [112, 'As Featured On'], [113, 'Page Not Found'], [114, 'Coming Soon'], [115, 'Help, FAQ']],
       defaultSnippetCategory: 120,
       snippetHandle: true,
@@ -68564,6 +68810,8 @@ class ContentBuilder {
       // onMediaUpload: function(){},
       videoHandler: '',
       // onVideoUpload: function(){},
+      audioHandler: '',
+      // onAudioUpload: function(){},
       colors: ['#ff8f00', '#ef6c00', '#d84315', '#c62828', '#58362f', '#37474f', '#353535', '#f9a825', '#9e9d24', '#558b2f', '#ad1457', '#6a1b9a', '#4527a0', '#616161', '#00b8c9', '#009666', '#2e7d32', '#0277bd', '#1565c0', '#283593', '#9e9e9e'],
       builderMode: '',
       rowTool: 'right',
@@ -68586,6 +68834,7 @@ class ContentBuilder {
       // onImageSelectClick: function () { }, 
       // onFileSelectClick: function () { },
       // onVideoSelectClick: function () { },
+      // onAudioSelectClick: function () { },
       // onPluginsLoaded: function () { },
       // onImageBrowseClick: function () { },
       // onImageSettingClick: function () { },
@@ -68613,6 +68862,7 @@ class ContentBuilder {
       imageSelect: '',
       fileSelect: '',
       videoSelect: '',
+      audioSelect: '',
       assetRefresh: false,
       // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],
@@ -70056,6 +70306,12 @@ class ContentBuilder {
       } else {
         alert(this.util.out('Please select an mp4 file.'));
       }
+    } else if (this.targetAssetType === 'audio') {
+      if (extension === 'mp3') {
+        ok = true;
+      } else {
+        alert(this.util.out('Please select an mp3 file.'));
+      }
     }
 
     if (ok) {
@@ -70072,6 +70328,8 @@ class ContentBuilder {
       if (modal) this.hideModal(modal);
       modal = document.querySelector('.is-modal.fileselect.active');
       if (modal) this.hideModal(modal);
+      modal = document.querySelector('.is-modal.audioselect.active');
+      if (modal) this.hideModal(modal);
     }
   }