framework7 8.3.4 → 9.0.0-beta.1

package/components/popup/popup-class.js

@@ -1,7 +1,6 @@
 import { getWindow, getDocument } from 'ssr-window';
 import $ from '../../shared/dom7.js';
 import { extend, now, nextTick } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 import { getDevice } from '../../shared/get-device.js';
 import Modal from '../modal/modal-class.js';
 class Popup extends Modal {
@@ -15,7 +14,6 @@ class Popup extends Modal {
     const popup = this;
     const window = getWindow();
     const document = getDocument();
-    const support = getSupport();
     const device = getDevice();
     popup.params = extendedParams;
 
@@ -238,9 +236,9 @@ class Popup extends Modal {
       allowSwipeToClose = true;
       $el.transform('');
     }
-    const passive = support.passiveListener ? {
+    const passive = {
       passive: true
-    } : false;
+    };
     if (popup.params.swipeToClose) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
@@ -263,7 +261,7 @@ class Popup extends Modal {
       } else if (isPush && wasPush) {
         popup.$htmlEl[0].style.setProperty('--f7-popup-push-scale', pushViewScale(pushOffset));
       } else if (!isPush && wasPush) {
-        popup.$htmlEl.removeClass('with-modal-popup-push');
+        $el.removeClass('popup-push-in');
         popup.$htmlEl[0].style.removeProperty('--f7-popup-push-scale');
       }
     };
@@ -280,8 +278,11 @@ class Popup extends Modal {
         if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
         popup.$htmlEl[0].style.setProperty('--f7-popup-push-offset', `${pushOffset}px`);
         $el.addClass('popup-push');
-        popup.$htmlEl.addClass('with-modal-popup-push');
+        $el.addClass('popup-push-in');
+        popup.emit('local::pushIn', popup, true);
         popup.$htmlEl[0].style.setProperty('--f7-popup-push-scale', pushViewScale(pushOffset));
+      } else {
+        popup.emit('local::pushIn', popup, false);
       }
       app.on('resize', updatePushOffset);
     };
