framework7 7.0.9 → 8.0.0-beta.1

package/components/popover/popover-class.js

@@ -3,43 +3,40 @@ 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;
+    }, app.params.popover, params);
 
+    // Extends with open/close Modal methods;
     super(app, extendedParams);
     const popover = this;
     const device = getDevice();
     const window = getWindow();
     const document = getDocument();
-    popover.params = extendedParams; // Find Element
+    popover.params = extendedParams;
 
+    // Find Element
     let $el;
-
     if (!popover.params.el) {
       $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;
-    } // Find Target
-
+    }
 
+    // Find Target
     const $targetEl = $(popover.params.targetEl).eq(0);
-
     if ($el.length === 0) {
       return popover.destroy();
-    } // Backdrop
-
+    }
 
+    // Backdrop
     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) {
@@ -50,24 +47,22 @@ class Popover extends Modal {
       } else {
         $backdropEl = popover.$containerEl.children('.popover-backdrop');
       }
-
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="popover-backdrop"></div>');
         popover.$containerEl.append($backdropEl);
       }
-    } // Find Angle
-
+    }
 
+    // Find Angle
     let $angleEl;
-
-    if ($el.find('.popover-angle').length === 0) {
+    if ($el.find('.popover-angle').length === 0 && popover.params.angle) {
       $angleEl = $('<div class="popover-angle"></div>');
       $el.prepend($angleEl);
     } else {
       $angleEl = $el.find('.popover-angle');
-    } // Open
-
+    }
 
+    // Open
     const originalOpen = popover.open;
     extend(popover, {
       app,
@@ -81,29 +76,22 @@ class Popover extends Modal {
       backdropEl: $backdropEl && $backdropEl[0],
       type: 'popover',
       forceBackdropUnique,
-
       open() {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
         }
-
         let [targetEl, animate] = args;
         if (typeof args[0] === 'boolean') [animate, targetEl] = args;
-
         if (targetEl) {
           popover.$targetEl = $(targetEl);
           popover.targetEl = popover.$targetEl[0];
         }
-
         return originalOpen.call(popover, animate);
       }
-
     });
-
     function handleResize() {
       popover.resize();
     }
-
     popover.on('popoverOpen', () => {
       popover.resize();
       app.on('resize', handleResize);
@@ -114,39 +102,32 @@ class Popover extends Modal {
       });
     });
     let touchStartTarget = null;
-
     function handleTouchStart(e) {
       touchStartTarget = e.target;
     }
-
     function handleClick(e) {
       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) {
           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) {
       const keyCode = e.keyCode;
-
       if (keyCode === 27 && popover.params.closeOnEscape) {
         popover.close();
       }
     }
