@innovastudio/contentbuilder 1.5.79 → 1.5.80

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -1317,6 +1317,54 @@ button:focus-visible {
 .is-ui .is-rte-pop.rte-color-picker .rte-color-picker-area > div {
   padding-top: 5px !important;
 }
+#_cbhtml .is-rte-pop.rte-color-picker._4lines.active,
+.is-ui .is-rte-pop.rte-color-picker._4lines.active {
+  animation-name: colorpicker-slide-out-4lines;
+}
+@keyframes colorpicker-slide-out-4lines {
+  from {
+    height: 0;
+  }
+  to {
+    height: 420px;
+  }
+}
+#_cbhtml .is-rte-pop.rte-color-picker._4lines.deactive,
+.is-ui .is-rte-pop.rte-color-picker._4lines.deactive {
+  animation-name: colorpicker-slide-in-4lines;
+}
+@keyframes colorpicker-slide-in-4lines {
+  from {
+    height: 420px;
+  }
+  to {
+    height: 0;
+  }
+}
+#_cbhtml .is-rte-pop.rte-color-picker._5lines.active,
+.is-ui .is-rte-pop.rte-color-picker._5lines.active {
+  animation-name: colorpicker-slide-out-5lines;
+}
+@keyframes colorpicker-slide-out-5lines {
+  from {
+    height: 0;
+  }
+  to {
+    height: 451px;
+  }
+}
+#_cbhtml .is-rte-pop.rte-color-picker._5lines.deactive,
+.is-ui .is-rte-pop.rte-color-picker._5lines.deactive {
+  animation-name: colorpicker-slide-in-5lines;
+}
+@keyframes colorpicker-slide-in-5lines {
+  from {
+    height: 451px;
+  }
+  to {
+    height: 0;
+  }
+}
 #_cbhtml .is-rte-pop.rte-icon-options,
 .is-ui .is-rte-pop.rte-icon-options {
   width: 270px;

package/public/contentbuilder/contentbuilder.esm.js

@@ -63536,6 +63536,10 @@ class ColorPicker {
       const poppicker = builderStuff.querySelector('.pop-picker');
       poppicker.style.display = 'flex';
       poppicker.style.opacity = 0;
+      if (this.opts.colors.length <= 21) poppicker.style.height = '360px'; // 3 lines 
+      else if (this.opts.colors.length > 21 && this.opts.colors.length <= 28) poppicker.style.height = '390px'; // 4 lines
+      else if (this.opts.colors.length > 28) poppicker.style.height = '420px'; // 5 lines
+
       const pickr = Pickr.create({
         el: '._pop-colpick',
         theme: 'nano',
@@ -67424,6 +67428,10 @@ class Rte {
     btnRteColor.forEach(btn => {
       btn.addEventListener('click', () => {
         const pop = this.rteColorPicker;
+        const numOfColors = this.builder.colors.length;
+        if (numOfColors > 21 && numOfColors <= 28) pop.classList.add('_4lines'); // 4 lines
+        else if (numOfColors > 28) pop.classList.add('_5lines'); // 5 lines
+
         if (!dom.hasClass(pop, 'active')) {
           this.util.showRtePop(pop, () => {
             const top = btn.getBoundingClientRect().top;
@@ -96531,7 +96539,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       */
       src = this.viewFileUrl + '?url=' + src;
     }
-    const width = 512;
+    const width = 768;
     const height = 512;
     const img = new Image();
     img.src = src;
@@ -96577,7 +96585,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       model,
       prompt: prompt,
       negative_prompt,
-      width: 512,
+      width: 768,
       height: 512,
       steps,
       guidance,