@innovastudio/contentbuilder 1.5.156 → 1.5.158

package/index.d.ts

@@ -331,5 +331,11 @@ declare class ContentBuilder {
 
     generateImage(prompt: string, callback?: () => void): void;
     openFilePicker(type?: string, callback?: () => void): void;
+    openColorPicker(
+        currentColor: string,
+        callback: (color: string) => void,
+        btn?: HTMLElement
+    ): void;
+    openIconPicker(callback: (iconHtml: string) => void): void;
 }
 export default ContentBuilder;

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -3974,7 +3974,9 @@ button:focus-visible {
   box-shadow: none;
 }
 #_cbhtml input[type=text],
-.is-ui input[type=text] {
+#_cbhtml input[type=number],
+.is-ui input[type=text],
+.is-ui input[type=number] {
   width: 100%;
   height: 43px;
   box-sizing: border-box;
@@ -3992,14 +3994,20 @@ button:focus-visible {
   background-color: #f6f6f6;
 }
 #_cbhtml input[type=text]:focus,
-.is-ui input[type=text]:focus {
+#_cbhtml input[type=number]:focus,
+.is-ui input[type=text]:focus,
+.is-ui input[type=number]:focus {
   outline: #3e93f7 2px solid;
   outline-offset: -2px;
   box-shadow: none;
 }
 #_cbhtml input[type=text] [type=checkbox], #_cbhtml input[type=text] [type=radio],
+#_cbhtml input[type=number] [type=checkbox],
+#_cbhtml input[type=number] [type=radio],
 .is-ui input[type=text] [type=checkbox],
-.is-ui input[type=text] [type=radio] {
+.is-ui input[type=text] [type=radio],
+.is-ui input[type=number] [type=checkbox],
+.is-ui input[type=number] [type=radio] {
   position: relative;
   opacity: 1;
   margin-top: 0;

package/public/contentbuilder/contentbuilder.esm.js

@@ -14481,6 +14481,8 @@ class HtmlUtil {
     }
     util.clearControls(); // NEW
 
+    // Re-init plugins
+    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
     this.builder.hideModal(modal);
   }
   viewHtmlExternal() {
@@ -15910,7 +15912,7 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
             </symbol>
-            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -52601,6 +52603,10 @@ class Element$1 {
 
     // Set contentEditable FALSE on special elements
 
+    const plugins = col.querySelectorAll('[data-cb-type]'); // plugins
+    Array.prototype.forEach.call(plugins, plugin => {
+      plugin.contentEditable = false;
+    });
     let sociallinks = col.querySelectorAll('.is-social');
     Array.prototype.forEach.call(sociallinks, sociallink => {
       sociallink.contentEditable = false;
@@ -97178,6 +97184,143 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   fromViewToActual(html) {
     return this.htmlutil.fromViewToActual(html);
   }
+  openColorPicker(currentColor, callback, btn) {
+    this.colorPicker.open(callback, currentColor, () => {}, btn);
+  }
+  openIconPicker(callback) {
+    let iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
+    if (!iconModal) {
+      // Create modal with search input and event listeners once
+      let html = `
+            <style>
+                .is-modal.iconselect .icon-search-wrapper {
+                    position: sticky;
+                    top: 0;
+                    background: white;
+                    padding: 20px;
+                    border-bottom: 1px solid #ddd;
+                    z-index: 10;
+                }
+                .is-modal.iconselect .icon-search {
+                    width: 100%;
+                    padding: 10px 15px;
+                    font-size: 16px;
+                    border: 1px solid #ccc;
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                }
+                .is-modal.iconselect .icon-search:focus {
+                    outline: none;
+                    border-color: #007bff;
+                }
+                .is-modal.iconselect .icon-list {
+                    display: flex;
+                    gap: 10px;
+                    flex-flow: wrap;
+                    padding: 20px;
+                }
+                .is-modal.iconselect .icon-list > button {
+                    display: flex !important;
+                    width: 80px !important;
+                    height: 80px !important;
+                    flex: none;
+                    font-size: 30px !important;
+                    box-shadow: none !important;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .is-modal.iconselect .icon-list > button.hidden {
+                    display: none !important;
+                }
+                .is-modal.iconselect .no-results {
+                    padding: 40px 20px;
+                    text-align: center;
+                    color: #666;
+                    display: none;
+                }
+                .is-modal.iconselect .no-results.show {
+                    display: block;
+                }
+            </style>
+            <div class="is-modal iconselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-content scroll" style="width: 90vw; max-width: 908px; height: 70vh; min-height: 525px; padding: 0;">
+                    <div style="height: 100%; overflow-y: auto; display: flex; flex-direction: column;">
+                        <div class="icon-search-wrapper">
+                            <input type="text" class="icon-search" placeholder="Search icons... (e.g., alarm, wrench)" />
+                        </div>
+                        <div class="icon-list"></div>
+                        <div class="no-results">No icons found matching your search.</div>
+                    </div>
+                </div>
+            </div>
+            `;
+      this.dom.appendHtml(this.builderStuff, html);
+      iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
+      this.iconModal = iconModal;
+      const iconList = this.builderStuff.querySelector('.icon-list');
+      const searchInput = this.builderStuff.querySelector('.icon-search');
+      const noResults = this.builderStuff.querySelector('.no-results');
+      iconList.innerHTML = this.rte.getIcons2() + this.rte.getIcons();
+      let icons = iconList.querySelectorAll('button');
+
+      // Add click handlers for icons
+      icons.forEach(icon => {
+        icon.addEventListener('click', () => {
+          // Get the current callback from the modal's data
+          const currentCallback = iconModal._currentCallback;
+          if (currentCallback) {
+            currentCallback(icon.innerHTML);
+          }
+          this.util.hideModal(iconModal);
+        });
+      });
+
+      // Add search/filter functionality
+      searchInput.addEventListener('input', e => {
+        const searchTerm = e.target.value.toLowerCase().trim();
+        let visibleCount = 0;
+        icons.forEach(icon => {
+          const iconElement = icon.querySelector('i');
+          if (!iconElement) return;
+
+          // Get class names from the icon
+          const iconClasses = iconElement.className.toLowerCase();
+
+          // Check if search term matches any part of the icon classes
+          if (searchTerm === '' || iconClasses.includes(searchTerm)) {
+            icon.classList.remove('hidden');
+            visibleCount++;
+          } else {
+            icon.classList.add('hidden');
+          }
+        });
+
+        // Show/hide no results message
+        if (visibleCount === 0 && searchTerm !== '') {
+          noResults.classList.add('show');
+        } else {
+          noResults.classList.remove('show');
+        }
+      });
+
+      // Clear search when modal is opened
+      iconModal.addEventListener('modalshow', () => {
+        searchInput.value = '';
+        searchInput.dispatchEvent(new Event('input'));
+      });
+    }
+
+    // Store the current callback and reset search
+    iconModal._currentCallback = callback;
+    const searchInput = iconModal.querySelector('.icon-search');
+    if (searchInput) {
+      searchInput.value = '';
+      searchInput.dispatchEvent(new Event('input'));
+      // Focus search input after a brief delay to ensure modal is visible
+      setTimeout(() => searchInput.focus(), 100);
+    }
+    this.util.showModal(iconModal);
+  }
   colorpicker(onPick, defaultcolor) {
     // return new ColorPicker({
     //     onPick: onPick,