@innovastudio/contentbuilder 1.5.59 → 1.5.61

package/public/contentbuilder/contentbuilder.esm.js

@@ -4599,27 +4599,7 @@ class Util {
       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');
@@ -4635,6 +4615,17 @@ class Util {
       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();
     });
@@ -15799,6 +15790,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);
 };
@@ -51828,11 +51824,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>
@@ -52079,11 +52080,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', () => {
@@ -52479,6 +52475,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) {
@@ -52637,7 +52643,6 @@ class RowAddTool {
   }
 }
 
-// import GradientPicker from './gradientpicker.js';
 class ColumnTool {
   constructor(builder) {
     this.builder = builder;
@@ -53411,10 +53416,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>
@@ -53806,12 +53816,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', () => {
@@ -54583,6 +54587,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');
@@ -55419,11 +55433,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>
 
@@ -55508,12 +55525,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', () => {
@@ -55712,6 +55723,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');
@@ -63443,7 +63464,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
@@ -63602,6 +63624,7 @@ class ColorPicker {
       this.opts.color = color;
       this.setColor(color, true);
     }
+    this.noCallback = false;
   }
   openByTab(color) {
     // Rte
@@ -63617,9 +63640,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);
@@ -63649,585 +63673,539 @@ 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 (!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);
-        });
-      }
-    }
-  }
-  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');
-        }
+    if (!noTrigger) {
+      const event = new Event('input', {
+        bubbles: true
       });
+      angleValue.dispatchEvent(event);
     }
-    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;
   }
-  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;
+  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();
   }
-  removeClass(element, classname) {
-    if (!element) return;
-    if (element.classList.length > 0) {
-      element.className = element.className.replace(classname, '');
+  handleTouchMove(e) {
+    if (e.touches && e.touches.length > 0) {
+      this.onDrag(e.touches[0]);
     }
   }
-  hasClass(element, classname) {
-    if (!element) return false;
-    return element.classList ? element.classList.contains(classname) : new RegExp('\\b' + classname + '\\b').test(element.className);
+  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;
   }
-  addEventListener(parent, type, listener) {
-    parent.addEventListener(type, listener);
+  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 = '';
   }
 }
 
-// import ColorPicker from './colorpicker.js';
-
 class GradientPicker {
-  constructor(opts = {}, builder) {
+  constructor(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);
-    }
-    this.builderStuff = builderStuff;
-
-    // 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;
+    this.builderStuff = this.builder.builderStuff;
+    this.util = this.builder.util;
     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>`;
-    }
+    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-gradients" style="display: flex;flex-flow: wrap;margin-bottom:10px;">
+            <div class="div-presets">
                 ${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 class="label-saved">${this.out('Saved')}:</div>
+            <div class="div-saved"></div> 
+
+            <div class="gradient-preview"></div>
+
+            <div class="label-saved">${this.out('Gradient Colors')}:</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="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 class="div-save">
+                <button title="${this.out('Save')}" class="btn-save">${this.out('Save')}</button>
             </div>
-        </div>
         `;
-    objStuff.insertAdjacentHTML('beforeend', html.replace(/{id}/g, this.makeId()));
-    const pickGradient = objStuff.querySelector('.is-pop.pickgradientcolor');
+    this.builderStuff.insertAdjacentHTML('beforeend', html);
+    const pickGradient = this.builderStuff.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();
-        }
-      });
+    this.init();
+  } //constructor
 
