framework7 7.0.0-beta.10 → 7.0.0-beta.11

package/framework7-bundle.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 7.0.0-beta.10
+ * Framework7 7.0.0-beta.11
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: October 28, 2021
+ * Released on: February 17, 2022
  */
 
 (function (global, factory) {
@@ -17,7 +17,7 @@
 }(this, (function () { 'use strict';
 
     /**
-     * SSR Window 4.0.1
+     * SSR Window 4.0.2
      * Better handling for window object in SSR environment
      * https://github.com/nolimits4web/ssr-window
      *
@@ -25,7 +25,7 @@
      *
      * Licensed under MIT
      *
-     * Released on: October 27, 2021
+     * Released on: December 13, 2021
      */
 
     /* eslint-disable no-param-reassign */
@@ -196,15 +196,15 @@
     }
 
     /**
-     * Dom7 4.0.1
+     * Dom7 4.0.4
      * Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API
      * https://framework7.io/docs/dom7.html
      *
-     * Copyright 2021, Vladimir Kharlampidi
+     * Copyright 2022, Vladimir Kharlampidi
      *
      * Licensed under MIT
      *
-     * Released on: October 27, 2021
+     * Released on: January 11, 2022
      */
     /* eslint-disable no-proto */
 
@@ -224,8 +224,12 @@
 
     class Dom7 extends Array {
       constructor(items) {
-        super(...(items || []));
-        makeReactive(this);
+        if (typeof items === 'number') {
+          super(items);
+        } else {
+          super(...(items || []));
+          makeReactive(this);
+        }
       }
 
     }
@@ -1819,7 +1823,7 @@
       const window = getWindow();
       return window.requestAnimationFrame(callback);
     }
-    function cancelAnimationFrame$1(frameId) {
+    function cancelAnimationFrame(frameId) {
       const window = getWindow();
       return window.cancelAnimationFrame(frameId);
     }
@@ -2151,7 +2155,7 @@
         eventNameToColonCase: eventNameToColonCase,
         deleteProps: deleteProps$1,
         requestAnimationFrame: requestAnimationFrame$1,
-        cancelAnimationFrame: cancelAnimationFrame$1,
+        cancelAnimationFrame: cancelAnimationFrame,
         nextTick: nextTick$1,
         nextFrame: nextFrame$1,
         now: now$1,
@@ -6886,7 +6890,7 @@
 
 
         if (router.params.browserHistory && options.browserHistory && !options.reloadPrevious) {
-          History$1.replace(router.view.id, {
+          History$1[router.params.browserHistoryTabs](router.view.id, {
             url: options.route.url
           }, (router.params.browserHistoryRoot || '') + router.params.browserHistorySeparator + options.route.url);
         } // Update Router History
@@ -7352,7 +7356,7 @@
       const $el = $(el);
       const app = router.app;
       const view = router.view;
-      const options = extend$1({
+      const options = extend$1(false, {
         animate: router.params.animate,
         browserHistory: true,
         replaceState: false
@@ -8060,6 +8064,16 @@
         }
 
         const previousPageRoute = $previousPage[0].f7Page.route;
+
+        if (navigateOptions.preload && $previousPage.hasClass('stacked')) {
+          loadBack(router, {
+            el: $previousPage
+          }, extend$1(navigateOptions, {
+            route: previousPageRoute
+          }));
+          return router;
+        }
+
         processRouteQueue.call(router, previousPageRoute, router.currentRoute, () => {
           loadBack(router, {
             el: $previousPage
@@ -12682,6 +12696,7 @@
           browserHistoryOnLoad: true,
           browserHistoryInitialMatch: false,
           browserHistoryStoreHistory: true,
+          browserHistoryTabs: 'replace',
           // Animate Pages
           animate: true,
           // iOS Dynamic Navbar
@@ -13596,8 +13611,8 @@
     const Toolbar = {
       setHighlight(tabbarEl) {
         const app = this;
-        if (app.theme === 'ios') return;
         const $tabbarEl = $(tabbarEl);
+        if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
         if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) return;
         let $highlightEl = $tabbarEl.find('.tab-link-highlight');
         const tabLinksCount = $tabbarEl.find('.tab-link').length;
@@ -14013,6 +14028,11 @@
         if (!modal.type || !modal.$el) return;
         modal.$el.removeClass('modal-out');
         modal.$el.hide();
+
+        if (modal.params.backdrop && (modal.params.backdropUnique || modal.forceBackdropUnique) && modal.$backdropEl) {
+          modal.$backdropEl.remove();
+        }
+
         modal.$el.trigger(`modal:closed ${modal.type.toLowerCase()}:closed`);
         modal.emit(`local::closed modalClosed ${modal.type}Closed`, modal);
       }
@@ -14070,8 +14090,13 @@
 
 
         $el.show();
+
+        if (modal.params.backdrop && (modal.params.backdropUnique || modal.forceBackdropUnique) && modal.$backdropEl) {
+          modal.$backdropEl.insertBefore($el);
+        }
         /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
 
+
         modal._clientLeft = $el[0].clientLeft; // Modal
 
         function transitionEnd() {
@@ -14828,7 +14853,12 @@
         if (popup.params.backdrop && popup.params.backdropEl) {
           $backdropEl = $(popup.params.backdropEl);
         } else if (popup.params.backdrop) {
-          $backdropEl = popup.$containerEl.children('.popup-backdrop');
+          if (popup.params.backdropUnique) {
+            $backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
+            popup.$containerEl.append($backdropEl);
+          } else {
+            $backdropEl = popup.$containerEl.children('.popup-backdrop');
+          }
 
           if ($backdropEl.length === 0) {
             $backdropEl = $('<div class="popup-backdrop"></div>');
@@ -15179,6 +15209,7 @@
         popup: {
           backdrop: true,
           backdropEl: undefined,
+          backdropUnique: false,
           closeByBackdropClick: true,
           closeOnEscape: false,
           swipeToClose: false,
@@ -15312,11 +15343,18 @@
 
 
         let $backdropEl;
+        const forceBackdropUnique = popover.params.backdrop && app.$el.find('.popover.modal-in').filter(anotherPopoverEl => anotherPopoverEl !== $el[0]).length > 0;
 
         if (popover.params.backdrop && popover.params.backdropEl) {
           $backdropEl = $(popover.params.backdropEl);
         } else if (popover.params.backdrop) {
-          $backdropEl = popover.$containerEl.children('.popover-backdrop');
+          if (popover.params.backdropUnique || forceBackdropUnique) {
+            $backdropEl = $('<div class="popover-backdrop popover-backdrop-unique"></div>');
+            $backdropEl[0].f7PopoverRef = popover;
+            popover.$containerEl.append($backdropEl);
+          } else {
+            $backdropEl = popover.$containerEl.children('.popover-backdrop');
+          }
 
           if ($backdropEl.length === 0) {
             $backdropEl = $('<div class="popover-backdrop"></div>');
@@ -15347,6 +15385,7 @@
           $backdropEl,
           backdropEl: $backdropEl && $backdropEl[0],
           type: 'popover',
+          forceBackdropUnique,
 
           open(...args) {
             let [targetEl, animate] = args;
@@ -15391,7 +15430,12 @@
             if (popover.params.closeByBackdropClick && popover.params.backdrop && popover.backdropEl && popover.backdropEl === target && touchStartTarget === target) {
               popover.close();
             } else if (popover.params.closeByOutsideClick && touchStartTarget === target) {
-              popover.close();
+              const isAnotherPopoverBackdrop = $target.hasClass('popover-backdrop-unique') && target.f7PopoverRef !== popover || $target.hasClass('popover-backdrop') && target !== popover.backdropEl;
+              const isAnotherPopoverTarget = target.closest('.popover') && target.closest('.popover') !== popover.$el[0];
+
+              if (!isAnotherPopoverBackdrop && !isAnotherPopoverTarget) {
+                popover.close();
+              }
             }
           }
         }
@@ -15605,6 +15649,7 @@
         popover: {
           backdrop: true,
           backdropEl: undefined,
+          backdropUnique: false,
           closeByBackdropClick: true,
           closeByOutsideClick: true,
           closeOnEscape: false,
@@ -15724,7 +15769,12 @@
         if (actions.params.backdrop && actions.params.backdropEl) {
           $backdropEl = $(actions.params.backdropEl);
         } else if (actions.params.backdrop) {
-          $backdropEl = actions.$containerEl.children('.actions-backdrop');
+          if (actions.params.backdropUnique) {
+            $backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
+            actions.$containerEl.append($backdropEl);
+          } else {
+            $backdropEl = actions.$containerEl.children('.actions-backdrop');
+          }
 
           if ($backdropEl.length === 0) {
             $backdropEl = $('<div class="actions-backdrop"></div>');
@@ -16036,6 +16086,7 @@
           forceToPopover: false,
           backdrop: true,
           backdropEl: undefined,
+          backdropUnique: false,
           cssClass: null,
           closeByBackdropClick: true,
           closeOnEscape: false,
@@ -16109,7 +16160,12 @@
         if (sheet.params.backdrop && sheet.params.backdropEl) {
           $backdropEl = $(sheet.params.backdropEl);
         } else if (sheet.params.backdrop) {
-          $backdropEl = sheet.$containerEl.children('.sheet-backdrop');
+          if (sheet.params.backdropUnique) {
+            $backdropEl = $('<div class="sheet-backdrop sheet-backdrop-unique"></div>');
+            sheet.$containerEl.append($backdropEl);
+          } else {
+            $backdropEl = sheet.$containerEl.children('.sheet-backdrop');
+          }
 
           if ($backdropEl.length === 0) {
             $backdropEl = $('<div class="sheet-backdrop"></div>');
@@ -16629,6 +16685,7 @@
           push: false,
           backdrop: undefined,
           backdropEl: undefined,
+          backdropUnique: false,
           closeByBackdropClick: true,
           closeByOutsideClick: false,
           closeOnEscape: false,
@@ -16987,7 +17044,7 @@
           $progressbarEl.append($progressbarLine);
         }
 
-        $progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform(`translate3d(${-100 + progressNormalized}%,0,0)`);
+        $progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform(`translate3d(${(-100 + progressNormalized) * (app.rtl ? -1 : 1)}%,0,0)`);
         return $progressbarEl[0];
       },
 
@@ -17233,18 +17290,31 @@
             const currentElOffset = $currentEl[0].offsetTop;
             const currentElHeight = $currentEl.height();
             const sortingElOffset = sortingElOffsetLocal + translate;
+            let currentTranslate;
+            const prevTranslate = $currentEl[0].f7Translate;
 
             if (sortingElOffset >= currentElOffset - currentElHeight / 2 && $sortingEl.index() < $currentEl.index()) {
-              $currentEl.transform(`translate3d(0, ${-sortingElHeight}px,0)`);
+              currentTranslate = -sortingElHeight;
+              $currentEl.transform(`translate3d(0, ${currentTranslate}px,0)`);
               $insertAfterEl = $currentEl;
               $insertBeforeEl = undefined;
             } else if (sortingElOffset <= currentElOffset + currentElHeight / 2 && $sortingEl.index() > $currentEl.index()) {
-              $currentEl.transform(`translate3d(0, ${sortingElHeight}px,0)`);
+              currentTranslate = sortingElHeight;
+              $currentEl[0].f7Translate = currentTranslate;
+              $currentEl.transform(`translate3d(0, ${currentTranslate}px,0)`);
               $insertAfterEl = undefined;
               if (!$insertBeforeEl) $insertBeforeEl = $currentEl;
             } else {
+              currentTranslate = undefined;
               $currentEl.transform('translate3d(0, 0%,0)');
             }
+
+            if (prevTranslate !== currentTranslate) {
+              $currentEl.trigger('sortable:move');
+              app.emit('sortableMove', $currentEl[0], $sortableContainer[0]);
+            }
+
+            $currentEl[0].f7Translate = currentTranslate;
           });
         }
 
@@ -19437,12 +19507,11 @@
           if ($tabLinkEl && $tabLinkEl.length > 0) {
             $tabLinkEl.addClass('tab-link-active'); // Material Highlight
 
-            if (app.theme !== 'ios' && app.toolbar) {
-              const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
+            const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
+            const hasHighlight = app.toolbar && $tabbarEl.length > 0 && ($tabbarEl.hasClass('tabbar-highlight') || app.theme !== 'ios');
 
-              if ($tabbarEl.length > 0) {
-                app.toolbar.setHighlight($tabbarEl);
-              }
+            if (hasHighlight) {
+              app.toolbar.setHighlight($tabbarEl);
             }
           }
         }
@@ -25079,17 +25148,34 @@
           allowTouchMove: true,
           hasTimePicker: calendar.params.timePicker && !calendar.params.rangePicker && !calendar.params.multiple
         });
-        calendar.dayFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-          day: 'numeric'
-        });
-        calendar.monthFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-          month: 'long'
-        });
-        calendar.yearFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-          year: 'numeric'
-        });
-        calendar.timeSelectorFormatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
-        const timeFormatCheckDate = calendar.timeSelectorFormatter.format(new Date()).toLowerCase();
+
+        calendar.dayFormatter = date => {
+          const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+            day: 'numeric'
+          });
+          return formatter.format(date).replace(/日/, '');
+        };
+
+        calendar.monthFormatter = date => {
+          const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+            month: 'long'
+          });
+          return formatter.format(date);
+        };
+
+        calendar.yearFormatter = date => {
+          const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+            year: 'numeric'
+          });
+          return formatter.format(date);
+        };
+
+        calendar.timeSelectorFormatter = date => {
+          const formatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
+          return formatter.format(date);
+        };
+
+        const timeFormatCheckDate = calendar.timeSelectorFormatter(new Date()).toLowerCase();
         calendar.is12HoursFormat = timeFormatCheckDate.indexOf('pm') >= 0 || timeFormatCheckDate.indexOf('am') >= 0; // Auto names
 
         let {
@@ -25137,6 +25223,7 @@
           if (calendar.isPopover()) return;
           if (!calendar.opened || calendar.closing) return;
           if ($targetEl.closest('[class*="backdrop"]').length) return;
+          if (calendar.monthPickerPopover || calendar.yearPickerPopover || calendar.timePickerPopover) return;
 
           if ($inputEl && $inputEl.length > 0) {
             if ($targetEl[0] !== $inputEl[0] && $targetEl.closest('.sheet-modal, .calendar-modal').length === 0) {
@@ -25351,61 +25438,17 @@
           }
 
           function onMonthSelectorClick() {
-            $el.append(calendar.renderMonthPicker());
-          }
-
-          function onMonthSelectorItemClick() {
-            const $clickedEl = $(this);
-
-            if ($clickedEl.hasClass('calendar-month-picker-item-current')) {
-              $el.find('.calendar-month-picker').remove();
-              return;
-            }
-
-            $el.find('.calendar-month-picker-item-current').add($clickedEl).toggleClass('calendar-month-picker-item-current');
-            const index = $clickedEl.index();
-            const localeMonthIndex = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
-            const monthIndex = calendar.currentMonth;
-            const diff = localeMonthIndex - monthIndex;
-            const diffIndex = index - diff;
-            calendar.setYearMonth(calendar.currentYear, diffIndex, 0);
-            setTimeout(() => {
-              $el.find('.calendar-month-picker').remove();
-            }, 200);
+            calendar.openMonthPicker();
           }
 
           function onYearSelectorClick() {
-            $el.append(calendar.renderYearPicker());
-            const $currentEl = $el.find('.calendar-year-picker-item-current');
-            const $yearPickerEl = $el.find('.calendar-year-picker');
-            if (!$currentEl || !$currentEl.length) return;
-            $yearPickerEl.scrollTop($currentEl[0].offsetTop - $yearPickerEl[0].offsetHeight / 2 + $currentEl[0].offsetHeight / 2);
-          }
-
-          function onYearSelectorItemClick() {
-            const $clickedEl = $(this);
-
-            if ($clickedEl.hasClass('calendar-year-picker-item-current')) {
-              $el.find('.calendar-year-picker').remove();
-              return;
-            }
-
-            $el.find('.calendar-year-picker-item-current').add($clickedEl).toggleClass('calendar-year-picker-item-current');
-            const year = parseInt($clickedEl.attr('data-year'), 10);
-            calendar.setYearMonth(year, undefined, 0);
-            setTimeout(() => {
-              $el.find('.calendar-year-picker').remove();
-            }, 200);
+            calendar.openYearPicker();
           }
 
           function onTimeSelectorClick() {
             calendar.openTimePicker();
           }
 
-          function onTimePickerCloseClick() {
-            calendar.closeTimePicker();
-          }
-
           const passiveListener = app.touchEvents.start === 'touchstart' && getSupport$1().passiveListener ? {
             passive: true,
             capture: false
@@ -25418,17 +25461,14 @@
 
           if (calendar.params.monthPicker) {
             $el.find('.current-month-value').on('click', onMonthSelectorClick);
-            $el.on('click', '.calendar-month-picker-item', onMonthSelectorItemClick);
           }
 
           if (calendar.params.yearPicker) {
             $el.find('.current-year-value').on('click', onYearSelectorClick);
-            $el.on('click', '.calendar-year-picker-item', onYearSelectorItemClick);
           }
 
           if (calendar.hasTimePicker) {
             $el.find('.calendar-time-selector a').on('click', onTimeSelectorClick);
-            $el.on('click', '.calendar-time-picker-close', onTimePickerCloseClick);
           } // Day clicks
 
 
@@ -25448,17 +25488,14 @@
 
             if (calendar.params.monthPicker) {
               $el.find('.current-month-value').off('click', onMonthSelectorClick);
-              $el.off('click', '.calendar-month-picker-item', onMonthSelectorItemClick);
             }
 
             if (calendar.params.yearPicker) {
               $el.find('.current-year-value').off('click', onYearSelectorClick);
-              $el.off('click', '.calendar-year-picker-item', onYearSelectorItemClick);
             }
 
             if (calendar.hasTimePicker) {
               $el.find('.calendar-time-selector a').off('click', onTimeSelectorClick);
-              $el.off('click', '.calendar-time-picker-close', onTimePickerCloseClick);
             }
 
             $wrapperEl.off('click', handleDayClick);
@@ -25518,7 +25555,7 @@
 
         for (let i = 0; i < 24; i += 1) {
           const date = new Date().setMonth(i, 1);
-          const currentYear = calendar.yearFormatter.format(date);
+          const currentYear = calendar.yearFormatter(date);
 
           if (year && currentYear !== year) {
             if (yearStarted) yearEnded = true;
@@ -25818,7 +25855,7 @@
         }
 
         if ($el && $el.length > 0 && calendar.hasTimePicker) {
-          $el.find('.calendar-time-selector a').text(value && value.length ? calendar.timeSelectorFormatter.format(value[0]) : calendar.params.timePickerPlaceholder);
+          $el.find('.calendar-time-selector a').text(value && value.length ? calendar.timeSelectorFormatter(value[0]) : calendar.params.timePickerPlaceholder);
         }
 
         if ($inputEl && $inputEl.length || params.header) {
@@ -26265,9 +26302,9 @@
         let date = new Date(d);
         let year = date.getFullYear();
         let month = date.getMonth();
-        let localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter.format(date));
+        let localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
         if (localeMonth < 0) localeMonth = month;
-        let localeYear = calendar.yearFormatter.format(date);
+        let localeYear = calendar.yearFormatter(date);
 
         if (offset === 'next') {
           if (month === 11) date = new Date(year + 1, 0);else date = new Date(year, month + 1, 1);
@@ -26280,9 +26317,9 @@
         if (offset === 'next' || offset === 'prev') {
           month = date.getMonth();
           year = date.getFullYear();
-          localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter.format(date));
+          localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
           if (localeMonth < 0) localeMonth = month;
-          localeYear = calendar.yearFormatter.format(date);
+          localeYear = calendar.yearFormatter(date);
         }
 
         const currentValues = [];
@@ -26435,7 +26472,7 @@
             dayDate = new Date(dayDate);
             const dayYear = dayDate.getFullYear();
             const dayMonth = dayDate.getMonth();
-            const dayNumberDisplay = calendar.dayFormatter.format(dayDate); // prettier-ignore
+            const dayNumberDisplay = calendar.dayFormatter(dayDate); // prettier-ignore
 
             rowHtml += `
           <div data-year="${dayYear}" data-month="${dayMonth}" data-day="${dayNumber}" class="calendar-day${addClass}" data-date="${dayYear}-${dayMonth}-${dayNumber}">
@@ -26497,16 +26534,6 @@
         })));
       }
 
-      renderMonthPicker() {
-        const calendar = this;
-        const localeMonth = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
-        return $jsx("div", {
-          class: "calendar-month-picker"
-        }, calendar.monthNames.map((m, index) => $jsx("div", {
-          class: `calendar-month-picker-item ${localeMonth === index ? 'calendar-month-picker-item-current' : ''}`
-        }, $jsx("span", null, m))));
-      }
-
       renderYearSelector() {
         const calendar = this;
 
@@ -26529,35 +26556,6 @@
         }, $jsx("i", {
           class: "icon icon-next"
         })));
-      }
-
-      renderYearPicker() {
-        const calendar = this;
-        const currentYear = calendar.currentYear;
-        let yearMin = calendar.params.yearPickerMin || new Date().getFullYear() - 100;
-
-        if (calendar.params.minDate) {
-          yearMin = Math.max(yearMin, new Date(calendar.params.minDate).getFullYear());
-        }
-
-        let yearMax = calendar.params.yearPickerMax || new Date().getFullYear() + 100;
-
-        if (calendar.params.maxDate) {
-          yearMax = Math.min(yearMax, new Date(calendar.params.maxDate).getFullYear());
-        }
-
-        const years = [];
-
-        for (let i = yearMin; i <= yearMax; i += 1) {
-          years.push(i);
-        }
-
-        return $jsx("div", {
-          class: "calendar-year-picker"
-        }, years.map(year => $jsx("div", {
-          "data-year": year,
-          class: `calendar-year-picker-item ${year === currentYear ? 'calendar-year-picker-item-current' : ''}`
-        }, $jsx("span", null, calendar.yearFormatter.format(new Date().setFullYear(year))))));
       } // eslint-disable-next-line
 
 
@@ -26565,10 +26563,10 @@
         const calendar = this;
         const value = calendar.value && calendar.value[0];
         let timeString;
-        if (value) timeString = calendar.timeSelectorFormatter.format(value);
+        if (value) timeString = calendar.timeSelectorFormatter(value);
         return $jsx("div", {
           class: "calendar-time-selector"
-        }, $jsx("a", {
+        }, $jsx("span", null, calendar.params.timePickerLabel), $jsx("a", {
           class: "link"
         }, timeString || calendar.params.timePickerPlaceholder));
       }
@@ -26728,6 +26726,142 @@
         return calendar.renderInline();
       }
 
+      openMonthPicker() {
+        const calendar = this;
+        const {
+          $el,
+          app
+        } = calendar;
+        if (!$el || !$el.length) return;
+        $el.append('<div class="popover calendar-popover calendar-month-picker-popover"><div class="popover-inner"><div class="calendar-month-picker"></div></div></div>');
+        calendar.monthPickerPopover = app.popover.create({
+          el: $el.find('.calendar-month-picker-popover'),
+          targetEl: $el.find('.calendar-month-selector'),
+          backdrop: true,
+          backdropUnique: true,
+          on: {
+            close() {
+              calendar.closeMonthPicker();
+            },
+
+            closed() {
+              if (calendar.monthPickerPopover.$el) calendar.monthPickerPopover.$el.remove();
+              calendar.monthPickerPopover.destroy();
+
+              if (calendar.monthPickerInstance) {
+                calendar.monthPickerInstance.close();
+                calendar.monthPickerInstance.destroy();
+              }
+
+              delete calendar.monthPickerInstance;
+              delete calendar.monthPickerPopover;
+            }
+
+          }
+        });
+        calendar.monthPickerPopover.open();
+        const localeMonth = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
+        const values = [];
+        const displayValues = [];
+        calendar.monthNames.forEach((m, index) => {
+          values.push(index);
+          displayValues.push(m);
+        });
+        calendar.monthPickerInstance = app.picker.create({
+          containerEl: calendar.monthPickerPopover.$el.find('.calendar-month-picker'),
+          value: [localeMonth],
+          toolbar: false,
+          rotateEffect: false,
+          toolbarCloseText: calendar.params.toolbarCloseText,
+          cols: [{
+            values,
+            displayValues
+          }]
+        });
+      }
+
+      closeMonthPicker() {
+        const calendar = this;
+        if (calendar.monthPickerPopover && calendar.monthPickerPopover.opened) calendar.monthPickerPopover.close();
+        const index = calendar.monthPickerInstance.value[0];
+        const localeMonthIndex = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
+        const monthIndex = calendar.currentMonth;
+        const diff = localeMonthIndex - monthIndex;
+        const diffIndex = index - diff;
+        calendar.setYearMonth(calendar.currentYear, diffIndex, 0);
+      }
+
+      openYearPicker() {
+        const calendar = this;
+        const {
+          $el,
+          app
+        } = calendar;
+        if (!$el || !$el.length) return;
+        $el.append('<div class="popover calendar-popover calendar-year-picker-popover"><div class="popover-inner"><div class="calendar-year-picker"></div></div></div>');
+        calendar.yearPickerPopover = app.popover.create({
+          el: $el.find('.calendar-year-picker-popover'),
+          targetEl: $el.find('.calendar-year-selector'),
+          backdrop: true,
+          backdropUnique: true,
+          on: {
+            close() {
+              calendar.closeYearPicker();
+            },
+
+            closed() {
+              if (calendar.yearPickerPopover.$el) calendar.yearPickerPopover.$el.remove();
+              calendar.yearPickerPopover.destroy();
+
+              if (calendar.yearPickerInstance) {
+                calendar.yearPickerInstance.close();
+                calendar.yearPickerInstance.destroy();
+              }
+
+              delete calendar.yearPickerInstance;
+              delete calendar.yearPickerPopover;
+            }
+
+          }
+        });
+        calendar.yearPickerPopover.open();
+        const currentYear = calendar.currentYear;
+        let yearMin = calendar.params.yearPickerMin || new Date().getFullYear() - 100;
+
+        if (calendar.params.minDate) {
+          yearMin = Math.max(yearMin, new Date(calendar.params.minDate).getFullYear());
+        }
+
+        let yearMax = calendar.params.yearPickerMax || new Date().getFullYear() + 100;
+
+        if (calendar.params.maxDate) {
+          yearMax = Math.min(yearMax, new Date(calendar.params.maxDate).getFullYear());
+        }
+
+        const years = [];
+
+        for (let i = yearMin; i <= yearMax; i += 1) {
+          years.push(i);
+        }
+
+        calendar.yearPickerInstance = app.picker.create({
+          containerEl: calendar.yearPickerPopover.$el.find('.calendar-year-picker'),
+          value: [currentYear],
+          toolbar: false,
+          rotateEffect: false,
+          toolbarCloseText: calendar.params.toolbarCloseText,
+          cols: [{
+            values: years
+          }]
+        });
+      }
+
+      closeYearPicker() {
+        const calendar = this;
+        if (calendar.yearPickerPopover && calendar.yearPickerPopover.opened) calendar.yearPickerPopover.close();
+        calendar.setYearMonth(calendar.yearPickerInstance.value[0], undefined, 0);
+      }
+
       openTimePicker() {
         const calendar = this;
         const {
@@ -26736,7 +26870,7 @@
           is12HoursFormat
         } = calendar;
         if (!$el || !$el.length) return;
-        $el.append('<div class="calendar-time-picker"></div>');
+        $el.append('<div class="popover calendar-popover calendar-time-picker-popover"><div class="popover-inner"><div class="calendar-time-picker"></div></div></div>');
         const hoursArr = [];
         const minutesArr = [];
         const hoursMin = is12HoursFormat ? 1 : 0;
@@ -26764,10 +26898,36 @@
           if (value[0] === 0) value[0] = 12;
         }
 
+        calendar.timePickerPopover = app.popover.create({
+          el: $el.find('.calendar-time-picker-popover'),
+          targetEl: $el.find('.calendar-time-selector .link'),
+          backdrop: true,
+          backdropUnique: true,
+          on: {
+            close() {
+              calendar.closeTimePicker();
+            },
+
+            closed() {
+              if (calendar.timePickerPopover.$el) calendar.timePickerPopover.$el.remove();
+              calendar.timePickerPopover.destroy();
+
+              if (calendar.timePickerInstance) {
+                calendar.timePickerInstance.close();
+                calendar.timePickerInstance.destroy();
+              }
+
+              delete calendar.timePickerInstance;
+              delete calendar.timePickerPopover;
+            }
+
+          }
+        });
+        calendar.timePickerPopover.open();
         calendar.timePickerInstance = app.picker.create({
-          containerEl: $el.find('.calendar-time-picker'),
+          containerEl: calendar.timePickerPopover.$el.find('.calendar-time-picker'),
           value,
-          toolbar: true,
+          toolbar: false,
           rotateEffect: false,
           toolbarCloseText: calendar.params.toolbarCloseText,
           cols: [{
@@ -26782,7 +26942,6 @@
             values: ['AM', 'PM']
           }] : [])]
         });
-        calendar.timePickerInstance.$el.find('.toolbar a').removeClass('sheet-close popover-close').addClass('calendar-time-picker-close');
       }
 
       closeTimePicker() {
@@ -26816,13 +26975,7 @@
           }
 
           calendar.setValue([value]);
-          calendar.timePickerInstance.close();
-          calendar.timePickerInstance.destroy();
-          delete calendar.timePickerInstance;
-        }
-
-        if (calendar.$el && calendar.$el.length) {
-          calendar.$el.find('.calendar-time-picker').remove();
+          if (calendar.timePickerPopover && calendar.timePickerPopover.opened) calendar.timePickerPopover.close();
         }
       }
 
@@ -27191,6 +27344,7 @@
           yearPickerMin: undefined,
           yearPickerMax: undefined,
           timePicker: false,
+          timePickerLabel: 'Time',
           timePickerFormat: {
             hour: 'numeric',
             minute: 'numeric'
@@ -27238,8 +27392,8 @@
     };
 
     function pickerColumn(colEl, updateItems) {
-      const picker = this;
-      const app = picker.app;
+      const picker = this; // const app = picker.app;
+
       const $colEl = $(colEl);
       const colIndex = $colEl.index();
       const col = picker.cols[colIndex];
@@ -27249,17 +27403,7 @@
       col.$itemsEl = col.$el.find('.picker-items');
       col.items = col.$itemsEl.find('.picker-item');
       let itemHeight;
-      let itemsHeight;
-      let minTranslate;
-      let maxTranslate;
-      let animationFrameId;
-
-      function updateDuringScroll() {
-        animationFrameId = requestAnimationFrame$1(() => {
-          col.updateItems(undefined, undefined, 0);
-          updateDuringScroll();
-        });
-      }
+      let colHeight;
 
       col.replaceValues = function replaceColValues(values, displayValues) {
         col.detachEvents();
@@ -27268,99 +27412,63 @@
         col.$itemsEl.html(picker.renderColumn(col, true));
         col.items = col.$itemsEl.find('.picker-item');
         col.calcSize();
-        col.setValue(col.values[0], 0, true);
+        col.setValue(col.values[0], true);
         col.attachEvents();
       };
 
       col.calcSize = function calcColSize() {
-        if (picker.params.rotateEffect) {
-          col.$el.removeClass('picker-column-absolute');
-          if (!col.width) col.$el.css({
-            width: ''
-          });
-        }
-
-        let colWidth = 0;
-        const colHeight = col.$el[0].offsetHeight;
+        colHeight = col.$el[0].offsetHeight;
         itemHeight = col.items[0].offsetHeight;
-        itemsHeight = itemHeight * col.items.length;
-        minTranslate = colHeight / 2 - itemsHeight + itemHeight / 2;
-        maxTranslate = colHeight / 2 - itemHeight / 2;
-
-        if (col.width) {
-          colWidth = col.width;
-          if (parseInt(colWidth, 10) === colWidth) colWidth += 'px';
-          col.$el.css({
-            width: colWidth
-          });
-        }
-
-        if (picker.params.rotateEffect) {
-          if (!col.width) {
-            col.items.each(itemEl => {
-              const item = $(itemEl).children('span');
-              colWidth = Math.max(colWidth, item[0].offsetWidth);
-            });
-            col.$el.css({
-              width: `${colWidth + 2}px`
-            });
-          }
+        const hadPadding = col.el.style.getPropertyValue('--f7-picker-scroll-padding');
+        col.el.style.setProperty('--f7-picker-scroll-padding', `${(colHeight - itemHeight) / 2}px`);
 
-          col.$el.addClass('picker-column-absolute');
+        if (!hadPadding) {
+          col.$itemsEl[0].scrollTop = 0;
         }
       };
 
-      col.setValue = function setColValue(newValue, transition = '', valueCallbacks) {
+      col.setValue = function setColValue(newValue, valueCallbacks) {
         const newActiveIndex = col.$itemsEl.find(`.picker-item[data-picker-value="${newValue}"]`).index();
 
         if (typeof newActiveIndex === 'undefined' || newActiveIndex === -1) {
           return;
         }
 
-        const newTranslate = -newActiveIndex * itemHeight + maxTranslate; // Update wrapper
-
-        col.$itemsEl.transition(transition);
-        col.$itemsEl.transform(`translate3d(0,${newTranslate}px,0)`); // Watch items
-
-        if (picker.params.updateValuesOnMomentum && col.activeIndex && col.activeIndex !== newActiveIndex) {
-          cancelAnimationFrame(animationFrameId);
-          col.$itemsEl.transitionEnd(() => {
-            cancelAnimationFrame(animationFrameId);
-          });
-          updateDuringScroll();
-        } // Update items
-
+        const newScrollTop = newActiveIndex * itemHeight;
+        col.$itemsEl[0].scrollTop = newScrollTop; // Update items
 
-        col.updateItems(newActiveIndex, newTranslate, transition, valueCallbacks);
+        col.updateItems(newActiveIndex, newScrollTop, valueCallbacks);
       };
 
-      col.updateItems = function updateColItems(activeIndex, translate, transition, valueCallbacks) {
-        if (typeof translate === 'undefined') {
+      col.updateItems = function updateColItems(activeIndex, scrollTop, valueCallbacks) {
+        if (typeof scrollTop === 'undefined') {
           // eslint-disable-next-line
-          translate = getTranslate$1(col.$itemsEl[0], 'y');
+          scrollTop = col.$itemsEl[0].scrollTop;
         }
+        /* eslint-disable no-param-reassign */
 
-        if (typeof activeIndex === 'undefined') // eslint-disable-next-line
-          activeIndex = -Math.round((translate - maxTranslate) / itemHeight); // eslint-disable-next-line
 
-        if (activeIndex < 0) activeIndex = 0; // eslint-disable-next-line
+        if (typeof activeIndex === 'undefined') {
+          activeIndex = Math.round(scrollTop / itemHeight);
+        }
 
+        if (activeIndex < 0) activeIndex = 0;
         if (activeIndex >= col.items.length) activeIndex = col.items.length - 1;
+        /* eslint-enable no-param-reassign */
+
         const previousActiveIndex = col.activeIndex;
         col.activeIndex = activeIndex;
         col.$itemsEl.find('.picker-item-selected').removeClass('picker-item-selected');
-        col.items.transition(transition);
-        const selectedItem = col.items.eq(activeIndex).addClass('picker-item-selected').transform(''); // Set 3D rotate effect
+        const selectedItem = col.items.eq(activeIndex);
+        selectedItem.addClass('picker-item-selected').children().transform(''); // Set 3D rotate effect
 
         if (picker.params.rotateEffect) {
           col.items.each(itemEl => {
             const $itemEl = $(itemEl);
-            const itemOffsetTop = $itemEl.index() * itemHeight;
-            const translateOffset = maxTranslate - translate;
-            const itemOffset = itemOffsetTop - translateOffset;
+            const itemOffset = itemEl.offsetTop - (colHeight - itemHeight) / 2 - scrollTop;
             const percentage = itemOffset / itemHeight;
             const itemsFit = Math.ceil(col.height / itemHeight / 2) + 1;
-            let angle = -18 * percentage;
+            let angle = -24 * percentage;
             if (angle > 180) angle = 180;
             if (angle < -180) angle = -180;
 
@@ -27370,7 +27478,7 @@
               $itemEl.removeClass('picker-item-far');
             }
 
-            $itemEl.transform(`translate3d(0, ${-translate + maxTranslate}px, ${picker.needsOriginFix ? -110 : 0}px) rotateX(${angle}deg)`);
+            $itemEl.children('span').transform(`translate3d(0, ${-percentage * itemHeight}px, -100px) rotateX(${angle}deg)`);
           });
         }
 
@@ -27389,219 +27497,31 @@
         }
       };
 
-      let allowItemClick = true;
-      let isTouched;
-      let isMoved;
-      let touchStartY;
-      let touchCurrentY;
-      let touchStartTime;
-      let touchEndTime;
-      let startTranslate;
-      let returnTo;
-      let currentTranslate;
-      let prevTranslate;
-      let velocityTranslate;
-
-      function handleTouchStart(e) {
-        if (isMoved || isTouched) return;
-        e.preventDefault();
-        isTouched = true;
-        touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-        touchCurrentY = touchStartY;
-        touchStartTime = new Date().getTime();
-        allowItemClick = true;
-        startTranslate = getTranslate$1(col.$itemsEl[0], 'y');
-        currentTranslate = startTranslate;
-      }
-
-      function handleTouchMove(e) {
-        if (!isTouched) return;
-        e.preventDefault();
-        allowItemClick = false;
-        touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-
-        if (!isMoved) {
-          // First move
-          cancelAnimationFrame(animationFrameId);
-          isMoved = true;
-          startTranslate = getTranslate$1(col.$itemsEl[0], 'y');
-          currentTranslate = startTranslate;
-          col.$itemsEl.transition(0);
-        }
-
-        const diff = touchCurrentY - touchStartY;
-        currentTranslate = startTranslate + diff;
-        returnTo = undefined; // Normalize translate
-
-        if (currentTranslate < minTranslate) {
-          currentTranslate = minTranslate - (minTranslate - currentTranslate) ** 0.8;
-          returnTo = 'min';
-        }
-
-        if (currentTranslate > maxTranslate) {
-          currentTranslate = maxTranslate + (currentTranslate - maxTranslate) ** 0.8;
-          returnTo = 'max';
-        } // Transform wrapper
-
-
-        col.$itemsEl.transform(`translate3d(0,${currentTranslate}px,0)`); // Update items
-
-        col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnTouchmove); // Calc velocity
-
-        velocityTranslate = currentTranslate - prevTranslate || currentTranslate;
-        prevTranslate = currentTranslate;
-      }
-
-      function handleTouchEnd() {
-        if (!isTouched || !isMoved) {
-          isTouched = false;
-          isMoved = false;
-          return;
-        }
-
-        isTouched = false;
-        isMoved = false;
-        col.$itemsEl.transition('');
-
-        if (returnTo) {
-          if (returnTo === 'min') {
-            col.$itemsEl.transform(`translate3d(0,${minTranslate}px,0)`);
-          } else {
-            col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`);
-          }
-        }
-
-        touchEndTime = new Date().getTime();
-        let newTranslate;
-
-        if (touchEndTime - touchStartTime > 300) {
-          newTranslate = currentTranslate;
-        } else {
-          newTranslate = currentTranslate + velocityTranslate * picker.params.momentumRatio;
-        }
-
-        newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index
-
-        const activeIndex = Math.round(Math.abs((newTranslate - maxTranslate) / itemHeight)); // Normalize translate
-
-        if (!picker.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper
-
-        col.$itemsEl.transform(`translate3d(0,${parseInt(newTranslate, 10)}px,0)`); // Update items
-
-        col.updateItems(activeIndex, newTranslate, '', true); // Watch items
-
-        if (picker.params.updateValuesOnMomentum) {
-          updateDuringScroll();
-          col.$itemsEl.transitionEnd(() => {
-            cancelAnimationFrame(animationFrameId);
-          });
-        } // Allow click
-
-
-        setTimeout(() => {
-          allowItemClick = true;
-        }, 100);
-      }
-
-      let mousewheelTimeout;
-
-      function handleMouseWheel(e) {
-        const {
-          deltaX,
-          deltaY
-        } = e;
-        if (Math.abs(deltaX) > Math.abs(deltaY)) return;
-        clearTimeout(mousewheelTimeout);
-        e.preventDefault();
-        cancelAnimationFrame(animationFrameId);
-        startTranslate = getTranslate$1(col.$itemsEl[0], 'y');
-        col.$itemsEl.transition(0);
-        currentTranslate = startTranslate - deltaY;
-        returnTo = undefined; // Normalize translate
-
-        if (currentTranslate < minTranslate) {
-          currentTranslate = minTranslate;
-          returnTo = 'min';
-        }
-
-        if (currentTranslate > maxTranslate) {
-          currentTranslate = maxTranslate;
-          returnTo = 'max';
-        } // Transform wrapper
-
-
-        col.$itemsEl.transform(`translate3d(0,${currentTranslate}px,0)`); // Update items
-
-        col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnMousewheel); // On end
-
-        mousewheelTimeout = setTimeout(() => {
-          col.$itemsEl.transition('');
-
-          if (returnTo) {
-            if (returnTo === 'min') {
-              col.$itemsEl.transform(`translate3d(0,${minTranslate}px,0)`);
-            } else {
-              col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`);
-            }
-          }
-
-          touchEndTime = new Date().getTime();
-          let newTranslate = currentTranslate;
-          newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index
-
-          const activeIndex = Math.round(Math.abs((newTranslate - maxTranslate) / itemHeight)); // Normalize translate
-
-          if (!picker.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper
-
-          col.$itemsEl.transform(`translate3d(0,${parseInt(newTranslate, 10)}px,0)`); // Update items
-
-          col.updateItems(activeIndex, newTranslate, '', true);
-        }, 200);
+      function handleScroll() {
+        col.updateItems();
       }
 
       function handleClick() {
-        if (!allowItemClick) return;
-        cancelAnimationFrame(animationFrameId);
         const value = $(this).attr('data-picker-value');
         col.setValue(value);
       }
 
-      const activeListener = getSupport$1().passiveListener ? {
-        passive: false,
-        capture: false
-      } : false;
-
       col.attachEvents = function attachColEvents() {
-        col.$el.on(app.touchEvents.start, handleTouchStart, activeListener);
-        app.on('touchmove:active', handleTouchMove);
-        app.on('touchend:passive', handleTouchEnd);
-
-        if (picker.params.mousewheel) {
-          col.$el.on('wheel', handleMouseWheel);
-        }
-
+        col.$itemsEl.on('scroll', handleScroll);
         col.items.on('click', handleClick);
       };
 
       col.detachEvents = function detachColEvents() {
-        col.$el.off(app.touchEvents.start, handleTouchStart, activeListener);
-        app.off('touchmove:active', handleTouchMove);
-        app.off('touchend:passive', handleTouchEnd);
-
-        if (picker.params.mousewheel) {
-          col.$el.off('wheel', handleMouseWheel);
-        }
-
         col.items.off('click', handleClick);
       };
 
       col.init = function initCol() {
         col.calcSize();
-        col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`).transition(0);
         if (colIndex === 0) col.$el.addClass('picker-column-first');
-        if (colIndex === picker.cols.length - 1) col.$el.addClass('picker-column-last'); // Update items on init
+        if (colIndex === picker.cols.length - 1) col.$el.addClass('picker-column-last');
+        if (picker.params.freeMode) col.$el.addClass('picker-column-free-mode'); // Update items on init
 
-        if (updateItems) col.updateItems(0, maxTranslate, 0);
+        if (updateItems) col.updateItems(0);
         col.attachEvents();
       };
 
@@ -27771,7 +27691,7 @@
         for (let i = 0; i < picker.cols.length; i += 1) {
           if (!picker.cols[i].divider) {
             picker.cols[i].calcSize();
-            picker.cols[i].setValue(picker.cols[i].value, 0, false);
+            picker.cols[i].setValue(picker.cols[i].value, false);
           }
         }
       }
@@ -27820,7 +27740,7 @@
         return value.join(' ');
       }
 
-      setValue(values, transition) {
+      setValue(values) {
         const picker = this;
         let valueIndex = 0;
 
@@ -27832,7 +27752,7 @@
 
         for (let i = 0; i < picker.cols.length; i += 1) {
           if (picker.cols[i] && !picker.cols[i].divider) {
-            picker.cols[i].setValue(values[valueIndex], transition);
+            picker.cols[i].setValue(values[valueIndex]);
             valueIndex += 1;
           }
         }
@@ -28040,11 +27960,11 @@
         }); // Set value
 
         if (!initialized) {
-          if (value) picker.setValue(value, 0);else if (params.value) {
-            picker.setValue(params.value, 0);
+          if (value) picker.setValue(value);else if (params.value) {
+            picker.setValue(params.value);
           }
         } else if (value) {
-          picker.setValue(value, 0);
+          picker.setValue(value);
         } // Extra focus
 
 
@@ -28319,12 +28239,7 @@
       params: {
         picker: {
           // Picker settings
-          updateValuesOnMomentum: false,
-          updateValuesOnTouchmove: true,
-          updateValuesOnMousewheel: true,
-          mousewheel: true,
           rotateEffect: false,
-          momentumRatio: 7,
           freeMode: false,
           cols: [],
           // Common opener settings
@@ -33697,7 +33612,11 @@
       });
     }
 
-    function nextTick(callback, delay = 0) {
+    function nextTick(callback, delay) {
+      if (delay === void 0) {
+        delay = 0;
+      }
+
       return setTimeout(callback, delay);
     }
 
@@ -33724,7 +33643,11 @@
       return style;
     }
 
-    function getTranslate(el, axis = 'x') {
+    function getTranslate(el, axis) {
+      if (axis === void 0) {
+        axis = 'x';
+      }
+
       const window = getWindow();
       let matrix;
       let curTransform;
@@ -33776,12 +33699,12 @@
       return node && (node.nodeType === 1 || node.nodeType === 11);
     }
 
-    function extend(...args) {
-      const to = Object(args[0]);
+    function extend() {
+      const to = Object(arguments.length <= 0 ? undefined : arguments[0]);
       const noExtend = ['__proto__', 'constructor', 'prototype'];
 
-      for (let i = 1; i < args.length; i += 1) {
-        const nextSource = args[i];
+      for (let i = 1; i < arguments.length; i += 1) {
+        const nextSource = i < 0 || arguments.length <= i ? undefined : arguments[i];
 
         if (nextSource !== undefined && nextSource !== null && !isNode(nextSource)) {
           const keysArray = Object.keys(Object(nextSource)).filter(key => noExtend.indexOf(key) < 0);
@@ -33820,11 +33743,12 @@
       el.style.setProperty(varName, varValue);
     }
 
-    function animateCSSModeScroll({
-      swiper,
-      targetPosition,
-      side
-    }) {
+    function animateCSSModeScroll(_ref) {
+      let {
+        swiper,
+        targetPosition,
+        side
+      } = _ref;
       const window = getWindow();
       const startPosition = -swiper.translate;
       let startTime = null;
@@ -33917,9 +33841,10 @@
 
     let deviceCached;
 
-    function calcDevice({
-      userAgent
-    } = {}) {
+    function calcDevice(_temp) {
+      let {
+        userAgent
+      } = _temp === void 0 ? {} : _temp;
       const support = getSupport();
       const window = getWindow();
       const platform = window.navigator.platform;
@@ -33961,7 +33886,11 @@
       return device;
     }
 
-    function getDevice(overrides = {}) {
+    function getDevice(overrides) {
+      if (overrides === void 0) {
+        overrides = {};
+      }
+
       if (!deviceCached) {
         deviceCached = calcDevice(overrides);
       }
@@ -33993,13 +33922,15 @@
       return browser;
     }
 
-    function Resize({
-      swiper,
-      on,
-      emit
-    }) {
+    function Resize(_ref) {
+      let {
+        swiper,
+        on,
+        emit
+      } = _ref;
       const window = getWindow();
       let observer = null;
+      let animationFrame = null;
 
       const resizeHandler = () => {
         if (!swiper || swiper.destroyed || !swiper.initialized) return;
@@ -34010,30 +33941,37 @@
       const createObserver = () => {
         if (!swiper || swiper.destroyed || !swiper.initialized) return;
         observer = new ResizeObserver(entries => {
-          const {
-            width,
-            height
-          } = swiper;
-          let newWidth = width;
-          let newHeight = height;
-          entries.forEach(({
-            contentBoxSize,
-            contentRect,
-            target
-          }) => {
-            if (target && target !== swiper.el) return;
-            newWidth = contentRect ? contentRect.width : (contentBoxSize[0] || contentBoxSize).inlineSize;
-            newHeight = contentRect ? contentRect.height : (contentBoxSize[0] || contentBoxSize).blockSize;
-          });
+          animationFrame = window.requestAnimationFrame(() => {
+            const {
+              width,
+              height
+            } = swiper;
+            let newWidth = width;
+            let newHeight = height;
+            entries.forEach(_ref2 => {
+              let {
+                contentBoxSize,
+                contentRect,
+                target
+              } = _ref2;
+              if (target && target !== swiper.el) return;
+              newWidth = contentRect ? contentRect.width : (contentBoxSize[0] || contentBoxSize).inlineSize;
+              newHeight = contentRect ? contentRect.height : (contentBoxSize[0] || contentBoxSize).blockSize;
+            });
 
-          if (newWidth !== width || newHeight !== height) {
-            resizeHandler();
-          }
+            if (newWidth !== width || newHeight !== height) {
+              resizeHandler();
+            }
+          });
         });
         observer.observe(swiper.el);
       };
 
       const removeObserver = () => {
+        if (animationFrame) {
+          window.cancelAnimationFrame(animationFrame);
+        }
+
         if (observer && observer.unobserve && swiper.el) {
           observer.unobserve(swiper.el);
           observer = null;
@@ -34061,16 +33999,21 @@
       });
     }
 
-    function Observer({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Observer(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       const observers = [];
       const window = getWindow();
 
-      const attach = (target, options = {}) => {
+      const attach = function (target, options) {
+        if (options === void 0) {
+          options = {};
+        }
+
         const ObserverFunc = window.MutationObserver || window.WebkitMutationObserver;
         const observer = new ObserverFunc(mutations => {
           // The observerUpdate event should only be triggered
@@ -34153,13 +34096,17 @@
         const self = this;
         if (typeof handler !== 'function') return self;
 
-        function onceHandler(...args) {
+        function onceHandler() {
           self.off(events, onceHandler);
 
           if (onceHandler.__emitterProxy) {
             delete onceHandler.__emitterProxy;
           }
 
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
           handler.apply(self, args);
         }
 
@@ -34208,13 +34155,17 @@
         return self;
       },
 
-      emit(...args) {
+      emit() {
         const self = this;
         if (!self.eventsListeners) return self;
         let events;
         let data;
         let context;
 
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+
         if (typeof args[0] === 'string' || Array.isArray(args[0])) {
           events = args[0];
           data = args.slice(1, args.length);
@@ -34586,6 +34537,17 @@
       if (params.watchSlidesProgress) {
         swiper.updateSlidesOffset();
       }
+
+      if (!isVirtual && !params.cssMode && (params.effect === 'slide' || params.effect === 'fade')) {
+        const backFaceHiddenClass = `${params.containerModifierClass}backface-hidden`;
+        const hasClassBackfaceClassAdded = swiper.$el.hasClass(backFaceHiddenClass);
+
+        if (slidesLength <= params.maxBackfaceHiddenSlides) {
+          if (!hasClassBackfaceClassAdded) swiper.$el.addClass(backFaceHiddenClass);
+        } else if (hasClassBackfaceClassAdded) {
+          swiper.$el.removeClass(backFaceHiddenClass);
+        }
+      }
     }
 
     function updateAutoHeight(speed) {
@@ -34635,7 +34597,7 @@
       } // Update Height
 
 
-      if (newHeight) swiper.$wrapperEl.css('height', `${newHeight}px`);
+      if (newHeight || newHeight === 0) swiper.$wrapperEl.css('height', `${newHeight}px`);
     }
 
     function updateSlidesOffset() {
@@ -34647,7 +34609,11 @@
       }
     }
 
-    function updateSlidesProgress(translate = this && this.translate || 0) {
+    function updateSlidesProgress(translate) {
+      if (translate === void 0) {
+        translate = this && this.translate || 0;
+      }
+
       const swiper = this;
       const params = swiper.params;
       const {
@@ -34881,7 +34847,7 @@
     function updateClickedSlide(e) {
       const swiper = this;
       const params = swiper.params;
-      const slide = $$1(e.target).closest(`.${params.slideClass}`)[0];
+      const slide = $$1(e).closest(`.${params.slideClass}`)[0];
       let slideFound = false;
       let slideIndex;
 
@@ -34926,7 +34892,11 @@
       updateClickedSlide
     };
 
-    function getSwiperTranslate(axis = this.isHorizontal() ? 'x' : 'y') {
+    function getSwiperTranslate(axis) {
+      if (axis === void 0) {
+        axis = this.isHorizontal() ? 'x' : 'y';
+      }
+
       const swiper = this;
       const {
         params,
@@ -35005,7 +34975,23 @@
       return -this.snapGrid[this.snapGrid.length - 1];
     }
 
-    function translateTo(translate = 0, speed = this.params.speed, runCallbacks = true, translateBounds = true, internal) {
+    function translateTo(translate, speed, runCallbacks, translateBounds, internal) {
+      if (translate === void 0) {
+        translate = 0;
+      }
+
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
+
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
+      if (translateBounds === void 0) {
+        translateBounds = true;
+      }
+
       const swiper = this;
       const {
         params,
@@ -35108,12 +35094,13 @@
       swiper.emit('setTransition', duration, byController);
     }
 
-    function transitionEmit({
-      swiper,
-      runCallbacks,
-      direction,
-      step
-    }) {
+    function transitionEmit(_ref) {
+      let {
+        swiper,
+        runCallbacks,
+        direction,
+        step
+      } = _ref;
       const {
         activeIndex,
         previousIndex
@@ -35142,7 +35129,11 @@
       }
     }
 
-    function transitionStart(runCallbacks = true, direction) {
+    function transitionStart(runCallbacks, direction) {
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
       const swiper = this;
       const {
         params
@@ -35161,7 +35152,11 @@
       });
     }
 
-    function transitionEnd(runCallbacks = true, direction) {
+    function transitionEnd(runCallbacks, direction) {
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
       const swiper = this;
       const {
         params
@@ -35183,7 +35178,19 @@
       transitionEnd
     };
 
-    function slideTo(index = 0, speed = this.params.speed, runCallbacks = true, internal, initial) {
+    function slideTo(index, speed, runCallbacks, internal, initial) {
+      if (index === void 0) {
+        index = 0;
+      }
+
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
+
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
       if (typeof index !== 'number' && typeof index !== 'string') {
         throw new Error(`The 'index' argument cannot have type other than 'number' or 'string'. [${typeof index}] given.`);
       }
@@ -35333,46 +35340,50 @@
         return true;
       }
 
+      swiper.setTransition(speed);
+      swiper.setTranslate(translate);
+      swiper.updateActiveIndex(slideIndex);
+      swiper.updateSlidesClasses();
+      swiper.emit('beforeTransitionStart', speed, internal);
+      swiper.transitionStart(runCallbacks, direction);
+
       if (speed === 0) {
-        swiper.setTransition(0);
-        swiper.setTranslate(translate);
-        swiper.updateActiveIndex(slideIndex);
-        swiper.updateSlidesClasses();
-        swiper.emit('beforeTransitionStart', speed, internal);
-        swiper.transitionStart(runCallbacks, direction);
         swiper.transitionEnd(runCallbacks, direction);
-      } else {
-        swiper.setTransition(speed);
-        swiper.setTranslate(translate);
-        swiper.updateActiveIndex(slideIndex);
-        swiper.updateSlidesClasses();
-        swiper.emit('beforeTransitionStart', speed, internal);
-        swiper.transitionStart(runCallbacks, direction);
-
-        if (!swiper.animating) {
-          swiper.animating = true;
-
-          if (!swiper.onSlideToWrapperTransitionEnd) {
-            swiper.onSlideToWrapperTransitionEnd = function transitionEnd(e) {
-              if (!swiper || swiper.destroyed) return;
-              if (e.target !== this) return;
-              swiper.$wrapperEl[0].removeEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
-              swiper.$wrapperEl[0].removeEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd);
-              swiper.onSlideToWrapperTransitionEnd = null;
-              delete swiper.onSlideToWrapperTransitionEnd;
-              swiper.transitionEnd(runCallbacks, direction);
-            };
-          }
-
-          swiper.$wrapperEl[0].addEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
-          swiper.$wrapperEl[0].addEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd);
+      } else if (!swiper.animating) {
+        swiper.animating = true;
+
+        if (!swiper.onSlideToWrapperTransitionEnd) {
+          swiper.onSlideToWrapperTransitionEnd = function transitionEnd(e) {
+            if (!swiper || swiper.destroyed) return;
+            if (e.target !== this) return;
+            swiper.$wrapperEl[0].removeEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
+            swiper.$wrapperEl[0].removeEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd);
+            swiper.onSlideToWrapperTransitionEnd = null;
+            delete swiper.onSlideToWrapperTransitionEnd;
+            swiper.transitionEnd(runCallbacks, direction);
+          };
         }
+
+        swiper.$wrapperEl[0].addEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
+        swiper.$wrapperEl[0].addEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd);
       }
 
       return true;
     }
 
-    function slideToLoop(index = 0, speed = this.params.speed, runCallbacks = true, internal) {
+    function slideToLoop(index, speed, runCallbacks, internal) {
+      if (index === void 0) {
+        index = 0;
+      }
+
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
+
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
       const swiper = this;
       let newIndex = index;
 
@@ -35384,7 +35395,15 @@
     }
 
     /* eslint no-unused-vars: "off" */
-    function slideNext(speed = this.params.speed, runCallbacks = true, internal) {
+    function slideNext(speed, runCallbacks, internal) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
+
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
       const swiper = this;
       const {
         animating,
@@ -35407,11 +35426,23 @@
         swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
       }
 
+      if (params.rewind && swiper.isEnd) {
+        return swiper.slideTo(0, speed, runCallbacks, internal);
+      }
+
       return swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal);
     }
 
     /* eslint no-unused-vars: "off" */
-    function slidePrev(speed = this.params.speed, runCallbacks = true, internal) {
+    function slidePrev(speed, runCallbacks, internal) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
+
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
       const swiper = this;
       const {
         params,
@@ -35467,17 +35498,42 @@
         }
       }
 
+      if (params.rewind && swiper.isBeginning) {
+        const lastIndex = swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;
+        return swiper.slideTo(lastIndex, speed, runCallbacks, internal);
+      }
+
       return swiper.slideTo(prevIndex, speed, runCallbacks, internal);
     }
 
     /* eslint no-unused-vars: "off" */
-    function slideReset(speed = this.params.speed, runCallbacks = true, internal) {
+    function slideReset(speed, runCallbacks, internal) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
+
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
       const swiper = this;
       return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
     }
 
     /* eslint no-unused-vars: "off" */
-    function slideToClosest(speed = this.params.speed, runCallbacks = true, internal, threshold = 0.5) {
+    function slideToClosest(speed, runCallbacks, internal, threshold) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
+
+      if (runCallbacks === void 0) {
+        runCallbacks = true;
+      }
+
+      if (threshold === void 0) {
+        threshold = 0.5;
+      }
+
       const swiper = this;
       let index = swiper.activeIndex;
       const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
@@ -35565,7 +35621,7 @@
         $wrapperEl
       } = swiper; // Remove duplicated slides
 
-      const $selector = $$1($wrapperEl.children()[0].parentNode);
+      const $selector = $wrapperEl.children().length > 0 ? $$1($wrapperEl.children()[0].parentNode) : $wrapperEl;
       $selector.children(`.${params.slideClass}.${params.slideDuplicateClass}`).remove();
       let slides = $selector.children(`.${params.slideClass}`);
 
@@ -35699,7 +35755,11 @@
       unsetGrabCursor
     };
 
-    function closestElement(selector, base = this) {
+    function closestElement(selector, base) {
+      if (base === void 0) {
+        base = this;
+      }
+
       function __closestFrom(el) {
         if (!el || el === getDocument() || el === getWindow()) return null;
         if (el.assignedSlot) el = el.assignedSlot;
@@ -35794,7 +35854,14 @@
 
       if (e.type !== 'touchstart') {
         let preventDefault = true;
-        if ($targetEl.is(data.focusableElements)) preventDefault = false;
+
+        if ($targetEl.is(data.focusableElements)) {
+          preventDefault = false;
+
+          if ($targetEl[0].nodeName === 'SELECT') {
+            data.isTouched = false;
+          }
+        }
 
         if (document.activeElement && $$1(document.activeElement).is(data.focusableElements) && document.activeElement !== $targetEl[0]) {
           document.activeElement.blur();
@@ -35807,6 +35874,10 @@
         }
       }
 
+      if (swiper.params.freeMode && swiper.params.freeMode.enabled && swiper.freeMode && swiper.animating && !params.cssMode) {
+        swiper.freeMode.onTouchStart();
+      }
+
       swiper.emit('touchStart', e);
     }
 
@@ -35844,8 +35915,9 @@
       }
 
       if (!swiper.allowTouchMove) {
-        // isMoved = true;
-        swiper.allowClick = false;
+        if (!$$1(e.target).is(data.focusableElements)) {
+          swiper.allowClick = false;
+        }
 
         if (data.isTouched) {
           Object.assign(touches, {
@@ -36070,7 +36142,8 @@
       const timeDiff = touchEndTime - data.touchStartTime; // Tap, doubleTap, Click
 
       if (swiper.allowClick) {
-        swiper.updateClickedSlide(e);
+        const pathTree = e.path || e.composedPath && e.composedPath();
+        swiper.updateClickedSlide(pathTree && pathTree[0] || e.target);
         swiper.emit('tap click', e);
 
         if (timeDiff < 300 && touchEndTime - data.lastClickTime < 300) {
@@ -36128,6 +36201,17 @@
           stopIndex = i;
           groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2];
         }
+      }
+
+      let rewindFirstIndex = null;
+      let rewindLastIndex = null;
+
+      if (params.rewind) {
+        if (swiper.isBeginning) {
+          rewindLastIndex = swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;
+        } else if (swiper.isEnd) {
+          rewindFirstIndex = 0;
+        }
       } // Find current slide size
 
 
@@ -36142,11 +36226,17 @@
         }
 
         if (swiper.swipeDirection === 'next') {
-          if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + increment);else swiper.slideTo(stopIndex);
+          if (ratio >= params.longSwipesRatio) swiper.slideTo(params.rewind && swiper.isEnd ? rewindFirstIndex : stopIndex + increment);else swiper.slideTo(stopIndex);
         }
 
         if (swiper.swipeDirection === 'prev') {
-          if (ratio > 1 - params.longSwipesRatio) swiper.slideTo(stopIndex + increment);else swiper.slideTo(stopIndex);
+          if (ratio > 1 - params.longSwipesRatio) {
+            swiper.slideTo(stopIndex + increment);
+          } else if (rewindLastIndex !== null && ratio < 0 && Math.abs(ratio) > params.longSwipesRatio) {
+            swiper.slideTo(rewindLastIndex);
+          } else {
+            swiper.slideTo(stopIndex);
+          }
         }
       } else {
         // Short swipes
@@ -36159,11 +36249,11 @@
 
         if (!isNavButtonTarget) {
           if (swiper.swipeDirection === 'next') {
-            swiper.slideTo(stopIndex + increment);
+            swiper.slideTo(rewindFirstIndex !== null ? rewindFirstIndex : stopIndex + increment);
           }
 
           if (swiper.swipeDirection === 'prev') {
-            swiper.slideTo(stopIndex);
+            swiper.slideTo(rewindLastIndex !== null ? rewindLastIndex : stopIndex);
           }
         } else if (e.target === swiper.navigation.nextEl) {
           swiper.slideTo(stopIndex + increment);
@@ -36429,7 +36519,11 @@
       swiper.emit('breakpoint', breakpointParams);
     }
 
-    function getBreakpoint(breakpoints, base = 'window', containerEl) {
+    function getBreakpoint(breakpoints, base, containerEl) {
+      if (base === void 0) {
+        base = 'window';
+      }
+
       if (!breakpoints || base === 'container' && !containerEl) return undefined;
       let breakpoint = false;
       const window = getWindow();
@@ -36733,6 +36827,8 @@
       loopedSlides: null,
       loopFillGroupWithBlank: false,
       loopPreventsSlide: true,
+      // rewind
+      rewind: false,
       // Swiping/no swiping
       allowSlidePrev: true,
       allowSlideNext: true,
@@ -36743,6 +36839,7 @@
       noSwipingSelector: null,
       // Passive Listeners
       passiveListeners: true,
+      maxBackfaceHiddenSlides: 10,
       // NS
       containerModifierClass: 'swiper-',
       // NEW
@@ -36764,7 +36861,11 @@
     };
 
     function moduleExtendParams(params, allModulesParams) {
-      return function extendParams(obj = {}) {
+      return function extendParams(obj) {
+        if (obj === void 0) {
+          obj = {};
+        }
+
         const moduleParamName = Object.keys(obj)[0];
         const moduleParams = obj[moduleParamName];
 
@@ -36819,10 +36920,14 @@
     const extendedDefaults = {};
 
     class Swiper$1 {
-      constructor(...args) {
+      constructor() {
         let el;
         let params;
 
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
         if (args.length === 1 && args[0].constructor && Object.prototype.toString.call(args[0]).slice(8, -1) === 'Object') {
           params = args[0];
         } else {
@@ -37054,7 +37159,15 @@
         swiper.emit('_slideClasses', updates);
       }
 
-      slidesPerViewDynamic(view = 'current', exact = false) {
+      slidesPerViewDynamic(view, exact) {
+        if (view === void 0) {
+          view = 'current';
+        }
+
+        if (exact === void 0) {
+          exact = false;
+        }
+
         const swiper = this;
         const {
           params,
@@ -37162,7 +37275,11 @@
         swiper.emit('update');
       }
 
-      changeDirection(newDirection, needUpdate = true) {
+      changeDirection(newDirection, needUpdate) {
+        if (needUpdate === void 0) {
+          needUpdate = true;
+        }
+
         const swiper = this;
         const currentDirection = swiper.params.direction;
 
@@ -37300,7 +37417,15 @@
         return swiper;
       }
 
-      destroy(deleteInstance = true, cleanStyles = true) {
+      destroy(deleteInstance, cleanStyles) {
+        if (deleteInstance === void 0) {
+          deleteInstance = true;
+        }
+
+        if (cleanStyles === void 0) {
+          cleanStyles = true;
+        }
+
         const swiper = this;
         const {
           params,
@@ -37389,11 +37514,12 @@
     });
     Swiper$1.use([Resize, Observer]);
 
-    function Virtual({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function Virtual(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         virtual: {
           enabled: false,
@@ -37680,12 +37806,13 @@
     }
 
     /* eslint-disable consistent-return */
-    function Keyboard({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Keyboard(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       const document = getDocument();
       const window = getWindow();
       swiper.keyboard = {
@@ -37810,12 +37937,13 @@
     }
 
     /* eslint-disable consistent-return */
-    function Mousewheel({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Mousewheel(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       const window = getWindow();
       extendParams({
         mousewheel: {
@@ -38252,12 +38380,13 @@
       return params;
     }
 
-    function Navigation({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Navigation(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       extendParams({
         navigation: {
           nextEl: null,
@@ -38309,19 +38438,19 @@
           $nextEl,
           $prevEl
         } = swiper.navigation;
-        toggleEl($prevEl, swiper.isBeginning);
-        toggleEl($nextEl, swiper.isEnd);
+        toggleEl($prevEl, swiper.isBeginning && !swiper.params.rewind);
+        toggleEl($nextEl, swiper.isEnd && !swiper.params.rewind);
       }
 
       function onPrevClick(e) {
         e.preventDefault();
-        if (swiper.isBeginning && !swiper.params.loop) return;
+        if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
         swiper.slidePrev();
       }
 
       function onNextClick(e) {
         e.preventDefault();
-        if (swiper.isEnd && !swiper.params.loop) return;
+        if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
         swiper.slideNext();
       }
 
@@ -38436,17 +38565,22 @@
       });
     }
 
-    function classesToSelector(classes = '') {
+    function classesToSelector(classes) {
+      if (classes === void 0) {
+        classes = '';
+      }
+
       return `.${classes.trim().replace(/([\.:!\/])/g, '\\$1') // eslint-disable-line
   .replace(/ /g, '.')}`;
     }
 
-    function Pagination({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Pagination(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       const pfx = 'swiper-pagination';
       extendParams({
         pagination: {
@@ -38536,7 +38670,7 @@
             $el.css(swiper.isHorizontal() ? 'width' : 'height', `${bulletSize * (params.dynamicMainBullets + 4)}px`);
 
             if (params.dynamicMainBullets > 1 && swiper.previousIndex !== undefined) {
-              dynamicBulletIndex += current - swiper.previousIndex;
+              dynamicBulletIndex += current - (swiper.previousIndex - swiper.loopedSlides || 0);
 
               if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
                 dynamicBulletIndex = params.dynamicMainBullets - 1;
@@ -38545,7 +38679,7 @@
               }
             }
 
-            firstIndex = current - dynamicBulletIndex;
+            firstIndex = Math.max(current - dynamicBulletIndex, 0);
             lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
             midIndex = (lastIndex + firstIndex) / 2;
           }
@@ -38589,7 +38723,7 @@
               }
 
               if (swiper.params.loop) {
-                if (bulletIndex >= bullets.length - params.dynamicMainBullets) {
+                if (bulletIndex >= bullets.length) {
                   for (let i = params.dynamicMainBullets; i >= 0; i -= 1) {
                     bullets.eq(bullets.length - i).addClass(`${params.bulletActiveClass}-main`);
                   }
@@ -38849,12 +38983,13 @@
       });
     }
 
-    function Scrollbar({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Scrollbar(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       const document = getDocument();
       let isTouched = false;
       let timeout = null;
@@ -39207,11 +39342,12 @@
       });
     }
 
-    function Parallax({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function Parallax(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         parallax: {
           enabled: false
@@ -39290,7 +39426,11 @@
         });
       };
 
-      const setTransition = (duration = swiper.params.speed) => {
+      const setTransition = function (duration) {
+        if (duration === void 0) {
+          duration = swiper.params.speed;
+        }
+
         const {
           $el
         } = swiper;
@@ -39321,12 +39461,13 @@
       });
     }
 
-    function Zoom({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Zoom(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       const window = getWindow();
       extendParams({
         zoom: {
@@ -39424,7 +39565,7 @@
         if (!gesture.$slideEl || !gesture.$slideEl.length) {
           gesture.$slideEl = $$1(e.target).closest(`.${swiper.params.slideClass}`);
           if (gesture.$slideEl.length === 0) gesture.$slideEl = swiper.slides.eq(swiper.activeIndex);
-          gesture.$imageEl = gesture.$slideEl.find(`.${params.containerClass}`).eq(0).find('img, svg, canvas, picture, .swiper-zoom-target');
+          gesture.$imageEl = gesture.$slideEl.find(`.${params.containerClass}`).eq(0).find('picture, img, svg, canvas, .swiper-zoom-target').eq(0);
           gesture.$imageWrapEl = gesture.$imageEl.parent(`.${params.containerClass}`);
           gesture.maxRatio = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio;
 
@@ -39665,7 +39806,7 @@
             }
           }
 
-          gesture.$imageEl = gesture.$slideEl.find(`.${params.containerClass}`).eq(0).find('img, svg, canvas, picture, .swiper-zoom-target');
+          gesture.$imageEl = gesture.$slideEl.find(`.${params.containerClass}`).eq(0).find('picture, img, svg, canvas, .swiper-zoom-target').eq(0);
           gesture.$imageWrapEl = gesture.$imageEl.parent(`.${params.containerClass}`);
         }
 
@@ -39760,7 +39901,7 @@
             gesture.$slideEl = swiper.slides.eq(swiper.activeIndex);
           }
 
-          gesture.$imageEl = gesture.$slideEl.find(`.${params.containerClass}`).eq(0).find('img, svg, canvas, picture, .swiper-zoom-target');
+          gesture.$imageEl = gesture.$slideEl.find(`.${params.containerClass}`).eq(0).find('picture, img, svg, canvas, .swiper-zoom-target').eq(0);
           gesture.$imageWrapEl = gesture.$imageEl.parent(`.${params.containerClass}`);
         }
 
@@ -39931,12 +40072,13 @@
       });
     }
 
-    function Lazy({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Lazy(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       extendParams({
         lazy: {
           checkInView: false,
@@ -39955,7 +40097,11 @@
       let scrollHandlerAttached = false;
       let initialImageLoaded = false;
 
-      function loadInSlide(index, loadInDuplicate = true) {
+      function loadInSlide(index, loadInDuplicate) {
+        if (loadInDuplicate === void 0) {
+          loadInDuplicate = true;
+        }
+
         const params = swiper.params.lazy;
         if (typeof index === 'undefined') return;
         if (swiper.slides.length === 0) return;
@@ -40214,11 +40360,12 @@
     }
 
     /* eslint no-bitwise: ["error", { "allow": [">>"] }] */
-    function Controller({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function Controller(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         controller: {
           control: undefined,
@@ -40404,11 +40551,12 @@
       });
     }
 
-    function A11y({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function A11y(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         a11y: {
           enabled: true,
@@ -40434,7 +40582,11 @@
         notification.html(message);
       }
 
-      function getRandomNumber(size = 16) {
+      function getRandomNumber(size) {
+        if (size === void 0) {
+          size = 16;
+        }
+
         const randomChar = () => Math.round(16 * Math.random()).toString(16);
 
         return 'x'.repeat(size).replace(/x/g, randomChar);
@@ -40515,7 +40667,7 @@
       }
 
       function updateNavigation() {
-        if (swiper.params.loop || !swiper.navigation) return;
+        if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
         const {
           $nextEl,
           $prevEl
@@ -40543,23 +40695,34 @@
       }
 
       function hasPagination() {
-        return swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length;
+        return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
+      }
+
+      function hasClickablePagination() {
+        return hasPagination() && swiper.params.pagination.clickable;
       }
 
       function updatePagination() {
         const params = swiper.params.a11y;
+        if (!hasPagination()) return;
+        swiper.pagination.bullets.each(bulletEl => {
+          const $bulletEl = $$1(bulletEl);
 
-        if (hasPagination()) {
-          swiper.pagination.bullets.each(bulletEl => {
-            const $bulletEl = $$1(bulletEl);
+          if (swiper.params.pagination.clickable) {
             makeElFocusable($bulletEl);
 
             if (!swiper.params.pagination.renderBullet) {
               addElRole($bulletEl, 'button');
               addElLabel($bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, $bulletEl.index() + 1));
             }
-          });
-        }
+          }
+
+          if ($bulletEl.is(`.${swiper.params.pagination.bulletActiveClass}`)) {
+            $bulletEl.attr('aria-current', 'true');
+          } else {
+            $bulletEl.removeAttr('aria-current');
+          }
+        });
       }
 
       const initNavEl = ($el, wrapperId, message) => {
@@ -40574,6 +40737,15 @@
         addElControls($el, wrapperId);
       };
 
+      const handleFocus = e => {
+        const slideEl = e.target.closest(`.${swiper.params.slideClass}`);
+        if (!slideEl || !swiper.slides.includes(slideEl)) return;
+        const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
+        const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
+        if (isActive || isVisible) return;
+        swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
+      };
+
       function init() {
         const params = swiper.params.a11y;
         swiper.$el.append(liveRegion); // Container
@@ -40628,9 +40800,12 @@
         } // Pagination
 
 
-        if (hasPagination()) {
+        if (hasClickablePagination()) {
           swiper.pagination.$el.on('keydown', classesToSelector(swiper.params.pagination.bulletClass), onEnterOrSpaceKey);
-        }
+        } // Tab focus
+
+
+        swiper.$el.on('focus', handleFocus, true);
       }
 
       function destroy() {
@@ -40655,9 +40830,12 @@
         } // Pagination
 
 
-        if (hasPagination()) {
+        if (hasClickablePagination()) {
           swiper.pagination.$el.off('keydown', classesToSelector(swiper.params.pagination.bulletClass), onEnterOrSpaceKey);
-        }
+        } // Tab focus
+
+
+        swiper.$el.off('focus', handleFocus, true);
       }
 
       on('beforeInit', () => {
@@ -40666,13 +40844,8 @@
       on('afterInit', () => {
         if (!swiper.params.a11y.enabled) return;
         init();
-        updateNavigation();
-      });
-      on('toEdge', () => {
-        if (!swiper.params.a11y.enabled) return;
-        updateNavigation();
       });
-      on('fromEdge', () => {
+      on('fromEdge toEdge afterInit lock unlock', () => {
         if (!swiper.params.a11y.enabled) return;
         updateNavigation();
       });
@@ -40686,11 +40859,12 @@
       });
     }
 
-    function History({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function History(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         history: {
           enabled: false,
@@ -40836,12 +41010,13 @@
       });
     }
 
-    function HashNavigation({
-      swiper,
-      extendParams,
-      emit,
-      on
-    }) {
+    function HashNavigation(_ref) {
+      let {
+        swiper,
+        extendParams,
+        emit,
+        on
+      } = _ref;
       let initialized = false;
       const document = getDocument();
       const window = getWindow();
@@ -40932,12 +41107,13 @@
     }
 
     /* eslint no-underscore-dangle: "off" */
-    function Autoplay({
-      swiper,
-      extendParams,
-      on,
-      emit
-    }) {
+    function Autoplay(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
       let timeout;
       swiper.autoplay = {
         running: false,
@@ -41072,6 +41248,7 @@
         if (swiper.params.autoplay.disableOnInteraction) {
           stop();
         } else {
+          emit('autoplayPause');
           pause();
         }
 
@@ -41086,6 +41263,7 @@
         }
 
         swiper.autoplay.paused = false;
+        emit('autoplayResume');
         run();
       }
 
@@ -41150,11 +41328,12 @@
       });
     }
 
-    function Thumb({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function Thumb(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         thumbs: {
           swiper: null,
@@ -41353,12 +41532,13 @@
       });
     }
 
-    function freeMode({
-      swiper,
-      extendParams,
-      emit,
-      once
-    }) {
+    function freeMode(_ref) {
+      let {
+        swiper,
+        extendParams,
+        emit,
+        once
+      } = _ref;
       extendParams({
         freeMode: {
           enabled: false,
@@ -41372,6 +41552,16 @@
         }
       });
 
+      function onTouchStart() {
+        const translate = swiper.getTranslate();
+        swiper.setTranslate(translate);
+        swiper.setTransition(0);
+        swiper.touchEventsData.velocities.length = 0;
+        swiper.freeMode.onTouchEnd({
+          currentPos: swiper.rtl ? swiper.translate : -swiper.translate
+        });
+      }
+
       function onTouchMove() {
         const {
           touchEventsData: data,
@@ -41391,9 +41581,10 @@
         });
       }
 
-      function onTouchEnd({
-        currentPos
-      }) {
+      function onTouchEnd(_ref2) {
+        let {
+          currentPos
+        } = _ref2;
         const {
           params,
           $wrapperEl,
@@ -41592,16 +41783,18 @@
 
       Object.assign(swiper, {
         freeMode: {
+          onTouchStart,
           onTouchMove,
           onTouchEnd
         }
       });
     }
 
-    function Grid({
-      swiper,
-      extendParams
-    }) {
+    function Grid(_ref) {
+      let {
+        swiper,
+        extendParams
+      } = _ref;
       extendParams({
         grid: {
           rows: 1,
@@ -41902,9 +42095,10 @@
       swiper.removeSlide(slidesIndexes);
     }
 
-    function Manipulation({
-      swiper
-    }) {
+    function Manipulation(_ref) {
+      let {
+        swiper
+      } = _ref;
       Object.assign(swiper, {
         appendSlide: appendSlide.bind(swiper),
         prependSlide: prependSlide.bind(swiper),
@@ -41957,12 +42151,13 @@
       return $slideEl;
     }
 
-    function effectVirtualTransitionEnd({
-      swiper,
-      duration,
-      transformEl,
-      allSlides
-    }) {
+    function effectVirtualTransitionEnd(_ref) {
+      let {
+        swiper,
+        duration,
+        transformEl,
+        allSlides
+      } = _ref;
       const {
         slides,
         activeIndex,
@@ -41993,11 +42188,12 @@
       }
     }
 
-    function EffectFade({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function EffectFade(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         fadeEffect: {
           crossFade: false,
@@ -42061,11 +42257,12 @@
       });
     }
 
-    function EffectCube({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function EffectCube(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         cubeEffect: {
           slideShadows: true,
@@ -42253,11 +42450,12 @@
       return $shadowEl;
     }
 
-    function EffectFlip({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function EffectFlip(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         flipEffect: {
           slideShadows: true,
@@ -42352,11 +42550,12 @@
       });
     }
 
-    function EffectCoverflow({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function EffectCoverflow(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         coverflowEffect: {
           rotate: 50,
@@ -42453,11 +42652,12 @@
       });
     }
 
-    function EffectCreative({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function EffectCreative(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         creativeEffect: {
           transformEl: null,
@@ -42604,11 +42804,12 @@
       });
     }
 
-    function EffectCards({
-      swiper,
-      extendParams,
-      on
-    }) {
+    function EffectCards(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
       extendParams({
         cardsEffect: {
           slideShadows: true,
@@ -42727,15 +42928,15 @@
     }
 
     /**
-     * Swiper 7.2.0
+     * Swiper 8.0.6
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
-     * Copyright 2014-2021 Vladimir Kharlampidi
+     * Copyright 2014-2022 Vladimir Kharlampidi
      *
      * Released under the MIT License
      *
-     * Released on: October 27, 2021
+     * Released on: February 14, 2022
      */
 
     const modules = [Virtual, Keyboard, Mousewheel, Navigation, Pagination, Scrollbar, Parallax, Zoom, Lazy, Controller, A11y, History, HashNavigation, Autoplay, Thumb, freeMode, Grid, Manipulation, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCreative, EffectCards];
@@ -50229,6 +50430,19 @@
 
     };
 
+    const Breadcrumbs = {};
+    var Breadcrumbs$1 = {
+      name: 'breadrumbs',
+
+      create() {
+        const app = this;
+        bindMethods(app, {
+          breadrumbs: Breadcrumbs
+        });
+      }
+
+    };
+
     var Elevation = {
       name: 'elevation'
     };
@@ -50244,7 +50458,7 @@
 
 
     Router.use([RouterComponentLoaderModule]);
-    Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, RequestModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar$1, View, Navbar$1, Toolbar$1, Subnavbar, TouchRipple, Modal, Appbar, Dialog, Popup, LoginScreen, Popover, Actions, Sheet, Toast, Preloader$1, Progressbar$1, Sortable$1, Swipeout$1, Accordion$1, ContactsList, VirtualList, ListIndex, Timeline, Tabs, Panel, Card, Chip, Form, Input$1, Checkbox, Radio, Toggle, Range, Stepper, SmartSelect, Grid$2, Calendar, Picker, InfiniteScroll$1, PullToRefresh, Lazy$2, DataTable, Fab$1, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, Menu$1, ColorPicker, Treeview$1, TextEditor, PieChart, AreaChart, Elevation, Typography]);
+    Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, RequestModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar$1, View, Navbar$1, Toolbar$1, Subnavbar, TouchRipple, Modal, Appbar, Dialog, Popup, LoginScreen, Popover, Actions, Sheet, Toast, Preloader$1, Progressbar$1, Sortable$1, Swipeout$1, Accordion$1, ContactsList, VirtualList, ListIndex, Timeline, Tabs, Panel, Card, Chip, Form, Input$1, Checkbox, Radio, Toggle, Range, Stepper, SmartSelect, Grid$2, Calendar, Picker, InfiniteScroll$1, PullToRefresh, Lazy$2, DataTable, Fab$1, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, Menu$1, ColorPicker, Treeview$1, TextEditor, PieChart, AreaChart, Breadcrumbs$1, Elevation, Typography]);
 
     return Framework7;