framework7 6.3.4 → 7.0.0-beta.3

package/components/pie-chart/pie-chart-class.js

@@ -0,0 +1,264 @@
+import $ from '../../shared/dom7';
+import { extend, deleteProps } from '../../shared/utils';
+import Framework7Class from '../../shared/class';
+/** @jsx $jsx */
+
+import $jsx from '../../shared/$jsx';
+
+class PieChart extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const self = this;
+    const defaults = extend({}, app.params.pieChart); // Extend defaults with modules params
+
+    self.useModulesParams(defaults);
+    self.params = extend(defaults, params);
+    const {
+      el
+    } = self.params;
+    if (!el) return self;
+    const $el = $(el);
+    if ($el.length === 0) return self;
+    if ($el[0].f7PieChart) return $el[0].f7PieChart;
+    extend(self, {
+      app,
+      $el,
+      el: $el && $el[0],
+      currentIndex: null,
+      f7Tooltip: null
+    });
+    $el[0].f7PieChart = self; // Install Modules
+
+    self.useModules();
+    self.showTooltip = self.showTooltip.bind(this);
+    self.hideTooltip = self.hideTooltip.bind(this);
+    self.init();
+    return self;
+  }
+
+  getSummValue() {
+    const {
+      datasets
+    } = this.params;
+    let summ = 0;
+    datasets.map(d => d.value || 0).forEach(value => {
+      summ += value;
+    });
+    return summ;
+  }
+
+  getPaths() {
+    const {
+      datasets,
+      size
+    } = this.params;
+    const paths = [];
+    let cumulativePercentage = 0;
+
+    function getCoordinatesForPercentage(percentage) {
+      const x = Math.cos(2 * Math.PI * percentage) * (size / 3);
+      const y = Math.sin(2 * Math.PI * percentage) * (size / 3);
+      return [x, y];
+    }
+
+    datasets.forEach(({
+      value,
+      label,
+      color
+    }) => {
+      const percentage = value / this.getSummValue();
+      const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
+      cumulativePercentage += percentage;
+      const [endX, endY] = getCoordinatesForPercentage(cumulativePercentage);
+      const largeArcFlag = percentage > 0.5 ? 1 : 0;
+      const points = [`M ${startX} ${startY}`, // Move
+      `A ${size / 3} ${size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+      'L 0 0' // Line
+      ].join(' ');
+      paths.push({
+        points,
+        label,
+        color
+      });
+    });
+    return paths;
+  }
+
+  formatTooltipText() {
+    const {
+      datasets
+    } = this.params;
+    const {
+      currentIndex
+    } = this;
+    if (currentIndex === null) return '';
+    const {
+      value,
+      label,
+      color
+    } = datasets[currentIndex];
+    const percentage = value / this.getSummValue() * 100;
+
+    const round = v => {
+      if (parseInt(v, 10) === v) return v;
+      return Math.round(v * 100) / 100;
+    };
+
+    if (this.params.formatTooltip) {
+      return this.params.formatTooltip.call(this, {
+        index: currentIndex,
+        value,
+        label,
+        color,
+        percentage
+      });
+    }
+
+    const tooltipText = `${label ? `${label}: ` : ''}${round(value)} (${round(percentage)}%)`;
+    return `
+      <div class="pie-chart-tooltip-label">
+        <span class="pie-chart-tooltip-color" style="background-color: ${color};"></span> ${tooltipText}
+      </div>
+    `;
+  }
+
+  setTooltip() {
+    const self = this;
+    const {
+      currentIndex,
+      el,
+      app,
+      params
+    } = self;
+    const {
+      tooltip
+    } = params;
+    if (currentIndex === null && !self.f7Tooltip) return;
+    if (!tooltip || !el) return;
+
+    if (currentIndex !== null && !self.f7Tooltip) {
+      self.f7Tooltip = app.tooltip.create({
+        trigger: 'manual',
+        containerEl: el,
+        targetEl: el.querySelector(`path[data-index="${currentIndex}"]`),
+        text: self.formatTooltipText(),
+        cssClass: 'pie-chart-tooltip'
+      });
+      self.f7Tooltip.show();
+      return;
+    }
+
+    if (!self.f7Tooltip) return;
+
+    if (currentIndex !== null) {
+      self.f7Tooltip.setText(self.formatTooltipText());
+      self.f7Tooltip.setTargetEl(el.querySelector(`path[data-index="${currentIndex}"]`));
+      self.f7Tooltip.show();
+    } else {
+      self.f7Tooltip.hide();
+    }
+  }
+
+  render() {
+    const self = this;
+    const size = self.params.size;
+    const paths = self.getPaths();
+    return $jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      viewBox: `-${size / 3} -${size / 3} ${size * 2 / 3} ${size * 2 / 3}`,
+      style: "transform: rotate(-90deg)"
+    }, paths.map((path, index) => $jsx("path", {
+      d: path.points,
+      fill: path.color,
+      "data-index": index
+    })));
+  }
+
+  update(newParams = {}) {
+    const self = this;
+    const {
+      params
+    } = self;
+    Object.keys(newParams).forEach(param => {
+      if (typeof newParams[param] !== 'undefined') {
+        params[param] = newParams[param];
+      }
+    });
+    if (self.$svgEl.length === 0) return self;
+    self.$svgEl.remove();
+    delete self.$svgEl.f7PieChart;
+    const $svgEl = $(self.render()).eq(0);
+    $svgEl.f7PieChart = self;
+    extend(self, {
+      $svgEl,
+      svgEl: $svgEl && $svgEl[0]
+    });
+    self.$el.append($svgEl);
+    return self;
+  }
+
+  setCurrentIndex(index) {
+    const self = this;
+    if (index === self.currentIndex) return;
+    const {
+      datasets
+    } = self.params;
+    self.currentIndex = index;
+    self.$el.trigger('piechart:select', {
+      index,
+      dataset: datasets[index]
+    });
+    self.emit('local::select pieChartSelect', self, index, datasets[index]);
+  }
+
+  showTooltip(e) {
+    const newIndex = parseInt(e.target.getAttribute('data-index'), 10);
+    this.setCurrentIndex(newIndex);
+    this.$svgEl.find('path').removeClass('pie-chart-hidden').forEach((el, index) => {
+      if (index !== this.currentIndex) $(el).addClass('pie-chart-hidden');
+    });
+    this.setTooltip();
+  }
+
+  hideTooltip() {
+    this.setCurrentIndex(null);
+    this.$svgEl.find('path').removeClass('pie-chart-hidden');
+    this.setTooltip();
+  }
+
+  init() {
+    const self = this;
+    const $svgEl = $(self.render()).eq(0);
+    $svgEl.f7PieChart = self;
+    extend(self, {
+      $svgEl,
+      svgEl: $svgEl && $svgEl[0]
+    });
+    self.$el.append($svgEl);
+    self.$el.on('click mouseenter', 'path', self.showTooltip, true);
+    self.$el.on('mouseleave', 'path', self.hideTooltip, true);
+    return self;
+  }
+
+  destroy() {
+    const self = this;
+    if (!self.$el || self.destroyed) return;
+    self.$el.trigger('piechart:beforedestroy');
+    self.emit('local::beforeDestroy pieChartBeforeDestroy', self);
+    self.$el.off('click mouseenter', 'path', self.showTooltip, true);
+    self.$el.off('mouseleave', 'path', self.hideTooltip, true);
+    self.$svgEl.remove();
+
+    if (self.f7Tooltip && self.f7Tooltip.destroy) {
+      self.f7Tooltip.destroy();
+    }
+
+    delete self.$el[0].f7PieChart;
+    deleteProps(self);
+    self.destroyed = true;
+  }
+
+}
+
+export default PieChart;

package/components/pie-chart/pie-chart.js

@@ -1 +1,35 @@
-(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var r=t.$,o=t.utils,n=(t.getDevice,t.getSupport,t.Class),i=(t.Modal,t.ConstructorMethods);t.ModalMethods;function a(t){this.wrapped=t}function s(t){var e,r;function o(e,r){try{var i=t[e](r),s=i.value,l=s instanceof a;Promise.resolve(l?s.wrapped:s).then((function(t){l?o("return"===e?"return":"next",t):n(i.done?"return":"normal",t)}),(function(t){o("throw",t)}))}catch(t){n("throw",t)}}function n(t,n){switch(t){case"return":e.resolve({value:n,done:!0});break;case"throw":e.reject(n);break;default:e.resolve({value:n,done:!1})}(e=e.next)?o(e.key,e.arg):r=null}this._invoke=function(t,n){return new Promise((function(i,a){var s={key:t,arg:n,resolve:i,reject:a,next:null};r?r=r.next=s:(e=r=s,o(t,n))}))},"function"!=typeof t.return&&(this.return=void 0)}function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}s.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},s.prototype.next=function(t){return this._invoke("next",t)},s.prototype.throw=function(t){return this._invoke("throw",t)},s.prototype.return=function(t){return this._invoke("return",t)};var p=o.extend,c=o.deleteProps,h=function(t){var e,o;function n(e,o){var n;void 0===o&&(o={});var i=u(n=t.call(this,o,[e])||this),a=p({},e.params.pieChart);i.useModulesParams(a),i.params=p(a,o);var s=i.params.el;if(!s)return i||u(n);var l=r(s);return 0===l.length?i||u(n):l[0].f7PieChart?l[0].f7PieChart||u(n):(p(i,{app:e,$el:l,el:l&&l[0],currentIndex:null,f7Tooltip:null}),l[0].f7PieChart=i,i.useModules(),i.showTooltip=i.showTooltip.bind(u(n)),i.hideTooltip=i.hideTooltip.bind(u(n)),i.init(),i||u(n))}o=t,(e=n).prototype=Object.create(o.prototype),e.prototype.constructor=e,l(e,o);var i=n.prototype;return i.getSummValue=function(){var t=this.params.datasets,e=0;return t.map((function(t){return t.value||0})).forEach((function(t){e+=t})),e},i.getPaths=function(){var t=this,e=this.params,r=e.datasets,o=e.size,n=[],i=0;function a(t){return[Math.cos(2*Math.PI*t)*(o/3),Math.sin(2*Math.PI*t)*(o/3)]}return r.forEach((function(e){var r=e.value,s=e.label,l=e.color,u=r/t.getSummValue(),p=a(i),c=p[0],h=p[1],f=a(i+=u),d=f[0],v=f[1],m=["M "+c+" "+h,"A "+o/3+" "+o/3+" 0 "+(u>.5?1:0)+" 1 "+d+" "+v,"L 0 0"].join(" ");n.push({points:m,label:s,color:l})})),n},i.formatTooltipText=function(){var t=this.params.datasets,e=this.currentIndex;if(null===e)return"";var r=t[e],o=r.value,n=r.label,i=r.color,a=o/this.getSummValue()*100,s=function(t){return parseInt(t,10)===t?t:Math.round(100*t)/100};return this.params.formatTooltip?this.params.formatTooltip.call(this,{index:e,value:o,label:n,color:i,percentage:a}):'\n      <div class="pie-chart-tooltip-label">\n        <span class="pie-chart-tooltip-color" style="background-color: '+i+';"></span> '+((n?n+": ":"")+s(o)+" ("+s(a)+"%)")+"\n      </div>\n    "},i.setTooltip=function(){var t=this,e=t.currentIndex,r=t.el,o=t.app,n=t.params.tooltip;if((null!==e||t.f7Tooltip)&&n&&r)return null===e||t.f7Tooltip?void(t.f7Tooltip&&(null!==e?(t.f7Tooltip.setText(t.formatTooltipText()),t.f7Tooltip.setTargetEl(r.querySelector('path[data-index="'+e+'"]')),t.f7Tooltip.show()):t.f7Tooltip.hide())):(t.f7Tooltip=o.tooltip.create({trigger:"manual",containerEl:r,targetEl:r.querySelector('path[data-index="'+e+'"]'),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.f7Tooltip.show())},i.render=function(){var t=this.params.size,e=this.getPaths();return $jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,viewBox:"-"+t/3+" -"+t/3+" "+2*t/3+" "+2*t/3,style:"transform: rotate(-90deg)"},e.map((function(t,e){return $jsx("path",{d:t.points,fill:t.color,"data-index":e})})))},i.update=function(t){void 0===t&&(t={});var e=this,o=e.params;if(Object.keys(t).forEach((function(e){void 0!==t[e]&&(o[e]=t[e])})),0===e.$svgEl.length)return e;e.$svgEl.remove(),delete e.$svgEl.f7PieChart;var n=r(e.render()).eq(0);return n.f7PieChart=e,p(e,{$svgEl:n,svgEl:n&&n[0]}),e.$el.append(n),e},i.setCurrentIndex=function(t){var e=this;if(t!==e.currentIndex){var r=e.params.datasets;e.currentIndex=t,e.$el.trigger("piechart:select",{index:t,dataset:r[t]}),e.emit("local::select pieChartSelect",e,t,r[t])}},i.showTooltip=function(t){var e=this,o=parseInt(t.target.getAttribute("data-index"),10);this.setCurrentIndex(o),this.$svgEl.find("path").removeClass("pie-chart-hidden").forEach((function(t,o){o!==e.currentIndex&&r(t).addClass("pie-chart-hidden")})),this.setTooltip()},i.hideTooltip=function(){this.setCurrentIndex(null),this.$svgEl.find("path").removeClass("pie-chart-hidden"),this.setTooltip()},i.init=function(){var t=this,e=r(t.render()).eq(0);return e.f7PieChart=t,p(t,{$svgEl:e,svgEl:e&&e[0]}),t.$el.append(e),t.$el.on("click mouseenter","path",t.showTooltip,!0),t.$el.on("mouseleave","path",t.hideTooltip,!0),t},i.destroy=function(){var t=this;t.$el&&!t.destroyed&&(t.$el.trigger("piechart:beforedestroy"),t.emit("local::beforeDestroy pieChartBeforeDestroy",t),t.$el.off("click mouseenter","path",t.showTooltip,!0),t.$el.off("mouseleave","path",t.hideTooltip,!0),t.$svgEl.remove(),t.f7Tooltip&&t.f7Tooltip.destroy&&t.f7Tooltip.destroy(),delete t.$el[0].f7PieChart,c(t),t.destroyed=!0)},n}(n),f={name:"pieChart",params:{pieChart:{el:null,datasets:[],size:320,tooltip:!1,formatTooltip:null}},create:function(){var t=this;t.pieChart=i({defaultSelector:".pie-chart",constructor:h,app:t,domProp:"f7PieChart"}),t.pieChart.update=function(e,o){if(0!==r(e).length){var n=t.pieChart.get(e);if(n)return n.update(o),n}}}};if(e){if(t.prototype.modules&&t.prototype.modules[f.name])return;t.use(f),t.instance&&(t.instance.useModuleParams(f,t.instance.params),t.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7';
+import PieChart from './pie-chart-class';
+import ConstructorMethods from '../../shared/constructor-methods';
+export default {
+  name: 'pieChart',
+  params: {
+    pieChart: {
+      el: null,
+      datasets: [],
+      size: 320,
+      tooltip: false,
+      formatTooltip: null
+    }
+  },
+
+  create() {
+    const app = this;
+    app.pieChart = ConstructorMethods({
+      defaultSelector: '.pie-chart',
+      constructor: PieChart,
+      app,
+      domProp: 'f7PieChart'
+    });
+
+    app.pieChart.update = function update(el, newParams) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const pieChart = app.pieChart.get(el);
+      if (!pieChart) return undefined;
+      pieChart.update(newParams);
+      return pieChart;
+    };
+  }
+
+};

package/components/pie-chart/pie-chart.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,r=t.utils,s=(t.getDevice,t.getSupport,t.Class),a=(t.Modal,t.ConstructorMethods),i=(t.ModalMethods,r.extend),l=r.deleteProps;class n extends s{constructor(t,e={}){super(e,[t]);const r=this,s=i({},t.params.pieChart);r.useModulesParams(s),r.params=i(s,e);const{el:a}=r.params;if(!a)return r;const l=o(a);return 0===l.length?r:l[0].f7PieChart?l[0].f7PieChart:(i(r,{app:t,$el:l,el:l&&l[0],currentIndex:null,f7Tooltip:null}),l[0].f7PieChart=r,r.useModules(),r.showTooltip=r.showTooltip.bind(this),r.hideTooltip=r.hideTooltip.bind(this),r.init(),r)}getSummValue(){const{datasets:t}=this.params;let e=0;return t.map((t=>t.value||0)).forEach((t=>{e+=t})),e}getPaths(){const{datasets:t,size:e}=this.params,o=[];let r=0;function s(t){return[Math.cos(2*Math.PI*t)*(e/3),Math.sin(2*Math.PI*t)*(e/3)]}return t.forEach((({value:t,label:a,color:i})=>{const l=t/this.getSummValue(),[n,p]=s(r);r+=l;const[h,d]=s(r),c=[`M ${n} ${p}`,`A ${e/3} ${e/3} 0 ${l>.5?1:0} 1 ${h} ${d}`,"L 0 0"].join(" ");o.push({points:c,label:a,color:i})})),o}formatTooltipText(){const{datasets:t}=this.params,{currentIndex:e}=this;if(null===e)return"";const{value:o,label:r,color:s}=t[e],a=o/this.getSummValue()*100,i=t=>parseInt(t,10)===t?t:Math.round(100*t)/100;if(this.params.formatTooltip)return this.params.formatTooltip.call(this,{index:e,value:o,label:r,color:s,percentage:a});return`\n        <div class="pie-chart-tooltip-label">\n          <span class="pie-chart-tooltip-color" style="background-color: ${s};"></span> ${`${r?`${r}: `:""}${i(o)} (${i(a)}%)`}\n        </div>\n      `}setTooltip(){const t=this,{currentIndex:e,el:o,app:r,params:s}=t,{tooltip:a}=s;if((null!==e||t.f7Tooltip)&&a&&o)return null===e||t.f7Tooltip?void(t.f7Tooltip&&(null!==e?(t.f7Tooltip.setText(t.formatTooltipText()),t.f7Tooltip.setTargetEl(o.querySelector(`path[data-index="${e}"]`)),t.f7Tooltip.show()):t.f7Tooltip.hide())):(t.f7Tooltip=r.tooltip.create({trigger:"manual",containerEl:o,targetEl:o.querySelector(`path[data-index="${e}"]`),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.f7Tooltip.show())}render(){const t=this.params.size,e=this.getPaths();return $jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,viewBox:`-${t/3} -${t/3} ${2*t/3} ${2*t/3}`,style:"transform: rotate(-90deg)"},e.map(((t,e)=>$jsx("path",{d:t.points,fill:t.color,"data-index":e}))))}update(t={}){const e=this,{params:r}=e;if(Object.keys(t).forEach((e=>{void 0!==t[e]&&(r[e]=t[e])})),0===e.$svgEl.length)return e;e.$svgEl.remove(),delete e.$svgEl.f7PieChart;const s=o(e.render()).eq(0);return s.f7PieChart=e,i(e,{$svgEl:s,svgEl:s&&s[0]}),e.$el.append(s),e}setCurrentIndex(t){const e=this;if(t===e.currentIndex)return;const{datasets:o}=e.params;e.currentIndex=t,e.$el.trigger("piechart:select",{index:t,dataset:o[t]}),e.emit("local::select pieChartSelect",e,t,o[t])}showTooltip(t){const e=parseInt(t.target.getAttribute("data-index"),10);this.setCurrentIndex(e),this.$svgEl.find("path").removeClass("pie-chart-hidden").forEach(((t,e)=>{e!==this.currentIndex&&o(t).addClass("pie-chart-hidden")})),this.setTooltip()}hideTooltip(){this.setCurrentIndex(null),this.$svgEl.find("path").removeClass("pie-chart-hidden"),this.setTooltip()}init(){const t=this,e=o(t.render()).eq(0);return e.f7PieChart=t,i(t,{$svgEl:e,svgEl:e&&e[0]}),t.$el.append(e),t.$el.on("click mouseenter","path",t.showTooltip,!0),t.$el.on("mouseleave","path",t.hideTooltip,!0),t}destroy(){const t=this;t.$el&&!t.destroyed&&(t.$el.trigger("piechart:beforedestroy"),t.emit("local::beforeDestroy pieChartBeforeDestroy",t),t.$el.off("click mouseenter","path",t.showTooltip,!0),t.$el.off("mouseleave","path",t.hideTooltip,!0),t.$svgEl.remove(),t.f7Tooltip&&t.f7Tooltip.destroy&&t.f7Tooltip.destroy(),delete t.$el[0].f7PieChart,l(t),t.destroyed=!0)}}var p={name:"pieChart",params:{pieChart:{el:null,datasets:[],size:320,tooltip:!1,formatTooltip:null}},create(){const t=this;t.pieChart=a({defaultSelector:".pie-chart",constructor:n,app:t,domProp:"f7PieChart"}),t.pieChart.update=function(e,r){if(0===o(e).length)return;const s=t.pieChart.get(e);return s?(s.update(r),s):void 0}}};if(e){if(t.prototype.modules&&t.prototype.modules[p.name])return;t.use(p),t.instance&&(t.instance.useModuleParams(p,t.instance.params),t.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/{esm/components → components}/popover/popover-class.js

@@ -1,57 +1,43 @@
-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 { getWindow, getDocument } from 'ssr-window';
 import $ from '../../shared/dom7';
 import { extend } from '../../shared/utils';
 import { getDevice } from '../../shared/get-device';
 import Modal from '../modal/modal-class';
 
-var Popover = /*#__PURE__*/function (_Modal) {
-  _inheritsLoose(Popover, _Modal);
-
-  function Popover(app, params) {
-    var _this;
-
-    var extendedParams = extend({
+class Popover extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
       on: {}
     }, app.params.popover, params); // Extends with open/close Modal methods;
 
-    _this = _Modal.call(this, app, extendedParams) || this;
-
-    var popover = _assertThisInitialized(_this);
-
-    var device = getDevice();
-    var window = getWindow();
-    var document = getDocument();
+    super(app, extendedParams);
+    const popover = this;
+    const device = getDevice();
+    const window = getWindow();
+    const document = getDocument();
     popover.params = extendedParams; // Find Element
 
-    var $el;
+    let $el;
 
     if (!popover.params.el) {
-      $el = $(popover.params.content).filter(function (node) {
-        return node.nodeType === 1;
-      }).eq(0);
+      $el = $(popover.params.content).filter(node => node.nodeType === 1).eq(0);
     } else {
       $el = $(popover.params.el).eq(0);
     }
 
     if ($el && $el.length > 0 && $el[0].f7Modal) {
-      return $el[0].f7Modal || _assertThisInitialized(_this);
+      return $el[0].f7Modal;
     } // Find Target
 
 
-    var $targetEl = $(popover.params.targetEl).eq(0);
+    const $targetEl = $(popover.params.targetEl).eq(0);
 
     if ($el.length === 0) {
-      return popover.destroy() || _assertThisInitialized(_this);
+      return popover.destroy();
     } // Backdrop
 
 
-    var $backdropEl;
+    let $backdropEl;
 
     if (popover.params.backdrop && popover.params.backdropEl) {
       $backdropEl = $(popover.params.backdropEl);
@@ -65,7 +51,7 @@ var Popover = /*#__PURE__*/function (_Modal) {
     } // Find Angle
 
 
-    var $angleEl;
+    let $angleEl;
 
     if ($el.find('.popover-angle').length === 0) {
       $angleEl = $('<div class="popover-angle"></div>');
@@ -75,30 +61,22 @@ var Popover = /*#__PURE__*/function (_Modal) {
     } // Open
 
 
-    var originalOpen = popover.open;
+    const originalOpen = popover.open;
     extend(popover, {
-      app: app,
-      $el: $el,
+      app,
+      $el,
       el: $el[0],
-      $targetEl: $targetEl,
+      $targetEl,
       targetEl: $targetEl[0],
-      $angleEl: $angleEl,
+      $angleEl,
       angleEl: $angleEl[0],
-      $backdropEl: $backdropEl,
+      $backdropEl,
       backdropEl: $backdropEl && $backdropEl[0],
       type: 'popover',
-      open: function open() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        var targetEl = args[0],
-            animate = args[1];
 
-        if (typeof args[0] === 'boolean') {
-          animate = args[0];
-          targetEl = args[1];
-        }
+      open(...args) {
+        let [targetEl, animate] = args;
+        if (typeof args[0] === 'boolean') [animate, targetEl] = args;
 
         if (targetEl) {
           popover.$targetEl = $(targetEl);
@@ -107,31 +85,32 @@ var Popover = /*#__PURE__*/function (_Modal) {
 
         return originalOpen.call(popover, animate);
       }
+
     });
 
     function handleResize() {
       popover.resize();
     }
 
-    popover.on('popoverOpen', function () {
+    popover.on('popoverOpen', () => {
       popover.resize();
       app.on('resize', handleResize);
       $(window).on('keyboardDidShow keyboardDidHide', handleResize);
-      popover.on('popoverClose popoverBeforeDestroy', function () {
+      popover.on('popoverClose popoverBeforeDestroy', () => {
         app.off('resize', handleResize);
         $(window).off('keyboardDidShow keyboardDidHide', handleResize);
       });
     });
-    var touchStartTarget = null;
+    let touchStartTarget = null;
 
     function handleTouchStart(e) {
       touchStartTarget = e.target;
     }
 
     function handleClick(e) {
-      var target = e.target;
-      var $target = $(target);
-      var keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
+      const target = e.target;
+      const $target = $(target);
+      const keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
       if (keyboardOpened) return;
 
       if ($target.closest(popover.el).length === 0) {
@@ -144,7 +123,7 @@ var Popover = /*#__PURE__*/function (_Modal) {
     }
 
     function onKeyDown(e) {
-      var keyCode = e.keyCode;
+      const keyCode = e.keyCode;
 
       if (keyCode === 27 && popover.params.closeOnEscape) {
         popover.close();
@@ -152,51 +131,50 @@ var Popover = /*#__PURE__*/function (_Modal) {
     }
 
     if (popover.params.closeOnEscape) {
-      popover.on('popoverOpen', function () {
+      popover.on('popoverOpen', () => {
         $(document).on('keydown', onKeyDown);
       });
-      popover.on('popoverClose', function () {
+      popover.on('popoverClose', () => {
         $(document).off('keydown', onKeyDown);
       });
     }
 
-    popover.on('popoverOpened', function () {
+    popover.on('popoverOpened', () => {
       if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) {
         app.on('touchstart', handleTouchStart);
         app.on('click', handleClick);
       }
     });
-    popover.on('popoverClose', function () {
+    popover.on('popoverClose', () => {
       if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) {
         app.off('touchstart', handleTouchStart);
         app.off('click', handleClick);
       }
     });
     $el[0].f7Modal = popover;
-    return popover || _assertThisInitialized(_this);
+    return popover;
   }
 
-  var _proto = Popover.prototype;
-
-  _proto.resize = function resize() {
-    var popover = this;
-    var app = popover.app,
-        $el = popover.$el,
-        $targetEl = popover.$targetEl,
-        $angleEl = popover.$angleEl;
-    var _popover$params = popover.params,
-        targetX = _popover$params.targetX,
-        targetY = _popover$params.targetY;
+  resize() {
+    const popover = this;
+    const {
+      app,
+      $el,
+      $targetEl,
+      $angleEl
+    } = popover;
+    const {
+      targetX,
+      targetY
+    } = popover.params;
     $el.css({
       left: '',
       top: ''
     });
-    var _ref = [$el.width(), $el.height()],
-        width = _ref[0],
-        height = _ref[1];
-    var angleSize = 0;
-    var angleLeft;
-    var angleTop;
+    const [width, height] = [$el.width(), $el.height()];
+    let angleSize = 0;
+    let angleLeft;
+    let angleTop;
 
     if (app.theme === 'ios' || app.theme === 'aurora') {
       $angleEl.removeClass('on-left on-right on-top on-bottom').css({
@@ -211,13 +189,13 @@ var Popover = /*#__PURE__*/function (_Modal) {
       });
     }
 
-    var targetWidth;
-    var targetHeight;
-    var targetOffsetLeft;
-    var targetOffsetTop;
-    var safeAreaTop = parseInt($('html').css('--f7-safe-area-top'), 10);
-    var safeAreaLeft = parseInt($('html').css('--f7-safe-area-left'), 10);
-    var safeAreaRight = parseInt($('html').css('--f7-safe-area-right'), 10);
+    let targetWidth;
+    let targetHeight;
+    let targetOffsetLeft;
+    let targetOffsetTop;
+    let safeAreaTop = parseInt($('html').css('--f7-safe-area-top'), 10);
+    let safeAreaLeft = parseInt($('html').css('--f7-safe-area-left'), 10);
+    let safeAreaRight = parseInt($('html').css('--f7-safe-area-right'), 10);
     if (Number.isNaN(safeAreaTop)) safeAreaTop = 0;
     if (Number.isNaN(safeAreaLeft)) safeAreaLeft = 0;
     if (Number.isNaN(safeAreaRight)) safeAreaRight = 0;
@@ -225,10 +203,10 @@ var Popover = /*#__PURE__*/function (_Modal) {
     if ($targetEl && $targetEl.length > 0) {
       targetWidth = $targetEl.outerWidth();
       targetHeight = $targetEl.outerHeight();
-      var targetOffset = $targetEl.offset();
+      const targetOffset = $targetEl.offset();
       targetOffsetLeft = targetOffset.left - app.left;
       targetOffsetTop = targetOffset.top - app.top;
-      var targetParentPage = $targetEl.parents('.page');
+      const targetParentPage = $targetEl.parents('.page');
 
       if (targetParentPage.length > 0) {
         targetOffsetTop -= targetParentPage[0].scrollTop;
@@ -240,11 +218,9 @@ var Popover = /*#__PURE__*/function (_Modal) {
       targetHeight = popover.params.targetHeight || 0;
     }
 
-    var left = 0,
-        top = 0,
-        diff = 0; // Top Position
+    let [left, top, diff] = [0, 0, 0]; // Top Position
 
-    var position = app.theme === 'md' ? 'bottom' : 'top';
+    let position = app.theme === 'md' ? 'bottom' : 'top';
 
     if (app.theme === 'md') {
       if (height < app.height - targetOffsetTop - targetHeight) {
@@ -263,7 +239,7 @@ var Popover = /*#__PURE__*/function (_Modal) {
 
       top = Math.max(8, Math.min(top, app.height - height - 8)); // Horizontal Position
 
-      var hPosition;
+      let hPosition;
 
       if (targetOffsetLeft < app.width / 2) {
         hPosition = 'right';
@@ -274,7 +250,7 @@ var Popover = /*#__PURE__*/function (_Modal) {
       }
 
       left = Math.max(8, Math.min(left, app.width - width - 8 - safeAreaRight), safeAreaLeft);
-      $el.addClass("popover-on-" + position + " popover-on-" + hPosition);
+      $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
     } else {
       // ios and aurora
       if (height + angleSize < targetOffsetTop - safeAreaTop) {
@@ -319,7 +295,7 @@ var Popover = /*#__PURE__*/function (_Modal) {
         angleLeft = width / 2 - angleSize + diff;
         angleLeft = Math.max(Math.min(angleLeft, width - angleSize * 2 - 13), 13);
         $angleEl.css({
-          left: angleLeft + "px"
+          left: `${angleLeft}px`
         });
       } else if (position === 'middle') {
         left = targetOffsetLeft - width - angleSize;
@@ -335,19 +311,18 @@ var Popover = /*#__PURE__*/function (_Modal) {
         angleTop = height / 2 - angleSize + diff;
         angleTop = Math.max(Math.min(angleTop, height - angleSize * 2 - 13), 13);
         $angleEl.css({
-          top: angleTop + "px"
+          top: `${angleTop}px`
         });
       }
     } // Apply Styles
 
 
     $el.css({
-      top: top + "px",
-      left: left + "px"
+      top: `${top}px`,
+      left: `${left}px`
     });
-  };
+  }
 
-  return Popover;
-}(Modal);
+}
 
 export default Popover;