-      // Redirect first shift+tab to last input
-      firstInput.addEventListener('keydown', e => {
-        if (e.which === 9 && e.shiftKey) {
-          e.preventDefault();
-          lastInput.focus();
-        }
-      });
+  out(s) {
+    if (this.builder.lang) {
+      let val = this.builder.lang[s];
+      if (val) return val;else {
+        return s;
+      }
+    } else {
+      return s;
+    }
+  }
+  init() {
+    this.renderSavedGradients();
+    const btnAddStop = this.pickGradient.querySelector('.btn-addstop');
+    if (btnAddStop) btnAddStop.addEventListener('click', () => {
+      this.builder.uo.saveForUndo();
+      let lastColor = this.colorsArray[this.colorsArray.length - 1];
+      this.colorsArray.push(lastColor);
+      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 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();
     };
-    setupTabKeys(pickGradient);
-    new Draggable$2({
-      selector: '#' + this.id + ' .is-draggable'
+    const btnClear = this.pickGradient.querySelector('.btn-clear');
+    if (btnClear) btnClear.addEventListener('click', () => {
+      this.builder.uo.saveForUndo();
+      this.colorsArray = [];
+      this.renderColorStops();
+      this.angle = 0;
+      this.renderAngle();
+      this.applyGradient();
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
     });
 
-    // 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');
+    // presets
+    const divPreset = this.pickGradient.querySelector('.div-presets');
+    const btnApply = divPreset.querySelectorAll('.btn-graditem');
+    btnApply.forEach(btn => {
       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');
+        this.builder.uo.saveForUndo();
+        let cssGradient = btn.getAttribute('data-value');
+        this.element.style.backgroundImage = cssGradient;
+        this.btn.style.backgroundImage = cssGradient;
+        const colorsArray = this.extractColors(cssGradient);
+        this.colorsArray = colorsArray;
+        const angle = this.extractAngle(cssGradient);
+        this.angle = angle;
+        this.renderAngle();
+        this.renderColorStops();
+        if (this.onChange) this.onChange();
+        this.builder.onChange();
       });
     });
-    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';
-    });
-    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;
+  }
+  saveGradient() {
+    let gradient = {
+      angle: this.angle,
+      colors: this.colorsArray
+    };
+    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;
 
-      // if(color1 === '') color1 = '#ffffff';
-      // if(color2 === '') color2 = '#ffffff';
+    // 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'));
+      customgradcolors.forEach(cssGradient => {
+        const colorsArray = this.extractColors(cssGradient);
+        const angle = this.extractAngle(cssGradient);
+        let gradient = {
+          angle: angle,
+          colors: colorsArray
+        };
+        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
 
-      let css = `linear-gradient(${deg}deg, ${color1}, ${color2})`;
-      this.targetElement.style.backgroundImage = css;
-      if (this.opts.onChange) this.opts.onChange(css);
+    const divSaved = this.pickGradient.querySelector('.div-saved');
+    const labelSaved = this.pickGradient.querySelector('.label-saved');
+    let html = '';
+    savedGrads.forEach((gradient, index) => {
+      let deg = gradient.angle;
+      let colorsArray = gradient.colors;
+      let s = this.convertColorsToGradient(colorsArray, deg);
+      html += `
+                <div>
+                    <button 
+                        data-index="${index}"
+                        title="${this.out('Select')}" 
+                        class="btn-graditem" data-value="${s}" 
+                        style="background-image:${s}"></button>
+
+                    <button title="${this.out('Remove')}" class="btn-remove">
+                        <svg class="is-icon-flex"><use xlink:href="#icon-minus"></use></svg>
+                    </button>
+                </div>
+                `;
     });
-    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';
-
-      let css = `linear-gradient(${deg}deg, ${color1}, ${color2})`;
-
-      // Save
-      let customgradcolors = [];
-      if (localStorage.getItem('_customgradcolors') !== null) {
-        customgradcolors = JSON.parse(localStorage.getItem('_customgradcolors'));
-      }
-      customgradcolors.push(css);
-      localStorage.setItem('_customgradcolors', JSON.stringify(customgradcolors));
-
-      // 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;
-      }
-
-      // 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');
-        });
+    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.builder.uo.saveForUndo();
+        let cssGradient = btn.getAttribute('data-value');
+        this.element.style.backgroundImage = cssGradient;
+        this.btn.style.backgroundImage = cssGradient;
+        const colorsArray = this.extractColors(cssGradient);
+        this.colorsArray = colorsArray;
+        const angle = this.extractAngle(cssGradient);
+        this.angle = angle;
+        this.renderAngle();
+        this.renderColorStops();
+        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', () => {
-          //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.parentNode.parentNode.removeChild(btnRemoveGrad.parentNode);
-          return false;
-        });
+    });
+    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 = '';
+        }
+        e.preventDefault();
+        e.stopImmediatePropagation();
       });
     });
-  } //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;
   }