@@ -309,15 +310,20 @@ class Popup extends Modal {
       }
       $el.prevAll('.popup.modal-in').eq(0).removeClass('popup-behind');
       if (isPush && pushOffset && !hasPreviousPushPopup) {
-        popup.$htmlEl.removeClass('with-modal-popup-push');
-        popup.$htmlEl.addClass('with-modal-popup-push-closing');
+        $el.removeClass('popup-push-in');
+        $el.addClass('popup-push-closing');
+        popup.emit('local::pushIn', popup, false);
+        popup.emit('local::pushClosing', popup, true);
+      } else {
+        popup.emit('local::pushIn', popup, false);
+        popup.emit('local::pushClosing', popup, false);
       }
       app.off('resize', updatePushOffset);
     });
     popup.on('closed', () => {
       $el.removeClass('popup-behind');
       if (isPush && pushOffset && !hasPreviousPushPopup) {
-        popup.$htmlEl.removeClass('with-modal-popup-push-closing');
+        $el.removeClass('popup-push-closing');
         popup.$htmlEl[0].style.removeProperty('--f7-popup-push-scale');
         popup.$htmlEl[0].style.removeProperty('--f7-popup-push-offset');
       }

package/components/popup/popup-rtl.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:10px}.md{--f7-popup-tablet-border-radius:28px;--f7-popup-transition-duration:600ms;--f7-popup-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-popup-push-border-radius:28px}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}html.with-modal-popup-push .popup-push:not(.popup-tablet-fullscreen){margin-top:0}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;animation-timing-function:var(--f7-popup-transition-timing-function)}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:32px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:32px}.md{--f7-popup-tablet-border-radius:28px;--f7-popup-transition-duration:600ms;--f7-popup-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-popup-push-border-radius:28px}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}html:has(.popup-push-in) .popup-push:not(.popup-tablet-fullscreen){margin-top:0}}html:has(.popup.modal-in) .framework7-root>.panel .page-content,html:has(.popup.modal-in) .framework7-root>.view .page-content,html:has(.popup.modal-in) .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html:has(.popup-push-closing) .popup-push,html:has(.popup-push-in) .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html:has(.popup-push-closing) .popup-push .page,html:has(.popup-push-closing) .popup-push .view,html:has(.popup-push-in) .popup-push .page,html:has(.popup-push-in) .popup-push .view{--f7-safe-area-top:0px}html:has(.popup-push-closing) .framework7-root,html:has(.popup-push-in) .framework7-root{background:#000}html:has(.popup-push-closing) .framework7-root>.view,html:has(.popup-push-closing) .framework7-root>.views,html:has(.popup-push-in) .framework7-root>.view,html:has(.popup-push-in) .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html:has(.popup-push-closing) .dark .framework7-root>.view:after,html:has(.popup-push-closing) .dark .framework7-root>.views:after,html:has(.popup-push-closing) .dark.framework7-root>.view:after,html:has(.popup-push-closing) .dark.framework7-root>.views:after,html:has(.popup-push-closing) .framework7-root>.view.dark:after,html:has(.popup-push-closing) .framework7-root>.views.dark:after,html:has(.popup-push-closing).dark .framework7-root>.view:after,html:has(.popup-push-closing).dark .framework7-root>.views:after,html:has(.popup-push-in) .dark .framework7-root>.view:after,html:has(.popup-push-in) .dark .framework7-root>.views:after,html:has(.popup-push-in) .dark.framework7-root>.view:after,html:has(.popup-push-in) .dark.framework7-root>.views:after,html:has(.popup-push-in) .framework7-root>.view.dark:after,html:has(.popup-push-in) .framework7-root>.views.dark:after,html:has(.popup-push-in).dark .framework7-root>.view:after,html:has(.popup-push-in).dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html:has(.popup-push-in) .framework7-root>.view,html:has(.popup-push-in) .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html:has(.popup-push-in) .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html:has(.popup-push-in) .dark .popup:after,html:has(.popup-push-in) .dark.popup:after,html:has(.popup-push-in).dark .popup:after{background:rgba(255,255,255,.05)}html:has(.popup-push-in) .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html:has(.popup-push-in) .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind:after{opacity:1;pointer-events:auto}html:has(.popup-push-closing) .dark .framework7-root>.view:after,html:has(.popup-push-closing) .dark .framework7-root>.views:after,html:has(.popup-push-closing) .dark.framework7-root>.view:after,html:has(.popup-push-closing) .dark.framework7-root>.views:after,html:has(.popup-push-closing) .framework7-root>.view.dark:after,html:has(.popup-push-closing) .framework7-root>.views.dark:after,html:has(.popup-push-closing).dark .framework7-root>.view:after,html:has(.popup-push-closing).dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;animation-timing-function:var(--f7-popup-transition-timing-function)}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup-vars.less

@@ -8,10 +8,10 @@
   */
 }
 .ios-vars({
-  --f7-popup-tablet-border-radius: 5px;
+  --f7-popup-tablet-border-radius: 32px;
   --f7-popup-transition-duration: 400ms;
   --f7-popup-transition-timing-function: initial;
-  --f7-popup-push-border-radius: 10px;
+  --f7-popup-push-border-radius: 32px;
 });
 .md-vars({
   --f7-popup-tablet-border-radius: 28px;

package/components/popup/popup.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:10px}.md{--f7-popup-tablet-border-radius:28px;--f7-popup-transition-duration:600ms;--f7-popup-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-popup-push-border-radius:28px}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}html.with-modal-popup-push .popup-push:not(.popup-tablet-fullscreen){margin-top:0}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;animation-timing-function:var(--f7-popup-transition-timing-function)}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:32px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:32px}.md{--f7-popup-tablet-border-radius:28px;--f7-popup-transition-duration:600ms;--f7-popup-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-popup-push-border-radius:28px}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}html:has(.popup-push-in) .popup-push:not(.popup-tablet-fullscreen){margin-top:0}}html:has(.popup.modal-in) .framework7-root>.panel .page-content,html:has(.popup.modal-in) .framework7-root>.view .page-content,html:has(.popup.modal-in) .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html:has(.popup-push-closing) .popup-push,html:has(.popup-push-in) .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html:has(.popup-push-closing) .popup-push .page,html:has(.popup-push-closing) .popup-push .view,html:has(.popup-push-in) .popup-push .page,html:has(.popup-push-in) .popup-push .view{--f7-safe-area-top:0px}html:has(.popup-push-closing) .framework7-root,html:has(.popup-push-in) .framework7-root{background:#000}html:has(.popup-push-closing) .framework7-root>.view,html:has(.popup-push-closing) .framework7-root>.views,html:has(.popup-push-in) .framework7-root>.view,html:has(.popup-push-in) .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html:has(.popup-push-closing) .dark .framework7-root>.view:after,html:has(.popup-push-closing) .dark .framework7-root>.views:after,html:has(.popup-push-closing) .dark.framework7-root>.view:after,html:has(.popup-push-closing) .dark.framework7-root>.views:after,html:has(.popup-push-closing) .framework7-root>.view.dark:after,html:has(.popup-push-closing) .framework7-root>.views.dark:after,html:has(.popup-push-closing).dark .framework7-root>.view:after,html:has(.popup-push-closing).dark .framework7-root>.views:after,html:has(.popup-push-in) .dark .framework7-root>.view:after,html:has(.popup-push-in) .dark .framework7-root>.views:after,html:has(.popup-push-in) .dark.framework7-root>.view:after,html:has(.popup-push-in) .dark.framework7-root>.views:after,html:has(.popup-push-in) .framework7-root>.view.dark:after,html:has(.popup-push-in) .framework7-root>.views.dark:after,html:has(.popup-push-in).dark .framework7-root>.view:after,html:has(.popup-push-in).dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html:has(.popup-push-in) .framework7-root>.view,html:has(.popup-push-in) .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html:has(.popup-push-in) .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html:has(.popup-push-in) .dark .popup:after,html:has(.popup-push-in) .dark.popup:after,html:has(.popup-push-in).dark .popup:after{background:rgba(255,255,255,.05)}html:has(.popup-push-in) .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html:has(.popup-push-in) .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind:after{opacity:1;pointer-events:auto}html:has(.popup-push-closing) .dark .framework7-root>.view:after,html:has(.popup-push-closing) .dark .framework7-root>.views:after,html:has(.popup-push-closing) .dark.framework7-root>.view:after,html:has(.popup-push-closing) .dark.framework7-root>.views:after,html:has(.popup-push-closing) .framework7-root>.view.dark:after,html:has(.popup-push-closing) .framework7-root>.views.dark:after,html:has(.popup-push-closing).dark .framework7-root>.view:after,html:has(.popup-push-closing).dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;animation-timing-function:var(--f7-popup-transition-timing-function)}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup.js

@@ -28,17 +28,11 @@ export default {
     });
   },
   clicks: {
-    '.popup-open': function openPopup($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.popup-open': function openPopup($clickedEl, data = {}) {
       const app = this;
       app.popup.open(data.popup, data.animate, $clickedEl);
     },
-    '.popup-close': function closePopup($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.popup-close': function closePopup($clickedEl, data = {}) {
       const app = this;
       app.popup.close(data.popup, data.animate, $clickedEl);
     }

package/components/popup/popup.less

@@ -75,11 +75,11 @@
       }
     }
   }
