@innovastudio/contentbuilder 1.2.4-rc6 → 1.2.4-rc8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.2.4-rc6",
+  "version": "1.2.4-rc8",
   "type": "module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",

package/public/contentbuilder/contentbuilder.css

@@ -226,6 +226,11 @@ button:focus {
 .is-ui p {
   font-size: 13px;
 }
+#_cbhtml .focus-warning:focus,
+.is-ui .focus-warning:focus {
+  outline: #f43f5e 2px solid !important;
+  outline-offset: 2px;
+}
 #_cbhtml .style-helper,
 .is-ui .style-helper {
   display: none;
@@ -3109,6 +3114,10 @@ button:focus {
   margin-top: 0;
   margin-bottom: 0;
 }
+#_cbhtml input[type=radio]:focus,
+.is-ui input[type=radio]:focus {
+  outline: #3e93f7 1px solid;
+}
 #_cbhtml label,
 .is-ui label {
   font-size: 13px;

package/public/contentbuilder/contentbuilder.esm.js

@@ -4109,7 +4109,7 @@ 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;">
                 <p>${message}</p>
-                <button title="${this.out('Delete')}" class="input-ok classic">${this.out('Delete')}</button>
+                <button title="${this.out('Delete')}" class="input-ok classic focus-warning">${this.out('Delete')}</button>
             </div>
         </div>`;
 
@@ -4341,6 +4341,9 @@ class Util {
       }
     }
 
+    const ovl = modal.querySelector('.is-modal-overlay');
+    if (ovl) ovl.parentNode.removeChild(ovl); // new
+
     if (!modal.querySelector('.is-modal-overlay')) {
       let html;
 
@@ -16186,7 +16189,6 @@ class Snippets {
                                     activeItem.focus();
                                 } else {
                                     firstItem.focus();
-                                    console.log(firstItem)
                                 }
                                 return;
 
@@ -16227,7 +16229,6 @@ class Snippets {
                                 activeItem.focus();
                             } else {
                                 firstItem.focus();
-                                console.log(firstItem)
                             }
 
                         } 
@@ -16347,7 +16348,7 @@ class Snippets {
                         });
         
                         newitem.addEventListener('keydown', (e)=>{
-                            console.log(e.which)
+
                             if ((e.which === 9 && !e.shiftKey)) { // tab
                                 let last = false;
                                 if(e.target.nextElementSibling) {
@@ -21277,6 +21278,7 @@ class Select {
       } else if (e.keyCode === 27) {
         // escape key
         this.toggle(false);
+        toggler.focus();
       } else if (e.keyCode === 13 || e.keyCode === 32) {
         // enter or spacebar key
         setValue(e.target);
@@ -21284,14 +21286,14 @@ class Select {
     };
 
     const handleToggleKeyPress = e => {
-      e.preventDefault();
-
       if (e.keyCode === 27) {
         // escape key
         this.toggle(false);
+        e.preventDefault();
       } else if (e.keyCode === 13 || e.keyCode === 32) {
         // enter or spacebar key
         this.toggle(true);
+        e.preventDefault();
       }
     };
 
@@ -52143,9 +52145,9 @@ class RowTool {
     if (!rowMore) {
       let html = `<div class="is-pop rowmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div style="display:flex;flex-flow:wrap;">
-                    <button type="button" tabindex="-1" title="${util.out('Move Up')}" class="row-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
-                    <button type="button" tabindex="-1" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
-                    <button type="button" tabindex="-1" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
+                    <button type="button" title="${util.out('Move Up')}" class="row-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
+                    <button type="button" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
+                    <button type="button" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
                     ${htmlbutton}
                 </div>
             </div>`;
@@ -54849,11 +54851,11 @@ class ColumnTool {
         const inpSrc = this.imageSource.querySelector('.input-src');
         const url = inpSrc.value;
         if (this.builder.imageSelectedCallback) this.builder.imageSelectedCallback(url);
-        util.hideModal(imageSource);
+        this.builder.hideModal(imageSource);
       });
       const btnImageCancel = imageSource.querySelector('.input-cancel');
       dom$n.addEventListener(btnImageCancel, 'click', () => {
-        util.hideModal(imageSource);
+        this.builder.hideModal(imageSource);
       }); // Scale
 
       const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
@@ -63787,9 +63789,8 @@ class Rte {
     this.inpZoomSlider.onfocus = () => {
       if (this.builder.onZoomStart) {
         this.builder.onZoomStart();
-      }
+      } // this.inpZoomSlider.blur();
 
-      this.inpZoomSlider.blur();
     };
 
     this.inpZoomSlider.oninput = () => {
@@ -67234,8 +67235,11 @@ class Rte {
   viewZoom() {
     if (this.builder.onZoomOpen) this.builder.onZoomOpen();
     this.inpZoomSlider.value = this.builder.opts.zoom * 100;
+    if (document.activeElement) this.elmFocus = document.activeElement;
     const modal = this.builderStuff.querySelector('.viewzoom');
-    this.util.showModal(modal, false, null, false);
+    this.util.showModal(modal, false, () => {
+      if (this.elmFocus) this.elmFocus.focus();
+    }, false);
   }
 
 }
@@ -71217,10 +71221,10 @@ class ContentBuilder {
     const activeCol = this.activeCol;
 
     if (!activeCol) {
-      col.click();
+      if (col.firstElementChild) col.firstElementChild.click();else col.click();
     } else {
       if (col !== activeCol) {
-        col.click();
+        if (col.firstElementChild) col.firstElementChild.click();else col.click();
       }
     }
   }