framework7 6.3.15 → 7.0.0-beta.11

package/{esm/components → components}/color-picker/color-picker-class.js

@@ -1,76 +1,56 @@
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import { extend, colorRgbToHex, colorRgbToHsl, colorHslToHsb, colorHslToRgb, colorHsbToHsl, colorHexToRgb, nextTick, deleteProps } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
-import $ from '../../shared/dom7';
-import { getDevice } from '../../shared/get-device';
-import moduleAlphaSlider from './modules/alpha-slider';
-import moduleCurrentColor from './modules/current-color';
-import moduleHex from './modules/hex';
-import moduleHsbSliders from './modules/hsb-sliders';
-import moduleHueSlider from './modules/hue-slider';
-import moduleBrightnessSlider from './modules/brightness-slider';
-import modulePalette from './modules/palette';
-import moduleInitialCurrentColors from './modules/initial-current-colors';
-import moduleRgbBars from './modules/rgb-bars';
-import moduleRgbSliders from './modules/rgb-sliders';
-import moduleSbSpectrum from './modules/sb-spectrum';
-import moduleHsSpectrum from './modules/hs-spectrum';
-import moduleWheel from './modules/wheel';
+import { extend, colorRgbToHex, colorRgbToHsl, colorHslToHsb, colorHslToRgb, colorHsbToHsl, colorHexToRgb, nextTick, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import $ from '../../shared/dom7.js';
+import { getDevice } from '../../shared/get-device.js';
+import moduleAlphaSlider from './modules/alpha-slider.js';
+import moduleCurrentColor from './modules/current-color.js';
+import moduleHex from './modules/hex.js';
+import moduleHsbSliders from './modules/hsb-sliders.js';
+import moduleHueSlider from './modules/hue-slider.js';
+import moduleBrightnessSlider from './modules/brightness-slider.js';
+import modulePalette from './modules/palette.js';
+import moduleInitialCurrentColors from './modules/initial-current-colors.js';
+import moduleRgbBars from './modules/rgb-bars.js';
+import moduleRgbSliders from './modules/rgb-sliders.js';
+import moduleSbSpectrum from './modules/sb-spectrum.js';
+import moduleHsSpectrum from './modules/hs-spectrum.js';
+import moduleWheel from './modules/wheel.js';
 /** @jsx $jsx */
 
-import $jsx from '../../shared/$jsx';
-
-var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(ColorPicker, _Framework7Class);
-
-  function ColorPicker(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var self = _assertThisInitialized(_this);
+import $jsx from '../../shared/$jsx.js';
 
+class ColorPicker extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const self = this;
     self.params = extend({}, app.params.colorPicker, params);
-    var $containerEl;
+    let $containerEl;
 
     if (self.params.containerEl) {
       $containerEl = $(self.params.containerEl);
-      if ($containerEl.length === 0) return self || _assertThisInitialized(_this);
+      if ($containerEl.length === 0) return self;
     }
 
-    var $inputEl;
+    let $inputEl;
 
     if (self.params.inputEl) {
       $inputEl = $(self.params.inputEl);
     }
 
-    var $targetEl;
+    let $targetEl;
 
     if (self.params.targetEl) {
       $targetEl = $(self.params.targetEl);
     }
 
     extend(self, {
-      app: app,
-      $containerEl: $containerEl,
+      app,
+      $containerEl,
       containerEl: $containerEl && $containerEl[0],
       inline: $containerEl && $containerEl.length > 0,
-      $inputEl: $inputEl,
+      $inputEl,
       inputEl: $inputEl && $inputEl[0],
-      $targetEl: $targetEl,
+      $targetEl,
       targetEl: $targetEl && $targetEl[0],
       initialized: false,
       opened: false,
@@ -110,7 +90,7 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     function onHtmlClick(e) {
       if (self.destroyed || !self.params) return;
       if (self.params.openIn === 'page') return;
-      var $clickTargetEl = $(e.target);
+      const $clickTargetEl = $(e.target);
       if (!self.opened || self.closing) return;
       if ($clickTargetEl.closest('[class*="backdrop"]').length) return;
       if ($clickTargetEl.closest('.color-picker-popup, .color-picker-popover').length) return;
@@ -126,7 +106,7 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
 
 
     extend(self, {
-      attachInputEvents: function attachInputEvents() {
+      attachInputEvents() {
         self.$inputEl.on('click', onInputClick);
 
         if (self.params.inputReadOnly) {
@@ -137,7 +117,8 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
           }
         }
       },
-      detachInputEvents: function detachInputEvents() {
+
+      detachInputEvents() {
         self.$inputEl.off('click', onInputClick);
 
         if (self.params.inputReadOnly) {
@@ -148,72 +129,105 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
           }
         }
       },
-      attachTargetEvents: function attachTargetEvents() {
+
+      attachTargetEvents() {
         self.$targetEl.on('click', onTargetClick);
       },
-      detachTargetEvents: function detachTargetEvents() {
+
+      detachTargetEvents() {
         self.$targetEl.off('click', onTargetClick);
       },
-      attachHtmlEvents: function attachHtmlEvents() {
+
+      attachHtmlEvents() {
         app.on('click', onHtmlClick);
       },
-      detachHtmlEvents: function detachHtmlEvents() {
+
+      detachHtmlEvents() {
         app.off('click', onHtmlClick);
       }
+
     });
     self.init();
-    return self || _assertThisInitialized(_this);
+    return self;
   }
 
-  var _proto = ColorPicker.prototype;
+  get view() {
+    const {
+      $inputEl,
+      $targetEl,
+      app,
+      params
+    } = this;
+    let view;
+
+    if (params.view) {
+      view = params.view;
+    } else {
+      if ($inputEl) {
+        view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View;
+      }
+
+      if (!view && $targetEl) {
+        view = $targetEl.parents('.view').length && $targetEl.parents('.view')[0].f7View;
+      }
+    }
 
-  _proto.attachEvents = function attachEvents() {
-    var self = this;
+    if (!view) view = app.views.main;
+    return view;
+  }
+
+  attachEvents() {
+    const self = this;
     self.centerModules = self.centerModules.bind(self);
 
     if (self.params.centerModules) {
       self.app.on('resize', self.centerModules);
     }
-  };
+  }
 
-  _proto.detachEvents = function detachEvents() {
-    var self = this;
+  detachEvents() {
+    const self = this;
 
     if (self.params.centerModules) {
       self.app.off('resize', self.centerModules);
     }
-  };
+  }
 
-  _proto.centerModules = function centerModules() {
-    var self = this;
+  centerModules() {
+    const self = this;
     if (!self.opened || !self.$el || self.inline) return;
-    var $pageContentEl = self.$el.find('.page-content');
+    const $pageContentEl = self.$el.find('.page-content');
     if (!$pageContentEl.length) return;
-    var _$pageContentEl$ = $pageContentEl[0],
-        scrollHeight = _$pageContentEl$.scrollHeight,
-        offsetHeight = _$pageContentEl$.offsetHeight;
+    const {
+      scrollHeight,
+      offsetHeight
+    } = $pageContentEl[0];
 
     if (scrollHeight <= offsetHeight) {
       $pageContentEl.addClass('justify-content-center');
     } else {
       $pageContentEl.removeClass('justify-content-center');
     }
-  };
+  }
 
-  _proto.initInput = function initInput() {
-    var self = this;
+  initInput() {
+    const self = this;
     if (!self.$inputEl) return;
     if (self.params.inputReadOnly) self.$inputEl.prop('readOnly', true);
-  };
-
-  _proto.getModalType = function getModalType() {
-    var self = this;
-    var app = self.app,
-        modal = self.modal,
-        params = self.params;
-    var openIn = params.openIn,
-        openInPhone = params.openInPhone;
-    var device = getDevice();
+  }
+
+  getModalType() {
+    const self = this;
+    const {
+      app,
+      modal,
+      params
+    } = self;
+    const {
+      openIn,
+      openInPhone
+    } = params;
+    const device = getDevice();
     if (modal && modal.type) return modal.type;
     if (openIn !== 'auto') return openIn;
     if (self.inline) return null;
@@ -227,11 +241,13 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return openInPhone;
-  };
+  }
 
-  _proto.formatValue = function formatValue() {
-    var self = this;
-    var value = self.value;
+  formatValue() {
+    const self = this;
+    const {
+      value
+    } = self;
 
     if (self.params.formatValue) {
       return self.params.formatValue.call(self, value);
@@ -239,47 +255,37 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
 
     return value.hex;
   } // eslint-disable-next-line
-  ;
 
-  _proto.normalizeHsValues = function normalizeHsValues(arr) {
-    return [Math.floor(arr[0] * 10) / 10, Math.floor(arr[1] * 1000) / 1000, Math.floor(arr[2] * 1000) / 1000];
-  };
-
-  _proto.setValue = function setValue(value, updateModules) {
-    if (value === void 0) {
-      value = {};
-    }
 
-    if (updateModules === void 0) {
-      updateModules = true;
-    }
+  normalizeHsValues(arr) {
+    return [Math.floor(arr[0] * 10) / 10, Math.floor(arr[1] * 1000) / 1000, Math.floor(arr[2] * 1000) / 1000];
+  }
 
-    var self = this;
+  setValue(value = {}, updateModules = true) {
+    const self = this;
     if (typeof value === 'undefined') return;
-
-    var _ref = self.value || {},
-        hex = _ref.hex,
-        rgb = _ref.rgb,
-        hsl = _ref.hsl,
-        hsb = _ref.hsb,
-        _ref$alpha = _ref.alpha,
-        alpha = _ref$alpha === void 0 ? 1 : _ref$alpha,
-        hue = _ref.hue,
-        rgba = _ref.rgba,
-        hsla = _ref.hsla;
-
-    var needChangeEvent = self.value || !self.value && !self.params.value;
-    var valueChanged;
-    Object.keys(value).forEach(function (k) {
+    let {
+      hex,
+      rgb,
+      hsl,
+      hsb,
+      alpha = 1,
+      hue,
+      rgba,
+      hsla
+    } = self.value || {};
+    const needChangeEvent = self.value || !self.value && !self.params.value;
+    let valueChanged;
+    Object.keys(value).forEach(k => {
       if (!self.value || typeof self.value[k] === 'undefined') {
         valueChanged = true;
         return;
       }
 
-      var v = value[k];
+      const v = value[k];
 
       if (Array.isArray(v)) {
-        v.forEach(function (subV, subIndex) {
+        v.forEach((subV, subIndex) => {
           if (subV !== self.value[k][subIndex]) {
             valueChanged = true;
           }
@@ -291,17 +297,11 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     if (!valueChanged) return;
 
     if (value.rgb || value.rgba) {
-      var _ref2 = value.rgb || value.rgba,
-          r = _ref2[0],
-          g = _ref2[1],
-          b = _ref2[2],
-          _ref2$ = _ref2[3],
-          a = _ref2$ === void 0 ? alpha : _ref2$;
-
+      const [r, g, b, a = alpha] = value.rgb || value.rgba;
       rgb = [r, g, b];
-      hex = colorRgbToHex.apply(void 0, rgb);
-      hsl = colorRgbToHsl.apply(void 0, rgb);
-      hsb = colorHslToHsb.apply(void 0, hsl);
+      hex = colorRgbToHex(...rgb);
+      hsl = colorRgbToHsl(...rgb);
+      hsb = colorHslToHsb(...hsl);
       hsl = self.normalizeHsValues(hsl);
       hsb = self.normalizeHsValues(hsb);
       hue = hsb[0];
@@ -311,50 +311,38 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (value.hsl || value.hsla) {
-      var _ref3 = value.hsl || value.hsla,
-          h = _ref3[0],
-          s = _ref3[1],
-          l = _ref3[2],
-          _ref3$ = _ref3[3],
-          _a = _ref3$ === void 0 ? alpha : _ref3$;
-
+      const [h, s, l, a = alpha] = value.hsl || value.hsla;
       hsl = [h, s, l];
-      rgb = colorHslToRgb.apply(void 0, hsl);
-      hex = colorRgbToHex.apply(void 0, rgb);
-      hsb = colorHslToHsb.apply(void 0, hsl);
+      rgb = colorHslToRgb(...hsl);
+      hex = colorRgbToHex(...rgb);
+      hsb = colorHslToHsb(...hsl);
       hsl = self.normalizeHsValues(hsl);
       hsb = self.normalizeHsValues(hsb);
       hue = hsb[0];
-      alpha = _a;
-      rgba = [rgb[0], rgb[1], rgb[2], _a];
-      hsla = [hsl[0], hsl[1], hsl[2], _a];
+      alpha = a;
+      rgba = [rgb[0], rgb[1], rgb[2], a];
+      hsla = [hsl[0], hsl[1], hsl[2], a];
     }
 
     if (value.hsb) {
-      var _value$hsb = value.hsb,
-          _h = _value$hsb[0],
-          _s = _value$hsb[1],
-          _b = _value$hsb[2],
-          _value$hsb$ = _value$hsb[3],
-          _a2 = _value$hsb$ === void 0 ? alpha : _value$hsb$;
-
-      hsb = [_h, _s, _b];
-      hsl = colorHsbToHsl.apply(void 0, hsb);
-      rgb = colorHslToRgb.apply(void 0, hsl);
-      hex = colorRgbToHex.apply(void 0, rgb);
+      const [h, s, b, a = alpha] = value.hsb;
+      hsb = [h, s, b];
+      hsl = colorHsbToHsl(...hsb);
+      rgb = colorHslToRgb(...hsl);
+      hex = colorRgbToHex(...rgb);
       hsl = self.normalizeHsValues(hsl);
       hsb = self.normalizeHsValues(hsb);
       hue = hsb[0];
-      alpha = _a2;
-      rgba = [rgb[0], rgb[1], rgb[2], _a2];
-      hsla = [hsl[0], hsl[1], hsl[2], _a2];
+      alpha = a;
+      rgba = [rgb[0], rgb[1], rgb[2], a];
+      hsla = [hsl[0], hsl[1], hsl[2], a];
     }
 
     if (value.hex) {
       rgb = colorHexToRgb(value.hex);
-      hex = colorRgbToHex.apply(void 0, rgb);
-      hsl = colorRgbToHsl.apply(void 0, rgb);
-      hsb = colorHslToHsb.apply(void 0, hsl);
+      hex = colorRgbToHex(...rgb);
+      hsl = colorRgbToHsl(...rgb);
+      hsb = colorHslToHsb(...hsl);
       hsl = self.normalizeHsValues(hsl);
       hsb = self.normalizeHsValues(hsb);
       hue = hsb[0];
@@ -375,15 +363,12 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (typeof value.hue !== 'undefined') {
-      var _hsl = hsl,
-          _h2 = _hsl[0],
-          _s2 = _hsl[1],
-          _l = _hsl[2]; // eslint-disable-line
-
-      hsl = [value.hue, _s2, _l];
-      hsb = colorHslToHsb.apply(void 0, hsl);
-      rgb = colorHslToRgb.apply(void 0, hsl);
-      hex = colorRgbToHex.apply(void 0, rgb);
+      const [h, s, l] = hsl; // eslint-disable-line
+
+      hsl = [value.hue, s, l];
+      hsb = colorHslToHsb(...hsl);
+      rgb = colorHslToRgb(...hsl);
+      hex = colorRgbToHex(...rgb);
       hsl = self.normalizeHsValues(hsl);
       hsb = self.normalizeHsValues(hsb);
       hue = hsb[0];
@@ -392,14 +377,14 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     self.value = {
-      hex: hex,
-      alpha: alpha,
-      hue: hue,
-      rgb: rgb,
-      hsl: hsl,
-      hsb: hsb,
-      rgba: rgba,
-      hsla: hsla
+      hex,
+      alpha,
+      hue,
+      rgb,
+      hsl,
+      hsb,
+      rgba,
+      hsla
     };
     if (!self.initialValue) self.initialValue = extend({}, self.value);
     self.updateValue(needChangeEvent);
@@ -407,26 +392,26 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     if (self.opened && updateModules) {
       self.updateModules();
     }
-  };
+  }
 
-  _proto.getValue = function getValue() {
-    var self = this;
+  getValue() {
+    const self = this;
     return self.value;
-  };
-
-  _proto.updateValue = function updateValue(fireEvents) {
-    if (fireEvents === void 0) {
-      fireEvents = true;
-    }
+  }
 
-    var self = this;
-    var $inputEl = self.$inputEl,
-        value = self.value,
-        $targetEl = self.$targetEl;
+  updateValue(fireEvents = true) {
+    const self = this;
+    const {
+      $inputEl,
+      value,
+      $targetEl
+    } = self;
 
     if ($targetEl && self.params.targetElSetBackgroundColor) {
-      var rgba = value.rgba;
-      $targetEl.css('background-color', "rgba(" + rgba.join(', ') + ")");
+      const {
+        rgba
+      } = value;
+      $targetEl.css('background-color', `rgba(${rgba.join(', ')})`);
     }
 
     if (fireEvents) {
@@ -434,7 +419,7 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if ($inputEl && $inputEl.length) {
-      var inputValue = self.formatValue(value);
+      const inputValue = self.formatValue(value);
 
       if ($inputEl && $inputEl.length) {
         $inputEl.val(inputValue);
@@ -444,31 +429,35 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
         }
       }
     }
-  };
+  }
 
-  _proto.updateModules = function updateModules() {
-    var self = this;
-    var modules = self.modules;
-    self.params.modules.forEach(function (m) {
+  updateModules() {
+    const self = this;
+    const {
+      modules
+    } = self;
+    self.params.modules.forEach(m => {
       if (typeof m === 'string' && modules[m] && modules[m].update) {
         modules[m].update(self);
       } else if (m && m.update) {
         m.update(self);
       }
     });
-  };
+  }
 
-  _proto.update = function update() {
-    var self = this;
+  update() {
+    const self = this;
     self.updateModules();
-  };
-
-  _proto.renderPicker = function renderPicker() {
-    var self = this;
-    var params = self.params,
-        modules = self.modules;
-    var html = '';
-    params.modules.forEach(function (m) {
+  }
+
+  renderPicker() {
+    const self = this;
+    const {
+      params,
+      modules
+    } = self;
+    let html = '';
+    params.modules.forEach(m => {
       if (typeof m === 'string' && modules[m] && modules[m].render) {
         html += modules[m].render(self);
       } else if (m && m.render) {
@@ -476,20 +465,21 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       }
     });
     return html;
-  };
+  }
 
-  _proto.renderNavbar = function renderNavbar() {
-    var self = this;
+  renderNavbar() {
+    const self = this;
 
     if (self.params.renderNavbar) {
       return self.params.renderNavbar.call(self, self);
     }
 
-    var _self$params = self.params,
-        openIn = _self$params.openIn,
-        navbarTitleText = _self$params.navbarTitleText,
-        navbarBackLinkText = _self$params.navbarBackLinkText,
-        navbarCloseText = _self$params.navbarCloseText;
+    const {
+      openIn,
+      navbarTitleText,
+      navbarBackLinkText,
+      navbarCloseText
+    } = self.params;
     return $jsx("div", {
       class: "navbar"
     }, $jsx("div", {
@@ -512,10 +502,10 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       class: "link popup-close",
       "data-popup": ".color-picker-popup"
     }, navbarCloseText))));
-  };
+  }
 
-  _proto.renderToolbar = function renderToolbar() {
-    var self = this;
+  renderToolbar() {
+    const self = this;
 
     if (self.params.renderToolbar) {
       return self.params.renderToolbar.call(self, self);
@@ -534,86 +524,93 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       "data-sheet": ".color-picker-sheet-modal",
       "data-popover": ".color-picker-popover"
     }, self.params.toolbarCloseText))));
-  };
+  }
 
-  _proto.renderInline = function renderInline() {
-    var self = this;
-    var _self$params2 = self.params,
-        cssClass = _self$params2.cssClass,
-        groupedModules = _self$params2.groupedModules;
+  renderInline() {
+    const self = this;
+    const {
+      cssClass,
+      groupedModules
+    } = self.params;
     return $jsx("div", {
-      class: "color-picker color-picker-inline " + (groupedModules ? 'color-picker-grouped-modules' : '') + " " + (cssClass || '')
+      class: `color-picker color-picker-inline ${groupedModules ? 'color-picker-grouped-modules' : ''} ${cssClass || ''}`
     }, self.renderPicker());
-  };
-
-  _proto.renderSheet = function renderSheet() {
-    var self = this;
-    var _self$params3 = self.params,
-        cssClass = _self$params3.cssClass,
-        toolbarSheet = _self$params3.toolbarSheet,
-        groupedModules = _self$params3.groupedModules;
+  }
+
+  renderSheet() {
+    const self = this;
+    const {
+      cssClass,
+      toolbarSheet,
+      groupedModules
+    } = self.params;
     return $jsx("div", {
-      class: "sheet-modal color-picker color-picker-sheet-modal " + (groupedModules ? 'color-picker-grouped-modules' : '') + " " + (cssClass || '')
+      class: `sheet-modal color-picker color-picker-sheet-modal ${groupedModules ? 'color-picker-grouped-modules' : ''} ${cssClass || ''}`
     }, toolbarSheet && self.renderToolbar(), $jsx("div", {
       class: "sheet-modal-inner"
     }, $jsx("div", {
       class: "page-content"
     }, self.renderPicker())));
-  };
-
-  _proto.renderPopover = function renderPopover() {
-    var self = this;
-    var _self$params4 = self.params,
-        cssClass = _self$params4.cssClass,
-        toolbarPopover = _self$params4.toolbarPopover,
-        groupedModules = _self$params4.groupedModules;
+  }
+
+  renderPopover() {
+    const self = this;
+    const {
+      cssClass,
+      toolbarPopover,
+      groupedModules
+    } = self.params;
     return $jsx("div", {
-      class: "popover color-picker-popover " + (cssClass || '')
+      class: `popover color-picker-popover ${cssClass || ''}`
     }, $jsx("div", {
       class: "popover-inner"
     }, $jsx("div", {
-      class: "color-picker " + (groupedModules ? 'color-picker-grouped-modules' : '')
+      class: `color-picker ${groupedModules ? 'color-picker-grouped-modules' : ''}`
     }, toolbarPopover && self.renderToolbar(), $jsx("div", {
       class: "page-content"
     }, self.renderPicker()))));
-  };
-
-  _proto.renderPopup = function renderPopup() {
-    var self = this;
-    var _self$params5 = self.params,
-        cssClass = _self$params5.cssClass,
-        navbarPopup = _self$params5.navbarPopup,
-        groupedModules = _self$params5.groupedModules;
+  }
+
+  renderPopup() {
+    const self = this;
+    const {
+      cssClass,
+      navbarPopup,
+      groupedModules
+    } = self.params;
     return $jsx("div", {
-      class: "popup color-picker-popup " + (cssClass || '')
+      class: `popup color-picker-popup ${cssClass || ''}`
     }, $jsx("div", {
       class: "page"
     }, navbarPopup && self.renderNavbar(), $jsx("div", {
-      class: "color-picker " + (groupedModules ? 'color-picker-grouped-modules' : '')
+      class: `color-picker ${groupedModules ? 'color-picker-grouped-modules' : ''}`
     }, $jsx("div", {
       class: "page-content"
     }, self.renderPicker()))));
-  };
+  }
 
-  _proto.renderPage = function renderPage() {
-    var self = this;
-    var _self$params6 = self.params,
-        cssClass = _self$params6.cssClass,
-        groupedModules = _self$params6.groupedModules;
+  renderPage() {
+    const self = this;
+    const {
+      cssClass,
+      groupedModules
+    } = self.params;
     return $jsx("div", {
-      class: "page color-picker-page " + (cssClass || ''),
+      class: `page color-picker-page ${cssClass || ''}`,
       "data-name": "color-picker-page"
     }, self.renderNavbar(), $jsx("div", {
-      class: "color-picker " + (groupedModules ? 'color-picker-grouped-modules' : '')
+      class: `color-picker ${groupedModules ? 'color-picker-grouped-modules' : ''}`
     }, $jsx("div", {
       class: "page-content"
     }, self.renderPicker())));
   } // eslint-disable-next-line
-  ;
 
-  _proto.render = function render() {
-    var self = this;
-    var params = self.params;
+
+  render() {
+    const self = this;
+    const {
+      params
+    } = self;
     if (params.render) return params.render.call(self);
     if (self.inline) return self.renderInline();
 
@@ -621,35 +618,37 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       return self.renderPage();
     }
 
-    var modalType = self.getModalType();
+    const modalType = self.getModalType();
     if (modalType === 'popover') return self.renderPopover();
     if (modalType === 'sheet') return self.renderSheet();
     if (modalType === 'popup') return self.renderPopup();
-  };
-
-  _proto.onOpen = function onOpen() {
-    var self = this;
-    var initialized = self.initialized,
-        $el = self.$el,
-        app = self.app,
-        $inputEl = self.$inputEl,
-        inline = self.inline,
-        value = self.value,
-        params = self.params,
-        modules = self.modules;
+  }
+
+  onOpen() {
+    const self = this;
+    const {
+      initialized,
+      $el,
+      app,
+      $inputEl,
+      inline,
+      value,
+      params,
+      modules
+    } = self;
     self.closing = false;
     self.opened = true;
     self.opening = true; // Init main events
 
     self.attachEvents();
-    params.modules.forEach(function (m) {
+    params.modules.forEach(m => {
       if (typeof m === 'string' && modules[m] && modules[m].init) {
         modules[m].init(self);
       } else if (m && m.init) {
         m.init(self);
       }
     });
-    var updateValue = !value && params.value; // Set value
+    const updateValue = !value && params.value; // Set value
 
     if (!initialized) {
       if (value) self.setValue(value);else if (params.value) {
@@ -688,10 +687,10 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     self.emit('local::open colorPickerOpen', self);
-  };
+  }
 
-  _proto.onOpened = function onOpened() {
-    var self = this;
+  onOpened() {
+    const self = this;
     self.opening = false;
 
     if (self.$el) {
@@ -703,13 +702,15 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     self.emit('local::opened colorPickerOpened', self);
-  };
+  }
 
-  _proto.onClose = function onClose() {
-    var self = this;
-    var app = self.app,
-        params = self.params,
-        modules = self.modules;
+  onClose() {
+    const self = this;
+    const {
+      app,
+      params,
+      modules
+    } = self;
     self.opening = false;
     self.closing = true; // Detach events
 
@@ -719,8 +720,8 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       if (app.theme === 'md') {
         self.$inputEl.trigger('blur');
       } else {
-        var validate = self.$inputEl.attr('validate');
-        var required = self.$inputEl.attr('required');
+        const validate = self.$inputEl.attr('validate');
+        const required = self.$inputEl.attr('required');
 
         if (validate && required) {
           app.input.validate(self.$inputEl);
@@ -728,7 +729,7 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    params.modules.forEach(function (m) {
+    params.modules.forEach(m => {
       if (typeof m === 'string' && modules[m] && modules[m].destroy) {
         modules[m].destroy(self);
       } else if (m && m.destroy) {
@@ -745,15 +746,15 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     self.emit('local::close colorPickerClose', self);
-  };
+  }
 
-  _proto.onClosed = function onClosed() {
-    var self = this;
+  onClosed() {
+    const self = this;
     self.opened = false;
     self.closing = false;
 
     if (!self.inline) {
-      nextTick(function () {
+      nextTick(() => {
         if (self.modal && self.modal.el && self.modal.destroy) {
           if (!self.params.routableModals) {
             self.modal.destroy();
@@ -773,16 +774,18 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     self.emit('local::closed colorPickerClosed', self);
-  };
-
-  _proto.open = function open() {
-    var self = this;
-    var app = self.app,
-        opened = self.opened,
-        inline = self.inline,
-        $inputEl = self.$inputEl,
-        $targetEl = self.$targetEl,
-        params = self.params;
+  }
+
+  open() {
+    const self = this;
+    const {
+      app,
+      opened,
+      inline,
+      $inputEl,
+      $targetEl,
+      params
+    } = self;
     if (opened) return;
 
     if (inline) {
@@ -794,7 +797,7 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       return;
     }
 
-    var colorPickerContent = self.render();
+    const colorPickerContent = self.render();
 
     if (params.openIn === 'page') {
       self.view.router.navigate({
@@ -803,18 +806,21 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
           content: colorPickerContent,
           path: self.url,
           on: {
-            pageBeforeIn: function pageBeforeIn(e, page) {
+            pageBeforeIn(e, page) {
               self.$el = page.$el.find('.color-picker');
               self.$el[0].f7ColorPicker = self;
               self.onOpen();
             },
-            pageAfterIn: function pageAfterIn() {
+
+            pageAfterIn() {
               self.onOpened();
             },
-            pageBeforeOut: function pageBeforeOut() {
+
+            pageBeforeOut() {
               self.onClose();
             },
-            pageAfterOut: function pageAfterOut() {
+
+            pageAfterOut() {
               self.onClosed();
 
               if (self.$el && self.$el[0]) {
@@ -822,39 +828,43 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
                 delete self.$el[0].f7ColorPicker;
               }
             }
+
           }
         }
       });
     } else {
-      var modalType = self.getModalType();
-      var backdrop = params.backdrop;
+      const modalType = self.getModalType();
+      let backdrop = params.backdrop;
 
       if (backdrop === null || typeof backdrop === 'undefined') {
         if (modalType === 'popover' && app.params.popover.backdrop !== false) backdrop = true;
         if (modalType === 'popup') backdrop = true;
       }
 
-      var modalParams = {
+      const modalParams = {
         targetEl: $targetEl || $inputEl,
         scrollToEl: params.scrollToInput ? $targetEl || $inputEl : undefined,
         content: colorPickerContent,
-        backdrop: backdrop,
+        backdrop,
         closeByBackdropClick: params.closeByBackdropClick,
         on: {
-          open: function open() {
-            var modal = this;
+          open() {
+            const modal = this;
             self.modal = modal;
             self.$el = modalType === 'popover' || modalType === 'popup' ? modal.$el.find('.color-picker') : modal.$el;
             self.$el[0].f7ColorPicker = self;
             self.onOpen();
           },
-          opened: function opened() {
+
+          opened() {
             self.onOpened();
           },
-          close: function close() {
+
+          close() {
             self.onClose();
           },
-          closed: function closed() {
+
+          closed() {
             self.onClosed();
 
             if (self.$el && self.$el[0]) {
@@ -862,6 +872,7 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
               delete self.$el[0].f7ColorPicker;
             }
           }
+
         }
       };
 
@@ -876,25 +887,26 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
       }
 
       if (params.routableModals && self.view) {
-        var _route;
-
         self.view.router.navigate({
           url: self.url,
-          route: (_route = {
-            path: self.url
-          }, _route[modalType] = modalParams, _route)
+          route: {
+            path: self.url,
+            [modalType]: modalParams
+          }
         });
       } else {
         self.modal = app[modalType].create(modalParams);
         self.modal.open();
       }
     }
-  };
+  }
 
-  _proto.close = function close() {
-    var self = this;
-    var opened = self.opened,
-        inline = self.inline;
+  close() {
+    const self = this;
+    const {
+      opened,
+      inline
+    } = self;
     if (!opened) return;
 
     if (inline) {
@@ -908,10 +920,10 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     } else {
       self.modal.close();
     }
-  };
+  }
 
-  _proto.init = function init() {
-    var self = this;
+  init() {
+    const self = this;
     self.initInput();
 
     if (self.inline) {
@@ -938,12 +950,14 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     self.emit('local::init colorPickerInit', self);
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var self = this;
+  destroy() {
+    const self = this;
     if (self.destroyed) return;
-    var $el = self.$el;
+    const {
+      $el
+    } = self;
     self.emit('local::beforeDestroy colorPickerBeforeDestroy', self);
     if ($el) $el.trigger('colorpicker:beforedestroy');
     self.close(); // Detach Events
@@ -965,35 +979,8 @@ var ColorPicker = /*#__PURE__*/function (_Framework7Class) {
     if ($el && $el.length) delete self.$el[0].f7ColorPicker;
     deleteProps(self);
     self.destroyed = true;
-  };
-
-  _createClass(ColorPicker, [{
-    key: "view",
-    get: function get() {
-      var $inputEl = this.$inputEl,
-          $targetEl = this.$targetEl,
-          app = this.app,
-          params = this.params;
-      var view;
-
-      if (params.view) {
-        view = params.view;
-      } else {
-        if ($inputEl) {
-          view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View;
-        }
-
-        if (!view && $targetEl) {
-          view = $targetEl.parents('.view').length && $targetEl.parents('.view')[0].f7View;
-        }
-      }
-
-      if (!view) view = app.views.main;
-      return view;
-    }
-  }]);
+  }
 
-  return ColorPicker;
-}(Framework7Class);
+}
 
 export default ColorPicker;