-  html.with-modal-popup-push .popup-push:not(.popup-tablet-fullscreen) {
+  html:has(.popup-push-in) .popup-push:not(.popup-tablet-fullscreen) {
     margin-top: 0;
   }
 }
-html.with-modal-popup {
+html:has(.popup.modal-in) {
   .framework7-root {
     > .views,
     > .view,
@@ -91,8 +91,8 @@ html.with-modal-popup {
   }
 }
 
-html.with-modal-popup-push,
-html.with-modal-popup-push-closing {
+html:has(.popup-push-in),
+html:has(.popup-push-closing) {
   .popup-push {
     top: calc(var(--f7-popup-push-offset) + 10px);
     height: calc(100% - var(--f7-popup-push-offset) - 10px);
@@ -139,7 +139,7 @@ html.with-modal-popup-push-closing {
   });
 }
 
-html.with-modal-popup-push {
+html:has(.popup-push-in) {
   .framework7-root {
     > .views,
     > .view {
@@ -195,7 +195,7 @@ html.with-modal-popup-push {
 }
 
 .if-dark-theme({
-  html.with-modal-popup-push-closing {
+  html:has(.popup-push-closing) {
     &.dark .framework7-root > .views,
     &.dark .framework7-root > .view,
     .dark .framework7-root > .views,

package/components/preloader/preloader.js

@@ -13,10 +13,7 @@ const Preloader = {
   },
   // Modal
   visible: false,
-  show(color) {
-    if (color === void 0) {
-      color = 'white';
-    }
+  show(color = 'white') {
     const app = this;
     if (Preloader.visible) return;
     const preloaders = {
@@ -34,10 +31,7 @@ const Preloader = {
     `);
     Preloader.visible = true;
   },
-  showIn(el, color) {
-    if (color === void 0) {
-      color = 'white';
-    }
+  showIn(el, color = 'white') {
     const app = this;
     const preloaders = {
       iosPreloaderContent,

package/components/progressbar/progressbar-md.less

@@ -3,6 +3,18 @@
   @blue: #2196f3;
   @green: #4caf50;
   @yellow: #ffeb3b;
+  .progressbar:not(.progressbar-infinite) {
+    &::after {
+      content: '';
+      position: absolute;
+      width: var(--f7-progressbar-height);
+      height: var(--f7-progressbar-height);
+      border-radius: var(--f7-progressbar-border-radius);
+      right: 0;
+      top: 0;
+      background: var(--f7-progressbar-progress-color, var(--f7-theme-color));
+    }
+  }
   .progressbar-infinite {
     &:before {
       animation: md-progressbar-infinite-1 2s linear infinite;

package/components/progressbar/progressbar-rtl.css

@@ -1 +1 @@
-.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.md,.md .dark,.md [class*=color-]{--f7-progressbar-bg-color:rgba(var(--f7-theme-color-rgb), 0.5)}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;top:0;transition-duration:150ms;right:0;transform:translate3d(100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));right:0;transform-origin:right center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(100%,0,0)}100%{transform:translate3d(-100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(10%) scaleX(.1)}25%{transform:translateX(-30%) scaleX(.6)}50%{transform:translateX(-100%) scaleX(1)}100%{transform:translateX(-100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(100%) scaleX(1)}40%{transform:translateX(100%) scaleX(1)}75%{transform:translateX(-60%) scaleX(.35)}90%{transform:translateX(-100%) scaleX(.1)}100%{transform:translateX(-100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}
+.ios{--f7-progressbar-height:6px;--f7-progressbar-border-radius:16px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.1)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px}.md,.md .dark,.md [class*=color-]{--f7-progressbar-bg-color:var(--f7-md-secondary-container)}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{border-radius:inherit;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;top:0;transition-duration:150ms;right:0;transform:translate3d(100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));right:0;transform-origin:right center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}.framework7-root>.progressbar::after,.page>.progressbar::after,.panel>.progressbar::after,.popup>.progressbar::after,.view>.progressbar::after,.views>.progressbar::after,body>.progressbar::after{display:none}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(100%,0,0)}100%{transform:translate3d(-100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar:not(.progressbar-infinite)::after{content:'';position:absolute;width:var(--f7-progressbar-height);height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius);right:0;top:0;background:var(--f7-progressbar-progress-color,var(--f7-theme-color))}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(10%) scaleX(.1)}25%{transform:translateX(-30%) scaleX(.6)}50%{transform:translateX(-100%) scaleX(1)}100%{transform:translateX(-100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(100%) scaleX(1)}40%{transform:translateX(100%) scaleX(1)}75%{transform:translateX(-60%) scaleX(.35)}90%{transform:translateX(-100%) scaleX(.1)}100%{transform:translateX(-100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}

package/components/progressbar/progressbar-vars.less

@@ -4,10 +4,10 @@
   */
 }
 .ios-vars({
-  --f7-progressbar-height: 4px;
-  --f7-progressbar-border-radius: 4px;
+  --f7-progressbar-height: 6px;
+  --f7-progressbar-border-radius: 16px;
   .light-vars({
-    --f7-progressbar-bg-color: rgba(0,0,0,0.3);
+    --f7-progressbar-bg-color: rgba(0,0,0,0.1);
   });
   .dark-vars({
     --f7-progressbar-bg-color: rgba(255,255,255,0.3);
@@ -15,8 +15,9 @@
 });
 .md-vars({
   --f7-progressbar-height: 4px;
-  --f7-progressbar-border-radius: 0px;
+  --f7-progressbar-border-radius: 4px;
+
 });
 .md-color-vars({
-  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
+  --f7-progressbar-bg-color: var(--f7-md-secondary-container);
 });

package/components/progressbar/progressbar.css

@@ -1 +1 @@
-.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.md,.md .dark,.md [class*=color-]{--f7-progressbar-bg-color:rgba(var(--f7-theme-color-rgb), 0.5)}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;top:0;transition-duration:150ms;left:0;transform:translate3d(-100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));left:0;transform-origin:left center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.6)}50%{transform:translateX(100%) scaleX(1)}100%{transform:translateX(100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(-100%) scaleX(1)}40%{transform:translateX(-100%) scaleX(1)}75%{transform:translateX(60%) scaleX(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}
+.ios{--f7-progressbar-height:6px;--f7-progressbar-border-radius:16px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.1)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px}.md,.md .dark,.md [class*=color-]{--f7-progressbar-bg-color:var(--f7-md-secondary-container)}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{border-radius:inherit;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;top:0;transition-duration:150ms;left:0;transform:translate3d(-100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));left:0;transform-origin:left center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}.framework7-root>.progressbar::after,.page>.progressbar::after,.panel>.progressbar::after,.popup>.progressbar::after,.view>.progressbar::after,.views>.progressbar::after,body>.progressbar::after{display:none}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar:not(.progressbar-infinite)::after{content:'';position:absolute;width:var(--f7-progressbar-height);height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius);right:0;top:0;background:var(--f7-progressbar-progress-color,var(--f7-theme-color))}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.6)}50%{transform:translateX(100%) scaleX(1)}100%{transform:translateX(100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(-100%) scaleX(1)}40%{transform:translateX(-100%) scaleX(1)}75%{transform:translateX(60%) scaleX(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}

package/components/progressbar/progressbar.js

@@ -1,11 +1,8 @@
 import $ from '../../shared/dom7.js';
 import { bindMethods } from '../../shared/utils.js';
 const Progressbar = {
-  set() {
+  set(...args) {
     const app = this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
     let [el, progress, duration] = args;
     if (typeof args[0] === 'number') {
       [progress, duration] = args;
@@ -33,13 +30,10 @@ const Progressbar = {
     $progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform(`translate3d(${(-100 + progressNormalized) * (app.rtl ? -1 : 1)}%,0,0)`);
     return $progressbarEl[0];
   },
-  show() {
+  show(...args) {
     const app = this;
 
     // '.page', 50, 'multi'
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
     let [el, progress, color] = args;
     let type = 'determined';
     if (args.length === 2) {
@@ -85,10 +79,7 @@ const Progressbar = {
     }
     return $progressbarEl[0];
   },
-  hide(el, removeAfterHide) {
-    if (removeAfterHide === void 0) {
-      removeAfterHide = true;
-    }
+  hide(el, removeAfterHide = true) {
     const app = this;
     const $el = $(el || app.$el);
     if ($el.length === 0) return undefined;

package/components/progressbar/progressbar.less

@@ -16,6 +16,7 @@
 .progressbar {
   vertical-align: middle;
   span {
+    border-radius: inherit;
     background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
     width: 100%;
     height: 100%;
@@ -80,6 +81,11 @@ body,
     border-radius: 0 !important;
     transform-origin: center top !important;
   }
+  > .progressbar {
+    &::after {
+      display: none;
+    }
+  }
 }
 
 @keyframes progressbar-in {

package/components/pull-to-refresh/pull-to-refresh-class.js

@@ -1,14 +1,12 @@
 import $ from '../../shared/dom7.js';
 import { deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
-import { getSupport } from '../../shared/get-support.js';
 import { getDevice } from '../../shared/get-device.js';
 class PullToRefresh extends Framework7Class {
   constructor(app, el) {
     super({}, [app]);
     const ptr = this;
     const device = getDevice();
-    const support = getSupport();
     const $el = $(el);
     const $preloaderEl = $el.find('.ptr-preloader');
     ptr.$el = $el;
@@ -93,10 +91,7 @@ class PullToRefresh extends Framework7Class {
     } else if (isIos) {
       triggerDistance = 44;
     }
-    function setPreloaderProgress(progress) {
-      if (progress === void 0) {
-        progress = 0;
-      }
+    function setPreloaderProgress(progress = 0) {
       const $bars = $preloaderEl.find('.preloader-inner-line');
       const perBarProgress = 1 / $bars.length;
       $bars.forEach((barEl, barIndex) => {
@@ -466,10 +461,9 @@ class PullToRefresh extends Framework7Class {
 
     // Events
     ptr.attachEvents = function attachEvents() {
-      const passive = support.passiveListener ? {
+      $el.on(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      $el.on(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.on('touchmove:active', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
       if (ptr.mousewheel && !ptr.bottom) {
@@ -477,10 +471,9 @@ class PullToRefresh extends Framework7Class {
       }
     };
     ptr.detachEvents = function detachEvents() {
-      const passive = support.passiveListener ? {
+      $el.off(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      $el.off(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.off('touchmove:active', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
       if (ptr.mousewheel && !ptr.bottom) {

package/components/range/range-class.js

@@ -1,12 +1,10 @@
 import $ from '../../shared/dom7.js';
 import { extend, nextTick, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
-import { getSupport } from '../../shared/get-support.js';
 class Range extends Framework7Class {
   constructor(app, params) {
     super(params, [app]);
     const range = this;
-    const support = getSupport();
     const defaults = {
       el: null,
       inputEl: null,
@@ -24,7 +22,8 @@ class Range extends Framework7Class {
       scaleSteps: 5,
       scaleSubSteps: 0,
       formatScaleLabel: null,
-      limitKnobPosition: app.theme === 'ios'
+      limitKnobPosition: true,
+      limitBarPosition: app.theme === 'md'
     };
 
     // Extend defaults with modules params
@@ -72,7 +71,8 @@ class Range extends Framework7Class {
       scale,
       scaleSteps,
       scaleSubSteps,
-      limitKnobPosition
+      limitKnobPosition,
+      limitBarPosition
     } = range.params;
     extend(range, {
       app,
@@ -92,7 +92,8 @@ class Range extends Framework7Class {
       scale,
       scaleSteps,
       scaleSubSteps,
-      limitKnobPosition
+      limitKnobPosition,
+      limitBarPosition
     });
     if ($inputEl) {
       'step min max'.split(' ').forEach(paramName => {
@@ -208,13 +209,15 @@ class Range extends Framework7Class {
       rangeOffsetLeft = rangeOffset.left;
       rangeOffsetTop = rangeOffset.top;
       let progress;
+      const knobSize = range.vertical ? range.knobHeight : range.knobWidth;
+      const progressModify = limitKnobPosition ? knobSize : 0;
       if (range.vertical) {
-        progress = (touchesStart.y - rangeOffsetTop) / range.rangeHeight;
+        progress = (touchesStart.y - rangeOffsetTop - progressModify / 2) / (range.rangeHeight - progressModify);
         if (!range.verticalReversed) progress = 1 - progress;
       } else if (range.app.rtl) {
-        progress = (rangeOffsetLeft + range.rangeWidth - touchesStart.x) / range.rangeWidth;
+        progress = (rangeOffsetLeft + range.rangeWidth + progressModify / 2 - touchesStart.x) / (range.rangeWidth - progressModify);
       } else {
-        progress = (touchesStart.x - rangeOffsetLeft) / range.rangeWidth;
+        progress = (touchesStart.x - rangeOffsetLeft - progressModify / 2) / (range.rangeWidth - progressModify);
       }
       let newValue = progress * (range.max - range.min) + range.min;
       if (range.dual) {
@@ -262,13 +265,15 @@ class Range extends Framework7Class {
       }
       e.preventDefault();
       let progress;
+      const knobSize = range.vertical ? range.knobHeight : range.knobWidth;
+      const progressModify = limitKnobPosition ? knobSize : 0;
       if (range.vertical) {
-        progress = (pageY - rangeOffsetTop) / range.rangeHeight;
+        progress = (pageY - rangeOffsetTop - progressModify / 2) / (range.rangeHeight - progressModify);
         if (!range.verticalReversed) progress = 1 - progress;
       } else if (range.app.rtl) {
-        progress = (rangeOffsetLeft + range.rangeWidth - pageX) / range.rangeWidth;
+        progress = (rangeOffsetLeft + range.rangeWidth + progressModify / 2 - pageX) / (range.rangeWidth - progressModify);
       } else {
-        progress = (pageX - rangeOffsetLeft) / range.rangeWidth;
+        progress = (pageX - rangeOffsetLeft - progressModify / 2) / (range.rangeWidth - progressModify);
       }
       let newValue = progress * (range.max - range.min) + range.min;
       if (range.dual) {
@@ -326,10 +331,9 @@ class Range extends Framework7Class {
     let parentPanel;
     let parentPage;
     range.attachEvents = function attachEvents() {
-      const passive = support.passiveListener ? {
+      range.$el.on(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      range.$el.on(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
       app.on('tabShow', handleResize);
@@ -342,10 +346,9 @@ class Range extends Framework7Class {
       parentPage.on('page:reinit', handleResize);
     };
     range.detachEvents = function detachEvents() {
-      const passive = support.passiveListener ? {
+      range.$el.off(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      range.$el.off(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.off('touchmove', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
       app.off('tabShow', handleResize);
@@ -402,7 +405,8 @@ class Range extends Framework7Class {
       labels,
       vertical,
       verticalReversed,
-      limitKnobPosition
+      limitKnobPosition,
+      limitBarPosition
     } = range;
     const knobSize = vertical ? knobHeight : knobWidth;
     const rangeSize = vertical ? rangeHeight : rangeWidth;
@@ -410,28 +414,31 @@ class Range extends Framework7Class {
     const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
     if (range.dual) {
       const progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
+      const positionStartProgress = limitBarPosition ? knobSize / rangeSize : 0;
+      const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
       $barActiveEl.css({
-        [positionProperty]: `${progress[0] * 100}%`,
-        [vertical ? 'height' : 'width']: `${(progress[1] - progress[0]) * 100}%`
+        [positionProperty]: `${(positionStartProgress + progress[0] * barProgressModify) * 100}%`,
+        [vertical ? 'height' : 'width']: `${(progress[1] - progress[0] - positionStartProgress) * 100 * barProgressModify}%`
       });
       knobs.forEach(($knobEl, knobIndex) => {
         let startPos = rangeSize * progress[knobIndex];
         if (limitKnobPosition) {
-          const realStartPos = rangeSize * progress[knobIndex] - knobSize / 2;
-          if (realStartPos < 0) startPos = knobSize / 2;
-          if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
+          const minPos = knobSize;
+          const maxPos = rangeSize;
+          startPos = (maxPos - minPos) * progress[knobIndex] + knobSize / 2;
         }
         $knobEl.css(positionProperty, `${startPos}px`);
         if (label) labels[knobIndex].text(range.formatLabel(value[knobIndex], labels[knobIndex][0]));
       });
     } else {
       const progress = (value - min) / (max - min);
-      $barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100}%`);
+      const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
+      $barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100 * barProgressModify}%`);
       let startPos = rangeSize * progress;
       if (limitKnobPosition) {
-        const realStartPos = rangeSize * progress - knobSize / 2;
-        if (realStartPos < 0) startPos = knobSize / 2;
-        if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
+        const minPos = knobSize;
+        const maxPos = rangeSize;
+        startPos = (maxPos - minPos) * progress + knobSize / 2;
       }
       knobs[0].css(positionProperty, `${startPos}px`);
       if (label) labels[0].text(range.formatLabel(value, labels[0][0]));