@innovastudio/contentbuilder 1.5.66 → 1.5.68

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.66",
+  "version": "1.5.68",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -51996,6 +51996,11 @@ class RowTool {
           row.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnRowGradient = rowSettings.querySelector('.input-row-gradient');
+            btnRowGradient.style.backgroundImage = '';
+            row.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, rowSettings.querySelector('.input-row-bgcolor').style.backgroundColor, () => {
           btnRowBgColor.removeAttribute('data-focus');
@@ -52111,9 +52116,13 @@ class RowTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
+          if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = this.rowSettings.querySelector('.input-row-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            row.style.backgroundColor = '';
+          }
 
-          //Trigger Change event
-          this.builder.opts.onChange();
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnRowGradient.removeAttribute('data-focus');
           btnRowGradient.focus();
@@ -53713,6 +53722,11 @@ class ColumnTool {
           cell.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnCellGradient = cellSettings.querySelector('.input-cell-gradient');
+            btnCellGradient.style.backgroundImage = '';
+            cell.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, cellSettings.querySelector('.input-cell-bgcolor').style.backgroundColor, () => {
           btnCellBgColor.removeAttribute('data-focus');
@@ -53846,7 +53860,13 @@ class ColumnTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
-          this.builder.opts.onChange();
+          if (cell.style.backgroundImage && cell.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = cellSettings.querySelector('.input-cell-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            cell.style.backgroundColor = '';
+          }
+
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnCellGradient.removeAttribute('data-focus');
           btnCellGradient.focus();
@@ -55519,17 +55539,20 @@ class ElementGeneralStyles {
 
     // Background color
     let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
-    btnElmBgColor.addEventListener('click', e => {
+    btnElmBgColor.addEventListener('click', () => {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
-      let elm = e.target;
       this.builder.colorPicker.open(color => {
-        this.builder.inspectedElement.style.backgroundColor = color;
-        elm.style.backgroundColor = color; // preview
+        let elm = this.builder.inspectedElement;
+        elm.style.backgroundColor = color;
+        btnElmBgColor.style.backgroundColor = color; // preview
 
+        if (color !== '') {
+          let btnElmGradient = panelStuff.querySelector('.input-elm-gradient');
+          btnElmGradient.style.backgroundImage = '';
+          elm.style.backgroundImage = '';
+        }
         elementStyleEditor.refresh();
-
-        //Trigger Change event
         this.builder.opts.onChange();
       }, panelStuff.querySelector('.input-elm-bgcolor').style.backgroundColor, () => {
         btnElmBgColor.removeAttribute('data-focus');
@@ -55546,10 +55569,15 @@ class ElementGeneralStyles {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
       gradientPicker.open(this.builder.inspectedElement, () => {
+        let elm = this.builder.inspectedElement;
+        if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          const btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
+          btnElmBgColor.style.backgroundColor = '';
+          elm.style.backgroundColor = '';
+        }
         elementStyleEditor.refresh();
 
-        //Trigger Change event
-        this.builder.opts.onChange();
+        // this.builder.opts.onChange();
       }, isChanged => {
         if (isChanged) {
           elementStyleEditor.refresh();
@@ -89557,10 +89585,15 @@ class BlockModal {
 
                 <div class="modal-page-content" style="display:none;padding-bottom:28px;">
 
-                    <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                    <div style="display:flex;">
-                        <button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
-                        <button title="${util.out('Gradient')}" class="btn-page-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                    <div style="display:flex;gap:40px">
+                        <div>
+                            <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                            <button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
+                        </div>
+                        <div>
+                            <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                            <button title="${util.out('Gradient')}" class="btn-page-gradient is-btn-color"></button>
+                        </div>
                     </div>
 
                     <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
@@ -89627,10 +89660,15 @@ class BlockModal {
 
                     <div id="divBlockGeneral" class="is-tab-content active" data-group="blocksettings" style="display:flex" tabindex="-1" style="padding:25px 25px 28px">
 
-                        <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                        <div style="display:flex;">
-                            <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
-                            <button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                        <div style="display:flex;gap:40px">
+                            <div>
+                                <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                                <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
+                            </div>
+                            <div>
+                                <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                                <button title="${util.out('Gradient')}" class="btn-block-gradient is-btn-color"></button>
+                            </div>
                         </div>
 
                         <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>