-
     if (popover.params.closeOnEscape) {
       popover.on('popoverOpen', () => {
         $(document).on('keydown', onKeyDown);
@@ -155,7 +136,6 @@ class Popover extends Modal {
         $(document).off('keydown', onKeyDown);
       });
     }
-
     popover.on('popoverOpened', () => {
       if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) {
         app.on('touchstart', handleTouchStart);
@@ -171,7 +151,6 @@ class Popover extends Modal {
     $el[0].f7Modal = popover;
     return popover;
   }
-
   resize() {
     const popover = this;
     const {
@@ -193,20 +172,19 @@ class Popover extends Modal {
     let angleSize = 0;
     let angleLeft;
     let angleTop;
-
-    if (app.theme === 'ios' || app.theme === 'aurora') {
+    const hasAngle = $angleEl.length > 0;
+    const angleMin = app.theme === 'ios' ? 13 : 24;
+    if (hasAngle) {
       $angleEl.removeClass('on-left on-right on-top on-bottom').css({
         left: '',
         top: ''
       });
       angleSize = $angleEl.width() / 2;
-    } else {
-      $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
-        left: '',
-        top: ''
-      });
     }
-
+    $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
+      left: '',
+      top: ''
+    });
     let targetWidth;
     let targetHeight;
     let targetOffsetLeft;
@@ -217,7 +195,6 @@ class Popover extends Modal {
     if (Number.isNaN(safeAreaTop)) safeAreaTop = 0;
     if (Number.isNaN(safeAreaLeft)) safeAreaLeft = 0;
     if (Number.isNaN(safeAreaRight)) safeAreaRight = 0;
-
     if ($targetEl && $targetEl.length > 0) {
       targetWidth = $targetEl.outerWidth();
       targetHeight = $targetEl.outerHeight();
@@ -225,7 +202,6 @@ class Popover extends Modal {
       targetOffsetLeft = targetOffset.left - app.left;
       targetOffsetTop = targetOffset.top - app.top;
       const targetParentPage = $targetEl.parents('.page');
-
       if (targetParentPage.length > 0) {
         targetOffsetTop -= targetParentPage[0].scrollTop;
       }
@@ -235,113 +211,83 @@ class Popover extends Modal {
       targetWidth = popover.params.targetWidth || 0;
       targetHeight = popover.params.targetHeight || 0;
     }
-
-    let [left, top, diff] = [0, 0, 0]; // Top Position
-
+    let [left, top, diff] = [0, 0, 0];
+    // Top Position
     const forcedPosition = verticalPosition === 'auto' ? false : verticalPosition;
-    let position = forcedPosition || (app.theme === 'md' ? 'bottom' : 'top');
+    let position = forcedPosition || 'top';
+    if (forcedPosition === 'top' || !forcedPosition && height + angleSize < targetOffsetTop - safeAreaTop) {
+      // On top
+      top = targetOffsetTop - height - angleSize;
+    } else if (forcedPosition === 'bottom' || !forcedPosition && height + angleSize < app.height - targetOffsetTop - targetHeight) {
+      // On bottom
+      position = 'bottom';
+      top = targetOffsetTop + targetHeight + angleSize;
+    } else {
+      // On middle
+      position = 'middle';
+      top = targetHeight / 2 + targetOffsetTop - height / 2;
+      diff = top;
+      top = Math.max(5, Math.min(top, app.height - height - 5));
+      diff -= top;
+    }
 
-    if (app.theme === 'md') {
-      if (forcedPosition === 'bottom' || !forcedPosition && height < app.height - targetOffsetTop - targetHeight) {
-        // On bottom
-        position = 'bottom';
-        top = targetOffsetTop + targetHeight;
-      } else if (forcedPosition === 'top' || !forcedPosition && height < targetOffsetTop - safeAreaTop) {
-        // On top
-        top = targetOffsetTop - height;
-        position = 'top';
-      } else {
-        // On middle
-        position = 'middle';
-        top = targetHeight / 2 + targetOffsetTop - height / 2;
+    // Horizontal Position
+    if (position === 'top' || position === 'bottom') {
+      left = targetWidth / 2 + targetOffsetLeft - width / 2;
+      diff = left;
+      left = Math.max(5, Math.min(left, app.width - width - 5));
+      if (safeAreaLeft) {
+        left = Math.max(left, safeAreaLeft);
       }
-
-      top = Math.max(8, Math.min(top, app.height - height - 8)); // Horizontal Position
-
-      let hPosition;
-
-      if (targetOffsetLeft < app.width / 2) {
-        hPosition = 'right';
-        left = position === 'middle' ? targetOffsetLeft + targetWidth : targetOffsetLeft;
-      } else {
-        hPosition = 'left';
-        left = position === 'middle' ? targetOffsetLeft - width : targetOffsetLeft + targetWidth - width;
+      if (safeAreaRight && left + width > app.width - 5 - safeAreaRight) {
+        left = app.width - 5 - safeAreaRight - width;
       }
-
-      left = Math.max(8, Math.min(left, app.width - width - 8 - safeAreaRight), safeAreaLeft);
-      $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
-    } else {
-      // ios and aurora
-      if (forcedPosition === 'top' || !forcedPosition && height + angleSize < targetOffsetTop - safeAreaTop) {
-        // On top
-        top = targetOffsetTop - height - angleSize;
-      } else if (forcedPosition === 'bottom' || !forcedPosition && height + angleSize < app.height - targetOffsetTop - targetHeight) {
-        // On bottom
-        position = 'bottom';
-        top = targetOffsetTop + targetHeight + angleSize;
-      } else {
-        // On middle
-        position = 'middle';
-        top = targetHeight / 2 + targetOffsetTop - height / 2;
-        diff = top;
-        top = Math.max(5, Math.min(top, app.height - height - 5));
-        diff -= top;
-      } // Horizontal Position
-
-
-      if (position === 'top' || position === 'bottom') {
-        left = targetWidth / 2 + targetOffsetLeft - width / 2;
-        diff = left;
-        left = Math.max(5, Math.min(left, app.width - width - 5));
-
-        if (safeAreaLeft) {
-          left = Math.max(left, safeAreaLeft);
-        }
-
-        if (safeAreaRight && left + width > app.width - 5 - safeAreaRight) {
-          left = app.width - 5 - safeAreaRight - width;
-        }
-
+      diff -= left;
+      if (hasAngle) {
         if (position === 'top') {
           $angleEl.addClass('on-bottom');
         }
-
         if (position === 'bottom') {
           $angleEl.addClass('on-top');
         }
-
-        diff -= left;
         angleLeft = width / 2 - angleSize + diff;
-        angleLeft = Math.max(Math.min(angleLeft, width - angleSize * 2 - 13), 13);
+        angleLeft = Math.max(Math.min(angleLeft, width - angleSize * 2 - angleMin), angleMin);
         $angleEl.css({
           left: `${angleLeft}px`
         });
-      } else if (position === 'middle') {
-        left = targetOffsetLeft - width - angleSize;
-        $angleEl.addClass('on-right');
-
-        if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
-          if (left < 5) left = targetOffsetLeft + targetWidth + angleSize;
-          if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
-          if (left < safeAreaLeft) left = safeAreaLeft;
-          $angleEl.removeClass('on-right').addClass('on-left');
-        }
-
+      }
+    } else if (position === 'middle') {
+      left = targetOffsetLeft - width - angleSize;
+      if (hasAngle) $angleEl.addClass('on-right');
+      if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
+        if (left < 5) left = targetOffsetLeft + targetWidth + angleSize;
+        if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
+        if (left < safeAreaLeft) left = safeAreaLeft;
+        if (hasAngle) $angleEl.removeClass('on-right').addClass('on-left');
+      }
+      if (hasAngle) {
         angleTop = height / 2 - angleSize + diff;
-        angleTop = Math.max(Math.min(angleTop, height - angleSize * 2 - 13), 13);
+        angleTop = Math.max(Math.min(angleTop, height - angleSize * 2 - angleMin), angleMin);
         $angleEl.css({
           top: `${angleTop}px`
         });
       }
-    } // Apply Styles
+    }
 
+    // Horizontal Position
+    let hPosition;
+    if (targetOffsetLeft < app.width / 2) {
+      hPosition = 'right';
+    } else {
+      hPosition = 'left';
+    }
+    $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
 
+    // Apply Styles
     $el.css({
       top: `${top}px`,
       left: `${left}px`
     });
   }
-
 }
-
 export default Popover;

package/components/popover/popover-ios.less

@@ -3,54 +3,4 @@
     transform: none;
     transition-property: opacity;
   }
-  .popover-angle {
-    width: 26px;
-    height: 26px;
-    position: absolute;
-    left: -26px;
-    top: 0;
-    z-index: 100;
-    overflow: hidden;
-    &:after {
-      content: '';
-      background: var(--f7-popover-bg-color);
-      width: 26px;
-      height: 26px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      border-radius: 3px;
-      transform: rotate(45deg);
-    }
-    &.on-left {
-      left: -26px;
-      &:after {
-        left: 19px;
-        top: 0;
-      }
-    }
-    &.on-right {
-      left: 100%;
-      &:after {
-        left: -19px;
-        top: 0;
-      }
-    }
-    &.on-top {
-      left: 0;
-      top: -26px;
-      &:after {
-        left: 0;
-        top: 19px;
-      }
-    }
-    &.on-bottom {
-      left: 0;
-      top: 100%;
-      &:after {
-        left: 0;
-        top: -19px;
-      }
-    }
-  }
 }

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 .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}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--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-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-popover-border-radius:28px;--f7-popover-actions-icon-size:24px}.md,.md .dark,.md [class*=color-]{--f7-popover-bg-color:var(--f7-md-surface-3);--f7-popover-actions-label-text-color:var(--f7-md-on-surface-variant)}.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);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,.popover-backdrop{transition-timing-function:var(--f7-popover-transition-timing-function)}.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)}.ios .popover-from-actions-strong{font-weight:600}.md .popover-from-actions-strong{font-weight:500}.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}.md .popover-from-actions-label{justify-content:center}.popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.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)}.popover-angle.on-left{left:-26px}.popover-angle.on-left:after{left:19px;top:0}.popover-angle.on-right{left:100%}.popover-angle.on-right:after{left:-19px;top:0}.popover-angle.on-top{left:0;top:-26px}.popover-angle.on-top:after{left:0;top:19px}.popover-angle.on-bottom{left:0;top:100%}.popover-angle.on-bottom:after{left:0;top:-19px}.ios .popover{transform:none;transition-property:opacity}.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}

