framework7 6.3.16 → 7.0.0-beta.12

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

@@ -1,62 +1,55 @@
-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({
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import Modal from '../modal/modal-class.js';
+
+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;
+    const forceBackdropUnique = popover.params.backdrop && app.$el.find('.popover.modal-in').filter(anotherPopoverEl => anotherPopoverEl !== $el[0]).length > 0;
 
     if (popover.params.backdrop && popover.params.backdropEl) {
       $backdropEl = $(popover.params.backdropEl);
     } else if (popover.params.backdrop) {
-      $backdropEl = popover.$containerEl.children('.popover-backdrop');
+      if (popover.params.backdropUnique || forceBackdropUnique) {
+        $backdropEl = $('<div class="popover-backdrop popover-backdrop-unique"></div>');
+        $backdropEl[0].f7PopoverRef = popover;
+        popover.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = popover.$containerEl.children('.popover-backdrop');
+      }
 
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="popover-backdrop"></div>');
@@ -65,7 +58,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 +68,23 @@ 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];
-        }
+      forceBackdropUnique,
 
-        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,44 +93,50 @@ 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) {
         if (popover.params.closeByBackdropClick && popover.params.backdrop && popover.backdropEl && popover.backdropEl === target && touchStartTarget === target) {
           popover.close();
         } else if (popover.params.closeByOutsideClick && touchStartTarget === target) {
-          popover.close();
+          const isAnotherPopoverBackdrop = $target.hasClass('popover-backdrop-unique') && target.f7PopoverRef !== popover || $target.hasClass('popover-backdrop') && target !== popover.backdropEl;
+          const isAnotherPopoverTarget = target.closest('.popover') && target.closest('.popover') !== popover.$el[0];
+
+          if (!isAnotherPopoverBackdrop && !isAnotherPopoverTarget) {
+            popover.close();
+          }
         }
       }
     }
 
     function onKeyDown(e) {
-      var keyCode = e.keyCode;
+      const keyCode = e.keyCode;
 
       if (keyCode === 27 && popover.params.closeOnEscape) {
         popover.close();
@@ -152,51 +144,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 +202,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 +216,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 +231,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 +252,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 +263,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 +308,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 +324,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;

package/components/popover/popover-rtl.css

@@ -1 +1 @@
-:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .theme-dark,.ios.theme-dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .theme-dark,.md.theme-dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .theme-dark,.aurora.theme-dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}

package/components/popover/popover.css

@@ -1 +1 @@
-:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .theme-dark,.ios.theme-dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .theme-dark,.md.theme-dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .theme-dark,.aurora.theme-dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}

package/components/popover/popover.d.ts