-  out(s) {
-    if (this.opts.lang) {
-      let val = this.opts.lang[s];
-      if (val) return val;else {
-        return s;
-      }
+  removeItemByIndex(arr, index) {
+    if (index > -1 && index < arr.length) {
+      arr.splice(index, 1);
+    }
+    return arr;
+  }
+  extractColors(gradientString) {
+    // Regular expression to match rgb(a) colors and hex colors (with optional alpha)
+    const colorRegex = /rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*\d*\.?\d+\s*)?\)|#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?/g;
+    // Extract all color occurrences
+    const colors = gradientString.match(colorRegex);
+    return colors || [];
+  }
+  extractAngle(gradientString) {
+    const anglePattern = /linear-gradient\((\d+)deg,/;
+    const match = anglePattern.exec(gradientString);
+    if (match && match[1]) {
+      return parseInt(match[1], 10);
     } else {
-      return s;
+      return 0;
     }
   }
-  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
-        }
+  updateColorsArray() {
+    let arr = [];
+    const divSort = this.pickGradient.querySelector('.div-sort');
+    divSort.querySelectorAll('button[data-color]').forEach(btn => {
+      let s = btn.getAttribute('data-color');
+      arr.push(s);
+    });
+    this.colorsArray = arr;
+  }
+  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;
+  }
+  applyGradient() {
+    let cssGradient;
+    if (this.colorsArray.length === 0) {
+      cssGradient = '';
+    } else {
+      cssGradient = this.convertColorsToGradient(this.colorsArray, this.angle);
+    }
+    this.element.style.backgroundImage = cssGradient;
+    this.btn.style.backgroundImage = cssGradient;
+    const divPreview = this.pickGradient.querySelector('.gradient-preview');
+    divPreview.style.backgroundImage = cssGradient;
+  }
+  areArraysIdentical(arr1, arr2) {
+    if (arr1.length !== arr2.length) {
+      return false; // Arrays of different lengths cannot be identical
     }
 
-    // Save original style
-    this.original = s;
-
-    // Render custom gradients
-    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>`;
+    for (let i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false; // Found elements that are not the same
       }
-      this.objStuff.querySelector('.div-custom-gradients').innerHTML = html_gradcolors;
     }
 
-    // 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');
+    return true; // All elements are the same and in the same order
+  }
+
+  renderColorStops() {
+    let colorsArray = this.colorsArray;
+    if (colorsArray.length === 0) {
+      colorsArray = ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'];
+    }
+    let htmlStop = '';
+    let n = 0;
+    colorsArray.forEach(color => {
+      htmlStop += `<div>
+                <button data-color="${color}" 
+                    data-index="${n}"
+                    title="${this.out('Select Color')}" 
+                    class="btn-colorstop is-btn-color" 
+                    data-value="${color}" 
+                    style="background-color:${color}"></button>
+
+                <button title="${this.out('Remove')}" class="btn-remove">
+                    <svg class="is-icon-flex"><use xlink:href="#icon-minus"></use></svg>
+                </button>
+            </div>`;
+      n++;
+    });
+    const divSort = this.pickGradient.querySelector('.div-sort');
+    divSort.innerHTML = htmlStop;
+    new Sortable(divSort, {
+      animation: 600,
+      dragClass: 'hide-drag-class',
+      onStart: () => {},
+      onSort: () => {
+        this.updateColorsArray();
+        this.applyGradient();
+      }
+    });
+    const colorPicker = this.builder.colorPicker;
+    const btnPicks = this.pickGradient.querySelectorAll('.btn-colorstop');
+    btnPicks.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
+        this.builder.uo.saveForUndo(true);
+        colorPicker.open(color => {
+          if (color === '') {
+            const allow = this.allowRemoveStop();
+            if (allow) {
+              // clear
+              btn.parentNode.remove();
+              this.updateColorsArray();
+              this.applyGradient();
+              if (this.onChange) this.onChange();
+              this.builder.onChange();
+              this.builder.util.hidePopOverlay(); // if pop is opened using overlay, to programmatically close, use this
+              return;
             }
           }
-        }
-        let btns = this.objStuff.querySelectorAll('.div-custom-gradients [data-elmgradient]');
-        Array.prototype.forEach.call(btns, btn => {
-          this.removeClass(btn, 'active');
-        });
-        this.addClass(btn, 'active');
-      });
-    });
+          if (color === '') color = 'rgba(255, 255, 255, 1)'; // gradient stop requires value
 
-    // Delete custom gradient
-    let btnsRemoveGrad = this.objStuff.querySelectorAll('.div-custom-gradients .is-elmgrad-remove');
-    Array.prototype.forEach.call(btnsRemoveGrad, btnRemoveGrad => {
-      btnRemoveGrad.addEventListener('click', () => {
-        //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);
+          btn.setAttribute('data-color', color);
+          btn.style.backgroundColor = color;
+          this.updateColorsArray();
+          if (this.areArraysIdentical(this.colorsArray, ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'])) {
+            console.log('Initial, no gradient');
+            return;
           }
-        }
-        localStorage.setItem('_customgradcolors', JSON.stringify(customgradcolors));
-        btnRemoveGrad.parentNode.parentNode.removeChild(btnRemoveGrad.parentNode);
-        return false;
+          this.applyGradient();
+          if (this.onChange) this.onChange();
+          this.builder.onChange();
+        }, btn.style.backgroundColor, () => {
+          btn.removeAttribute('data-focus');
+          btn.focus();
+        }, btn, true); // overlay=true
+
+        btn.setAttribute('data-focus', true);
       });
     });
-    const handleKeyDown = e => {
-      if (e.keyCode === 27) {
-        // escape key
-        this.pickGradient.classList.remove('active'); // hide
-
-        this.pickGradient.removeEventListener('keydown', handleKeyDown);
+    const btnRemove = divSort.querySelectorAll('.btn-remove');
+    btnRemove.forEach(btn => {
+      btn.addEventListener('click', e => {
+        this.builder.uo.saveForUndo();
+        const allow = this.allowRemoveStop();
+        if (allow) {
+          btn.parentNode.remove();
+        } else {
+          let color = 'rgba(255, 255, 255, 1)'; // gradient stop requires value
 
-        // no change
-        if (this.opts.onFinish) {
-          this.opts.onFinish(false);
+          const btnColor = btn.parentNode.querySelector('.btn-colorstop');
+          btnColor.setAttribute('data-color', color);
+          btnColor.style.backgroundColor = color;
         }
-      }
-    };
-
-    // this.modal.show(this.pickGradient, false, ()=>{
-
-    //     this.pickGradient.removeEventListener('keydown', handleKeyDown);
+        this.updateColorsArray();
+        this.applyGradient();
+        if (this.onChange) this.onChange();
+        this.builder.onChange();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+    });
+  }
+  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
+  }
 
-    //     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);
-    //         }
-    //     }
+  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++) {
@@ -64244,7 +64222,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);
@@ -64315,28 +64293,24 @@ class GradientPicker {
       };
       doc.addEventListener('click', handlePopClickOut);
     }
-    this.pickGradient.addEventListener('keydown', handleKeyDown);
 
-    // const btn = this.pickGradient.querySelector('button');
-    // btn.focus();
-  }
+    // Gradient Stuff
 
-  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 -
-  }
+    this.element = elm;
+    this.btn = btn;
+    this.onChange = onChange;
+    // this.onFinish = onFinish; // used in showPop below
 
-  removeClass(element, classname) {
-    if (!element) return;
-    if (element.classList.length > 0) {
-      element.className = element.className.replace(classname, '');
-    }
-  }
-  hasClass(element, classname) {
-    if (!element) return false;
-    return element.classList ? element.classList.contains(classname) : new RegExp('\\b' + classname + '\\b').test(element.className);
+    let cssGradient = elm.style.backgroundImage;
+    const colorsArray = this.extractColors(cssGradient);
+    this.colorsArray = colorsArray;
+    const angle = this.extractAngle(cssGradient);
+    this.angle = angle;
+    this.renderAngle();
+    this.renderColorStops();
+    setTimeout(() => {
+      this.slider.create();
+    }, 0);
   }
   getElementPosition(element) {
     const top = element.getBoundingClientRect().top;
@@ -64362,156 +64336,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: '',
@@ -81684,6 +81508,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;
 
@@ -81893,7 +81721,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>
@@ -84598,22 +84426,25 @@ class Command {
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
     this.lib = new Lib(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;
     if (this.builder.contextList) cl = this.builder.contextList;
     const localProcess = question => {
@@ -91138,7 +90969,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(234deg, rgba(255, 253, 193, 1), rgba(255, 211, 111, 1), rgba(246, 108, 168, 1), rgba(97, 110, 204, 1), rgba(4, 98, 183, 1))', '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: [],
@@ -92481,13 +92314,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);