@innovastudio/contentbuilder 1.5.198 → 1.5.200

package/public/contentbuilder/contentbuilder.css

@@ -1,3 +1,8 @@
+:root {
+  --focus-outline-color: #3e93f7;
+  --rangeslider-thumb-color: #0e75de;
+}
+
 body {
   overflow-x: hidden !important;
 }
@@ -28,7 +33,7 @@ button:focus {
 
 a:focus-visible,
 button:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 2px;
 }
 
@@ -37,7 +42,7 @@ button:focus-visible {
 }
 
 .focus-outline {
-  outline: #3e93f7 2px solid !important;
+  outline: var(--focus-outline-color) 2px solid !important;
   outline-offset: 2px !important;
 }
 
@@ -464,7 +469,7 @@ button:focus-visible {
 }
 #_cbhtml .style-helper.outline-color,
 .is-ui .style-helper.outline-color {
-  background: #3e93f7;
+  background: var(--focus-outline-color);
 }
 #_cbhtml .style-helper-button-classic,
 .is-ui .style-helper-button-classic {
@@ -1292,7 +1297,7 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-color-picker input[type=text]:focus,
 .is-ui .is-rte-pop.rte-color-picker input[type=text]:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
 }
 #_cbhtml .is-rte-pop.rte-color-picker .color-default button,
@@ -2257,7 +2262,7 @@ button:focus-visible {
 }
 #_cbhtml .is-modal a:focus,
 .is-ui .is-modal a:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 0;
 }
 #_cbhtml .is-modal.active,
@@ -2330,7 +2335,7 @@ button:focus-visible {
 }
 #_cbhtml .is-modal .form-upload-larger:focus-within,
 .is-ui .is-modal .form-upload-larger:focus-within {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 0;
   border-radius: 6px;
 }
@@ -3288,7 +3293,7 @@ button:focus-visible {
 }
 #_cbhtml .is-modal.insertimage .is-drop-area:focus-within,
 .is-ui .is-modal.insertimage .is-drop-area:focus-within {
-  border-color: #3e93f7;
+  border-color: var(--focus-outline-color);
 }
 #_cbhtml .is-modal.insertimage .is-drop-area.image-dropping,
 .is-ui .is-modal.insertimage .is-drop-area.image-dropping {
@@ -3924,7 +3929,7 @@ button:focus-visible {
 }
 #_cbhtml textarea:not(.monaco-mouse-cursor-text):focus,
 .is-ui textarea:not(.monaco-mouse-cursor-text):focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 0;
   box-shadow: none;
 }
@@ -3959,7 +3964,7 @@ button:focus-visible {
 }
 #_cbhtml select:focus,
 .is-ui select:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -3987,7 +3992,7 @@ button:focus-visible {
 #_cbhtml input[type=number]:focus,
 .is-ui input[type=text]:focus,
 .is-ui input[type=number]:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -4005,7 +4010,7 @@ button:focus-visible {
 }
 #_cbhtml input[type=radio]:focus,
 .is-ui input[type=radio]:focus {
-  outline: #3e93f7 1px solid;
+  outline: var(--focus-outline-color) 1px solid;
 }
 #_cbhtml label,
 .is-ui label {
@@ -4045,7 +4050,7 @@ button:focus-visible {
 }
 #_cbhtml .is-rangeslider:focus,
 .is-ui .is-rangeslider:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 2px;
 }
 #_cbhtml .is-rangeslider::-webkit-slider-thumb,
@@ -4055,7 +4060,7 @@ button:focus-visible {
   width: 25px !important;
   height: 24px !important;
   border-radius: 3px !important;
-  background: #0e75de;
+  background: var(--rangeslider-thumb-color);
   cursor: pointer;
   margin: 0 !important;
 }
@@ -4064,7 +4069,7 @@ button:focus-visible {
   width: 25px !important;
   height: 24px !important;
   border-radius: 3px !important;
-  background: #0e75de;
+  background: var(--rangeslider-thumb-color);
   cursor: pointer;
   margin: 0 !important;
 }
@@ -5069,7 +5074,7 @@ button:focus-visible {
 }
 #_cbhtml .pickcolor input[type=text]:focus,
 .is-ui .pickcolor input[type=text]:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
 }
 #_cbhtml .pickcolor .color-default button,