@@ -23,6 +23,8 @@ export namespace Popover {
     backdrop?: boolean;
     /** Backdrop element to share across instances */
     backdropEl?: HTMLElement | CSSSelector;
+    /** If enabled it creates unique backdrop element exclusively for this modal (default false) */
+    backdropUnique?: boolean;
     /** When enabled, popover will be closed on backdrop click. (default true) */
     closeByBackdropClick?: boolean;
     /** When enabled, popover will be closed on when click outside of it (default true) */

package/components/popover/popover.js

@@ -1 +1,77 @@
-(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,r=e.utils,n=e.getDevice,a=(e.getSupport,e.Class,e.Modal),p=(e.ConstructorMethods,e.ModalMethods),i=r.extend;function s(e){this.wrapped=e}function l(e){var o,t;function r(o,t){try{var a=e[o](t),p=a.value,i=p instanceof s;Promise.resolve(i?p.wrapped:p).then((function(e){i?r("return"===o?"return":"next",e):n(a.done?"return":"normal",e)}),(function(e){r("throw",e)}))}catch(e){n("throw",e)}}function n(e,n){switch(e){case"return":o.resolve({value:n,done:!0});break;case"throw":o.reject(n);break;default:o.resolve({value:n,done:!1})}(o=o.next)?r(o.key,o.arg):t=null}this._invoke=function(e,n){return new Promise((function(a,p){var i={key:e,arg:n,resolve:a,reject:p,next:null};t?t=t.next=i:(o=t=i,r(e,n))}))},"function"!=typeof e.return&&(this.return=void 0)}function c(e,o){return(c=Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}function d(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}l.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},l.prototype.next=function(e){return this._invoke("next",e)},l.prototype.throw=function(e){return this._invoke("throw",e)},l.prototype.return=function(e){return this._invoke("return",e)};var u=function(e){var o,r;function a(o,r){var a,p,s=i({on:{}},o.params.popover,r),l=d(a=e.call(this,o,s)||this),c=n();if(l.params=s,(p=l.params.el?t(l.params.el).eq(0):t(l.params.content).filter((function(e){return 1===e.nodeType})).eq(0))&&p.length>0&&p[0].f7Modal)return p[0].f7Modal||d(a);var u,h,f=t(l.params.targetEl).eq(0);if(0===p.length)return l.destroy()||d(a);l.params.backdrop&&l.params.backdropEl?u=t(l.params.backdropEl):l.params.backdrop&&0===(u=l.$containerEl.children(".popover-backdrop")).length&&(u=t('<div class="popover-backdrop"></div>'),l.$containerEl.append(u)),0===p.find(".popover-angle").length?(h=t('<div class="popover-angle"></div>'),p.prepend(h)):h=p.find(".popover-angle");var v=l.open;function m(){l.resize()}i(l,{app:o,$el:p,el:p[0],$targetEl:f,targetEl:f[0],$angleEl:h,angleEl:h[0],$backdropEl:u,backdropEl:u&&u[0],type:"popover",open:function(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];var n=o[0],a=o[1];return"boolean"==typeof o[0]&&(a=o[0],n=o[1]),n&&(l.$targetEl=t(n),l.targetEl=l.$targetEl[0]),v.call(l,a)}}),l.on("popoverOpen",(function(){l.resize(),o.on("resize",m),t(window).on("keyboardDidShow keyboardDidHide",m),l.on("popoverClose popoverBeforeDestroy",(function(){o.off("resize",m),t(window).off("keyboardDidShow keyboardDidHide",m)}))}));var g=null;function k(e){g=e.target}function y(e){var o=e.target,r=t(o);!c.desktop&&c.cordova&&(window.Keyboard&&window.Keyboard.isVisible||window.cordova.plugins&&window.cordova.plugins.Keyboard&&window.cordova.plugins.Keyboard.isVisible)||0===r.closest(l.el).length&&(l.params.closeByBackdropClick&&l.params.backdrop&&l.backdropEl&&l.backdropEl===o&&g===o||l.params.closeByOutsideClick&&g===o)&&l.close()}function b(e){27===e.keyCode&&l.params.closeOnEscape&&l.close()}return l.params.closeOnEscape&&(l.on("popoverOpen",(function(){t(document).on("keydown",b)})),l.on("popoverClose",(function(){t(document).off("keydown",b)}))),l.on("popoverOpened",(function(){(l.params.closeByOutsideClick||l.params.closeByBackdropClick)&&(o.on("touchstart",k),o.on("click",y))})),l.on("popoverClose",(function(){(l.params.closeByOutsideClick||l.params.closeByBackdropClick)&&(o.off("touchstart",k),o.off("click",y))})),p[0].f7Modal=l,l||d(a)}return r=e,(o=a).prototype=Object.create(r.prototype),o.prototype.constructor=o,c(o,r),a.prototype.resize=function(){var e=this,o=e.app,r=e.$el,n=e.$targetEl,a=e.$angleEl,p=e.params,i=p.targetX,s=p.targetY;r.css({left:"",top:""});var l,c,d,u,h,f,v=[r.width(),r.height()],m=v[0],g=v[1],k=0;"ios"===o.theme||"aurora"===o.theme?(a.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),k=a.width()/2):r.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""});var y=parseInt(t("html").css("--f7-safe-area-top"),10),b=parseInt(t("html").css("--f7-safe-area-left"),10),w=parseInt(t("html").css("--f7-safe-area-right"),10);if(Number.isNaN(y)&&(y=0),Number.isNaN(b)&&(b=0),Number.isNaN(w)&&(w=0),n&&n.length>0){d=n.outerWidth(),u=n.outerHeight();var E=n.offset();h=E.left-o.left,f=E.top-o.top;var C=n.parents(".page");C.length>0&&(f-=C[0].scrollTop)}else void 0!==i&&"undefined"!==s&&(h=i,f=s,d=e.params.targetWidth||0,u=e.params.targetHeight||0);var M,x=0,O=0,B=0,$="md"===o.theme?"bottom":"top";"md"===o.theme?(g<o.height-f-u?($="bottom",O=f+u):g<f-y?(O=f-g,$="top"):($="middle",O=u/2+f-g/2),O=Math.max(8,Math.min(O,o.height-g-8)),h<o.width/2?(M="right",x="middle"===$?h+d:h):(M="left",x="middle"===$?h-m:h+d-m),x=Math.max(8,Math.min(x,o.width-m-8-w),b),r.addClass("popover-on-"+$+" popover-on-"+M)):(g+k<f-y?O=f-g-k:g+k<o.height-f-u?($="bottom",O=f+u+k):($="middle",B=O=u/2+f-g/2,B-=O=Math.max(5,Math.min(O,o.height-g-5))),"top"===$||"bottom"===$?(B=x=d/2+h-m/2,x=Math.max(5,Math.min(x,o.width-m-5)),b&&(x=Math.max(x,b)),w&&x+m>o.width-5-w&&(x=o.width-5-w-m),"top"===$&&a.addClass("on-bottom"),"bottom"===$&&a.addClass("on-top"),l=m/2-k+(B-=x),l=Math.max(Math.min(l,m-2*k-13),13),a.css({left:l+"px"})):"middle"===$&&(x=h-m-k,a.addClass("on-right"),(x<5||x+m+w>o.width||x<b)&&(x<5&&(x=h+d+k),x+m+w>o.width&&(x=o.width-m-5-w),x<b&&(x=b),a.removeClass("on-right").addClass("on-left")),c=g/2-k+B,c=Math.max(Math.min(c,g-2*k-13),13),a.css({top:c+"px"})));r.css({top:O+"px",left:x+"px"})},a}(a),h={name:"popover",params:{popover:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeByOutsideClick:!0,closeOnEscape:!1,containerEl:null}},static:{Popover:u},create:function(){var e=this;e.popover=i(p({app:e,constructor:u,defaultSelector:".popover.modal-in"}),{open:function(o,r,n){var a=t(o);if(a.length>1){var p=t(r).parents(".page");p.length&&a.each((function(e){var o=t(e);o.parents(p)[0]===p[0]&&(a=o)}))}a.length>1&&(a=a.eq(a.length-1));var i=a[0].f7Modal,s=a.dataset();return i||(i=new u(e,Object.assign({el:a,targetEl:r},s))),i.open(r,n)}})},clicks:{".popover-open":function(e,o){void 0===o&&(o={});this.popover.open(o.popover,e,o.animate)},".popover-close":function(e,o){void 0===o&&(o={});this.popover.close(o.popover,o.animate,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[h.name])return;e.use(h),e.instance&&(e.instance.useModuleParams(h,e.instance.params),e.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Popover from './popover-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'popover',
+  params: {
+    popover: {
+      backdrop: true,
+      backdropEl: undefined,
+      backdropUnique: false,
+      closeByBackdropClick: true,
+      closeByOutsideClick: true,
+      closeOnEscape: false,
+      containerEl: null
+    }
+  },
+  static: {
+    Popover
+  },
+
+  create() {
+    const app = this;
+    app.popover = extend(ModalMethods({
+      app,
+      constructor: Popover,
+      defaultSelector: '.popover.modal-in'
+    }), {
+      open(popoverEl, targetEl, animate) {
+        let $popoverEl = $(popoverEl);
+
+        if ($popoverEl.length > 1) {
+          // check if same popover in other page
+          const $targetPage = $(targetEl).parents('.page');
+
+          if ($targetPage.length) {
+            $popoverEl.each(el => {
+              const $el = $(el);
+
+              if ($el.parents($targetPage)[0] === $targetPage[0]) {
+                $popoverEl = $el;
+              }
+            });
+          }
+        }
+
+        if ($popoverEl.length > 1) {
+          $popoverEl = $popoverEl.eq($popoverEl.length - 1);
+        }
+
+        let popover = $popoverEl[0].f7Modal;
+        const data = $popoverEl.dataset();
+
+        if (!popover) {
+          popover = new Popover(app, Object.assign({
+            el: $popoverEl,
+            targetEl
+          }, data));
+        }
+
+        return popover.open(targetEl, animate);
+      }
+
+    });
+  },
+
+  clicks: {
+    '.popover-open': function openPopover($clickedEl, data = {}) {
+      const app = this;
+      app.popover.open(data.popover, $clickedEl, data.animate);
+    },
+    '.popover-close': function closePopover($clickedEl, data = {}) {
+      const app = this;
+      app.popover.close(data.popover, data.animate, $clickedEl);
+    }
+  }
+};

package/components/popover/popover.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,a=e.utils,p=e.getDevice,r=(e.getSupport,e.Class,e.Modal),s=(e.ConstructorMethods,e.ModalMethods),l=a.extend;class n extends r{constructor(e,o){const a=l({on:{}},e.params.popover,o);super(e,a);const r=this,s=p(),n=getWindow(),i=getDocument();let d;if(r.params=a,d=r.params.el?t(r.params.el).eq(0):t(r.params.content).filter((e=>1===e.nodeType)).eq(0),d&&d.length>0&&d[0].f7Modal)return d[0].f7Modal;const c=t(r.params.targetEl).eq(0);if(0===d.length)return r.destroy();let m;const h=r.params.backdrop&&e.$el.find(".popover.modal-in").filter((e=>e!==d[0])).length>0;let f;r.params.backdrop&&r.params.backdropEl?m=t(r.params.backdropEl):r.params.backdrop&&(r.params.backdropUnique||h?(m=t('<div class="popover-backdrop popover-backdrop-unique"></div>'),m[0].f7PopoverRef=r,r.$containerEl.append(m)):m=r.$containerEl.children(".popover-backdrop"),0===m.length&&(m=t('<div class="popover-backdrop"></div>'),r.$containerEl.append(m))),0===d.find(".popover-angle").length?(f=t('<div class="popover-angle"></div>'),d.prepend(f)):f=d.find(".popover-angle");const v=r.open;function g(){r.resize()}l(r,{app:e,$el:d,el:d[0],$targetEl:c,targetEl:c[0],$angleEl:f,angleEl:f[0],$backdropEl:m,backdropEl:m&&m[0],type:"popover",forceBackdropUnique:h,open(...e){let[o,a]=e;return"boolean"==typeof e[0]&&([a,o]=e),o&&(r.$targetEl=t(o),r.targetEl=r.$targetEl[0]),v.call(r,a)}}),r.on("popoverOpen",(()=>{r.resize(),e.on("resize",g),t(n).on("keyboardDidShow keyboardDidHide",g),r.on("popoverClose popoverBeforeDestroy",(()=>{e.off("resize",g),t(n).off("keyboardDidShow keyboardDidHide",g)}))}));let u=null;function k(e){u=e.target}function b(e){const o=e.target,a=t(o);if(!(!s.desktop&&s.cordova&&(n.Keyboard&&n.Keyboard.isVisible||n.cordova.plugins&&n.cordova.plugins.Keyboard&&n.cordova.plugins.Keyboard.isVisible))&&0===a.closest(r.el).length)if(r.params.closeByBackdropClick&&r.params.backdrop&&r.backdropEl&&r.backdropEl===o&&u===o)r.close();else if(r.params.closeByOutsideClick&&u===o){const e=a.hasClass("popover-backdrop-unique")&&o.f7PopoverRef!==r||a.hasClass("popover-backdrop")&&o!==r.backdropEl,t=o.closest(".popover")&&o.closest(".popover")!==r.$el[0];e||t||r.close()}}function y(e){27===e.keyCode&&r.params.closeOnEscape&&r.close()}return r.params.closeOnEscape&&(r.on("popoverOpen",(()=>{t(i).on("keydown",y)})),r.on("popoverClose",(()=>{t(i).off("keydown",y)}))),r.on("popoverOpened",(()=>{(r.params.closeByOutsideClick||r.params.closeByBackdropClick)&&(e.on("touchstart",k),e.on("click",b))})),r.on("popoverClose",(()=>{(r.params.closeByOutsideClick||r.params.closeByBackdropClick)&&(e.off("touchstart",k),e.off("click",b))})),d[0].f7Modal=r,r}resize(){const e=this,{app:o,$el:a,$targetEl:p,$angleEl:r}=e,{targetX:s,targetY:l}=e.params;a.css({left:"",top:""});const[n,i]=[a.width(),a.height()];let d,c,m,h,f,v,g=0;"ios"===o.theme||"aurora"===o.theme?(r.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),g=r.width()/2):a.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""});let u=parseInt(t("html").css("--f7-safe-area-top"),10),k=parseInt(t("html").css("--f7-safe-area-left"),10),b=parseInt(t("html").css("--f7-safe-area-right"),10);if(Number.isNaN(u)&&(u=0),Number.isNaN(k)&&(k=0),Number.isNaN(b)&&(b=0),p&&p.length>0){m=p.outerWidth(),h=p.outerHeight();const e=p.offset();f=e.left-o.left,v=e.top-o.top;const t=p.parents(".page");t.length>0&&(v-=t[0].scrollTop)}else void 0!==s&&"undefined"!==l&&(f=s,v=l,m=e.params.targetWidth||0,h=e.params.targetHeight||0);let[y,E,C]=[0,0,0],M="md"===o.theme?"bottom":"top";if("md"===o.theme){let e;i<o.height-v-h?(M="bottom",E=v+h):i<v-u?(E=v-i,M="top"):(M="middle",E=h/2+v-i/2),E=Math.max(8,Math.min(E,o.height-i-8)),f<o.width/2?(e="right",y="middle"===M?f+m:f):(e="left",y="middle"===M?f-n:f+m-n),y=Math.max(8,Math.min(y,o.width-n-8-b),k),a.addClass(`popover-on-${M} popover-on-${e}`)}else i+g<v-u?E=v-i-g:i+g<o.height-v-h?(M="bottom",E=v+h+g):(M="middle",E=h/2+v-i/2,C=E,E=Math.max(5,Math.min(E,o.height-i-5)),C-=E),"top"===M||"bottom"===M?(y=m/2+f-n/2,C=y,y=Math.max(5,Math.min(y,o.width-n-5)),k&&(y=Math.max(y,k)),b&&y+n>o.width-5-b&&(y=o.width-5-b-n),"top"===M&&r.addClass("on-bottom"),"bottom"===M&&r.addClass("on-top"),C-=y,d=n/2-g+C,d=Math.max(Math.min(d,n-2*g-13),13),r.css({left:`${d}px`})):"middle"===M&&(y=f-n-g,r.addClass("on-right"),(y<5||y+n+b>o.width||y<k)&&(y<5&&(y=f+m+g),y+n+b>o.width&&(y=o.width-n-5-b),y<k&&(y=k),r.removeClass("on-right").addClass("on-left")),c=i/2-g+C,c=Math.max(Math.min(c,i-2*g-13),13),r.css({top:`${c}px`}));a.css({top:`${E}px`,left:`${y}px`})}}var i={name:"popover",params:{popover:{backdrop:!0,backdropEl:void 0,backdropUnique:!1,closeByBackdropClick:!0,closeByOutsideClick:!0,closeOnEscape:!1,containerEl:null}},static:{Popover:n},create(){const e=this;e.popover=l(s({app:e,constructor:n,defaultSelector:".popover.modal-in"}),{open(o,a,p){let r=t(o);if(r.length>1){const e=t(a).parents(".page");e.length&&r.each((o=>{const a=t(o);a.parents(e)[0]===e[0]&&(r=a)}))}r.length>1&&(r=r.eq(r.length-1));let s=r[0].f7Modal;const l=r.dataset();return s||(s=new n(e,Object.assign({el:r,targetEl:a},l))),s.open(a,p)}})},clicks:{".popover-open":function(e,o={}){this.popover.open(o.popover,e,o.animate)},".popover-close":function(e,o={}){this.popover.close(o.popover,o.animate,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[i.name])return;e.use(i),e.instance&&(e.instance.useModuleParams(i,e.instance.params),e.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/popover/popover.less

@@ -1,6 +1,9 @@
 /* === Popover === */
 @import './popover-vars.less';
 .popover-backdrop {
+  &-unique {
+    z-index: 13500;
+  }
 }
 .popover {
   width: var(--f7-popover-width);