package/components/popover/popover-vars.less

@@ -3,8 +3,8 @@
 }
 .ios-vars({
   --f7-popover-border-radius: 13px;
-  --f7-popover-box-shadow: none;
   --f7-popover-actions-icon-size: 28px;
+  --f7-popover-transition-timing-function: initial;
   .light-vars({
     --f7-popover-bg-color: rgba(255,255,255,0.95);
     --f7-popover-actions-label-text-color: rgba(0,0,0,0.45);
@@ -15,28 +15,11 @@
   });
 });
 .md-vars({
-  --f7-popover-border-radius: 4px;
-  --f7-popover-box-shadow: var(--f7-elevation-8);
+  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  --f7-popover-border-radius: 28px;
   --f7-popover-actions-icon-size: 24px;
-  .light-vars({
-    --f7-popover-bg-color: #fff;
-    --f7-popover-actions-label-text-color: rgba(0,0,0,0.54);
-  });
-  .dark-vars({
-    --f7-popover-bg-color: #1c1c1d;
-    --f7-popover-actions-label-text-color: rgba(255,255,255,0.54);
-  });
 });
-.aurora-vars({
-  --f7-popover-border-radius: 8px;
-  --f7-popover-box-shadow: var(--f7-elevation-8);
-  --f7-popover-actions-icon-size: 24px;
-  .light-vars({
-    --f7-popover-bg-color: #fff;
-    --f7-popover-actions-label-text-color: rgba(0,0,0,0.6);
-  });
-  .dark-vars({
-    --f7-popover-bg-color: #1c1c1d;
-    --f7-popover-actions-label-text-color: rgba(255,255,255,0.6);
-  });
+.md-color-vars({
+  --f7-popover-bg-color: var(--f7-md-surface-3);
+  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
 });

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 .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}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--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-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-popover-border-radius:28px;--f7-popover-actions-icon-size:24px}.md,.md .dark,.md [class*=color-]{--f7-popover-bg-color:var(--f7-md-surface-3);--f7-popover-actions-label-text-color:var(--f7-md-on-surface-variant)}.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);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,.popover-backdrop{transition-timing-function:var(--f7-popover-transition-timing-function)}.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)}.ios .popover-from-actions-strong{font-weight:600}.md .popover-from-actions-strong{font-weight:500}.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}.md .popover-from-actions-label{justify-content:center}.popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.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)}.popover-angle.on-left{left:-26px}.popover-angle.on-left:after{left:19px;top:0}.popover-angle.on-right{left:100%}.popover-angle.on-right:after{left:-19px;top:0}.popover-angle.on-top{left:0;top:-26px}.popover-angle.on-top:after{left:0;top:19px}.popover-angle.on-bottom{left:0;top:100%}.popover-angle.on-bottom:after{left:0;top:-19px}.ios .popover{transform:none;transition-property:opacity}.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}

package/components/popover/popover.d.ts

@@ -23,6 +23,8 @@ export namespace Popover {
     el?: HTMLElement | CSSSelector;
     /** Full Popover HTML layout string. Can be useful if you want to create Popover element dynamically. */
     content?: string;
+    /** Enables Popover angle/corner. (default true) */
+    angle?: boolean;
     /** Enables Popover backdrop (dark semi transparent layer behind). (default true) */
     backdrop?: boolean;
     /** Backdrop element to share across instances */

package/components/popover/popover.js

@@ -7,6 +7,7 @@ export default {
   params: {
     popover: {
       verticalPosition: 'auto',
+      angle: true,
       backdrop: true,
       backdropEl: undefined,
       backdropUnique: false,
@@ -19,7 +20,6 @@ export default {
   static: {
     Popover
   },
-
   create() {
     const app = this;
     app.popover = extend(ModalMethods({
@@ -29,48 +29,38 @@ export default {
     }), {
       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) {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.popover.open(data.popover, $clickedEl, data.animate);
     },
@@ -78,7 +68,6 @@ export default {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.popover.close(data.popover, data.animate, $clickedEl);
     }

package/components/popover/popover.lazy.js

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