@innovastudio/contentbox 1.6.71 → 1.6.73

package/public/contentbox/contentbox.esm.js

@@ -8889,9 +8889,11 @@ class Text {
 
     if (text.trim() === '') {
       elm.style.color = color;
+      elm.style.backgroundClip = '';
     } else {
       if (elm.innerText === text) {
         elm.style.color = color;
+        elm.style.backgroundClip = '';
       } else {
         this.builder.doc.execCommand('ForeColor', false, color); //Cleanup FONTs
 
@@ -10585,6 +10587,26 @@ class Text {
     }
   }
 
+  getElementHeight(element) {
+    if (!element) {
+      return 0;
+    }
+
+    const computedStyle = window.getComputedStyle(element); // Element height including padding and border, but not margin
+
+    const elementHeight = element.offsetHeight; // Extract numerical values for margin, padding, and border
+
+    const marginTop = parseFloat(computedStyle.marginTop);
+    const marginBottom = parseFloat(computedStyle.marginBottom);
+    const paddingTop = parseFloat(computedStyle.paddingTop);
+    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+    const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth); // Calculate total height considering margins, padding, and border
+
+    const totalHeight = elementHeight + marginTop + marginBottom + paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
+    return totalHeight;
+  }
+
 }
 
 /*
@@ -10667,7 +10689,13 @@ class PanelText {
                             <button title="${out('Color')}" class="btn-color is-btn-color"></button>
                         </div>
                     </div>
-                    <div>
+                    <div class="mr-8">
+                        <div class="label mt-2">${out('Gradient')}:</div>
+                        <div class="group">
+                            <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
+                        </div>
+                    </div>
+                    <div class="mr-8">
                         <div class="label mt-2">${out('Highlight')}:</div>
                         <div class="group">
                             <button title="${out('Color')}" class="btn-backcolor is-btn-color"></button>
@@ -10678,7 +10706,7 @@ class PanelText {
             </div>
 
 
-            <button class="accordion-item" aria-expanded="false" aria-controls="contenttext0">
+            <button class="accordion-item btn-placement-text" aria-expanded="false" aria-controls="contenttext0">
                 ${out('Placement')}
                 <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
             </button>
@@ -10802,11 +10830,22 @@ class PanelText {
     panel.insertAdjacentHTML('beforeend', html);
     this.panel = panel;
     const btnColor = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColor.addEventListener('click', () => {
       this.saveForUndo(true);
       let currentColor = btnColor.style.backgroundColor;
       const colorpicker = this.builder.editor.colorpicker();
       colorpicker.open(color => {
+        // remove gradient if exists
+        let elm = this.text.getElm();
+
+        if (elm.style.backgroundImage) {
+          elm.style.backgroundImage = '';
+          elm.style.backgroundClip = ''; // set gradient preview none
+
+          btnGradient.style.backgroundImage = '';
+        }
+
         this.text.setTextColor(color);
         btnColor.style.backgroundColor = color; // preview
         // this.builder.onChange();
@@ -10814,6 +10853,30 @@ class PanelText {
         this.builder.editor.onChange();
       }, currentColor, () => {}, btnColor, true); // overlay=true
     });
+    btnGradient.addEventListener('click', () => {
+      this.builder.editor.saveForUndo(true); // checkLater = true
+
+      let elm = this.text.getElm();
+      let gradientPicker = this.builder.editor.gradientpicker();
+      gradientPicker.open(elm, () => {
+        if (elm.style.backgroundImage) {
+          // apply gradient
+          elm.style.backgroundClip = 'text';
+          elm.style.color = 'transparent'; // set text color preview none
+
+          btnColor.style.backgroundColor = '';
+        } else {
+          // remove gradient
+          elm.style.backgroundClip = '';
+          elm.style.color = ''; // set text color preview back
+
+          setTimeout(() => {
+            let currentColor = this.text.getStyle(elm, 'color');
+            btnColor.style.backgroundColor = currentColor;
+          }, 1);
+        }
+      }, () => {}, btnGradient, true); // overlay=true
+    });
     const btnBackColor = panel.querySelector('.btn-backcolor');
     btnBackColor.addEventListener('click', () => {
       this.saveForUndo(true);
@@ -11072,6 +11135,14 @@ class PanelText {
     const btnColorPick = this.panel.querySelector('.btn-color');
     let currentColor = this.text.getStyle(activeElement, 'color');
     btnColorPick.style.backgroundColor = currentColor;
+    const btnGradient = this.panel.querySelector('.btn-gradient');
+
+    if (activeElement.style.backgroundImage) {
+      btnGradient.style.backgroundImage = activeElement.style.backgroundImage;
+    } else {
+      btnGradient.style.backgroundImage = '';
+    }
+
     const btnBackColorPick = this.panel.querySelector('.btn-backcolor');
     let currentBackColor = this.getHighlight(activeElement);
     btnBackColorPick.style.backgroundColor = currentBackColor;
@@ -11142,6 +11213,27 @@ class PanelText {
     */
 
 
+    const btnPlacementText = this.panel.querySelector('.btn-placement-text');
+    btnPlacementText.style.display = '';
+
+    try {
+      let totalElementHeight = 0;
+      let hasGrow = false;
+      Array.from(activeColumn.children).map(elm => {
+        totalElementHeight += this.text.getElementHeight(elm);
+        if (elm.classList.contains('grow')) hasGrow = true;
+      });
+      const diff = activeColumn.offsetHeight - totalElementHeight;
+
+      if (diff < 30 && !hasGrow) {
+        btnPlacementText.style.display = 'none';
+        btnPlacementText.setAttribute('aria-expanded', 'false');
+        btnPlacementText.nextElementSibling.style.display = 'none';
+        btnPlacementText.nextElementSibling.setAttribute('aria-hidden', 'true');
+      }
+    } catch (e) {// Do Nothing
+    }
+
     const config = this.builder.cssClasses;
     let elm = this.text.getElm();
 
@@ -24892,7 +24984,7 @@ class ImageAdjust {
 
 }
 
