@innovastudio/contentbox 1.2.21 → 1.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.21",
+  "version": "1.2.24",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.20",
+    "@innovastudio/contentbuilder": "^1.1.21",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -9197,8 +9197,10 @@ class EditBox {
       let bgcolor = btnBoxBgColor.style.backgroundColor;
       let overlay = activeBox.querySelector('.is-overlay');
       colorpicker.open(s => {
-        // activeBox.style.backgroundColor = s;
-        // activeBox.style.backgroundImage = '';//remove gradient
+        activeBox.style.backgroundColor = ''; // clean old
+
+        activeBox.style.backgroundImage = ''; /// clean old
+
         overlay.style.backgroundColor = s;
         overlay.style.backgroundImage = ''; //remove gradient
 
@@ -9213,7 +9215,11 @@ class EditBox {
 
       let overlay = activeBox.querySelector('.is-overlay');
       let gradientPicker = this.builder.editor.gradientpicker();
-      gradientPicker.open(overlay);
+      gradientPicker.open(overlay, () => {
+        activeBox.style.backgroundColor = ''; // clean old
+
+        activeBox.style.backgroundImage = ''; // clean old
+      });
     }); // Box Overlay Color
 
     const btnBoxOverlayColor = modalEditBox.querySelector('.input-box-overlaycolor');
@@ -9618,14 +9624,15 @@ class EditBox {
 
     dom$K.addClass(activeBox, 'box-active');
     this.builder.showModal(modalEditBox);
-    const inpBoxSize = modalEditBox.querySelector('.inp-box-size');
 
     if (container) {
-      let maxWidth = parseInt(container.style.maxWidth);
-      if (!isNaN(maxWidth)) inpBoxSize.value = parseInt(container.style.maxWidth);
       modalEditBox.querySelector('.val-box-size').innerHTML = '';
-      maxWidth = parseInt(window.getComputedStyle(container, null).getPropertyValue('max-width'));
-      if (!isNaN(maxWidth)) modalEditBox.querySelector('.val-box-size').innerHTML = maxWidth;
+      container.classList.forEach(item => {
+        if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+          let val = item.replace('is-content-', '');
+          modalEditBox.querySelector('.val-box-size').innerHTML = val;
+        }
+      });
     } // Animate Box 
 
 
@@ -26321,7 +26328,7 @@ const renderQuickAdd = builder => {
     if (elm) dom$F.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div>
-                <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-75 uppercase py-2 size-14 px-8 font-semibold text-gray-600">Read More</a>
+                <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 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>
             </div>`;
 
       if (builder.opts.emailMode) {
@@ -26334,8 +26341,8 @@ const renderQuickAdd = builder => {
     if (elm) dom$F.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div>
-                <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-75 uppercase py-2 size-14 px-8 font-semibold text-gray-600">Read More</a>
-                <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase py-2 size-14 px-8 border-current hover:border-transparent hover:text-white font-semibold text-indigo-500 hover:bg-indigo-500">Get Started</a>
+                <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 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>
+                <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-50 uppercase py-2 size-14 px-6 border-current hover:border-transparent hover:text-white font-semibold text-indigo-500 hover:bg-indigo-500 leading-relaxed">Get Started</a>
             </div>`;
 
       if (builder.opts.emailMode) {
@@ -58756,52 +58763,52 @@ class ButtonEditor {
   renderTemplates() {
     const templates = [{
       text: 'Order Now',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
     }, {
       text: 'Explore',
-      className: 'transition-all inline-block cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent'
+      className: 'transition-all inline-block cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
     }, {
       text: 'View Demo',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
     }, {
       text: 'Get Started',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
     }, {
       text: 'Create',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
     }, {
       text: 'Hello!',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
     }, {
       text: 'Build',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
     }, {
       text: 'Contact',
-      className: 'transition-all inline-block border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150'
+      className: 'transition-all inline-block border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
     }, {
       text: 'Read More',
-      className: 'transition-all inline-block cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline'
+      className: 'transition-all inline-block cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
     }, {
       text: 'Send a Message',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
     }, {
       text: 'Our Works',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
     }, {
       text: 'Read More',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
     }, {
       text: 'Get a Quote',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
     }, {
       text: 'Try Demo',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
     }, {
       text: 'Buy Now',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
     }, {
       text: 'Play',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded'
+      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
     }];
     let html = '';
 
@@ -58897,6 +58904,7 @@ class ButtonEditor {
     dom$z.addClass(link, 'cursor-pointer');
     dom$z.addClass(link, 'border-2');
     dom$z.addClass(link, 'border-solid');
+    dom$z.addClass(link, 'leading-relaxed');
     link.removeAttribute('style');
     link.removeAttribute('onmouseover');
     link.removeAttribute('onmouseout');
@@ -59238,7 +59246,7 @@ class Hyperlink {
       let isButton;
       let display = dom$y.getStyle(link, 'display');
 
-      if (display === 'inline-block' || display === 'block') {
+      if (display === 'inline-block' || display === 'block' || display === 'flex') {
         isButton = true;
       }
 
@@ -83793,10 +83801,12 @@ class ContentBox {
       if (sidebar) sidebar.style.opacity = 1;
       this.builderStuff.style.visibility = 'visible'; // Remove the page-overlay
 
-      pageOverlay = builderStuff.querySelectorAll('.page-overlay');
-      pageOverlay.forEach(elm => {
-        elm.parentNode.removeChild(elm);
-      });
+      setTimeout(() => {
+        pageOverlay = builderStuff.querySelectorAll('.page-overlay');
+        pageOverlay.forEach(elm => {
+          elm.parentNode.removeChild(elm);
+        });
+      }, 300);
     }); // Add document Click event
 
     document.addEventListener('click', this.doDocumentClick = e => {