@innovastudio/contentbuilder 1.3.30 → 1.3.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.30",
+  "version": "1.3.32",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -3091,6 +3091,20 @@ button:focus-visible {
   z-index: 10003;
   outline: none;
 }
+#_cbhtml .is-side button,
+.is-ui .is-side button {
+  color: #000;
+  background: #fff;
+  box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);
+}
+#_cbhtml .is-side button:hover,
+.is-ui .is-side button:hover {
+  background: #fff;
+}
+#_cbhtml .is-side button.on,
+.is-ui .is-side button.on {
+  background: #f2f2f2;
+}
 #_cbhtml .is-side.active,
 .is-ui .is-side.active {
   right: 0;
@@ -4442,6 +4456,7 @@ button:focus-visible {
 
 .row-active .is-col-tool {
   display: flex;
+  width: auto;
 }
 
 .is-builder[rowoutline] .row-active .is-col-tool {
@@ -4525,7 +4540,8 @@ button:focus-visible {
 .is-tool.is-col-tool svg {
   width: 23px;
   height: 23px;
-  fill: #fff;
+  fill: #fff !important;
+  /* $ui-columntool-colored-button-svg-fill */
 }
 .is-tool.is-col-tool .cell-more svg {
   width: 14px;
@@ -4597,7 +4613,8 @@ button:focus-visible {
 .is-builder[gray] .is-tool.is-col-tool svg {
   width: 18px;
   height: 18px;
-  fill: #000;
+  fill: #000 !important;
+  /* $ui-columntool-grayed-button-svg-fill */
 }
 .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
   width: 12px;
@@ -4608,8 +4625,8 @@ button:focus-visible {
   display: none;
   position: absolute;
   bottom: -1px;
-  left: -20px;
-  width: calc(100% + 40px);
+  left: 0px;
+  width: 100%;
   height: 1px;
   border: none;
   border-bottom: 1px solid #ffb784;

package/public/contentbuilder/contentbuilder.esm.js

@@ -4543,7 +4543,7 @@ class Util {
 
     const cellCount = row.childElementCount - num;
     const rowClass = this.builder.opts.row;
-    const colClass = this.builder.opts.cols;
+    let colClass = this.builder.opts.cols;
     const colEqual = this.builder.opts.colequal;
 
     if (colEqual.length > 0) {
@@ -4584,7 +4584,21 @@ class Util {
       let n = 0;
       const cols = dom.elementChildren(row);
       cols.forEach(col => {
-        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
+        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return; // Bootstrap stuff
+
+        col.classList.forEach(item => {
+          if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+            colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+          } else if (item.indexOf('col-xs-') !== -1) {
+            colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+          } else if (item.indexOf('col-lg-') !== -1) {
+            colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+          } else if (item.indexOf('col-xl-') !== -1) {
+            colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+          } else if (item.indexOf('col-xxl-') !== -1) {
+            colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+          }
+        });
         n++;
 
         for (var i = 0; i <= colClass.length - 1; i++) {
@@ -4594,7 +4608,10 @@ class Util {
         if (cellCount === 1) dom.addClass(col, colClass[11]);
         if (cellCount === 2) dom.addClass(col, colClass[5]);
         if (cellCount === 3) dom.addClass(col, colClass[3]);
-        if (cellCount === 4) dom.addClass(col, colClass[2]);
+
+        if (cellCount === 4) {
+          dom.addClass(col, colClass[2]);
+        }
 
         if (cellCount === 5) {
           // 2, 2, 2, 2, 4
@@ -15372,7 +15389,11 @@ class HtmlUtil {
     if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
-    return beautify(html);
+    html = beautify(html); // https://stackoverflow.com/questions/22962220/remove-multiple-line-breaks-n-in-javascript
+    // html = html.replace(/(\r\n|\r|\n){2}/g, '$1').replace(/(\r\n|\r|\n){3,}/g, '$1\n')
+
+    html = html.replace(/(\r\n|\r|\n){3,}/g, '$1\n');
+    return html;
   }
 
 }
@@ -17720,7 +17741,7 @@ class Grid {
     }
 
     const rowClass = builder.opts.row;
-    const colClass = builder.opts.cols;
+    let colClass = builder.opts.cols;
     const colSizes = builder.opts.colsizes;
 
     if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
@@ -17773,6 +17794,21 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
+      // Bootstrap stuff
+      cell.classList.forEach(item => {
+        if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+          colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+        } else if (item.indexOf('col-xs-') !== -1) {
+          colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+        } else if (item.indexOf('col-lg-') !== -1) {
+          colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+        } else if (item.indexOf('col-xl-') !== -1) {
+          colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+        } else if (item.indexOf('col-xxl-') !== -1) {
+          colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+        }
+      });
+
       if (!dom.hasClass(cell, colClass[11])) {
         //if not column full
         if (dom.hasClass(cell, colClass[11])) {
@@ -17879,7 +17915,7 @@ class Grid {
     }
 
     const rowClass = builder.opts.row;
-    const colClass = builder.opts.cols;
+    let colClass = builder.opts.cols;
     const colSizes = builder.opts.colsizes;
 
     if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
@@ -17934,6 +17970,21 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
+      // Bootstrap stuff
+      cell.classList.forEach(item => {
+        if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+          colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+        } else if (item.indexOf('col-xs-') !== -1) {
+          colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+        } else if (item.indexOf('col-lg-') !== -1) {
+          colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+        } else if (item.indexOf('col-xl-') !== -1) {
+          colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+        } else if (item.indexOf('col-xxl-') !== -1) {
+          colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+        }
+      });
+
       if (!dom.hasClass(cell, colClass[11])) {
         //if not column full
         if (dom.hasClass(cell, colClass[0])) {
@@ -73532,7 +73583,7 @@ class ContentStuff {
         .is-tool.is-col-tool svg {
             width: 23px;
             height: 23px;
-            fill: #fff;
+            fill: #fff !important;
         }
         .is-tool.is-col-tool .cell-more svg {
             width: 14px;
@@ -73561,7 +73612,7 @@ class ContentStuff {
         .is-builder[gray] .is-tool.is-col-tool svg {
             width: 18px;
             height: 18px;
-            fill: #000;
+            fill: #000 !important;
         }
         .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
             width: 12px;
@@ -75138,7 +75189,7 @@ class ContentBuilder {
         .is-tool.is-col-tool svg {
             width: 23px;
             height: 23px;
-            fill: #fff;
+            fill: #fff  !important;
         }
         .is-tool.is-col-tool .cell-more svg {
             width: 14px;
@@ -75169,7 +75220,7 @@ class ContentBuilder {
         .is-builder[gray] .is-tool.is-col-tool svg {
             width: 18px;
             height: 18px;
-            fill: #000;
+            fill: #000 !important;
         }
         .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
             width: 12px;