@innovastudio/contentbox 1.6.167 → 1.6.168

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.167",
+  "version": "1.6.168",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.165",
+    "@innovastudio/contentbuilder": "^1.5.166",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.esm.js

@@ -13812,41 +13812,43 @@ class PanelBox {
                 </div>
             </div>
 
-            <div class="flex">
-                <div class="mr-8">
-                    <div class="label mt-3">${out('Background Color')}:</div>
-                    <div class="group">
-                        <button title="${out('Color')}" class="btn-color is-btn-color"></button>
+            <div class="box-bg-settings">
+                <div class="flex">
+                    <div class="mr-8">
+                        <div class="label mt-3">${out('Background Color')}:</div>
+                        <div class="group">
+                            <button title="${out('Color')}" class="btn-color is-btn-color"></button>
+                        </div>
                     </div>
-                </div>
-                <div>
-                    <div class="label mt-3">${out('Gradient')}:</div>
-                    <div class="group">
-                        <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
+                    <div>
+                        <div class="label mt-3">${out('Gradient')}:</div>
+                        <div class="group">
+                            <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="label mt-3">${out('Background Image')}:</div>
+                <div class="label mt-3">${out('Background Image')}:</div>
 
-            <div class="asset-preview"></div>
+                <div class="asset-preview"></div>
 
-            <div class="imagesource mt-1 mb-1">
-                <input type="text" class="inp-src">
-            </div>
+                <div class="imagesource mt-1 mb-1">
+                    <input type="text" class="inp-src">
+                </div>
 
-            <div class="group mt-2">
-                <input class="inp-file" type="file" accept="image/*" style="display:none"/>
-                <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
-                <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
-                <button title="${out('Adjust')}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>
-                <button title="${out('Clear')}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
-            </div>
+                <div class="group mt-2">
+                    <input class="inp-file" type="file" accept="image/*" style="display:none"/>
+                    <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
+                    <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
+                    <button title="${out('Adjust')}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>
+                    <button title="${out('Clear')}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
 
-            <label class="label checkbox grayscale mt-2" style="margin-bottom:16px">
-                <input type="checkbox" class="chk-grayscale" />
-                <span>${out('Grayscale')}</span>
-            </label>
+                <label class="label checkbox grayscale mt-2" style="margin-bottom:16px">
+                    <input type="checkbox" class="chk-grayscale" />
+                    <span>${out('Grayscale')}</span>
+                </label>
+            </div>
 
             <div class="defaulttextcolor">
                 <div class="label mt-3">${out('Text Color')}:</div>
@@ -13886,7 +13888,7 @@ class PanelBox {
 
         </div>
 
-        <div class="submain box-plugin-settings">
+        <div class="submain box-plugin-settings panel-plugin">
 
             <hr style="width: 100%;border-bottom: #ededed 2px solid;margin-top: 20px;">
 
@@ -15275,7 +15277,14 @@ class PanelBox {
 
     const divPluginSettings = panel.querySelector('.box-plugin-settings');
     this.divPluginSettings = divPluginSettings;
-    const runtime = this.builder.win.builderRuntime;
+    const runtime = this.builder.win.builderRuntime; // Reset (can be changed by renderPluginSettings)
+
+    const divBgSettings = this.panel.querySelector('.box-bg-settings');
+    divBgSettings.style.display = '';
+    this.divBgSettings = divBgSettings;
+    const divPanelTitle = this.panel.parentNode.querySelector('.part-title');
+    divPanelTitle.style.display = '';
+    this.divPanelTitle = divPanelTitle;
 
     if (overlayContent && runtime) {
       const currentElement = overlayContent.querySelector('[data-cb-type]');
@@ -15286,6 +15295,8 @@ class PanelBox {
       } else {
         divPluginSettings.style.display = 'none';
       }
+    } else {
+      divPluginSettings.style.display = 'none';
     }
   }
 
@@ -15300,6 +15311,21 @@ class PanelBox {
     const plugin = runtime.getPlugin(pluginName);
     if (!plugin) return;
     let displayName = out(plugin.displayName || plugin.name);
+
+    if (plugin.contentbox) {
+      if (!plugin.contentbox.bg) {
+        this.divBgSettings.style.display = 'none';
+      }
+
+      if (!plugin.contentbox.text) {
+        this.divDefaultTextColor.style.display = 'none';
+      }
+
+      if (!plugin.contentbox.title) {
+        this.divPanelTitle.style.display = 'none';
+      }
+    }
+
     const divTitle = document.createElement('h3');
     divTitle.style.cssText = 'font-family: sans-serif;font-weight: 300;font-size: 20px;margin: 0 0 12px;';
     divTitle.innerText = displayName;
@@ -26355,7 +26381,8 @@ class ControlPanel {
     this.panelRow = controlPanel.querySelector('.panel-row');
     this.panelContainer = controlPanel.querySelector('.panel-container');
     this.panelBlock = controlPanel.querySelector('.panel-block');
-    this.panelBox = controlPanel.querySelector('.panel-box');
+    this.panelBox = controlPanel.querySelector('.panel-box'); // also has .panel-plugin inside
+
     this.panelSection = controlPanel.querySelector('.panel-section');
     this.breadcrumb = controlPanel.querySelector('.part-breadcrumb');
     this.title = controlPanel.querySelector('.part-title');
@@ -32508,6 +32535,7 @@ class Util$1 {
   }
 
   hideModal(modal) {
+    if (!modal) return;
     this.builder.doc.activeElement.blur();
     document.activeElement.blur();
     // this.builder.doc.body.focus();