@@ -6596,7 +6601,7 @@ div[data-html] {
   margin-top: 3px;
 }
 .custom-select .select-styled:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -1px;
 }
 .custom-select .select-styled > span:first-child {
@@ -8532,7 +8537,7 @@ iframe.wait-autoplay {
   align-items: center;
 }
 #_cbhtml .is-modal.pluginsettings div[contenteditable=true]:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
 }
 
 .dark #_cbhtml .is-accordion > div {

package/public/contentbuilder/contentbuilder.esm.js

@@ -4665,7 +4665,7 @@ class Util {
       callback(true);
     });
   }
-  confirm(message, callback, yesno, yestext, forceOpen) {
+  confirm(message, callback, yesno, yestext, forceOpen, notext = 'Cancel') {
     if (!this.builder.deleteConfirm && !forceOpen) {
       callback(true);
       return;
@@ -4682,8 +4682,8 @@ class Util {
       html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content" style="padding-bottom:20px;">
                     <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
-                    <button title="${this.out('Cancel')}" class="input-cancel classic-secondary">${this.out('Cancel')}</button>
-                    <button title="${yestext}" class="input-ok classic-primary">${yestext}</button>
+                    <button title="${this.out(notext)}" class="input-cancel classic-secondary">${this.out(notext)}</button>
+                    <button title="${this.out(yestext)}" class="input-ok classic-primary">${this.out(yestext)}</button>
                 </div>
             </div>`;
     }
@@ -18033,6 +18033,8 @@ const renderSnippetPanel = (builder, snippetOpen) => {
     }
   }
   let snippetPanel = document.querySelector(builder.opts.snippetList);
+  if (!snippetPanel) return;
+  snippetPanel.classList.add('is-ui');
   snippetPanel.innerHTML = ''; //clear
   dom.appendHtml(snippetPanel, html_snippets);
   const snippetList = [];
@@ -91785,7 +91787,7 @@ Classes: ease-linear, ease-in, ease-out, ease-in-out
 
 **Hover Transforms**
 
-Classes: hover:scale-105, hover:-translate-y-1, hover:-translate-y-2
+Classes: hover:scale-105, hover:-translate-y-1, hover:-translate-y-2, .hover:translate-x-1, .hover:translate-x-2
 
 **Hover Shadow**
 
@@ -91830,6 +91832,31 @@ Classes: spin, ping, pulse, bounce
 
 **Key classes:** transition-transform, duration-300, hover:translate-y--2
 
+**Example: Hover shift on List Items**
+
+<div class="row" style="gap: 30px;">
+    <div class="column">
+        <!-- list item -->
+        <div class="flex items-start pb-10 mb-10 transition-transform duration-300 ease-out hover:translate-x-2" style="border-bottom: 1px solid #e0e0e0;">
+            <div class="pr-6 pt-5">
+                <i class="bi bi-globe size-24 text-black"></i>
+            </div>
+            <div>
+                <h3 class="size-24 font-normal mb-3">Global Perspective</h3>
+                <p class="size-16 leading-17 text-gray-600">
+                    Our team spans three continents, bringing diverse cultural insights to every project. We design experiences that transcend borders while respecting local nuances, ensuring your brand resonates globally.
+                </p>
+            </div>
+        </div>
+        <!-- list item -->
+        <div class="flex items-start pb-10 mb-10 transition-transform duration-300 ease-out hover:translate-x-2" style="border-bottom: 1px solid #e0e0e0;">
+        		<!-- item content -->
+        </div>
+    </div>
+</div>
+
+**Key classes:** transition-transform, duration-300, hover:translate-x-2
+
 **Example: Hover lift and shadow on Cards**
 
 <div class="row" style="gap: 30px;">
@@ -94379,6 +94406,7 @@ class ContentBuilder {
     this.doDocumentClick = e => {
       let target = e.target;
       if (!target) return;
+      if (target.closest('[data-top-locked], [data-bottom-locked]')) return;
       rteClick(e);
       let rowClicked;
       if (target.parentNode && target.parentNode.classList) rowClicked = target.parentNode.classList.contains('is-builder');
@@ -95170,6 +95198,7 @@ class ContentBuilder {
     if (this.opts.useCssClasses) this.dom.contentReformat(builder, this.opts.cssClasses);
   }
   applyBehaviorOn(builder) {
+    if (builder.closest('[data-top-locked], [data-bottom-locked]')) return;
     const util = this.util;
     if (builder.closest('[data-cb-type]')) {
       // Fix buttons not wrapped in  <div style="white-space: nowrap;">