-class Modal$1 {
+class Modal {
   constructor() {
     this.modal = null;
     this.focusableElements = [];
@@ -25244,7 +25336,7 @@ class ControlPanel {
     }
 
     this.controlPanel = controlPanel;
-    this.modal = new Modal$1();
+    this.modal = new Modal();
     this.panelText = controlPanel.querySelector('.panel-text');
     this.panelImage = controlPanel.querySelector('.panel-image');
     this.panelVideo = controlPanel.querySelector('.panel-video');
@@ -30821,27 +30913,7 @@ class Util$1 {
       pop.classList.add('pop4');
       overlay.classList.add('pop4');
     }
-    const handlePopKeyDown = e => {
-      if (e.keyCode === 27) {
-        // escape key
-        overlay.remove();
-        pop.style.display = '';
-        pop.classList.remove('active');
-        pop.setAttribute('aria-hidden', true);
-        overlay.classList.remove('pop1');
-        overlay.classList.remove('pop2');
-        overlay.classList.remove('pop3');
-        overlay.classList.remove('pop4');
-        pop.classList.remove('pop1');
-        pop.classList.remove('pop2');
-        pop.classList.remove('pop3');
-        pop.classList.remove('pop4');
-        pop.removeEventListener('keydown', handlePopKeyDown);
-        if (cancelCallback) cancelCallback();
-        if (btn) btn.focus();
-      }
-    };
-    overlay.addEventListener('click', e => {
+    const close = () => {
       overlay.remove();
       pop.style.display = '';
       pop.classList.remove('active');
@@ -30857,6 +30929,17 @@ class Util$1 {
       pop.removeEventListener('keydown', handlePopKeyDown);
       if (cancelCallback) cancelCallback();
       if (btn) btn.focus();
+    };
+    this.hidePopOverlay = close; // so that the close() can be called programmatically (used by gradientpicker.js 411)
+
+    const handlePopKeyDown = e => {
+      if (e.keyCode === 27) {
+        // escape key
+        close();
+      }
+    };
+    overlay.addEventListener('click', e => {
+      close();
       e.preventDefault();
       e.stopImmediatePropagation();
     });
@@ -30876,13 +30959,9 @@ class Util$1 {
     // Hide other pops
     let elms = document.querySelectorAll('.is-pop.active');
     elms.forEach(otherPop => {
+      // do not close parent/caller pop
       let close = true;
-      let callerPop;
-      if (overlay) {
-        // do not close parent/caller pop
-        callerPop = btn.closest('.is-pop');
-        if (callerPop === otherPop) close = false;
-      }
+      if (otherPop.contains(btn)) close = false;
       if (otherPop !== pop && close) {
         otherPop.style.display = '';
         dom.removeClass(otherPop, 'active');
@@ -30908,9 +30987,9 @@ class Util$1 {
       if (!pop.contains(e.target) && !btn.contains(e.target)) {
         // click outside
 
-        if (e.target.closest('.is-pop-overlay')) return;
-        let overlayExist = document.querySelector('.is-pop-overlay');
-        if (overlayExist) return;
+        // if(e.target.closest('.is-pop-overlay')) return;
+        // let overlayExist = document.querySelector('.is-pop-overlay');
+        // if(overlayExist) return;
 
         // hide
         this.hidePop(pop);
@@ -42021,6 +42100,11 @@ const prepareSvgIcons = builder => {
                 <path d="M12 5l0 14"></path>
                 <path d="M5 12l14 0"></path>
             </symbol>
+
+            <symbol id="icon-minus" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
 };
@@ -53957,7 +54041,7 @@ function () {
   return EventEmitter;
 }();
 
-var EventEmitter$1$1 = EventEmitter$2;
+var EventEmitter$1$2 = EventEmitter$2;
 
 /*
 Copyright (c) 2019 Daybrush
@@ -66468,7 +66552,7 @@ var MoveableManager$1 = /*#__PURE__*/function (_super) {
       "mouseEnter": null,
       "mouseLeave": null
     };
-    _this._emitter = new EventEmitter$1$1();
+    _this._emitter = new EventEmitter$1$2();
     _this._prevTarget = null;
     _this._prevDragArea = false;
     _this._observer = null;
@@ -68397,7 +68481,7 @@ function __spreadArrays() {
  * Implement EventEmitter on object or component.
  */
 
-var EventEmitter =
+var EventEmitter$1 =
 /*#__PURE__*/
 function () {
   function EventEmitter() {
@@ -68630,7 +68714,7 @@ function () {
   return EventEmitter;
 }();
 
-var EventEmitter$1 = EventEmitter;
+var EventEmitter$1$1 = EventEmitter$1;
 
 /**
  * Moveable is Draggable! Resizable! Scalable! Rotatable!
@@ -68744,7 +68828,7 @@ function (_super) {
     });
   })], MoveableManager);
   return MoveableManager;
-}(EventEmitter$1);
+}(EventEmitter$1$1);
 
 var Moveable$1 =
 /*#__PURE__*/
@@ -78050,11 +78134,16 @@ class RowTool {
                             <a title="${util.out('More')}" id="tabRowMore" href="#" data-content="divRowMore">${util.out('More')}</a>
                         </div>
                         <div id="divRowGeneral" class="is-tab-content active" data-group="rowsettings" style="display:flex" tabindex="-1">
-                        
-                            <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                            <div style="display:flex;">
-                                <button title="${util.out('Background Color')}" class="input-row-bgcolor is-btn-color" style="margin-right:15px"></button>
-                                <button title="${util.out('Gradient')}" class="input-row-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+
+                            <div style="display:flex;gap:40px">
+                                <div>
+                                    <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                                    <button title="${util.out('Background Color')}" class="input-row-bgcolor is-btn-color" style="margin-right:15px"></button>
+                                </div>
+                                <div>
+                                    <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                                    <button title="${util.out('Gradient')}" class="input-row-gradient is-btn-color"></button>
+                                </div>
                             </div>
 
                             <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
@@ -78301,11 +78390,6 @@ class RowTool {
       });
 
       // Background gradient
-      // const gradientPicker = new GradientPicker({
-      //     colors: this.builder.colors,
-      //     gradientcolors: this.builder.opts.gradientcolors,
-      //     lang: this.builder.opts.lang
-      // }, this.builder);
       const gradientPicker = this.builder.gradientpicker();
       let btnRowGradient = rowSettings.querySelector('.input-row-gradient');
       btnRowGradient.addEventListener('click', () => {
@@ -78701,6 +78785,16 @@ class RowTool {
     } else {
       div.innerHTML = '';
     }
+
+    // Gradient
+    let btnGradient = this.rowSettings.querySelector('.input-row-gradient');
+    btnGradient.style.backgroundImage = '';
+    if (row.style.backgroundImage) {
+      if (row.style.backgroundImage.includes('linear')) {
+        let cssGradient = row.style.backgroundImage;
+        btnGradient.style.backgroundImage = cssGradient;
+      }
+    }
     const chkRowGrayscale = this.rowSettings.querySelector('.chk-row-grayscale');
     chkRowGrayscale.checked = false;
     if (row.style.filter) {
@@ -78859,7 +78953,6 @@ class RowAddTool {
   }
 }
 
-// import GradientPicker from './gradientpicker.js';
 class ColumnTool {
   constructor(builder) {
     this.builder = builder;
@@ -79633,10 +79726,15 @@ class ColumnTool {
                         </div>
                         <div id="divCellGeneral" class="is-tab-content active" data-group="cellsettings" style="display:flex" tabindex="-1">
                         
-                            <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                            <div style="display:flex;">
-                                <button title="${util.out('Background Color')}" class="input-cell-bgcolor is-btn-color" style="margin-right:15px"></button>
-                                <button title="${util.out('Gradient')}" class="input-cell-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                            <div style="display:flex;gap:40px">
+                                <div>
+                                    <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                                    <button title="${util.out('Background Color')}" class="input-cell-bgcolor is-btn-color" style="margin-right:15px"></button>
+                                </div>
+                                <div>
+                                    <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                                    <button title="${util.out('Gradient')}" class="input-cell-gradient is-btn-color"></button>
+                                </div>
                             </div>
 
                             <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
@@ -80028,12 +80126,6 @@ class ColumnTool {
       });
 
       // Background gradient
-      // const gradientPicker = new GradientPicker({
-      //     colors: this.builder.colors,
-      //     gradientcolors: this.builder.opts.gradientcolors,
-      //     lang: this.builder.opts.lang
-      // }, this.builder);
-
       const gradientPicker = this.builder.gradientpicker();
       let btnCellGradient = cellSettings.querySelector('.input-cell-gradient');
       btnCellGradient.addEventListener('click', () => {
@@ -80805,6 +80897,16 @@ class ColumnTool {
     } else {
       div.innerHTML = '';
     }
+
+    // Gradient
+    let btnGradient = this.cellSettings.querySelector('.input-cell-gradient');
+    btnGradient.style.backgroundImage = '';
+    if (cell.style.backgroundImage) {
+      if (cell.style.backgroundImage.includes('linear')) {
+        let cssGradient = cell.style.backgroundImage;
+        btnGradient.style.backgroundImage = cssGradient;
+      }
+    }
     const inpClickSrc = this.cellSettings.querySelector('.input-src');
     inpClickSrc.value = '';
     let clickUrl = cell.getAttribute('data-modal-url');
@@ -81641,11 +81743,14 @@ class ElementGeneralStyles {
     let panelStuff = builderStuff.querySelector('#divElementGeneral');
     this.panelStuff = panelStuff;
     const html = `
-                <div class="is-settings" style="width: 100%">
-                    <div class="is-label" style="margin:0 0 3px">${util.out('Background Color')}:</div>
-                    <div>
+                <div class="is-settings" style="width: 100%;display:flex;gap:40px">
+                    <div style="display:flex;flex-direction:column;align-items:flex-start;">
+                        <div style="padding-bottom: 7px;">${util.out('Background Color')}:</div>
                         <button title="${util.out('Background Color')}" class="input-elm-bgcolor is-btn-color" style="margin-right:15px"></button>
-                        <button title="${util.out('Gradient')}" class="input-elm-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                    </div>
+                    <div style="display:flex;flex-direction:column;align-items:flex-start;">
+                        <div style="padding-bottom: 7px;">${util.out('Gradient')}:</div>
+                        <button title="${util.out('Gradient')}" class="input-elm-gradient is-btn-color"></button>
                     </div>
                 </div>
 
@@ -81730,12 +81835,6 @@ class ElementGeneralStyles {
     });
 
     // Background gradient
-    // const gradientPicker = new GradientPicker({
-    //     colors: this.builder.colors,
-    //     gradientcolors: this.builder.opts.gradientcolors,
-    //     lang: this.builder.opts.lang
-    // }, this.builder);
-
     const gradientPicker = this.builder.gradientpicker();
     let btnElmGradient = panelStuff.querySelector('.input-elm-gradient');
     btnElmGradient.addEventListener('click', () => {
@@ -81934,6 +82033,16 @@ class ElementGeneralStyles {
     let btn = panelStuff.querySelector('.input-elm-bgcolor');
     if (s) btn.style.backgroundColor = s;else btn.style.backgroundColor = 'transparent';
 
+    // Gradient
+    let btnGradient = panelStuff.querySelector('.input-elm-gradient');
+    btnGradient.style.backgroundImage = '';
+    if (elm.style.backgroundImage) {
+      if (elm.style.backgroundImage.includes('linear')) {
+        let cssGradient = elm.style.backgroundImage;
+        btnGradient.style.backgroundImage = cssGradient;
+      }
+    }
+
     // Background image
     let imgUrl = '';
     const div = panelStuff.querySelector('.elm-bgimage-preview');
@@ -89665,7 +89774,8 @@ class ColorPicker {
       pickr.on('change', color => {
         if (poppicker.style.display !== 'flex') return;
         let s = color.toRGBA().toString(0);
-        this.opts.onPick(s);
+        if (!this.noCallback) this.opts.onPick(s);
+        this.noCallback = false; //just in case
       }).on('clear', () => {
         this.opts.onPick('');
         poppicker.querySelector('.pcr-result').value = ''; //clear
@@ -89824,6 +89934,7 @@ class ColorPicker {
       this.opts.color = color;
       this.setColor(color, true);
     }
+    this.noCallback = false;
   }
   openByTab(color) {
     // Rte
@@ -89839,9 +89950,10 @@ class ColorPicker {
   setColorRte(color) {
     this.pickrRte.setColor(color);
   }
-  setColor(color) {
+  setColor(color, noCallback) {
     //, noCallback
 
+    if (noCallback) this.noCallback = true; // will be passed to onChange, since the onChanhe calls onPick(color)
     this.pickr.setColor(color);
 
     // if(!noCallback) this.opts.onPick(color);
@@ -89871,451 +89983,601 @@ class ColorPicker {
   }
 }
 
-class Modal {
-  constructor(opts = {}) {
-    let defaults = {
-      animateModal: false,
-      elementToAnimate: '',
-      stuffPlacement: '#_cbhtml'
+class RoundedSlider {
+  constructor(element, settings = {}) {
+    const defaults = {
+      selector: '.myslider',
+      onStart: () => {}
     };
-    this.opts = Object.assign(this, defaults, opts);
-    this.id = this.makeId();
-    let builderStuff = document.querySelector(this.opts.stuffPlacement);
-    if (!builderStuff) {
-      builderStuff = document.createElement('div');
-      builderStuff.id = '_cbhtml';
-      document.body.appendChild(builderStuff);
-    }
-    this.builderStuff = builderStuff;
+    this.opts = Object.assign(this, defaults, settings);
+    this.startDrag = this.startDrag.bind(this);
+    this.onDrag = this.onDrag.bind(this);
+    this.endDrag = this.endDrag.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.element = element; //document.querySelector(this.opts.selector);
 
-    // Stuff placement for this (single) instance
-    const objStuff = document.createElement('div');
-    objStuff.id = this.id;
-    builderStuff.appendChild(objStuff);
-    this.objStuff = objStuff;
+    this.created = false;
   }
-  confirm(message, callback, animated) {
-    let 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('Delete')}" class="input-ok classic">${this.out('Delete')}</button>
-            </div>
-        </div>`;
-    let confirmModal = this.objStuff.querySelector('.is-confirm');
-    if (!confirmModal) {
-      this.objStuff.insertAdjacentHTML('beforeend', html);
-      confirmModal = this.builderStuff.querySelector('.is-confirm');
-    }
-    this.show(confirmModal, false, () => {
-      //this function runs when overlay is clicked. Remove modal.
-      confirmModal.parentNode.removeChild(confirmModal);
-
-      //do task
-      callback(false);
-    }, animated);
-    let buttonok = confirmModal.querySelector('.is-confirm .input-ok');
-    this.addEventListener(buttonok, 'click', () => {
-      this.hide(confirmModal);
-      confirmModal.parentNode.removeChild(confirmModal); //remove modal
-
-      //do task
-      callback(true);
+  create() {
+    if (this.created === true) return; // so that it is saved to call multiple times
+    this.created = true;
+    const element = this.element;
+    const container = document.createElement('div');
+    container.classList.add('roundslider-container');
+    container.innerHTML = `
+        <div class="roundslider">
+            <div class="knob"></div>
+        </div>
+        `;
+    element.insertAdjacentElement('afterend', container);
+    this.container = container;
+    const knob = container.querySelector('.knob');
+    const roundslider = container.querySelector('.roundslider');
+    const angleValue = element;
+    this.knob = knob;
+    this.roundslider = roundslider;
+    this.angleValue = angleValue;
+    this.isDragging = false;
+    this.angleOffset = 0;
+    knob.addEventListener('mousedown', this.startDrag);
+    document.addEventListener('mousemove', this.onDrag);
+    document.addEventListener('mouseup', this.endDrag);
+    knob.addEventListener('touchstart', this.startDrag, {
+      passive: false
     });
+    // document.addEventListener('touchmove', e => this.onDrag(e.touches[0]));
+    document.addEventListener('touchmove', this.handleTouchMove);
+    document.addEventListener('touchend', this.endDrag);
+    this.setKnobPosition(angleValue.value, true); // no trigger for initial create
+
+    element.style.display = 'none';
+  }
+  setValue(val, noTrigger = false) {
+    // true = no trigger only for setting angle position (gradientpicker.js 500)
+    this.setKnobPosition(val, noTrigger);
   }
-  show(modal, overlayStay, cancelCallback, animated) {
-    this.addClass(modal, 'active');
+  setKnobPosition(angle, noTrigger = false) {
+    const knob = this.knob;
+    const roundslider = this.roundslider;
+    const angleValue = this.angleValue;
+    const degToRad = deg => deg * Math.PI / 180;
+    const radius = roundslider.offsetWidth / 2;
+    const x = radius + radius * Math.cos(degToRad(angle - 90));
+    const y = radius + radius * Math.sin(degToRad(angle - 90));
+    knob.style.left = `${x - knob.offsetWidth / 2}px`;
+    knob.style.top = `${y - knob.offsetHeight / 2}px`;
+    angle = angle % 360;
 
-    // animated param (if set) will overide global setting
-    let animate = false;
-    if (!(typeof animated === 'undefined' || animated === null)) {
-      // animated param is set
-      animate = animated;
-    } else {
-      // if animated param is not set
-      animate = this.opts.animateModal; // use global setting
-    }
+    // angleValue.value = `${Math.round(angle)}°`; 
+    angleValue.value = `${Math.round(angle)}`;
+    knob.dataset.angle = angle.toString(); // Update the internal state with the new angle
 
-    if (animate) {
-      const buildercontainers = document.querySelectorAll(this.opts.elementToAnimate);
-      Array.prototype.forEach.call(buildercontainers, buildercontainer => {
-        // buildercontainer.style.transform = 'scale(0.98)';
-        // buildercontainer.style.WebkitTransform= 'scale(0.98)';
-        // buildercontainer.style.MozTransform= 'scale(0.98)';
-        buildercontainer.style.transform = `scale(${this.builder.opts.zoom - 0.02})`;
-        buildercontainer.style.WebkitTransform = `scale(${this.builder.opts.zoom - 0.02})`;
-        buildercontainer.style.MozTransform = `scale(${this.builder.opts.zoom - 0.02})`;
-        buildercontainer.setAttribute('scaled-down', '1');
+    if (!noTrigger) {
+      const event = new Event('input', {
+        bubbles: true
       });
+      angleValue.dispatchEvent(event);
     }
-    if (!modal.querySelector('.is-modal-overlay')) {
-      let html;
-      if (overlayStay) {
-        html = '<div class="is-modal-overlay overlay-stay"></div>';
-      } else {
-        html = '<div class="is-modal-overlay"></div>';
-      }
-      modal.insertAdjacentHTML('afterbegin', html);
-      if (!overlayStay) {
-        let overlay = modal.querySelector('.is-modal-overlay');
-        this.addEventListener(overlay, 'click', () => {
-          //cancelCallback
-          if (cancelCallback) cancelCallback();
-          this.hide(modal);
-        });
-      }
+  }
+  startDrag(e) {
+    e.preventDefault();
+    const radToDeg = rad => rad * 180 / Math.PI;
+    const knob = this.knob;
+    const roundslider = this.roundslider;
+    const angleValue = this.angleValue;
+    const rect = roundslider.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const mouseX = e.clientX || e.touches[0].clientX;
+    const mouseY = e.clientY || e.touches[0].clientY;
+    const startAngle = radToDeg(Math.atan2(mouseY - centerY, mouseX - centerX)) + 180;
+    const knobAngle = parseInt(knob.dataset.angle || `${angleValue.value}`, 10);
+    this.angleOffset = knobAngle - startAngle;
+    this.isDragging = true;
+    this.onStart();
+  }
+  handleTouchMove(e) {
+    if (e.touches && e.touches.length > 0) {
+      this.onDrag(e.touches[0]);
     }
   }
-  hide(modal) {
-    if (this.opts.elementToAnimate !== '') {
-      const buildercontainers = document.querySelectorAll(this.opts.elementToAnimate);
-      Array.prototype.forEach.call(buildercontainers, buildercontainer => {
-        // buildercontainer.style.transform = '';
-        // buildercontainer.style.WebkitTransform= '';
-        // buildercontainer.style.MozTransform= '';
-        if (buildercontainer.getAttribute('scaled-down')) {
-          buildercontainer.style.transform = `scale(${this.builder.opts.zoom})`;
-          buildercontainer.style.WebkitTransform = `scale(${this.builder.opts.zoom})`;
-          buildercontainer.style.MozTransform = `scale(${this.builder.opts.zoom})`;
-          buildercontainer.removeAttribute('scaled-down');
-        }
+  onDrag(e) {
+    if (!this.isDragging) return;
+    const radToDeg = rad => rad * 180 / Math.PI;
+    const knob = this.knob;
+    const roundslider = this.roundslider;
+    const rect = roundslider.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const mouseX = e.clientX || e.touches[0].clientX;
+    const mouseY = e.clientY || e.touches[0].clientY;
+    let angle = radToDeg(Math.atan2(mouseY - centerY, mouseX - centerX)) + 180;
+    angle += this.angleOffset;
+    angle = angle % 360;
+    angle = angle < 0 ? 359 + angle : angle;
+    knob.dataset.angle = angle.toString();
+    this.setKnobPosition(angle);
+  }
+  endDrag() {
+    this.isDragging = false;
+  }
+  destroy() {
+    const element = this.element;
+    const knob = this.knob;
+    const container = this.container;
+    knob.removeEventListener('mousedown', this.startDrag);
+    document.removeEventListener('mousemove', this.onDrag);
+    document.removeEventListener('mouseup', this.endDrag);
+    knob.removeEventListener('touchstart', this.startDrag);
+    // document.removeEventListener('touchmove', e => this.onDrag(e.touches[0]));
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('touchend', this.endDrag);
+    container.remove();
+    element.style.display = '';
+  }
+}
+
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+  on(event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  }
+  emit(event, ...args) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach(listener => {
+        listener(...args);
       });
     }
-    this.removeClass(modal, 'active');
   }
+}
 
-  // http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
-  makeId() {
-    let text = '';
-    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-    for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
-    let text2 = '';
-    let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
-    return text + text2;
+/*
+// Usage example
+
+const myGradientSlider = document.querySelector('.myslider');
+const slider = new GradientSlider(myGradientSlider);
+slider.draw([
+        { color: 'rgba(4, 98, 183, 1)', position: 0 },
+        { color: 'rgba(97, 110, 204, 1)', position: 25 },
+        { color: 'rgba(246, 108, 168, 1)', position: 50 },
+        { color: 'rgba(255, 211, 111, 1)', position: 75 },
+        { color: 'rgba(255, 253, 193, 1)', position: 100 }
+    ]
+);
+
+slider.on('slideStart', (sliderPoint) => {
+    console.log('Sliding started', sliderPoint);
+});
+slider.on('slideEnd', () => {
+    console.log('Sliding ended');
+});
+slider.on('change', (pointsArray) => {
+    console.log('Slider changed', pointsArray);
+});
+slider.on('slideChange', (pointsArray) => {
+    console.log('Slider changed', pointsArray);
+});
+*/
+
+class GradientSlider extends EventEmitter {
+  constructor(element, settings = {}) {
+    super(); // Call the constructor of EventEmitter first
+
+    const defaults = {
+      label: 'Gradient Slider'
+    };
+    this.opts = Object.assign(this, defaults, settings);
+    this.element = element;
+
+    // Generate a unique ID for this slider instance
+    this.uniqueId = GradientSlider.getUniqueId();
+    this.drag = this.drag.bind(this);
+    this.dragStop = this.dragStop.bind(this);
+    this.addColorOnClick = this.addColorOnClick.bind(this);
   }
-  addClass(element, classname) {
-    if (!element) return;
-    if (this.hasClass(element, classname)) return;
-    if (element.classList.length === 0) element.className = classname;else element.className = element.className + ' ' + classname;
+
+  // Static method to generate a unique ID
+  static getUniqueId() {
+    if (!this.uniqueCounter) {
+      this.uniqueCounter = 0; // Initialize if it doesn't exist
+    }
+
+    this.uniqueCounter++; // Increment the counter for each new instance
+    return `gradientSliderLabel${this.uniqueCounter}`; // Return a unique ID
   }
-  removeClass(element, classname) {
-    if (!element) return;
-    if (element.classList.length > 0) {
-      element.className = element.className.replace(classname, '');
+
+  constructGradientString(pointsArray) {
+    const gradientParts = pointsArray.map(color => `${color.color} ${color.position}%`);
+    return `linear-gradient(90deg, ${gradientParts.join(', ')})`;
+  }
+
+  /*
+  pointsArray = [
+      { color: 'rgba(4, 98, 183, 1)', position: 0 },
+      { color: 'rgba(246, 108, 168, 1)', position: 50 },
+      { color: 'rgba(255, 253, 193, 1)', position: 100 }
+  ]
+  */
+  draw(pointsArray) {
+    this.sliderPoints = [];
+    let label = this.element.querySelector('.visually-hidden');
+    if (!label) {
+      label = document.createElement('div');
+      label.className = 'visually-hidden';
+      label.id = this.uniqueId;
+      label.textContent = this.opts.label;
+      this.element.prepend(label); // Add label to the slider element
+    }
+
+    if (!this.sliderContainer) {
+      this.sliderContainer = document.createElement('div');
+      this.sliderContainer.className = 'gradient-slider-container';
+      this.element.insertAdjacentElement('afterend', this.sliderContainer);
+      this.shadowContainer = document.createElement('div');
+      this.shadowContainer.classList.add('gradient-slider-container-shadow');
+      this.sliderContainer.insertAdjacentElement('afterbegin', this.shadowContainer);
+      this.setupAddColorOnClick();
+    } else {
+      this.clearPoints();
+    }
+    pointsArray.forEach(point => {
+      const knob = document.createElement('div');
+      knob.className = 'slider-point';
+      knob.style.left = `${point.position}%`;
+      knob.style.backgroundColor = point.color;
+      this.sliderContainer.insertAdjacentElement('beforeend', knob);
+      this.sliderPoints.push(knob); // this.sliderPoints contains list of knobs
+
+      // Accessibility Enhancements
+      knob.setAttribute('tabindex', '0'); // Make it focusable
+      knob.setAttribute('role', 'slider');
+      knob.setAttribute('aria-valuemin', '0');
+      knob.setAttribute('aria-valuemax', '100');
+      knob.setAttribute('aria-valuenow', point.position);
+      knob.setAttribute('aria-valuetext', `Color: ${point.color}, Position: ${point.position}%`);
+      knob.setAttribute('aria-labelledby', this.uniqueId);
+
+      // Initialize drag functionality
+      knob.addEventListener('mousedown', this.dragStart.bind(this, knob), {
+        passive: false
+      });
+      knob.addEventListener('touchstart', this.dragStart.bind(this, knob), {
+        passive: false
+      });
+
+      // Keyboard interaction
+      knob.addEventListener('keydown', e => this.handleKeydown(e, knob));
+    });
+
+    // Update the slider's gradient background
+    const cssGradient = this.constructGradientString(pointsArray);
+    this.setContainerGradient(cssGradient);
+
+    // show hide container 
+    this.showHideContainer();
+  }
+  showHideContainer() {
+    let hide = false;
+    if (this.sliderPoints.length === 2) {
+      let color1 = this.sliderPoints[0].style.backgroundColor;
+      let color2 = this.sliderPoints[1].style.backgroundColor;
+      if (color1 === 'rgba(255, 255, 255, 1)' && color2 === 'rgba(255, 255, 255, 1)') {
+        hide = true;
+      }
+      if (color1 === 'rgb(255, 255, 255)' && color2 === 'rgb(255, 255, 255)') {
+        hide = true;
+      }
+    }
+    if (hide) {
+      this.sliderContainer.style.display = 'none';
+    } else {
+      this.sliderContainer.style.display = '';
     }
   }
-  hasClass(element, classname) {
-    if (!element) return false;
-    return element.classList ? element.classList.contains(classname) : new RegExp('\\b' + classname + '\\b').test(element.className);
+  updateColor(color, index) {
+    // update array (this also applies to the knob, because this.sliderPoints contains list of knobs)
+    this.sliderPoints[index].style.backgroundColor = color;
+
+    // show hide container 
+    this.showHideContainer();
+    this.update();
   }
-  addEventListener(parent, type, listener) {
-    parent.addEventListener(type, listener);
+  removeColor(index) {
+    // remove knob
+    let sliderKnobs = this.sliderContainer.querySelectorAll('.slider-point');
+    let knob = sliderKnobs[index];
+    knob.removeEventListener('mousedown', this.dragStart);
+    knob.removeEventListener('touchstart', this.dragStart);
+    knob.remove();
+
+    // update array
+    this.sliderPoints.splice(index, 1);
+    this.update();
   }
-}
+  setupAddColorOnClick() {
+    this.sliderContainer.addEventListener('click', this.addColorOnClick);
+    // this.sliderContainer.addEventListener('touchstart', this.addColorOnClick, {passive: true});
 
-// import ColorPicker from './colorpicker.js';
+    // Indicate that the user can add a knob by changing the cursor
+    this.sliderContainer.style.cursor = 'copy'; // Or use a custom cursor icon that indicates addition
+  }
 
-class GradientPicker {
-  constructor(opts = {}, builder) {
-    this.builder = builder;
-    let defaults = {
-      colors: ['#ff9f01', '#f57c00', '#e64918', '#d32f2f', '#5d4038', '#37474f', '#353535', '#fbc02c', '#b0b42a', '#689f39', '#c21f5b', '#7b21a2', '#522da8', '#616161', '#01b8c9', '#009688', '#388d3c', '#0388d0', '#1465c0', '#2f3f9e', '#9e9e9e'],
-      gradientcolors: [['linear-gradient(0deg, rgb(255, 57, 25), rgb(249, 168, 37))'], ['linear-gradient(0deg, rgb(255, 57, 25), rgb(255, 104, 15))'], ['linear-gradient(0deg, #FF5722, #FF9800)'], ['linear-gradient(0deg, #613ca2, rgb(110, 123, 217))'], ['linear-gradient(0deg, rgb(65, 70, 206), rgb(236, 78, 130))'], ['linear-gradient(0deg, rgb(0, 150, 102), rgb(90, 103, 197))'], ['linear-gradient(30deg, rgb(249, 119, 148), rgb(98, 58, 162))'], ['linear-gradient(0deg, rgb(223, 70, 137), rgb(90, 103, 197))'], ['linear-gradient(0deg, rgb(40, 53, 147), rgb(90, 103, 197))'], ['linear-gradient(0deg, rgb(21, 101, 192), rgb(52, 169, 239))'], ['linear-gradient(0deg, rgb(32, 149, 219), rgb(139, 109, 230))'], ['linear-gradient(0deg, rgb(90, 103, 197), rgb(0, 184, 201))'], ['linear-gradient(0deg, rgb(0, 184, 201), rgb(253, 187, 45))'], ['linear-gradient(0deg, rgb(255, 208, 100), rgb(239, 98, 159))'], ['linear-gradient(0deg, rgb(0, 214, 223), rgb(130, 162, 253))'], ['linear-gradient(0deg, rgb(50, 234, 251), rgb(248, 247, 126))'], ['linear-gradient(0deg, rgb(141, 221, 255), rgb(255, 227, 255))'], ['linear-gradient(0deg, rgb(255, 170, 170), rgb(255, 255, 200))'], ['linear-gradient(0deg, rgb(239, 239, 239), rgb(252, 252, 252))']],
-      animateModal: false,
-      elementToAnimate: '',
-      stuffPlacement: '#_cbhtml',
-      lang: []
-    };
-    this.opts = Object.assign(this, defaults, opts);
-    this.id = makeid();
-    let builderStuff = document.querySelector(this.opts.stuffPlacement);
-    if (!builderStuff) {
-      builderStuff = document.createElement('div');
-      builderStuff.id = '_cbhtml';
-      builderStuff.className = 'is-ui';
-      document.body.appendChild(builderStuff);
+  interpolateColor(color1) {
+    //, color2, fraction
+    // Iimplement color interpolation logic.
+    // fraction is a value between 0 and 1 indicating the relative position of the new stop.
+    return color1; // for simplicity, just return color1
+  }
+
+  addColorOnClick(e) {
+    /*
+    // Prevent the event if it's a touch event to stop it from triggering click events afterwards
+    e.preventDefault();
+     // Determine whether this is a touch event and extract the appropriate X position
+    let clientX;
+    if (e.touches) {
+        clientX = e.touches[0].clientX; // Use the first touch point
+    } else {
+        clientX = e.clientX; // Use the mouse click position
     }
-    this.builderStuff = builderStuff;
+    */
+    let clientX = e.clientX;
 
-    // Stuff placement for this (single) instance
-    const objStuff = document.createElement('div');
-    objStuff.id = this.id;
-    builderStuff.appendChild(objStuff);
-    this.objStuff = objStuff;
-    const modal = new Modal({
-      animateModal: this.opts.animateModal,
-      elementToAnimate: this.opts.elementToAnimate,
-      stuffPlacement: this.opts.stuffPlacement
-    });
-    this.modal = modal;
-    let html_gradcolors = '';
-    for (var i = 0; i < this.opts.gradientcolors.length; i++) {
-      html_gradcolors += `<button data-elmgradient="${this.opts.gradientcolors[i][0]}" data-textcolor="${this.opts.gradientcolors[i][1] ? this.opts.gradientcolors[i][1] : ''}" style="background-image:${this.opts.gradientcolors[i][0]};"></button>`;
+    // Ensure the action is triggered only when the container itself is touched, not its children
+    if (!e.target.classList.contains('gradient-slider-container-shadow')) return;
+    const rect = this.sliderContainer.getBoundingClientRect();
+    const clickX = clientX - rect.left; // Click position within the sliderContainer, in pixels
+    const width = rect.width;
+    const positionPercentage = clickX / width * 100;
+
+    // Find the two closest stops surrounding the click position
+    const sortedPoints = this.sliderPoints.map(knob => {
+      return {
+        position: parseFloat(knob.style.left),
+        color: knob.style.backgroundColor
+      };
+    }).sort((a, b) => a.position - b.position);
+
+    // Find the surrounding stops
+    let lowerStop = sortedPoints[0]; // Initialize with the first stop
+    let upperStop = sortedPoints[sortedPoints.length - 1]; // Initialize with the last stop
+    for (let i = 0; i < sortedPoints.length - 1; i++) {
+      if (positionPercentage >= sortedPoints[i].position && positionPercentage <= sortedPoints[i + 1].position) {
+        lowerStop = sortedPoints[i];
+        upperStop = sortedPoints[i + 1];
+        break;
+      }
     }
-    let html = `<div class="is-pop pickgradientcolor" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-            <div class="div-gradients" style="display: flex;flex-flow: wrap;margin-bottom:10px;">
-                ${html_gradcolors}
-                <button class="input-gradient-clear" title="${this.out('Clear')}" data-value="" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-            </div>
-            <div class="is-settings" style="margin-bottom:0">
-                <div class="is-label" style="margin-top:0">${this.out('Custom')}:</div>
-                <div class="div-custom-gradients" style="height:auto;display: flex;flex-flow: wrap;"></div>
-                <div style="display: flex;align-items: center;">
-                    <button title="${this.out('Select Color')}" class="input-gradient-color1 is-btn-color" data-value="dark" style="width:36px;height:36px;"></button>
-                    <button title="${this.out('Select Color')}" class="input-gradient-color2 is-btn-color" data-value="dark" style="width:36px;height:36px;"></button>
-                    <input type="text" class="input-gradient-deg" id="{id}" value="0" style="width:60px;height:35px;margin-left:7px;margin-right:5px;font-size:14px;"/> deg
-                </div>
-            </div>
-            <div class="is-settings" style="margin-bottom:0">
-                <button title="${this.out('Add')}" class="input-gradient-save classic" style="width:100%;border:none;"> ${this.out('Add')} </button>
-            </div>
-        </div>
-        `;
-    objStuff.insertAdjacentHTML('beforeend', html.replace(/{id}/g, this.makeId()));
-    const pickGradient = objStuff.querySelector('.is-pop.pickgradientcolor');
-    this.pickGradient = pickGradient;
-    const setupTabKeys = div => {
-      let inputs = div.querySelectorAll('a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), *[tabindex]');
-      if (inputs.length === 0) return;
-      let firstInput = inputs[0];
-      let lastInput = inputs[inputs.length - 1];
-      // firstInput.focus();
-
-      // console.log(lastInput)
-      // console.log(firstInput)
-
-      // Redirect last tab to first input
-      lastInput.addEventListener('keydown', e => {
-        if (e.which === 9 && !e.shiftKey) {
-          e.preventDefault();
-          firstInput.focus();
-        }
-      });
 
-      // Redirect first shift+tab to last input
-      firstInput.addEventListener('keydown', e => {
-        if (e.which === 9 && e.shiftKey) {
-          e.preventDefault();
-          lastInput.focus();
-        }
-      });
-    };
-    setupTabKeys(pickGradient);
-    new Draggable$2({
-      selector: '#' + this.id + ' .is-draggable'
+    // Calculate the fraction of the position between the lower and upper stops
+    const fraction = (positionPercentage - lowerStop.position) / (upperStop.position - lowerStop.position);
+
+    // Interpolate the color
+    const interpolatedColor = this.interpolateColor(lowerStop.color, upperStop.color, fraction);
+
+    // Now, add the color knob at the calculated position with the interpolated color
+    this.addColor(interpolatedColor, positionPercentage);
+  }
+  addColor(color, position) {
+    position = position - 4; // adjustment
+
+    // First, find the correct position to insert the new knob
+    let insertAt = this.sliderPoints.findIndex(knob => {
+      const knobPosition = parseFloat(knob.style.left);
+      return position < knobPosition;
     });
 
-    // const colorPicker = new ColorPicker({
-    //     colors: this.opts.colors,
-    //     animateModal: this.opts.animateModal,
-    //     elementToAnimate: this.opts.container,
-    //     lang: this.opts.lang
-    // });
-    const colorPicker = this.builder.colorPicker;
-    let btnColor1 = objStuff.querySelector('.input-gradient-color1');
-    btnColor1.addEventListener('click', () => {
-      colorPicker.open(color => {
-        if (color === '') color = 'transparent';
-
-        // set element style
-        let color1 = color;
-        let color2 = objStuff.querySelector('.input-gradient-color2').style.backgroundColor;
-        let deg = objStuff.querySelector('.input-gradient-deg').value;
-        if (color2 === '') color2 = '#ffffff';
-        let css = `linear-gradient(${deg}deg, ${color1}, ${color2})`;
-        this.targetElement.style.backgroundImage = css;
-        if (this.opts.onChange) this.opts.onChange(css);
-
-        // update preview
-        btnColor1.style.backgroundColor = color;
-      }, btnColor1.style.backgroundColor, () => {
-        btnColor1.removeAttribute('data-focus');
-        btnColor1.focus();
-      }, btnColor1, true); // overlay=true
-
-      btnColor1.setAttribute('data-focus', true);
-    });
-    let btnColor2 = objStuff.querySelector('.input-gradient-color2');
-    btnColor2.addEventListener('click', () => {
-      colorPicker.open(color => {
-        if (color === '') color = 'transparent';
-
-        // set element style
-        let color1 = objStuff.querySelector('.input-gradient-color1').style.backgroundColor;
-        let color2 = color;
-        let deg = objStuff.querySelector('.input-gradient-deg').value;
-        if (color1 === '') color1 = '#ffffff';
-        let css = `linear-gradient(${deg}deg, ${color1}, ${color2})`;
-        this.targetElement.style.backgroundImage = css;
-        if (this.opts.onChange) this.opts.onChange(css);
-
-        // update preview
-        btnColor2.style.backgroundColor = color;
-      }, btnColor2.style.backgroundColor, () => {
-        btnColor2.removeAttribute('data-focus');
-        btnColor2.focus();
-      }, btnColor2, true); // overlay=true
-
-      btnColor2.setAttribute('data-focus', true);
-    });
-
-    // Apply default gradient
-    let btns = objStuff.querySelectorAll('.div-gradients [data-elmgradient]');
-    Array.prototype.forEach.call(btns, btn => {
-      let grad = btn.getAttribute('data-elmgradient');
-      let textcolor = btn.getAttribute('data-textcolor');
-      btn.addEventListener('click', () => {
-        this.targetElement.style.backgroundImage = grad;
-        if (this.opts.onChange) this.opts.onChange(grad, textcolor);
-
-        // Read gradient
-        const s = this.targetElement.style.backgroundImage;
-        if (s.indexOf('linear-gradient') !== -1) {
-          const result = getGradient(s);
-          if (result !== null) {
-            try {
-              let color1 = result.colorStopList[0].color;
-              let color2 = result.colorStopList[1].color;
-              let line = result.line;
-              this.objStuff.querySelector('.input-gradient-color1').style.backgroundColor = color1;
-              this.objStuff.querySelector('.input-gradient-color2').style.backgroundColor = color2;
-              if (line.indexOf('deg') !== -1) {
-                this.objStuff.querySelector('.input-gradient-deg').value = line.replace('deg', '');
-              }
-            } catch (e) {
-              // Do Nothing
-            }
-          }
-        }
-        let btns = objStuff.querySelectorAll('.div-gradients [data-elmgradient]');
-        Array.prototype.forEach.call(btns, btn => {
-          this.removeClass(btn, 'active');
-        });
-        this.addClass(btn, 'active');
-      });
+    // If no suitable position is found (i.e., we're inserting at the end or the array is empty), adjust insertAt accordingly
+    if (insertAt === -1) insertAt = this.sliderPoints.length;
+
+    // Create and configure the new knob
+    const knob = document.createElement('div');
+    knob.className = 'slider-point';
+    knob.style.left = `${position}%`;
+    knob.style.backgroundColor = color;
+
+    // Accessibility Enhancements
+    knob.setAttribute('tabindex', '0');
+    knob.setAttribute('role', 'slider');
+    knob.setAttribute('aria-valuemin', '0');
+    knob.setAttribute('aria-valuemax', '100');
+    knob.setAttribute('aria-valuenow', position);
+    knob.setAttribute('aria-valuetext', `Color: ${color}, Position: ${position}%`);
+    knob.setAttribute('aria-labelledby', this.uniqueId);
+
+    // Initialize drag functionality
+    knob.addEventListener('mousedown', this.dragStart.bind(this, knob), {
+      passive: false
     });
-    let btnClear = objStuff.querySelector('.input-gradient-clear');
-    btnClear.addEventListener('click', () => {
-      this.targetElement.style.backgroundImage = '';
-      if (this.opts.onChange) this.opts.onChange('');
-      this.objStuff.querySelector('.input-gradient-color1').style.backgroundColor = '';
-      this.objStuff.querySelector('.input-gradient-color2').style.backgroundColor = '';
-      this.objStuff.querySelector('.input-gradient-deg').value = '0';
+    knob.addEventListener('touchstart', this.dragStart.bind(this, knob), {
+      passive: false
     });
-    let inputDeg = objStuff.querySelector('.input-gradient-deg');
-    inputDeg.addEventListener('keyup', () => {
-      // set element style
-      let color1 = objStuff.querySelector('.input-gradient-color1').style.backgroundColor;
-      let color2 = objStuff.querySelector('.input-gradient-color2').style.backgroundColor;
-      let deg = inputDeg.value;
+    if (insertAt === this.sliderPoints.length) {
+      // If inserting at the end, simply add the knob to the container
+      this.sliderContainer.appendChild(knob);
+    } else {
+      // Otherwise, insert the knob before the knob currently at the insertAt position
+      this.sliderContainer.insertBefore(knob, this.sliderPoints[insertAt]);
+    }
 
-      // if(color1 === '') color1 = '#ffffff';
-      // if(color2 === '') color2 = '#ffffff';
+    // Update the internal representation and the displayed gradient
+    this.sliderPoints.splice(insertAt, 0, knob); // Insert the knob into the internal array at the correct position
+
+    this.update(true); // Update the gradient and emit the change event
+  }
 
-      let css = `linear-gradient(${deg}deg, ${color1}, ${color2})`;
-      this.targetElement.style.backgroundImage = css;
-      if (this.opts.onChange) this.opts.onChange(css);
+  update(triggerAddpoint) {
+    // Generate pointsArray based on the points color & position
+    const pointsArray = this.sliderPoints.map(point => {
+      const position = parseFloat(point.style.left); // Assuming style.left is always in '%'
+      return {
+        color: point.style.backgroundColor,
+        position: position
+      };
     });
-    let btnSave = objStuff.querySelector('.input-gradient-save');
-    btnSave.addEventListener('click', () => {
-      let color1 = objStuff.querySelector('.input-gradient-color1').style.backgroundColor;
-      let color2 = objStuff.querySelector('.input-gradient-color2').style.backgroundColor;
-      let deg = inputDeg.value;
 
-      // if(color1 === '') color1 = '#ffffff';
-      // if(color2 === '') color2 = '#ffffff';
+    // Update the slider's gradient background
+    const cssGradient = this.constructGradientString(pointsArray);
+    this.setContainerGradient(cssGradient);
 
-      let css = `linear-gradient(${deg}deg, ${color1}, ${color2})`;
+    // Emit a "change" event with the pointsArray as the detail
+    this.emit('change', pointsArray, cssGradient);
+    if (triggerAddpoint) {
+      this.emit('addpoint', pointsArray, cssGradient);
+    }
+  }
+  dragStart(knob, e) {
+    this.knob = knob;
+    e.preventDefault();
+    this.isDragging = true;
 
-      // Save
-      let customgradcolors = [];
-      if (localStorage.getItem('_customgradcolors') !== null) {
-        customgradcolors = JSON.parse(localStorage.getItem('_customgradcolors'));
-      }
-      customgradcolors.push(css);
-      localStorage.setItem('_customgradcolors', JSON.stringify(customgradcolors));
+    // Get the initial offset by subtracting the slider point's left position from the cursor's X position
+    const startX = e.touches ? e.touches[0].clientX : e.clientX;
+    const pointRect = knob.getBoundingClientRect();
+    this.initialOffsetX = startX - pointRect.left;
+    document.addEventListener('mousemove', this.drag);
+    document.addEventListener('touchmove', this.drag);
+    document.addEventListener('mouseup', this.dragStop);
+    document.addEventListener('touchend', this.dragStop);
+    this.emit('slideStart', knob);
+  }
+  drag(e) {
+    if (!this.isDragging) return;
+    const knob = this.knob;
 
-      // Render custom gradients
-      if (localStorage.getItem('_customgradcolors') !== null) {
-        let customgradcolors = JSON.parse(localStorage.getItem('_customgradcolors'));
-        let html_gradcolors = '';
-        for (var i = 0; i < customgradcolors.length; i++) {
-          html_gradcolors += `<button class="is-elmgrad-item" data-elmgradient="${customgradcolors[i]}" style="background-image:${customgradcolors[i]};"><div class="is-elmgrad-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 255, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div></button>`;
-        }
-        this.objStuff.querySelector('.div-custom-gradients').innerHTML = html_gradcolors;
-      }
+    // Update knob (left) position
+    let touch = e.touches ? e.touches[0] : e;
+    let rect = this.sliderContainer.getBoundingClientRect();
+    let x = touch.clientX - rect.left - this.initialOffsetX; // Adjust position based on initial offset
+    let percentage = Math.max(0, Math.min(100, x / rect.width * 100));
+    knob.style.left = `${percentage}%`;
 
-      // Apply custom gradient
-      let btns = this.objStuff.querySelectorAll('.div-custom-gradients [data-elmgradient]');
-      Array.prototype.forEach.call(btns, btn => {
-        let grad = btn.getAttribute('data-elmgradient');
-        btn.addEventListener('click', () => {
-          this.targetElement.style.backgroundImage = grad;
-          if (this.opts.onChange) this.opts.onChange(grad);
-
-          // Read gradient
-          const s = this.targetElement.style.backgroundImage;
-          if (s.indexOf('linear-gradient') !== -1) {
-            const result = getGradient(s);
-            if (result !== null) {
-              try {
-                let color1 = result.colorStopList[0].color;
-                let color2 = result.colorStopList[1].color;
-                let line = result.line;
-                this.objStuff.querySelector('.input-gradient-color1').style.backgroundColor = color1;
-                this.objStuff.querySelector('.input-gradient-color2').style.backgroundColor = color2;
-                if (line.indexOf('deg') !== -1) {
-                  this.objStuff.querySelector('.input-gradient-deg').value = line.replace('deg', '');
-                }
-              } catch (e) {
-                // Do Nothing
-              }
-            }
-          }
-          let btns = objStuff.querySelectorAll('.div-custom-gradients [data-elmgradient]');
-          Array.prototype.forEach.call(btns, btn => {
-            this.removeClass(btn, 'active');
-          });
-          this.addClass(btn, 'active');
-        });
-      });
+    // Updating knob (left) position will also update the this.sliderPoints
+    // console.log(this.sliderPoints[1].style.left); // to test
 
-      // Delete custom gradient
-      let btnsRemoveGrad = this.objStuff.querySelectorAll('.div-custom-gradients .is-elmgrad-remove');
-      Array.prototype.forEach.call(btnsRemoveGrad, btnRemoveGrad => {
-        btnRemoveGrad.addEventListener('click', e => {
-          //Custom grad colors
-          let customgradcolors = [];
-          if (localStorage.getItem('_customgradcolors') !== null) {
-            customgradcolors = JSON.parse(localStorage.getItem('_customgradcolors'));
-          }
-          var css = btnRemoveGrad.parentNode.getAttribute('data-elmgradient');
-          for (var i = 0; i < customgradcolors.length; i++) {
-            if (customgradcolors[i] === css) {
-              customgradcolors.splice(i, 1);
-            }
-          }
-          localStorage.setItem('_customgradcolors', JSON.stringify(customgradcolors));
-          btnRemoveGrad.closest('.is-elmgrad-item').remove();
-          e.preventDefault();
-          e.stopImmediatePropagation();
-        });
-      });
+    // this.update() //The code below is similar to update(), only that it triggers sliderChange
+
+    // Generate pointsArray based on the points color & position
+    const pointsArray = this.sliderPoints.map(point => {
+      const position = parseFloat(point.style.left); // Assuming style.left is always in '%'
+      return {
+        color: point.style.backgroundColor,
+        position: position
+      };
     });
-  } //constructor
 
-  makeId() {
-    let text = '';
-    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-    for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
-    let text2 = '';
-    let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
-    return text + text2;
+    // Update the slider's gradient background
+    const cssGradient = this.constructGradientString(pointsArray);
+    this.setContainerGradient(cssGradient);
+
+    // Emit a "slideChange" event with the pointsArray as the detail
+    this.emit('slideChange', pointsArray, cssGradient);
+  }
+  dragStop() {
+    this.isDragging = false;
+    document.removeEventListener('mousemove', this.drag);
+    document.removeEventListener('touchmove', this.drag);
+    document.removeEventListener('mouseup', this.dragStop);
+    document.removeEventListener('touchend', this.dragStop);
+    this.emit('slideEnd');
+  }
+  clearPoints() {
+    // Remove all child slider points from the container
+    const sliderKnobs = this.sliderContainer.querySelectorAll('.slider-point');
+    sliderKnobs.forEach(knob => {
+      knob.removeEventListener('mousedown', this.dragStart);
+      knob.removeEventListener('touchstart', this.dragStart);
+      knob.remove();
+    });
+
+    // update array
+    this.sliderPoints = []; // Clear
   }
+
+  handleKeydown(e, sliderPoint) {
+    const key = e.key;
+    let newPosition = parseFloat(sliderPoint.style.left);
+    if (key === 'ArrowRight' || key === 'ArrowUp') {
+      newPosition = Math.min(100, newPosition + 1); // Increase position
+    } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
+      newPosition = Math.max(0, newPosition - 1); // Decrease position
+    } else {
+      return; // Ignore other keys
+    }
+
+    sliderPoint.style.left = `${newPosition}%`;
+    sliderPoint.setAttribute('aria-valuenow', newPosition);
+    sliderPoint.setAttribute('aria-valuetext', `Color: ${sliderPoint.style.backgroundColor}, Position: ${newPosition}%`);
+
+    // Update gradient and invoke onChange callback with the new positions
+    this.dragStop(); // Simulate dragStop to update positions and gradient
+  }
+
+  setContainerGradient(cssGradient) {
+    this.shadowContainer.style.backgroundImage = cssGradient;
+  }
+  destroy() {
+    if (this.element.nextElementSibling && this.element.nextElementSibling.classList.contains('gradient-slider-container')) {
+      this.clearPoints();
+      this.element.nextElementSibling.remove();
+    }
+  }
+}
+
+class GradientPicker {
+  constructor(builder) {
+    this.builder = builder;
+    this.builderStuff = this.builder.builderStuff;
+    this.util = this.builder.util;
+    let html_gradcolors = '';
+    this.builder.gradientColors.forEach(s => {
+      html_gradcolors += `
+            <button 
+            title="${this.out('Select')}" 
+            class="btn-graditem" data-value="${s}" 
+            style="background-image:${s}"></button>
+            `;
+    });
+    let html = `<div class="is-pop pickgradientcolor" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="div-presets">
+                ${html_gradcolors}
+            </div>
+            
+            <div class="label-saved">${this.out('Saved')}:</div>
+            <div class="div-saved"></div> 
+
+            <div class="label-saved">${this.out('Gradient Colors')}:</div>
+
+            <div class="gradient-slider" role="application"></div>
+
+            <div class="div-sort"></div> 
+
+            <div class="div-add">
+                <button title="${this.out('Clear')}" class="btn-clear">
+                    <svg><use xlink:href="#icon-eraser"></use></svg>
+                </button>
+                <input type="text" class="inp-angle" value="0">
+                <button title="${this.out('Add')}" class="btn-addstop"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
+            </div>
+
+            <div class="div-save">
+                <button title="${this.out('Save')}" class="btn-save">${this.out('Save')}</button>
+            </div>
+        `;
+    this.builderStuff.insertAdjacentHTML('beforeend', html);
+    const pickGradient = this.builderStuff.querySelector('.is-pop.pickgradientcolor');
+    this.pickGradient = pickGradient;
+    this.init();
+  } //constructor
+
   out(s) {
-    if (this.opts.lang) {
-      let val = this.opts.lang[s];
+    if (this.builder.lang) {
+      let val = this.builder.lang[s];
       if (val) return val;else {
         return s;
       }
@@ -90323,135 +90585,328 @@ class GradientPicker {
       return s;
     }
   }
-  open(elm, onChange, onFinish, btn, overlay) {
-    this.opts.onChange = onChange;
-    this.opts.onFinish = onFinish;
-    this.targetElement = elm;
-
-    // Read gradient
-    this.objStuff.querySelector('.input-gradient-color1').style.backgroundColor = '';
-    this.objStuff.querySelector('.input-gradient-color2').style.backgroundColor = '';
-    this.objStuff.querySelector('.input-gradient-deg').value = '0';
-    const s = elm.style.backgroundImage;
-    if (s.indexOf('linear-gradient') !== -1) {
-      const result = getGradient(s);
-      if (result !== null) {
-        try {
-          let color1 = result.colorStopList[0].color;
-          let color2 = result.colorStopList[1].color;
-          let line = result.line;
-          this.objStuff.querySelector('.input-gradient-color1').style.backgroundColor = color1;
-          this.objStuff.querySelector('.input-gradient-color2').style.backgroundColor = color2;
-          if (line.indexOf('deg') !== -1) {
-            this.objStuff.querySelector('.input-gradient-deg').value = line.replace('deg', '');
-          }
-        } catch (e) {
-          // Do Nothing
-        }
+  init() {
+    this.renderSavedGradients();
+    const divGradSlider = this.pickGradient.querySelector('.gradient-slider');
+    const gradSlider = new GradientSlider(divGradSlider, {
+      label: this.out('Gradient Slider')
+    });
+    this.gradSlider = gradSlider;
+    gradSlider.on('slideStart', () => {
+      this.builder.uo.saveForUndo(true);
+    });
+    gradSlider.on('slideEnd', () => {
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
+    });
+    gradSlider.on('slideChange', pointsArray => {
+      this.colorsPosArray = pointsArray;
+      this.applyGradient();
+    });
+    gradSlider.on('change', pointsArray => {
+      this.colorsPosArray = pointsArray;
+      this.applyGradient();
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
+    });
+    gradSlider.on('addpoint', () => {
+      this.renderColorStops();
+    });
+    const inpAngle = this.pickGradient.querySelector('.inp-angle');
+    this.slider = new RoundedSlider(inpAngle, {
+      onStart: () => {
+        this.builder.uo.saveForUndo(true); // checkLater = true
       }
-    }
+    });
+
+    inpAngle.oninput = () => {
+      this.angle = inpAngle.value;
+      this.applyGradient();
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
+    };
+    const btnAddStop = this.pickGradient.querySelector('.btn-addstop');
+    if (btnAddStop) btnAddStop.addEventListener('click', () => {
+      this.builder.uo.saveForUndo();
+      const lastItem = this.colorsPosArray[this.colorsPosArray.length - 1];
+      lastItem.position = lastItem.position - 15;
+      this.colorsPosArray.push({
+        color: lastItem.color,
+        position: 100
+      });
+      this.renderColorPositions();
+      this.renderColorStops();
+      this.applyGradient();
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
+    });
+    const btnSave = this.pickGradient.querySelector('.btn-save');
+    if (btnSave) btnSave.addEventListener('click', () => {
+      this.saveGradient();
+      this.renderSavedGradients();
+    });
+    const btnClear = this.pickGradient.querySelector('.btn-clear');
+    if (btnClear) btnClear.addEventListener('click', () => {
+      this.builder.uo.saveForUndo();
+      this.angle = 0;
+      this.renderAngle();
+      this.colorsPosArray = [{
+        color: 'rgba(255, 255, 255, 1)',
+        position: 0
+      }, {
+        color: 'rgba(255, 255, 255, 1)',
+        position: 100
+      }];
+      this.renderColorPositions();
+      this.renderColorStops();
+
+      // this.applyGradient();
+      this.element.style.backgroundImage = '';
+      this.btn.style.backgroundImage = '';
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
+    });
 
-    // Save original style
-    this.original = s;
+    // presets
+    const divPreset = this.pickGradient.querySelector('.div-presets');
+    const btnApply = divPreset.querySelectorAll('.btn-graditem');
+    btnApply.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.uo.saveForUndo();
+        let cssGradient = btn.getAttribute('data-value');
+        const angle = this.extractAngle(cssGradient);
+        this.angle = angle;
+        this.renderAngle();
+        const colorsPosArray = this.extractColorsPos(cssGradient);
+        this.colorsPosArray = colorsPosArray;
+        this.renderColorPositions();
+        this.renderColorStops();
+        this.applyGradient();
+        if (this.onChange) this.onChange();
+        this.builder.onChange();
+      });
+    });
+  }
+  saveGradient() {
+    let gradient = {
+      angle: this.angle,
+      colors: this.colorsPosArray
+    };
+    this.savedGrads.push(gradient);
+    localStorage.setItem('_savedgrads', JSON.stringify(this.savedGrads));
+  }
+  renderSavedGradients() {
+    let savedGrads = [];
+    if (localStorage.getItem('_savedgrads') !== null) {
+      savedGrads = JSON.parse(localStorage.getItem('_savedgrads'));
+    }
+    this.savedGrads = savedGrads;
 
-    // Render custom gradients
+    // backward (move old saved gradients to the new. Then delete the old)
+    let oldGrads = [];
     let customgradcolors = [];
     if (localStorage.getItem('_customgradcolors') !== null) {
       customgradcolors = JSON.parse(localStorage.getItem('_customgradcolors'));
-      let html_gradcolors = '';
-      for (var i = 0; i < customgradcolors.length; i++) {
-        html_gradcolors += `<button class="is-elmgrad-item" data-elmgradient="${customgradcolors[i]}" style="background-image:${customgradcolors[i]};"><div class="is-elmgrad-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 255, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div></button>`;
-      }
-      this.objStuff.querySelector('.div-custom-gradients').innerHTML = html_gradcolors;
+      customgradcolors.forEach(cssGradient => {
+        const colorsPosArray = this.extractColorsPos(cssGradient);
+        const angle = this.extractAngle(cssGradient);
+        let gradient = {
+          angle: angle,
+          colors: colorsPosArray
+        };
+        oldGrads.push(gradient);
+      });
+      Array.prototype.push.apply(this.savedGrads, oldGrads); // combine old with the new
+      localStorage.setItem('_savedgrads', JSON.stringify(this.savedGrads));
+      localStorage.removeItem('_customgradcolors');
     }
+    // /backward
 
-    // Apply custom gradient
-    let btns = this.objStuff.querySelectorAll('.div-custom-gradients [data-elmgradient]');
-    Array.prototype.forEach.call(btns, btn => {
-      let grad = btn.getAttribute('data-elmgradient');
+    const divSaved = this.pickGradient.querySelector('.div-saved');
+    const labelSaved = this.pickGradient.querySelector('.label-saved');
+    let html = '';
+    savedGrads.forEach((gradient, index) => {
+      let angle = gradient.angle;
+      let colorsPosArray = gradient.colors;
+      let cssGradient = this.constructGradientString(colorsPosArray, angle); // set the angle
+      html += `
+                <div>
+                    <button 
+                        data-index="${index}"
+                        title="${this.out('Select')}" 
+                        class="btn-graditem" data-value="${cssGradient}" 
+                        style="background-image:${cssGradient}"></button>
+
+                    <button title="${this.out('Remove')}" class="btn-remove">
+                        <svg class="is-icon-flex"><use xlink:href="#icon-minus"></use></svg>
+                    </button>
+                </div>
+                `;
+    });
+    divSaved.innerHTML = html;
+    if (savedGrads.length === 0) {
+      divSaved.style.display = 'none';
+      labelSaved.style.display = 'none';
+    } else {
+      divSaved.style.display = '';
+      labelSaved.style.display = '';
+    }
+    const btnApply = divSaved.querySelectorAll('.btn-graditem');
+    btnApply.forEach(btn => {
       btn.addEventListener('click', () => {
-        this.targetElement.style.backgroundImage = grad;
-        if (this.opts.onChange) this.opts.onChange(grad);
-
-        // Read gradient
-        const s = this.targetElement.style.backgroundImage;
-        if (s.indexOf('linear-gradient') !== -1) {
-          const result = getGradient(s);
-          if (result !== null) {
-            try {
-              let color1 = result.colorStopList[0].color;
-              let color2 = result.colorStopList[1].color;
-              let line = result.line;
-              this.objStuff.querySelector('.input-gradient-color1').style.backgroundColor = color1;
-              this.objStuff.querySelector('.input-gradient-color2').style.backgroundColor = color2;
-              if (line.indexOf('deg') !== -1) {
-                this.objStuff.querySelector('.input-gradient-deg').value = line.replace('deg', '');
-              }
-            } catch (e) {
-              // Do Nothing
-            }
-          }
-        }
-        let btns = this.objStuff.querySelectorAll('.div-custom-gradients [data-elmgradient]');
-        Array.prototype.forEach.call(btns, btn => {
-          this.removeClass(btn, 'active');
-        });
-        this.addClass(btn, 'active');
+        this.builder.uo.saveForUndo();
+        let cssGradient = btn.getAttribute('data-value');
+        const angle = this.extractAngle(cssGradient);
+        this.angle = angle;
+        this.renderAngle();
+        const colorsPosArray = this.extractColorsPos(cssGradient);
+        this.colorsPosArray = colorsPosArray;
+        this.renderColorPositions();
+        this.renderColorStops();
+        this.applyGradient();
+        if (this.onChange) this.onChange();
+        this.builder.onChange();
       });
     });
-
-    // Delete custom gradient
-    let btnsRemoveGrad = this.objStuff.querySelectorAll('.div-custom-gradients .is-elmgrad-remove');
-    Array.prototype.forEach.call(btnsRemoveGrad, btnRemoveGrad => {
-      btnRemoveGrad.addEventListener('click', e => {
-        //Custom grad colors
-        let customgradcolors = [];
-        if (localStorage.getItem('_customgradcolors') !== null) {
-          customgradcolors = JSON.parse(localStorage.getItem('_customgradcolors'));
-        }
-        var css = btnRemoveGrad.parentNode.getAttribute('data-elmgradient');
-        for (var i = 0; i < customgradcolors.length; i++) {
-          if (customgradcolors[i] === css) {
-            customgradcolors.splice(i, 1);
-          }
+    const btnRemove = divSaved.querySelectorAll('.btn-remove');
+    btnRemove.forEach(btn => {
+      btn.addEventListener('click', e => {
+        let index = btn.getAttribute('data-index');
+        btn.parentNode.remove();
+        this.removeItemByIndex(this.savedGrads, index);
+        localStorage.setItem('_savedgrads', JSON.stringify(this.savedGrads));
+        if (this.savedGrads.length === 0) {
+          divSaved.style.display = 'none';
+          labelSaved.style.display = 'none';
+        } else {
+          divSaved.style.display = '';
+          labelSaved.style.display = '';
         }
-        localStorage.setItem('_customgradcolors', JSON.stringify(customgradcolors));
-        btnRemoveGrad.closest('.is-elmgrad-item').remove();
         e.preventDefault();
         e.stopImmediatePropagation();
       });
     });
-    const handleKeyDown = e => {
-      if (e.keyCode === 27) {
-        // escape key
-        this.pickGradient.classList.remove('active'); // hide
-
-        this.pickGradient.removeEventListener('keydown', handleKeyDown);
+  }
+  applyGradient() {
+    let cssGradient;
+    if (this.colorsPosArray === 0) {
+      cssGradient = '';
+    } else {
+      cssGradient = this.constructGradientString(this.colorsPosArray);
+    }
 
-        // no change
-        if (this.opts.onFinish) {
-          this.opts.onFinish(false);
-        }
+    // apply to element
+    this.element.style.backgroundImage = cssGradient;
+    this.btn.style.backgroundImage = cssGradient;
+  }
+  renderColorStops() {
+    if (this.colorsPosArray.length === 0) {
+      this.colorsPosArray = [{
+        color: 'rgba(255, 255, 255, 1)',
+        position: 0
+      }, {
+        color: 'rgba(255, 255, 255, 1)',
+        position: 100
+      }];
+    }
+    let htmlStop = '';
+    this.colorsPosArray.forEach((item, index) => {
+      htmlStop += `<div>
+                <button data-color="${item.color}" 
+                    data-index="${index}"
+                    title="${this.out('Select Color')}" 
+                    class="btn-colorstop is-btn-color" 
+                    data-value="${item.color}" 
+                    style="background-color:${item.color}"></button>
+
+                <button title="${this.out('Remove')}" class="btn-remove">
+                    <svg class="is-icon-flex"><use xlink:href="#icon-minus"></use></svg>
+                </button>
+            </div>`;
+    });
+    const divSort = this.pickGradient.querySelector('.div-sort');
+    divSort.innerHTML = htmlStop;
+    new Sortable$1(divSort, {
+      animation: 600,
+      dragClass: 'hide-drag-class',
+      onStart: () => {},
+      onSort: () => {
+        // TODO
+
+        const btnPicks = this.pickGradient.querySelectorAll('.btn-colorstop');
+        let colors = [];
+        btnPicks.forEach(btn => {
+          let color = btn.style.backgroundColor;
+          colors.push(color);
+        });
+        this.colorsPosArray.map((item, index) => {
+          item.color = colors[index];
+        });
+        this.gradSlider.draw(this.colorsPosArray);
+        this.renderColorStops();
+        this.applyGradient();
+        if (this.onChange) this.onChange();
+        this.builder.onChange();
       }
-    };
+    });
+    const colorPicker = this.builder.colorPicker;
+    const btnPicks = this.pickGradient.querySelectorAll('.btn-colorstop');
+    btnPicks.forEach((btn, index) => {
+      btn.addEventListener('click', () => {
+        this.builder.uo.saveForUndo(true);
+        colorPicker.open(color => {
+          if (color === '') {
+            const allow = this.allowRemoveStop();
+            if (allow) {
+              // remove
+              btn.parentNode.querySelector('.btn-remove').click();
+              this.builder.util.hidePopOverlay(); // if pop is opened using overlay, to programmatically close, use this
+              return;
+            }
+          }
+          if (color === '') color = 'rgba(255, 255, 255, 1)'; // gradient stop requires value
 
-    // this.modal.show(this.pickGradient, false, ()=>{
+          btn.setAttribute('data-color', color);
+          btn.style.backgroundColor = color;
+          this.gradSlider.updateColor(color, index); // triggers gradSlider.on('change')
+        }, btn.style.backgroundColor, () => {
+          btn.removeAttribute('data-focus');
+          btn.focus();
+        }, btn, true); // overlay=true
 
-    //     this.pickGradient.removeEventListener('keydown', handleKeyDown);
+        btn.setAttribute('data-focus', true);
+      });
+    });
+    const btnRemove = divSort.querySelectorAll('.btn-remove');
+    btnRemove.forEach((btn, index) => {
+      btn.addEventListener('click', e => {
+        this.builder.uo.saveForUndo();
+        const allow = this.allowRemoveStop();
+        if (allow) {
+          btn.parentNode.remove();
+          this.colorsPosArray.splice(index, 1);
+          this.renderColorStops(); // a must
 
-    //     if(this.original === this.targetElement.style.backgroundImage) {
-    //         // no change
-    //         if(this.opts.onFinish) {
-    //             this.opts.onFinish(false);
-    //         }
-    //     } else {
-    //         // changed
-    //         if(this.opts.onFinish) {
-    //             this.opts.onFinish(true);
-    //         }
-    //     }
+          this.gradSlider.removeColor(index);
+        }
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+    });
+  }
+  renderColorPositions() {
+    this.gradSlider.draw(this.colorsPosArray);
+  }
+  renderAngle() {
+    const inpAngle = this.pickGradient.querySelector('.inp-angle');
+    inpAngle.value = this.angle;
+    if (this.slider.created) this.slider.setValue(this.angle, true); // use only after slider.create()
+    // true = no trigger only for setting angle position
+  }
+
+  open(elm, onChange, onFinish, btn, overlay) {
+    // Pop Stuff first
 
-    // }, false);
     if (!btn) {
       const iframes = document.getElementsByTagName('iframe');
       for (let i = 0; i < iframes.length; i++) {
@@ -90468,7 +90923,7 @@ class GradientPicker {
       if (!btn) btn = document.activeElement;
     }
     let popGradient = this.pickGradient;
-    this.builder.util.showPop(popGradient, false, btn, overlay);
+    this.builder.util.showPop(popGradient, onFinish, btn, overlay);
     const w = popGradient.offsetWidth;
     const h = popGradient.offsetHeight;
     const newPos = this.getElementPosition(btn);
@@ -90539,29 +90994,126 @@ class GradientPicker {
       };
       doc.addEventListener('click', handlePopClickOut);
     }
-    this.pickGradient.addEventListener('keydown', handleKeyDown);
 
-    // const btn = this.pickGradient.querySelector('button');
-    // btn.focus();
+    // Gradient Stuff
+
+    this.element = elm;
+    this.btn = btn;
+    this.onChange = onChange;
+    // this.onFinish = onFinish; // used in showPop below
+
+    let cssGradient = elm.style.backgroundImage;
+    if (!cssGradient) {
+      this.angle = 0;
+      this.renderAngle();
+      this.colorsPosArray = [{
+        color: 'rgba(255, 255, 255, 1)',
+        position: 0
+      }, {
+        color: 'rgba(255, 255, 255, 1)',
+        position: 100
+      }];
+      this.renderColorPositions();
+      this.renderColorStops();
+    } else {
+      const angle = this.extractAngle(cssGradient);
+      this.angle = angle;
+      this.renderAngle();
+      const colorsPosArray = this.extractColorsPos(cssGradient);
+      this.colorsPosArray = colorsPosArray;
+      this.renderColorPositions();
+      this.renderColorStops();
+    }
+    setTimeout(() => {
+      this.slider.create();
+    }, 0);
   }
+  extractColorsPos(gradientString) {
+    // Regular expression to match rgb(a) colors and hex colors (with optional alpha) and their positions
+    const colorPositionRegex = /((rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*\d*\.?\d+\s*)?\)|#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?))(?:\s+(\d+)%\s*)?/g;
+    const matches = [...gradientString.matchAll(colorPositionRegex)];
+    let colorsWithPositions = matches.map(match => ({
+      color: match[1],
+      // The color value
+      position: match[5] ? parseInt(match[5], 10) : undefined // The position, if present
+    }));
 
-  addClass(element, classname) {
-    if (!element) return;
-    if (this.hasClass(element, classname)) return;
-    if (element.classList.length === 0) element.className = classname;else element.className = element.className + ' ' + classname;
-    //else element.classList.add(classname); //error if there is -
+    // Additional operation to correctly parse positions
+    const positionMatches = [...gradientString.matchAll(/\d+\.?\d*%/g)].map(match => parseFloat(match[0]));
+    positionMatches.forEach((position, index) => {
+      if (colorsWithPositions[index]) {
+        colorsWithPositions[index].position = position;
+      }
+    });
+
+    // For gradients without explicit positions, we'll distribute positions evenly
+    if (colorsWithPositions.some(c => c.position === undefined)) {
+      const step = 100 / (colorsWithPositions.length - 1);
+      colorsWithPositions.forEach((c, i) => c.position = i * step);
+    }
+    return colorsWithPositions;
+  }
+  extractAngle(gradientString) {
+    const anglePattern = /linear-gradient\((\d+)deg,/;
+    const match = anglePattern.exec(gradientString);
+    if (match && match[1]) {
+      return parseInt(match[1], 10);
+    } else {
+      return 0;
+    }
   }
 
-  removeClass(element, classname) {
-    if (!element) return;
-    if (element.classList.length > 0) {
-      element.className = element.className.replace(classname, '');
+  // Utils
+
+  removeItemByIndex(arr, index) {
+    if (index > -1 && index < arr.length) {
+      arr.splice(index, 1);
     }
+    return arr;
   }
-  hasClass(element, classname) {
-    if (!element) return false;
-    return element.classList ? element.classList.contains(classname) : new RegExp('\\b' + classname + '\\b').test(element.className);
+  allowRemoveStop() {
+    const divSort = this.pickGradient.querySelector('.div-sort');
+    const btns = divSort.querySelectorAll('button[data-color]');
+    if (btns.length === 2) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  convertColorsToGradient(colorsArray, deg = 0) {
+    let gradientString = `linear-gradient(${deg}deg, `;
+    colorsArray.forEach((color, index) => {
+      gradientString += color;
+      if (index < colorsArray.length - 1) {
+        gradientString += ', ';
+      }
+    });
+    gradientString += ')';
+    return gradientString;
+  }
+  constructGradientString(points, angle) {
+    const gradientParts = points.map(color => `${color.color} ${color.position}%`);
+    if (angle) {
+      return `linear-gradient(${angle}deg, ${gradientParts.join(', ')})`;
+    } else {
+      return `linear-gradient(${this.angle}deg, ${gradientParts.join(', ')})`;
+    }
+  }
+  areArraysIdentical(arr1, arr2) {
+    if (arr1.length !== arr2.length) {
+      return false; // Arrays of different lengths cannot be identical
+    }
+
+    for (let i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false; // Found elements that are not the same
+      }
+    }
+
+    return true; // All elements are the same and in the same order
   }
+
+  // Pop stuff
   getElementPosition(element) {
     const top = element.getBoundingClientRect().top;
     const left = element.getBoundingClientRect().left;
@@ -90586,156 +91138,6 @@ class GradientPicker {
   }
 }
 
-// source: http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
-function makeid() {
-  let text = '';
-  let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-  for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
-  let text2 = '';
-  let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
-  return text + text2;
-}
-
-// source: https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex 
-function getGradient(input) {
-  var result,
-    regExpLib = generateRegExp(),
-    //rGradientEnclosedInBrackets = /.*gradient\s*\(((?:\([^\)]*\)|[^\)\(]*)*)\)/,// Captures inside brackets - max one additional inner set.
-    rGradientEnclosedInBrackets = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/,
-    // Oct 29, 2019
-    match = rGradientEnclosedInBrackets.exec(input);
-  if (match !== null) {
-    // Get the parameters for the gradient
-    result = parseGradient(regExpLib, match[1]);
-    if (result.original.trim() !== match[1].trim()) {
-      // Did not match the input exactly - possible parsing error.
-      result.parseWarning = true;
-    }
-  } else {
-    result = 'Failed to find gradient';
-  }
-  return result;
-}
-var combineRegExp = function (regexpList, flags) {
-  var i,
-    source = '';
-  for (i = 0; i < regexpList.length; i++) {
-    if (typeof regexpList[i] === 'string') {
-      source += regexpList[i];
-    } else {
-      source += regexpList[i].source;
-    }
-  }
-  return new RegExp(source, flags);
-};
-var generateRegExp = function () {
-  // Note any variables with "Capture" in name include capturing bracket set(s).
-  var searchFlags = 'gi',
-    // ignore case for angles, "rgb" etc
-    rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/,
-    // Angle +ive, -ive and angle types
-    rSideCornerCapture = /to\s+((?:(?:left|right)(?:\s+(?:top|bottom))?))/,
-    // optional 2nd part
-    rComma = /\s*,\s*/,
-    // Allow space around comma.
-    //rColorHex = /\#(?:[a-f0-9]{6}|[a-f0-9]{3})/, // 3 or 6 character form
-    rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/,
-    // 3 or 6 character form // Oct 29, 2019
-    rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/,
-    // "(1, 2, 3)"
-    rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/,
-    // "(1, 2, 3, 4)"
-    rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/,
-    // ".9", "-5px", "100%".
-    rKeyword = /[_a-z-][_a-z0-9-]*/,
-    // "red", "transparent", "border-collapse".
-    rColor = combineRegExp(['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'], ''),
-    rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], ''),
-    // Single Color Stop, optional %, optional length.
-    rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], ''),
-    // List of color stops min 1.
-    rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], ''),
-    // Angle or SideCorner
-    rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags),
-    // Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
-    rColorStopSearch = combineRegExp(['\\s*(', rColor, ')', '(?:\\s+', '(', rValue, '))?', '(?:', rComma, '\\s*)?'], searchFlags); // Capture 1:"color" and 2:"position" (optional).
-
-  return {
-    gradientSearch: rGradientSearch,
-    colorStopSearch: rColorStopSearch
-  };
-};
-var parseGradient = function (regExpLib, input) {
-  var result, matchGradient, matchColorStop, stopResult;
-
-  // reset search position, because we reuse regex.
-  regExpLib.gradientSearch.lastIndex = 0;
-  matchGradient = regExpLib.gradientSearch.exec(input);
-  if (matchGradient !== null) {
-    result = {
-      original: matchGradient[0],
-      colorStopList: []
-    };
-
-    // // Line (Angle or Side-Corner).
-    // if (!!matchGradient[1]) {
-    //     result.line = matchGradient[1];
-    // }
-    // // Angle or undefined if side-corner.
-    // if (!!matchGradient[2]) {
-    //     result.angle = matchGradient[2];
-    // }
-    // // Side-corner or undefined if angle.
-    // if (!!matchGradient[3]) {
-    //     result.sideCorner = matchGradient[3];
-    // }
-
-    // Oct 29, 2019
-    // Line (Angle or Side-Corner).
-    if (matchGradient[1]) {
-      result.line = matchGradient[1];
-    }
-    // Angle or undefined if side-corner.
-    if (matchGradient[2]) {
-      result.angle = matchGradient[2];
-    }
-    // Side-corner or undefined if angle.
-    if (matchGradient[3]) {
-      result.sideCorner = matchGradient[3];
-    }
-
-    // reset search position, because we reuse regex.
-    regExpLib.colorStopSearch.lastIndex = 0;
-
-    // Loop though all the color-stops.
-    matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
-    while (matchColorStop !== null) {
-      stopResult = {
-        color: matchColorStop[1]
-      };
-
-      // // Position (optional).
-      // if (!!matchColorStop[2]) {
-      //     stopResult.position = matchColorStop[2];
-      // }
-
-      // Oct 29, 2019
-      // Position (optional).
-      if (matchColorStop[2]) {
-        stopResult.position = matchColorStop[2];
-      }
-      result.colorStopList.push(stopResult);
-
-      // Continue searching from previous position.
-      matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
-    }
-  }
-
-  // Can be undefined if match not found.
-  return result;
-};
-
 const fontList = [{
   value: '',
   label: '',
@@ -100569,10 +100971,21 @@ function injectAssets(url, waitFor, callback) {
   };
   document.body.appendChild(script);
 }
+
+// Modified:
 function isMobile$1() {
+  if (typeof window === "undefined") {
+    // This means we're on the server, return false or handle appropriately
+    return false;
+  }
   return 'navigator' in window && window.navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i);
 }
+// Modified:
 function isTouch$1() {
+  if (typeof document === "undefined") {
+    // This means we're on the server, return false or handle appropriately
+    return false;
+  }
   return isMobile$1() !== null || document.createTouch !== undefined || 'ontouchstart' in window || 'onmsgesturechange' in window || navigator.msMaxTouchPoints;
 }
 function isFunction(f) {
@@ -102242,7 +102655,13 @@ class Slide {
 const version$3 = '3.2.0';
 const isMobile = isMobile$1();
 const isTouch = isTouch$1();
-const html$2 = document.getElementsByTagName('html')[0];
+
+// Modified:
+// let html = document.getElementsByTagName('html')[0];
+let html$2;
+if (typeof document === "undefined") ; else {
+  html$2 = document.getElementsByTagName('html')[0];
+}
 const defaults$2 = {
   selector: '.glightbox',
   elements: null,
@@ -107908,6 +108327,10 @@ class Dictation {
     this.builderStuff = builderStuff;
     const util = this.builder.util;
     this.util = util;
+    let disclaimerText = util.out('AI-Disclaimer');
+    if (disclaimerText === 'AI-Disclaimer') {
+      disclaimerText = this.builder.disclaimerAI;
+    }
 
     // const dom = this.builder.dom;
 
@@ -108117,7 +108540,7 @@ class Dictation {
                     ${util.out('AI-Powered Features')}
                     <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
                 </div>
-                ${util.out('AI-Disclaimer', this.builder.disclaimerAI)}
+                ${disclaimerText}
                 <div style="text-align:right;margin-top:20px;">
                     <button title="${util.out('Ok')}" class="input-ok classic-primary" style="width:100%;text-transform: uppercase;
                     font-size: 14px;">${util.out('Ok')}</button>
@@ -110822,22 +111245,25 @@ class Command$1 {
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
     this.lib = new Lib$1(builder);
-    let html = `
-        <div class="is-modal ai-disclaimer" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-            <div class="is-modal-content" style="max-width:450px;padding:55px 40px 35px;font-size:16px;line-height:1.4;letter-spacing: 1px;">
-                <div class="is-modal-bar is-draggable">
-                    ${util.out('AI-Powered Features')}
-                    <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
-                </div>
-                ${util.out('AI-Disclaimer', this.builder.disclaimerAI)}
-                <div style="text-align:right;margin-top:20px;">
-                    <button title="${util.out('Ok')}" class="input-ok classic-primary" style="width:100%;text-transform: uppercase;
-                    font-size: 14px;">${util.out('Ok')}</button>
-                </div>
-            </div>
-        </div>`;
-    builderStuff.insertAdjacentHTML('beforeend', html);
-    this.modalDisclaimer = builderStuff.querySelector('.ai-disclaimer');
+    let html = '';
+    // let html = `
+    // <div class="is-modal ai-disclaimer" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //     <div class="is-modal-content" style="max-width:450px;padding:55px 40px 35px;font-size:16px;line-height:1.4;letter-spacing: 1px;">
+    //         <div class="is-modal-bar is-draggable">
+    //             ${util.out('AI-Powered Features')}
+    //             <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
+    //         </div>
+    //         ${util.out('AI-Disclaimer', this.builder.disclaimerAI)}
+    //         <div style="text-align:right;margin-top:20px;">
+    //             <button title="${util.out('Ok')}" class="input-ok classic-primary" style="width:100%;text-transform: uppercase;
+    //             font-size: 14px;">${util.out('Ok')}</button>
+    //         </div>
+    //     </div>
+    // </div>`;
+    // builderStuff.insertAdjacentHTML('beforeend', html);
+
+    // this.modalDisclaimer = builderStuff.querySelector('.ai-disclaimer');
+
     let cl = contextBlockList$1;
     if (this.builder.contextList) cl = this.builder.contextList;
     const localProcess = question => {
@@ -117362,7 +117788,9 @@ class ContentBuilder {
       defaultFontSizes: [16, 17, 18, 19, 21, 24, 32, 35, 42, 48, 54, 64 /*, 76, 96, 120, 200, 300*/],
       fontSizeClassValues: [12, 14, 15, 16, 17, 18, 19, 21, 24, 28, 32, 35, 38, 42, 46, 48, 50, 54, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 124, 128, 132, 136, 140, 144, 148, 152, 156, 160, 164, 168, 172, 176, 180, 184, 188, 192, 196, 200, 204, 208, 212, 216, 220, 224, 228, 232, 236, 240, 244, 248, 252, 256, 260, 264, 268, 272, 276, 280, 284, 288, 292, 296, 300, 304, 308, 312, 316, 320, 324, 328, 332, 336, 340, 344, 348, 352, 356, 360, 364, 368, 372, 376, 380, 384, 388, 392, 396, 400],
       /* If not empty, applying font size will apply class: size-12, size-14, and so on. All responsive, defined in content.css */
-      gradientcolors: [['linear-gradient(0deg, rgb(255, 57, 25), rgb(249, 168, 37))'], ['linear-gradient(0deg, rgb(255, 57, 25), rgb(255, 104, 15))'], ['linear-gradient(0deg, #FF5722, #FF9800)'], ['linear-gradient(0deg, #613ca2, rgb(110, 123, 217))'], ['linear-gradient(0deg, rgb(65, 70, 206), rgb(236, 78, 130))'], ['linear-gradient(0deg, rgb(0, 150, 102), rgb(90, 103, 197))'], ['linear-gradient(30deg, rgb(249, 119, 148), rgb(98, 58, 162))'], ['linear-gradient(0deg, rgb(223, 70, 137), rgb(90, 103, 197))'], ['linear-gradient(0deg, rgb(40, 53, 147), rgb(90, 103, 197))'], ['linear-gradient(0deg, rgb(21, 101, 192), rgb(52, 169, 239))'], ['linear-gradient(0deg, rgb(32, 149, 219), rgb(139, 109, 230))'], ['linear-gradient(0deg, rgb(90, 103, 197), rgb(0, 184, 201))'], ['linear-gradient(0deg, rgb(0, 184, 201), rgb(253, 187, 45))'], ['linear-gradient(0deg, rgb(255, 208, 100), rgb(239, 98, 159))'], ['linear-gradient(0deg, rgb(0, 214, 223), rgb(130, 162, 253))'], ['linear-gradient(0deg, rgb(50, 234, 251), rgb(248, 247, 126))'], ['linear-gradient(0deg, rgb(141, 221, 255), rgb(255, 227, 255))'], ['linear-gradient(0deg, rgb(255, 170, 170), rgb(255, 255, 200))'], ['linear-gradient(0deg, rgb(239, 239, 239), rgb(252, 252, 252))']],
+      gradientColors: [
+      // 'linear-gradient(234deg, rgba(255, 253, 185, 1), rgb(255, 208, 100), rgb(239, 98, 159), rgb(73, 88, 195), rgba(2, 20, 145, 1))',
+      'linear-gradient(32deg, rgb(4, 98, 183) 0%, rgb(97, 110, 204) 23.5075%, rgb(246, 108, 168) 50%, rgb(255, 211, 111) 75%, rgb(255, 253, 193) 100%)', 'linear-gradient(15deg, rgba(222, 90, 69, 1), rgba(255, 118, 96, 1), rgba(249, 214, 137, 1), rgba(255, 242, 172, 1))', 'linear-gradient(357deg, rgba(68, 85, 204, 1), rgba(4, 166, 240, 1), rgba(51, 241, 255, 1))', 'linear-gradient(26deg, rgba(41, 145, 255, 1), rgba(49, 103, 240, 1), rgba(67, 107, 208, 1), rgba(149, 115, 255, 1), rgba(159, 159, 255, 1))', 'linear-gradient(0deg, rgba(198, 233, 155, 1), rgba(97, 221, 180, 1), rgba(244, 255, 190, 1))', 'linear-gradient(342deg, rgb(189, 156, 219), rgb(163, 172, 240), rgba(154, 203, 253, 1))', 'linear-gradient(45deg, rgb(255, 225, 172), rgb(253, 194, 141), rgba(246, 150, 183, 1), rgba(221, 140, 207, 1))', 'linear-gradient(0deg, rgba(157, 172, 246, 1), rgba(129, 205, 255, 1), rgba(202, 255, 207, 1))'],
       elementEditor: true,
       customval: '',
       moduleConfig: [],
@@ -118705,13 +119133,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }, this);
 
     // Gradient Picker
-    this.gradpicker = new GradientPicker({
-      gradientcolors: this.opts.gradientcolors,
-      colors: this.opts.colors,
-      animateModal: this.opts.animateModal,
-      elementToAnimate: this.opts.container,
-      lang: this.opts.lang
-    }, this);
+    this.gradpicker = new GradientPicker(this);
 
     // Shortcut Info
     this.ShortcutInfo = new ShortcutInfo(this);
@@ -119264,7 +119686,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           dropdown.style.display = 'none';
         });
       }
-      const clrPicker = document.querySelector('.pop-picker.active');
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       // if(clrPicker) return;
 
       // Image Resizer
@@ -137445,8 +137867,7 @@ class Box {
   setBoxBgColor(s) {
     const activeBox = this.builder.activeBox;
     let overlay = activeBox.querySelector('.is-overlay');
-    overlay.style.backgroundColor = s;
-    overlay.style.backgroundImage = ''; // remove gradient
+    overlay.style.backgroundColor = s; // overlay.style.backgroundImage = ''; // remove gradient
   } // Box Size