@innovastudio/contentbox 1.6.5 → 1.6.6

package/public/contentbox/contentbox.esm.js

@@ -15320,6 +15320,56 @@ class Text {
     });
   }
 
+  setFlexGrow(isGrow) {
+    let elm = this.getElm();
+    if (!elm) return;
+
+    if (isGrow) {
+      let activeColumn = this.builder.controlpanel.activeColumn;
+      activeColumn.classList.add('flex');
+      activeColumn.classList.add('flex-col');
+      elm.classList.add('grow');
+    } else {
+      elm.classList.remove('grow');
+    }
+
+    elm.style.flexGrow = ''; // clean inline style
+  }
+
+  justifyColumn(val) {
+    let activeColumn = this.builder.controlpanel.activeColumn;
+    activeColumn.classList.add('flex');
+    activeColumn.classList.add('flex-col');
+    activeColumn.classList.remove('justify-start');
+    activeColumn.classList.remove('justify-center');
+    activeColumn.classList.remove('justify-end');
+    activeColumn.classList.remove('justify-between');
+
+    if (val === 'justify-start') {
+      activeColumn.classList.add('justify-start');
+    } else if (val === 'justify-center') {
+      activeColumn.classList.add('justify-center');
+    } else if (val === 'justify-end') {
+      activeColumn.classList.add('justify-end');
+    } else if (val === 'justify-between') {
+      activeColumn.classList.add('justify-between');
+    } else if (val === '') {
+      activeColumn.classList.remove('flex');
+      activeColumn.classList.remove('flex-col');
+      /*
+      if(activeColumn.classList.contains('items-center') ||
+          activeColumn.classList.contains('items-end')) {
+          // Do Nothing
+      } else {
+          activeColumn.classList.remove('flex');
+          activeColumn.classList.remove('flex-col');
+      }
+      */
+    }
+
+    activeColumn.querySelectorAll('.grow').forEach(elm => elm.classList.remove('grow'));
+  }
+
   setTextColor(color) {
     let elm = this.getElm();
     const text = this.getSelectedText();
@@ -17029,6 +17079,31 @@ class PanelText {
 
             </div>
 
+
+            <button class="accordion-item" aria-expanded="false" aria-controls="contenttext0">
+                ${out('Placement')}
+                <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
+            </button>
+            <div class="accordion-content" id="contenttext0" aria-hidden="true">
+
+                <div class="subpanel">
+                    <div class="group mt-2">
+                        <button title="${out('Top')}" data-justify="justify-start"><svg><use xlink:href="#icon-align-box-top"></use></svg></button>
+                        <button title="${out('Middle')}" data-justify="justify-center"><svg><use xlink:href="#icon-align-box-middle"></use></svg></button>
+                        <button title="${out('Bottom')}" data-justify="justify-end"><svg><use xlink:href="#icon-align-box-bottom"></use></svg></button>
+                        <button title="${out('Full')}" data-justify="justify-between"><svg><use xlink:href="#icon-align-box-stretch"></use></svg></button>
+                        <button title="${out('Clear')}" data-justify=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                    </div>
+
+                    <label class="label checkbox flexgrow mt-2">
+                        <input type="checkbox" class="chk-flexgrow" />
+                        <span>${out('Grow')}</span>
+                    </label>
+                </div>
+            
+            </div>
+
+
             <button class="accordion-item" aria-expanded="false" aria-controls="contenttext1">
                 ${out('Font Settings')}
                 <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
@@ -17045,6 +17120,7 @@ class PanelText {
 
                     <div class="label changedevice">
                         <span>${out('Font Size')}:</span>
+                        <span class="val-fontsize" style="flex-grow:1;margin-left:9px"></span>
                         <button title="${out('Change Device')}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>
                     </div>
 
@@ -17055,7 +17131,10 @@ class PanelText {
                         <button title="${out('Clear')}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
 
-                    <div class="label">${out('Font Weight')}:</div>
+                    <div class="label flex flex-row">
+                        <span>${out('Font Weight')}:</span>
+                        <span class="val-fontweight" style="flex-grow:1;margin-left:9px"></span>
+                    </div>
                     
                     <div class="group fontweight">
                         <button title="100" data-value="100">100</button>
@@ -17087,7 +17166,10 @@ class PanelText {
                         </select>
                     </div>
 
-                    <div class="label">${out('Line Spacing')}:</div>
+                    <div class="label flex flex-row">
+                        <span>${out('Line Spacing')}:</span>
+                        <span class="val-linespacing" style="flex-grow:1;margin-left:9px"></span>
+                    </div>
 
                     <div class="group linespacing">
                         
@@ -17098,7 +17180,10 @@ class PanelText {
                         <button title="${out('Clear')}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
 
-                    <div class="label">${out('Letter Spacing')}:</div>
+                    <div class="label flex flex-row">
+                        <span>${out('Letter Spacing')}:</span>
+                        <span class="val-letterspacing" style="flex-grow:1;margin-left:9px"></span>
+                    </div>
 
                     <div class="group letterspacing">
                         <button title="1" data-value="1">1</button>
@@ -17384,6 +17469,27 @@ class PanelText {
     const btnImage = panel.querySelector('.btn-image');
     btnImage.addEventListener('click', () => {
       this.builder.editor.rte.insertImage();
+    }); // Flex
+
+    const btnJustify = panel.querySelectorAll('[data-justify]');
+    btnJustify.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.saveForUndo();
+        const val = btn.getAttribute('data-justify');
+        this.text.justifyColumn(val);
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange(); // this is because the changed element is in ContentBuilder scope
+      });
+    });
+    const chkFlexGrow = panel.querySelector('.chk-flexgrow');
+    chkFlexGrow.addEventListener('click', () => {
+      this.saveForUndo();
+      let isFlexGrow = chkFlexGrow.checked;
+      this.text.setFlexGrow(isFlexGrow);
+      this.getState(); // this.builder.onChange();
+
+      this.builder.editor.onChange(); // this is because the changed element is in ContentBuilder scope
     });
   }
 
@@ -17439,6 +17545,23 @@ class PanelText {
     } else {
       btnBackColorPick.classList.remove('nocolor');
       btnBackColorPick.parentNode.style.marginTop = '';
+    } // Flex
+
+
+    const chkFlexGrow = this.panel.querySelector('.chk-flexgrow');
+    chkFlexGrow.checked = false;
+    if (activeElement.closest('.grow')) chkFlexGrow.checked = true;
+    this.panel.querySelectorAll('[data-justify]').forEach(elm => elm.classList.remove('on'));
+    let activeColumn = this.builder.controlpanel.activeColumn;
+
+    if (activeColumn.classList.contains('justify-start')) {
+      this.panel.querySelector('[data-justify=justify-start]').classList.add('on');
+    } else if (activeColumn.classList.contains('justify-center')) {
+      this.panel.querySelector('[data-justify=justify-center]').classList.add('on');
+    } else if (activeColumn.classList.contains('justify-end')) {
+      this.panel.querySelector('[data-justify=justify-end]').classList.add('on');
+    } else if (activeColumn.classList.contains('justify-between')) {
+      this.panel.querySelector('[data-justify=justify-between]').classList.add('on');
     }
 
     if (!document.body.classList.contains('controlpanel')) return;
@@ -17533,11 +17656,14 @@ class PanelText {
       // Font Size
       const arrSizes = this.builder.fontSizeClassValues;
       this.panel.querySelectorAll('.group.fontsizes button').forEach(btn => btn.classList.remove('on'));
+      const spanFontSize = this.panel.querySelector('.val-fontsize');
+      spanFontSize.innerText = '';
       let found = false; // Check if size is defined for specific screenMode
 
       if (prefix !== '') for (let i = 0; i <= arrSizes.length - 1; i++) {
         if (container.classList.contains(prefix + 'size-' + arrSizes[i])) {
           found = true;
+          spanFontSize.innerText = arrSizes[i];
           const btns = this.panel.querySelectorAll('.group.fontsizes button');
           btns.forEach(btn => {
             let num = btn.getAttribute('data-value');
@@ -17554,12 +17680,14 @@ class PanelText {
         for (let i = 0; i <= arrSizes.length - 1; i++) {
           if (container.classList.contains('size-' + arrSizes[i])) {
             // Get current class
+            spanFontSize.innerText = arrSizes[i];
             const btns = this.panel.querySelectorAll('.group.fontsizes button');
             btns.forEach(btn => {
               let num = btn.getAttribute('data-value');
 
               if (parseInt(num) === arrSizes[i]) {
                 btn.classList.add('on');
+                spanFontSize.innerText = num;
               }
             });
           }
@@ -17569,24 +17697,27 @@ class PanelText {
 
       let classes = this.builder.cssClasses.fontWeight;
       this.panel.querySelectorAll('.group.fontweight button').forEach(btn => btn.classList.remove('on'));
+      const spanFontWeight = this.panel.querySelector('.val-fontweight');
+      spanFontWeight.innerText = '';
 
       for (let i = 0; i < Object.keys(classes).length; i++) {
         let className = Object.values(classes)[i];
 
         if (container.classList.contains(className)) {
+          let val;
+          if (className === classes.thin) val = '100';
+          if (className === classes.extralight) val = '200';
+          if (className === classes.light) val = '300';
+          if (className === classes.normal) val = '400';
+          if (className === classes.medium) val = '500';
+          if (className === classes.semibold) val = '600';
+          if (className === classes.bold) val = '700';
+          if (className === classes.extrabold) val = '800';
+          if (className === classes.black) val = '900';
+          if (val) spanFontWeight.innerText = val;
           const btns = this.panel.querySelectorAll('.group.fontweight button');
           Array.prototype.forEach.call(btns, btn => {
             let num = btn.getAttribute('data-value');
-            let val;
-            if (className === classes.thin) val = '100';
-            if (className === classes.extralight) val = '200';
-            if (className === classes.light) val = '300';
-            if (className === classes.normal) val = '400';
-            if (className === classes.medium) val = '500';
-            if (className === classes.semibold) val = '600';
-            if (className === classes.bold) val = '700';
-            if (className === classes.extrabold) val = '800';
-            if (className === classes.black) val = '900';
 
             if (num === val) {
               btn.classList.add('on');
@@ -17598,6 +17729,10 @@ class PanelText {
 
       this.panel.querySelectorAll('.group.linespacing button').forEach(btn => btn.classList.remove('on'));
       this.panel.querySelectorAll('.group.letterspacing button').forEach(btn => btn.classList.remove('on'));
+      const spanLineSpacing = this.panel.querySelector('.val-linespacing');
+      spanLineSpacing.innerText = '';
+      const spanLetterSpacing = this.panel.querySelector('.val-letterspacing');
+      spanLetterSpacing.innerText = '';
       const block = this.text.getParentBlock(container);
 
       if (block) {
@@ -17608,25 +17743,40 @@ class PanelText {
           let className = Object.values(classes)[i];
 
           if (block.classList.contains(className)) {
+            let val;
+            if (className === classes.leading_5) val = '0.5';
+            if (className === classes.leading_6) val = '0.6';
+            if (className === classes.leading_7) val = '0.7';
+            if (className === classes.leading_8) val = '0.8';
+            if (className === classes.leading_9) val = '0.9';
+            if (className === classes.leading_10) val = '1';
+            if (className === classes.leading_11) val = '1.1';
+            if (className === classes.leading_12) val = '1.2';
+            if (className === classes.leading_125) val = '1.25';
+            if (className === classes.leading_13) val = '1.3';
+            if (className === classes.leading_1375) val = '1.375';
+            if (className === classes.leading_14) val = '1.4';
+            if (className === classes.leading_15) val = '1.5';
+            if (className === classes.leading_16) val = '1.6';
+            if (className === classes.leading_1625) val = '1.625';
+            if (className === classes.leading_17) val = '1.7';
+            if (className === classes.leading_18) val = '1.8';
+            if (className === classes.leading_19) val = '1.9';
+            if (className === classes.leading_20) val = '2';
+            if (className === classes.leading_21) val = '2.1';
+            if (className === classes.leading_22) val = '2.2';
+            if (className === classes.leading_23) val = '2.3';
+            if (className === classes.leading_24) val = '2.4';
+            if (className === classes.leading_25) val = '2.5';
+            if (className === classes.leading_26) val = '2.6';
+            if (className === classes.leading_27) val = '2.7';
+            if (className === classes.leading_28) val = '2.8';
+            if (className === classes.leading_29) val = '2.9';
+            if (className === classes.leading_30) val = '3';
+            if (val) spanLineSpacing.innerText = val;
             const btns = this.panel.querySelectorAll('.group.linespacing button');
-            Array.prototype.forEach.call(btns, btn => {
+            btns.forEach(btn => {
               let num = btn.getAttribute('data-value');
-              let val;
-              if (className === classes.leading_8) val = '0.8';
-              if (className === classes.leading_9) val = '0.9';
-              if (className === classes.leading_10) val = '1';
-              if (className === classes.leading_11) val = '1.1';
-              if (className === classes.leading_12) val = '1.2';
-              if (className === classes.leading_13) val = '1.3';
-              if (className === classes.leading_14) val = '1.4';
-              if (className === classes.leading_15) val = '1.5';
-              if (className === classes.leading_16) val = '1.6';
-              if (className === classes.leading_17) val = '1.7';
-              if (className === classes.leading_18) val = '1.8';
-              if (className === classes.leading_19) val = '1.9';
-              if (className === classes.leading_20) val = '2';
-              if (className === classes.leading_21) val = '2.1';
-              if (className === classes.leading_22) val = '2.2';
 
               if (num === val) {
                 btn.classList.add('on');
@@ -17642,12 +17792,36 @@ class PanelText {
           let className = Object.values(classes)[i];
 
           if (block.classList.contains(className)) {
+            let val;
+            if (className === classes.tracking__100) val = '-4';
+            if (className === classes.tracking__075) val = '-3';
+            if (className === classes.tracking__050) val = '-2';
+            if (className === classes.tracking__025) val = '-1';
+            if (className === classes.tracking_000) val = '';
+            if (className === classes.tracking_025) val = '1';
+            if (className === classes.tracking_050) val = '2';
+            if (className === classes.tracking_075) val = '3';
+            if (className === classes.tracking_100) val = '4';
+            if (className === classes.tracking_125) val = '5';
+            if (className === classes.tracking_150) val = '6';
+            if (className === classes.tracking_175) val = '7';
+            if (className === classes.tracking_200) val = '8';
+            if (className === classes.tracking_225) val = '9';
+            if (className === classes.tracking_250) val = '10';
+            if (className === classes.tracking_275) val = '11';
+            if (className === classes.tracking_300) val = '12';
+            if (className === classes.tracking_325) val = '13';
+            if (className === classes.tracking_350) val = '14';
+            if (className === classes.tracking_375) val = '15';
+            if (className === classes.tracking_400) val = '16';
+            if (className === classes.tracking_425) val = '17';
+            if (className === classes.tracking_450) val = '18';
+            if (className === classes.tracking_475) val = '19';
+            if (className === classes.tracking_500) val = '20';
+            if (val) spanLetterSpacing.innerText = val;
             const btns = this.panel.querySelectorAll('.group.letterspacing button');
-            Array.prototype.forEach.call(btns, btn => {
+            btns.forEach(btn => {
               let num = btn.getAttribute('data-value');
-              let val;
-              if (className === classes.tracking_025) val = '1';
-              if (className === classes.tracking_050) val = '2';
 
               if (num === val) {
                 btn.classList.add('on');
@@ -19026,13 +19200,13 @@ class PanelBox {
                 <button title="${out('Clear')}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
             </div>
 
-            <label class="label checkbox grayscale mt-2">
+            <label class="label checkbox grayscale mt-2" style="margin-bottom:16px">
                 <input type="checkbox" class="chk-grayscale" />
                 <span>${out('Grayscale')}</span>
             </label>
 
             <div class="defaulttextcolor">
-                <div class="label mt-5">${out('Text Color')}:</div>
+                <div class="label mt-3">${out('Text Color')}:</div>
                 <div class="group textcolor">
                     <button title="${out('Light')}" data-textcolor="light">${out('Light')}</button>
                     <button title="${out('Dark')}" data-textcolor="dark">${out('Dark')}</button>
@@ -19047,6 +19221,10 @@ class PanelBox {
                 </button>
             </div>
 
+            <div class="group editspacing mt-2">
+                <button title="${out('Spacing')}" class="btn-spacing" data-value="">${out('Spacing')}</button>
+            </div>
+
         </div>
 
         <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="boxcontent1">
@@ -19141,10 +19319,6 @@ class PanelBox {
                         </div>
                     </div>
 
-                    <div class="group editspacing">
-                        <button title="${out('Spacing')}" class="btn-spacing" data-value="">${out('Spacing')}</button>
-                    </div>
-
                 </div>
 
             </div>
@@ -20971,18 +21145,48 @@ class PanelColumn {
                 <span>${out('Grayscale')}</span>
             </label>
 
+            <div class="group editspacing mt-3">
+                <button title="${out('Spacing')}" class="btn-spacing" data-value="">${out('Spacing')}</button>
+            </div>
+
         </div>
         
         <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="columncontent1">
-            ${out('Content')}
+            ${out('Placement')}
             <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
         </button>
         <div class="accordion-content" id="columncontent1" aria-hidden="true">
 
             <div class="subpanel">
-                <div class="label mt-2">${out('Position')}:</div>
 
-                <div class="flex" style="justify-content:flex-start;align-items: flex-end;">
+                <div class="label mt-2">${out('Vertical')}:</div>
+                <div class="group flexjustify">
+                    <button title="${out('Top')}" data-justify="justify-start"><svg><use xlink:href="#icon-align-box-top"></use></svg></button>
+                    <button title="${out('Middle')}" data-justify="justify-center"><svg><use xlink:href="#icon-align-box-middle"></use></svg></button>
+                    <button title="${out('Bottom')}" data-justify="justify-end"><svg><use xlink:href="#icon-align-box-bottom"></use></svg></button>
+                    <button title="${out('Full')}" data-justify="justify-between"><svg><use xlink:href="#icon-align-box-stretch"></use></svg></button>
+                    <button title="${out('Clear')}" data-justify=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
+
+                <div class="label mt-2">${out('Horizontal')}:</div>
+                <div class="group flexjustify" style="margin-right:13px">
+                    <button title="${out('Left')}" data-align="items-start"><svg><use xlink:href="#icon-align-box-left"></use></svg></button>
+                    <button title="${out('Center')}" data-align="items-center"><svg><use xlink:href="#icon-align-box-center"></use></svg></button>
+                    <button title="${out('Right')}" data-align="items-end"><svg><use xlink:href="#icon-align-box-right"></use></svg></button>
+                    <button title="${out('Clear')}" data-align=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
+                <br>
+                <div class="group clearflex mt-2">
+                    <button title="${out('Clear All')}" class="btn-clearflex">
+                        <svg><use xlink:href="#icon-eraser"></use></svg>
+                        <span>${out('Clear All')}</span>
+                    </button>
+                </div>
+
+
+                <div class="label mt-2" style="display:none">${out('Position')}:</div>
+
+                <div class="flex" style="justify-content:flex-start;align-items: flex-end;display:none">
                     <div class="group contentposition mr-3">
                         <div class="flex">
                             <button title="${out('Top Left')}" data-content-pos="topleft">&#8598;</button>
@@ -21005,10 +21209,6 @@ class PanelColumn {
                         <button title="${out('Clear')}" class="btn-clear" data-content-pos=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
                 </div>
-
-                <div class="group editspacing mt-3">
-                    <button title="${out('Spacing')}" class="btn-spacing" data-value="">${out('Spacing')}</button>
-                </div>
             </div>
 
         </div>
@@ -21225,6 +21425,94 @@ class PanelColumn {
         btnTextColor.forEach(btn => btn.classList.remove('on'));
         if (s !== '') btn.classList.add('on');
       });
+    }); // Flex
+
+    const btnJustify = panel.querySelectorAll('[data-justify]');
+    btnJustify.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        const s = btn.getAttribute('data-justify');
+        let activeColumn = this.builder.controlpanel.activeColumn;
+        activeColumn.classList.add('flex');
+        activeColumn.classList.add('flex-col');
+        activeColumn.classList.remove('justify-start');
+        activeColumn.classList.remove('justify-center');
+        activeColumn.classList.remove('justify-end');
+        activeColumn.classList.remove('justify-between');
+
+        if (s === 'justify-start') {
+          activeColumn.classList.add('justify-start');
+        } else if (s === 'justify-center') {
+          activeColumn.classList.add('justify-center');
+        } else if (s === 'justify-end') {
+          activeColumn.classList.add('justify-end');
+        } else if (s === 'justify-between') {
+          activeColumn.classList.add('justify-between');
+        } else if (s === '') {
+          if (activeColumn.classList.contains('items-center') || activeColumn.classList.contains('items-end')) ; else {
+            activeColumn.classList.remove('flex');
+            activeColumn.classList.remove('flex-col');
+          }
+        }
+
+        activeColumn.querySelectorAll('.grow').forEach(elm => elm.classList.remove('grow')); // this.getState();
+
+        panel.querySelectorAll('[data-justify]').forEach(btn => btn.classList.remove('on'));
+        if (s !== '') btn.classList.add('on'); // this.builder.onChange();
+
+        this.builder.editor.onChange(); // this is because the changed element is in ContentBuilder scope
+      });
+    });
+    const btnAlign = panel.querySelectorAll('[data-align]');
+    btnAlign.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        const s = btn.getAttribute('data-align');
+        let activeColumn = this.builder.controlpanel.activeColumn;
+        activeColumn.classList.add('flex');
+        activeColumn.classList.add('flex-col');
+        activeColumn.classList.remove('items-start');
+        activeColumn.classList.remove('items-center');
+        activeColumn.classList.remove('items-end');
+
+        if (s === 'items-start') ; else if (s === 'items-center') {
+          activeColumn.classList.add('items-center');
+        } else if (s === 'items-end') {
+          activeColumn.classList.add('items-end');
+        } else if (s === '') {
+          if (activeColumn.classList.contains('justify-start') || activeColumn.classList.contains('justify-center') || activeColumn.classList.contains('justify-end') || activeColumn.classList.contains('justify-between')) ; else {
+            activeColumn.classList.remove('flex');
+            activeColumn.classList.remove('flex-col');
+          }
+        }
+
+        activeColumn.querySelectorAll('.grow').forEach(elm => elm.classList.remove('grow')); // this.getState();
+
+        panel.querySelectorAll('[data-align]').forEach(btn => btn.classList.remove('on'));
+        if (s !== '') btn.classList.add('on'); // this.builder.onChange();
+
+        this.builder.editor.onChange(); // this is because the changed element is in ContentBuilder scope
+      });
+    });
+    const btnClearFlex = panel.querySelector('.btn-clearflex');
+    btnClearFlex.addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
+      let activeColumn = this.builder.controlpanel.activeColumn;
+      activeColumn.classList.remove('flex');
+      activeColumn.classList.remove('flex-col');
+      activeColumn.classList.remove('justify-start');
+      activeColumn.classList.remove('justify-center');
+      activeColumn.classList.remove('justify-end');
+      activeColumn.classList.remove('justify-between');
+      activeColumn.classList.remove('items-start');
+      activeColumn.classList.remove('items-center');
+      activeColumn.classList.remove('items-end');
+      activeColumn.querySelectorAll('.grow').forEach(elm => elm.classList.remove('grow')); // this.getState();
+
+      panel.querySelectorAll('[data-justify]').forEach(btn => btn.classList.remove('on'));
+      panel.querySelectorAll('[data-align]').forEach(btn => btn.classList.remove('on')); // this.builder.onChange();
+
+      this.builder.editor.onChange(); // this is because the changed element is in ContentBuilder scope
     }); // Positiom
 
     const btnContentJustify = panel.querySelectorAll('[data-content-justify]');
@@ -21594,6 +21882,31 @@ class PanelColumn {
 
     if (activeColumn.classList.contains('is-light-text')) {
       panel.querySelector('[data-textcolor="light"').classList.add('on');
+    } // Flex
+
+
+    panel.querySelectorAll('[data-justify]').forEach(elm => elm.classList.remove('on'));
+
+    if (activeColumn.classList.contains('justify-start')) {
+      panel.querySelector('[data-justify=justify-start]').classList.add('on');
+    } else if (activeColumn.classList.contains('justify-center')) {
+      panel.querySelector('[data-justify=justify-center]').classList.add('on');
+    } else if (activeColumn.classList.contains('justify-end')) {
+      panel.querySelector('[data-justify=justify-end]').classList.add('on');
+    } else if (activeColumn.classList.contains('justify-between')) {
+      panel.querySelector('[data-justify=justify-between]').classList.add('on');
+    }
+
+    panel.querySelectorAll('[data-align]').forEach(elm => elm.classList.remove('on')); // items-start class is not used/needed
+
+    if (activeColumn.classList.contains('items-center')) {
+      panel.querySelector('[data-align=items-center]').classList.add('on');
+    } else if (activeColumn.classList.contains('items-end')) {
+      panel.querySelector('[data-align=items-end]').classList.add('on');
+    } else {
+      if (activeColumn.classList.contains('flex')) {
+        panel.querySelector('[data-align=items-start]').classList.add('on');
+      }
     } // Position
 
 
@@ -31517,18 +31830,20 @@ class Util$1 {
     this.builder.activeIcon = null;
 
     // RTE
-    let rteTool = builderStuff.querySelector('.is-rte-tool');
-    // rteTool.style.display = 'none';
-    let rteButtons = rteTool.querySelectorAll('button');
-    Array.prototype.forEach.call(rteButtons, rteButton => {
-      dom.removeClass(rteButton, 'on');
-    });
-    let elementRteTool = builderStuff.querySelector('.is-elementrte-tool');
-    // rteTool.style.display = 'none';
-    rteButtons = elementRteTool.querySelectorAll('button');
-    Array.prototype.forEach.call(rteButtons, rteButton => {
-      dom.removeClass(rteButton, 'on');
-    });
+    if (!this.builder.controlPanel) {
+      let rteTool = builderStuff.querySelector('.is-rte-tool');
+      // rteTool.style.display = 'none';
+      let rteButtons = rteTool.querySelectorAll('button');
+      Array.prototype.forEach.call(rteButtons, rteButton => {
+        dom.removeClass(rteButton, 'on');
+      });
+      let elementRteTool = builderStuff.querySelector('.is-elementrte-tool');
+      // rteTool.style.display = 'none';
+      rteButtons = elementRteTool.querySelectorAll('button');
+      Array.prototype.forEach.call(rteButtons, rteButton => {
+        dom.removeClass(rteButton, 'on');
+      });
+    }
     let pops = builderStuff.querySelectorAll('.is-pop');
     Array.prototype.forEach.call(pops, pop => {
       pop.style.display = '';
@@ -31606,7 +31921,7 @@ class Util$1 {
     this.builder.activeIcon = null;
     this.builder.inspectedElement = null;
     this.builder.activeElement = null;
-    if (all) {
+    if (all && !this.builder.controlPanel) {
       // RTE
       let rtetool = builderStuff.querySelector('.is-rte-tool');
       if (rtetool) rtetool.style.display = 'none';
@@ -31737,17 +32052,19 @@ class Util$1 {
     });
 
     // RTE
-    if (this.builder.toolbarDisplay === 'auto') {
-      let rtetool = builderStuff.querySelector('.is-rte-tool');
-      if (rtetool) rtetool.style.display = 'none';
-      let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
-      if (elementRtetool) elementRtetool.style.display = 'none';
+    if (!this.builder.controlPanel) {
+      if (this.builder.toolbarDisplay === 'auto') {
+        let rtetool = builderStuff.querySelector('.is-rte-tool');
+        if (rtetool) rtetool.style.display = 'none';
+        let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
+        if (elementRtetool) elementRtetool.style.display = 'none';
 
-      // Click ok on code view should hide these as well
-      let rtetoolmore = builderStuff.querySelector('.rte-more-options');
-      if (rtetoolmore) rtetoolmore.style.display = '';
-      let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
-      if (elementRtetoolmore) elementRtetoolmore.style.display = '';
+        // Click ok on code view should hide these as well
+        let rtetoolmore = builderStuff.querySelector('.rte-more-options');
+        if (rtetoolmore) rtetoolmore.style.display = '';
+        let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
+        if (elementRtetoolmore) elementRtetoolmore.style.display = '';
+      }
     }
 
     // Element
@@ -31755,13 +32072,15 @@ class Util$1 {
     Array.prototype.forEach.call(elms, elm => {
       dom.removeClass(elm, 'elm-active');
     });
-    let rtepops = builderStuff.querySelectorAll('.is-rte-pop');
-    Array.prototype.forEach.call(rtepops, rtepop => {
-      rtepop.style.display = '';
-      dom.removeClass(rtepop, 'active');
-      dom.removeClass(rtepop, 'deactive');
-      // dom.addClass(rtepop, 'deactive');
-    });
+    if (!this.builder.controlPanel) {
+      let rtepops = builderStuff.querySelectorAll('.is-rte-pop');
+      Array.prototype.forEach.call(rtepops, rtepop => {
+        rtepop.style.display = '';
+        dom.removeClass(rtepop, 'active');
+        dom.removeClass(rtepop, 'deactive');
+        // dom.addClass(rtepop, 'deactive');
+      });
+    }
 
     let pops = builderStuff.querySelectorAll('.is-pop');
     Array.prototype.forEach.call(pops, pop => {
@@ -42203,12 +42522,45 @@ const prepareSvgIcons = builder => {
                 <path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
             </symbol>
             <symbol id="icon-publish" 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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-            <path d="M9 12l2 2l4 -4"></path>
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
+                <path d="M9 12l2 2l4 -4"></path>
+            </symbol>
+
+            <symbol id="icon-align-box-top" 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 d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                <path d="M15 10h-7" />
+                <path d="M15 7h-7" />
+            </symbol>
+            <symbol id="icon-align-box-middle" 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 d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                <path d="M15 13h-7" />
+                <path d="M15 10h-7" />
+            </symbol>
+            <symbol id="icon-align-box-bottom" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                <path d="M15 17h-7" />
+                <path d="M15 14h-7" />
+            </symbol>
+            <symbol id="icon-align-box-stretch" 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 d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" />
+                <path d="M15 17h-7" />
+                <path d="M15 7h-7" />
+            </symbol>
+
+            <symbol id="icon-align-box-left" 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 d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M9 15h-2" /><path d="M13 12h-6" /><path d="M11 9h-4" />
+            </symbol>
+            <symbol id="icon-align-box-center" 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 d="M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M11 15h2" /><path d="M9 12h6" /><path d="M10 9h4" />
+            </symbol>
+            <symbol id="icon-align-box-right" 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 d="M15 15h2" /><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M11 12h6" /><path d="M13 9h4" />
             </symbol>
 
-            
             </defs>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
@@ -79500,17 +79852,26 @@ class Hyperlink {
     // Link tool
     const linkTool = this.linkTool;
     let linkDisplay = dom.getStyle(link, 'display');
-    if (linkDisplay === 'inline-block' || linkDisplay === 'flex') {
-      linkTool.querySelector('.link-duplicate').style.display = 'block';
-      linkTool.querySelector('.link-remove').style.display = 'block';
-    } else {
-      if (this.builder.activeIcon) {
+    /*
+    if(linkDisplay==='inline-block' || linkDisplay==='flex'){
         linkTool.querySelector('.link-duplicate').style.display = 'block';
         linkTool.querySelector('.link-remove').style.display = 'block';
-      } else {
-        linkTool.querySelector('.link-duplicate').style.display = 'none';
-        linkTool.querySelector('.link-remove').style.display = 'none';
-      }
+    } else {
+        if(this.builder.activeIcon) {
+            linkTool.querySelector('.link-duplicate').style.display = 'block';
+            linkTool.querySelector('.link-remove').style.display = 'block';
+        } else {
+            linkTool.querySelector('.link-duplicate').style.display = 'none';
+            linkTool.querySelector('.link-remove').style.display = 'none';
+        }
+    }
+    */
+    if (linkDisplay === 'inline' & !this.builder.activeIcon) {
+      linkTool.querySelector('.link-duplicate').style.display = 'none';
+      linkTool.querySelector('.link-remove').style.display = 'none';
+    } else {
+      linkTool.querySelector('.link-duplicate').style.display = 'block';
+      linkTool.querySelector('.link-remove').style.display = 'block';
     }
 
     // Button Stuff
@@ -106640,6 +107001,7 @@ class ContentBuilder {
       this.elmTool.repositionElementTool(true);
       this.element.image.imageTool.style.display = '';
       this.element.module.moduleTool.style.display = '';
+      this.element.hyperlink.linkTool.style.display = '';
       this.colTool.lockIndicator.style.display = '';
       return ret;
     };