@xenknight/framework7 0.0.6 → 0.0.7

package/framework7-bundle.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 0.0.5
+ * Framework7 0.0.6
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2025 Vladimir Kharlampidi
+ * Copyright 2014-2026 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 19, 2025
+ * Released on: January 1, 2026
  */
 
 (function (global, factory) {
@@ -14259,7 +14259,7 @@
       }
     };
 
-    const Navbar = {
+    const Navbar$1 = {
       size(el) {
         const app = this;
         let $el = $(el);
@@ -14810,12 +14810,12 @@
         };
       }
     };
-    var Navbar$1 = {
+    var Navbar$2 = {
       name: 'navbar',
       create() {
         const app = this;
         bindMethods(app, {
-          navbar: Navbar
+          navbar: Navbar$1
         });
       },
       params: {
@@ -15069,13 +15069,2326 @@
           scrollHeight = scrollContent.scrollHeight;
           offsetHeight = scrollContent.offsetHeight;
           reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
-          toolbarHidden = $toolbarEl.hasClass('toolbar-hidden');
+          toolbarHidden = $toolbarEl.hasClass('toolbar-hidden');
+          if (reachEnd) {
+            if (app.params.toolbar.showOnPageScrollEnd) {
+              action = 'show';
+            }
+          } else if (previousScrollTop > currentScrollTop) {
+            if (app.params.toolbar.showOnPageScrollTop || currentScrollTop <= 44) {
+              action = 'show';
+            } else {
+              action = 'hide';
+            }
+          } else if (currentScrollTop > 44) {
+            action = 'hide';
+          } else {
+            action = 'show';
+          }
+          if (action === 'show' && toolbarHidden) {
+            app.toolbar.show($toolbarEl);
+            toolbarHidden = false;
+          } else if (action === 'hide' && !toolbarHidden) {
+            app.toolbar.hide($toolbarEl);
+            toolbarHidden = true;
+          }
+          previousScrollTop = currentScrollTop;
+        }
+        $pageEl.on('scroll', '.page-content', handleScroll, true);
+        $pageEl[0].f7ScrollToolbarHandler = handleScroll;
+      }
+    };
+    var Toolbar$1 = {
+      name: 'toolbar',
+      create() {
+        const app = this;
+        bindMethods(app, {
+          toolbar: Toolbar
+        });
+      },
+      params: {
+        toolbar: {
+          hideOnPageScroll: false,
+          showOnPageScrollEnd: true,
+          showOnPageScrollTop: true
+        }
+      },
+      on: {
+        pageBeforeRemove(page) {
+          if (page.$el[0].f7ScrollToolbarHandler) {
+            page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true);
+          }
+        },
+        pageBeforeIn(page) {
+          const app = this;
+          let $toolbarEl = page.$el.parents('.view').children('.toolbar');
+          if ($toolbarEl.length === 0) {
+            $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-icons');
+          }
+          if ($toolbarEl.length === 0) {
+            $toolbarEl = page.$el.find('.toolbar');
+          }
+          if ($toolbarEl.length === 0) {
+            return;
+          }
+          if (page.$el.hasClass('no-toolbar')) {
+            app.toolbar.hide($toolbarEl);
+          } else {
+            app.toolbar.show($toolbarEl);
+          }
+        },
+        pageInit(page) {
+          const app = this;
+          page.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
+            app.toolbar.init(tabbarEl);
+          });
+          if (app.params.toolbar.hideOnPageScroll || page.$el.find('.hide-toolbar-on-scroll').length || page.$el.hasClass('hide-toolbar-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
+            if (page.$el.find('.keep-toolbar-on-scroll').length || page.$el.hasClass('keep-toolbar-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
+              return;
+            }
+            app.toolbar.initToolbarOnScroll(page.el);
+          }
+        },
+        init() {
+          const app = this;
+          app.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
+            app.toolbar.init(tabbarEl);
+          });
+        }
+      },
+      vnode: {
+        tabbar: {
+          insert(vnode) {
+            const app = this;
+            app.toolbar.init(vnode.elm);
+          }
+        }
+      }
+    };
+
+    var Subnavbar = {
+      name: 'subnavbar',
+      on: {
+        pageInit(page) {
+          if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length) {
+            page.$el.addClass('page-with-subnavbar');
+          }
+          const $innerSubnavbars = page.$el.find('.subnavbar').filter(subnavbarEl => {
+            return $(subnavbarEl).parents('.page')[0] === page.$el[0];
+          });
+          if ($innerSubnavbars.length) {
+            page.$el.addClass('page-with-subnavbar');
+          }
+        }
+      }
+    };
+
+    let TouchRipple$1 = class TouchRipple {
+      constructor(app, $el, x, y) {
+        const ripple = this;
+        if (!$el) return undefined;
+        const {
+          left,
+          top,
+          width,
+          height
+        } = $el[0].getBoundingClientRect();
+        const center = {
+          x: x - left,
+          y: y - top
+        };
+        let diameter = Math.max((height ** 2 + width ** 2) ** 0.5, 48);
+        let isInset = false;
+        const insetElements = app.params.touch.touchRippleInsetElements || '';
+        if (insetElements && $el.is(insetElements)) {
+          isInset = true;
+        }
+        if (isInset) {
+          diameter = Math.max(Math.min(width, height), 48);
+        }
+        if (!isInset && $el.css('overflow') === 'hidden') {
+          const distanceFromCenter = ((center.x - width / 2) ** 2 + (center.y - height / 2) ** 2) ** 0.5;
+          const scale = (diameter / 2 + distanceFromCenter) / (diameter / 2);
+          ripple.rippleTransform = `translate3d(0px, 0px, 0) scale(${scale * 2})`;
+        } else {
+          // prettier-ignore
+          ripple.rippleTransform = `translate3d(${-center.x + width / 2}px, ${-center.y + height / 2}px, 0) scale(1)`;
+        }
+        if (isInset) {
+          $el.addClass('ripple-inset');
+        }
+        ripple.$rippleWaveEl = $(`<div class="ripple-wave${isInset ? ' ripple-wave-inset' : ''}" style="width: ${diameter}px; height: ${diameter}px; margin-top:-${diameter / 2}px; margin-left:-${diameter / 2}px; left:${center.x}px; top:${center.y}px; --f7-ripple-transform: ${ripple.rippleTransform}"></div>`);
+        $el.prepend(ripple.$rippleWaveEl);
+        ripple.$rippleWaveEl.animationEnd(() => {
+          if (!ripple.$rippleWaveEl) return;
+          if (ripple.$rippleWaveEl.hasClass('ripple-wave-out')) return;
+          ripple.$rippleWaveEl.addClass('ripple-wave-in');
+          if (ripple.shouldBeRemoved) {
+            ripple.out();
+          }
+        });
+        return ripple;
+      }
+      destroy() {
+        let ripple = this;
+        if (ripple.$rippleWaveEl) {
+          ripple.$rippleWaveEl.remove();
+        }
+        Object.keys(ripple).forEach(key => {
+          ripple[key] = null;
+          delete ripple[key];
+        });
+        ripple = null;
+      }
+      out() {
+        const ripple = this;
+        const {
+          $rippleWaveEl
+        } = this;
+        clearTimeout(ripple.removeTimeout);
+        $rippleWaveEl.addClass('ripple-wave-out');
+        ripple.removeTimeout = setTimeout(() => {
+          ripple.destroy();
+        }, 300);
+        $rippleWaveEl.animationEnd(() => {
+          clearTimeout(ripple.removeTimeout);
+          ripple.destroy();
+        });
+      }
+      remove() {
+        const ripple = this;
+        if (ripple.shouldBeRemoved) return;
+        ripple.removeTimeout = setTimeout(() => {
+          ripple.destroy();
+        }, 400);
+        ripple.shouldBeRemoved = true;
+        if (ripple.$rippleWaveEl.hasClass('ripple-wave-in')) {
+          ripple.out();
+        }
+      }
+    };
+
+    var TouchRipple = {
+      name: 'touch-ripple',
+      static: {
+        TouchRipple: TouchRipple$1
+      },
+      create() {
+        const app = this;
+        app.touchRipple = {
+          create() {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return new TouchRipple$1(...args);
+          }
+        };
+      }
+    };
+
+    const openedModals = [];
+    const dialogsQueue = [];
+    function clearDialogsQueue() {
+      if (dialogsQueue.length === 0) return;
+      const dialog = dialogsQueue.shift();
+      dialog.open();
+    }
+    let Modal$1 = class Modal extends Framework7Class {
+      constructor(app, params) {
+        super(params, [app]);
+        const modal = this;
+        const defaults = {};
+
+        // Extend defaults with modules params
+        modal.useModulesParams(defaults);
+        modal.params = extend$3(defaults, params);
+        modal.opened = false;
+        let $containerEl = modal.params.containerEl ? $(modal.params.containerEl).eq(0) : app.$el;
+        if (!$containerEl.length) $containerEl = app.$el;
+        modal.$containerEl = $containerEl;
+        modal.containerEl = $containerEl[0];
+
+        // Install Modules
+        modal.useModules();
+        return this;
+      }
+      onOpen() {
+        const modal = this;
+        modal.opened = true;
+        openedModals.push(modal);
+        $('html').addClass(`with-modal-${modal.type.toLowerCase()}`);
+        modal.$el.trigger(`modal:open ${modal.type.toLowerCase()}:open`);
+        modal.emit(`local::open modalOpen ${modal.type}Open`, modal);
+      }
+      onOpened() {
+        const modal = this;
+        modal.$el.trigger(`modal:opened ${modal.type.toLowerCase()}:opened`);
+        modal.emit(`local::opened modalOpened ${modal.type}Opened`, modal);
+      }
+      onClose() {
+        const modal = this;
+        modal.opened = false;
+        if (!modal.type || !modal.$el) return;
+        openedModals.splice(openedModals.indexOf(modal), 1);
+        $('html').removeClass(`with-modal-${modal.type.toLowerCase()}`);
+        modal.$el.trigger(`modal:close ${modal.type.toLowerCase()}:close`);
+        modal.emit(`local::close modalClose ${modal.type}Close`, modal);
+      }
+      onClosed() {
+        const modal = this;
+        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);
+      }
+      open(animateModal, force) {
+        const modal = this;
+        const document = getDocument$1();
+        const app = modal.app;
+        const $el = modal.$el;
+        const $backdropEl = modal.$backdropEl;
+        const type = modal.type;
+        let animate = true;
+        if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
+          animate = modal.params.animate;
+        }
+        if (!$el || $el.hasClass('modal-in')) {
+          if (animateModal === false && $el[0] && type !== 'dialog') {
+            $el[0].style.display = 'block';
+          }
+          if (!force) return modal;
+        }
+        if (type === 'dialog' && app.params.modal.queueDialogs) {
+          let pushToQueue;
+          if ($('.dialog.modal-in').length > 0) {
+            pushToQueue = true;
+          } else if (openedModals.length > 0) {
+            openedModals.forEach(openedModal => {
+              if (openedModal.type === 'dialog') pushToQueue = true;
+            });
+          }
+          if (pushToQueue) {
+            dialogsQueue.push(modal);
+            return modal;
+          }
+        }
+        const $modalParentEl = $el.parent();
+        const wasInDom = $el.parents(document).length > 0;
+        if (!$modalParentEl.is(modal.$containerEl)) {
+          modal.$containerEl.append($el);
+          modal.once(`${type}Closed`, () => {
+            if (wasInDom) {
+              $modalParentEl.append($el);
+            } else {
+              $el.remove();
+            }
+          });
+        }
+        // Show Modal
+        $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() {
+          if ($el.hasClass('modal-out')) {
+            modal.onClosed();
+          } else if ($el.hasClass('modal-in')) {
+            modal.onOpened();
+          }
+        }
+        if (animate) {
+          if ($backdropEl) {
+            $backdropEl.removeClass('not-animated');
+            $backdropEl.addClass('backdrop-in');
+          }
+          $el.animationEnd(() => {
+            transitionEnd();
+          });
+          $el.transitionEnd(() => {
+            transitionEnd();
+          });
+          $el.removeClass('modal-out not-animated').addClass('modal-in');
+          modal.onOpen();
+        } else {
+          if ($backdropEl) {
+            $backdropEl.addClass('backdrop-in not-animated');
+          }
+          $el.removeClass('modal-out').addClass('modal-in not-animated');
+          modal.onOpen();
+          modal.onOpened();
+        }
+        return modal;
+      }
+      close(animateModal) {
+        const modal = this;
+        const $el = modal.$el;
+        const $backdropEl = modal.$backdropEl;
+        let animate = true;
+        if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
+          animate = modal.params.animate;
+        }
+        if (!$el || !$el.hasClass('modal-in')) {
+          if (dialogsQueue.indexOf(modal) >= 0) {
+            dialogsQueue.splice(dialogsQueue.indexOf(modal), 1);
+          }
+          return modal;
+        }
+
+        // backdrop
+        if ($backdropEl) {
+          let needToHideBackdrop = true;
+          if (modal.type === 'popup') {
+            modal.$el.prevAll('.popup.modal-in').add(modal.$el.nextAll('.popup.modal-in')).each(popupEl => {
+              const popupInstance = popupEl.f7Modal;
+              if (!popupInstance) return;
+              if (popupInstance.params.closeByBackdropClick && popupInstance.params.backdrop && popupInstance.backdropEl === modal.backdropEl) {
+                needToHideBackdrop = false;
+              }
+            });
+          }
+          if (needToHideBackdrop) {
+            $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
+            $backdropEl.removeClass('backdrop-in');
+          }
+        }
+
+        // Modal
+        $el[animate ? 'removeClass' : 'addClass']('not-animated');
+        function transitionEnd() {
+          if ($el.hasClass('modal-out')) {
+            modal.onClosed();
+          } else if ($el.hasClass('modal-in')) {
+            modal.onOpened();
+          }
+        }
+        if (animate) {
+          $el.animationEnd(() => {
+            transitionEnd();
+          });
+          $el.transitionEnd(() => {
+            transitionEnd();
+          });
+          $el.removeClass('modal-in').addClass('modal-out');
+          // Emit close
+          modal.onClose();
+        } else {
+          $el.addClass('not-animated').removeClass('modal-in').addClass('modal-out');
+          // Emit close
+          modal.onClose();
+          modal.onClosed();
+        }
+        if (modal.type === 'dialog') {
+          clearDialogsQueue();
+        }
+        return modal;
+      }
+      destroy() {
+        const modal = this;
+        if (modal.destroyed) return;
+        modal.emit(`local::beforeDestroy modalBeforeDestroy ${modal.type}BeforeDestroy`, modal);
+        if (modal.$el) {
+          modal.$el.trigger(`modal:beforedestroy ${modal.type.toLowerCase()}:beforedestroy`);
+          if (modal.$el.length && modal.$el[0].f7Modal) {
+            delete modal.$el[0].f7Modal;
+          }
+        }
+        deleteProps$1(modal);
+        modal.destroyed = true;
+      }
+    };
+
+    class CustomModal extends Modal$1 {
+      constructor(app, params) {
+        const extendedParams = extend$3({
+          backdrop: true,
+          closeByBackdropClick: true,
+          on: {}
+        }, params);
+
+        // Extends with open/close Modal methods;
+        super(app, extendedParams);
+        const customModal = this;
+        customModal.params = extendedParams;
+
+        // Find Element
+        let $el;
+        if (!customModal.params.el) {
+          $el = $(customModal.params.content);
+        } else {
+          $el = $(customModal.params.el);
+        }
+        if ($el && $el.length > 0 && $el[0].f7Modal) {
+          return $el[0].f7Modal;
+        }
+        if ($el.length === 0) {
+          return customModal.destroy();
+        }
+        let $backdropEl;
+        if (customModal.params.backdrop) {
+          $backdropEl = app.$el.children('.custom-modal-backdrop');
+          if ($backdropEl.length === 0) {
+            $backdropEl = $('<div class="custom-modal-backdrop"></div>');
+            app.$el.append($backdropEl);
+          }
+        }
+        function handleClick(e) {
+          if (!customModal || customModal.destroyed) return;
+          if ($backdropEl && e.target === $backdropEl[0]) {
+            customModal.close();
+          }
+        }
+        customModal.on('customModalOpened', () => {
+          if (customModal.params.closeByBackdropClick && customModal.params.backdrop) {
+            app.on('click', handleClick);
+          }
+        });
+        customModal.on('customModalClose', () => {
+          if (customModal.params.closeByBackdropClick && customModal.params.backdrop) {
+            app.off('click', handleClick);
+          }
+        });
+        extend$3(customModal, {
+          app,
+          $el,
+          el: $el[0],
+          $backdropEl,
+          backdropEl: $backdropEl && $backdropEl[0],
+          type: 'customModal'
+        });
+        $el[0].f7Modal = customModal;
+        return customModal;
+      }
+    }
+
+    var Modal = {
+      name: 'modal',
+      static: {
+        Modal: Modal$1,
+        CustomModal
+      },
+      create() {
+        const app = this;
+        app.customModal = {
+          create(params) {
+            return new CustomModal(app, params);
+          }
+        };
+      },
+      params: {
+        modal: {
+          queueDialogs: true
+        }
+      }
+    };
+
+    const Navbar = {
+      size(el) {
+        const app = this;
+        const $el = $(el);
+        const $innerEl = $el.children('.navbar-new-inner');
+        if (!$innerEl.length) return;
+        const navbarNewParams = app.params.navbarNew || {};
+        const needCenterTitle = $innerEl.hasClass('navbar-new-inner-centered-title') || navbarNewParams[`${app.theme}CenterTitle`];
+        const needLeftTitle = app.theme === 'ios' && !navbarNewParams[`${app.theme}CenterTitle`];
+        if (!needCenterTitle && !needLeftTitle) return;
+        if ($el.parents('.tab:not(.tab-active)').length > 0 || $el.parents('.popup:not(.modal-in)').length > 0) {
+          return;
+        }
+        if (app.theme !== 'ios' && navbarNewParams[`${app.theme}CenterTitle`]) {
+          $innerEl.addClass('navbar-new-inner-centered-title');
+        }
+        if (app.theme === 'ios' && !navbarNewParams.iosCenterTitle) {
+          $innerEl.addClass('navbar-new-inner-left-title');
+        }
+        const left = app.rtl ? $innerEl.children('.right') : $innerEl.children('.left');
+        const right = app.rtl ? $innerEl.children('.left') : $innerEl.children('.right');
+        const title = $innerEl.children('.title');
+        const noLeft = left.length === 0;
+        const noRight = right.length === 0;
+        const leftWidth = noLeft ? 0 : left.outerWidth(true);
+        const rightWidth = noRight ? 0 : right.outerWidth(true);
+        const titleWidth = title.outerWidth(true);
+        const navbarStyles = $innerEl.styles();
+        const navbarWidth = $innerEl[0].offsetWidth;
+        const navbarInnerWidth = navbarWidth - parseInt(navbarStyles.paddingLeft, 10) - parseInt(navbarStyles.paddingRight, 10);
+        let currLeft;
+        let diff;
+        if (noRight) {
+          currLeft = navbarInnerWidth - titleWidth;
+        }
+        if (noLeft) {
+          currLeft = 0;
+        }
+        if (!noLeft && !noRight) {
+          currLeft = (navbarInnerWidth - rightWidth - titleWidth + leftWidth) / 2;
+        }
+        let requiredLeft = (navbarInnerWidth - titleWidth) / 2;
+        if (navbarInnerWidth - leftWidth - rightWidth > titleWidth) {
+          if (requiredLeft < leftWidth) {
+            requiredLeft = leftWidth;
+          }
+          if (requiredLeft + titleWidth > navbarInnerWidth - rightWidth) {
+            requiredLeft = navbarInnerWidth - rightWidth - titleWidth;
+          }
+          diff = requiredLeft - currLeft;
+        } else {
+          diff = 0;
+        }
+
+        // Center title
+        if (needCenterTitle) {
+          let titleLeft = diff;
+          if (app.rtl && noLeft && noRight && title.length > 0) titleLeft = -titleLeft;
+          title.css({
+            left: `${titleLeft}px`
+          });
+        }
+      },
+      hide(el, animate, hideStatusbar) {
+        if (animate === void 0) {
+          animate = true;
+        }
+        if (hideStatusbar === void 0) {
+          hideStatusbar = false;
+        }
+        const app = this;
+        const $el = $(el);
+        if (!$el.length) return;
+        if ($el.hasClass('navbar-new-hidden')) return;
+        let className = `navbar-new-hidden${animate ? ' navbar-new-transitioning' : ''}`;
+        const currentIsLarge = $el.find('.title-large').length;
+        if (currentIsLarge) {
+          className += ' navbar-new-large-hidden';
+        }
+        if (hideStatusbar) {
+          className += ' navbar-new-hidden-statusbar';
+        }
+        $el.transitionEnd(() => {
+          $el.removeClass('navbar-new-transitioning');
+        });
+        $el.addClass(className);
+        $el.trigger('navbar-new:hide');
+        app.emit('navbarNewHide', $el[0]);
+      },
+      show(el, animate) {
+        if (el === void 0) {
+          el = '.navbar-new-hidden';
+        }
+        if (animate === void 0) {
+          animate = true;
+        }
+        const app = this;
+        const $el = $(el);
+        if (!$el.length) return;
+        if (!$el.hasClass('navbar-new-hidden')) return;
+        if (animate) {
+          $el.addClass('navbar-new-transitioning');
+          $el.transitionEnd(() => {
+            $el.removeClass('navbar-new-transitioning');
+          });
+        }
+        $el.removeClass('navbar-new-hidden navbar-new-large-hidden navbar-new-hidden-statusbar');
+        $el.trigger('navbar-new:show');
+        app.emit('navbarNewShow', $el[0]);
+      },
+      getElByPage(page) {
+        let $pageEl;
+        let $navbarEl;
+        let pageData;
+        if (page.$navbarNewEl || page.$el) {
+          pageData = page;
+          $pageEl = page.$el;
+        } else {
+          $pageEl = $(page);
+          if ($pageEl.length > 0) pageData = $pageEl[0].f7Page;
+        }
+        if (pageData && pageData.$navbarNewEl && pageData.$navbarNewEl.length > 0) {
+          $navbarEl = pageData.$navbarNewEl;
+        } else if ($pageEl) {
+          $navbarEl = $pageEl.children('.navbar-new');
+        }
+        if (!$navbarEl || $navbarEl && $navbarEl.length === 0) return undefined;
+        return $navbarEl[0];
+      },
+      getPageByEl(navbarEl) {
+        const $navbarEl = $(navbarEl);
+        if ($navbarEl.parents('.page').length) {
+          return $navbarEl.parents('.page')[0];
+        }
+        let pageEl;
+        $navbarEl.parents('.view').find('.page').each(el => {
+          if (el && el.f7Page && el.f7Page.navbarEl && $navbarEl[0] === el.f7Page.navbarEl) {
+            pageEl = el;
+          }
+        });
+        return pageEl;
+      },
+      collapseLargeTitle(navbarEl) {
+        const app = this;
+        const $navbarEl = $(navbarEl);
+        const $pageEl = $(app.navbarNew.getPageByEl($navbarEl));
+        $navbarEl.addClass('navbar-new-large-collapsed');
+        $pageEl.eq(0).addClass('page-with-navbar-new-large-collapsed').trigger('page:navbarlargecollapsed');
+        app.emit('pageNavbarLargeCollapsed', $pageEl[0]);
+        $navbarEl.trigger('navbar-new:collapse');
+        app.emit('navbarNewCollapse', $navbarEl[0]);
+      },
+      expandLargeTitle(navbarEl) {
+        const app = this;
+        const $navbarEl = $(navbarEl);
+        const $pageEl = $(app.navbarNew.getPageByEl($navbarEl));
+        $navbarEl.removeClass('navbar-new-large-collapsed');
+        $pageEl.eq(0).removeClass('page-with-navbar-new-large-collapsed').trigger('page:navbarlargeexpanded');
+        app.emit('pageNavbarLargeExpanded', $pageEl[0]);
+        $navbarEl.trigger('navbar-new:expand');
+        app.emit('navbarNewExpand', $navbarEl[0]);
+      },
+      toggleLargeTitle(navbarEl) {
+        const app = this;
+        const $navbarEl = $(navbarEl);
+        if ($navbarEl.hasClass('navbar-new-large-collapsed')) {
+          app.navbarNew.expandLargeTitle($navbarEl);
+        } else {
+          app.navbarNew.collapseLargeTitle($navbarEl);
+        }
+      },
+      initNavbarOnScroll(pageEl, navbarEl, needHide, needCollapse, needTransparent) {
+        const app = this;
+        const support = getSupport$1();
+        const $pageEl = $(pageEl);
+        const $navbarEl = $(navbarEl);
+        const $titleLargeEl = $navbarEl.find('.title-large');
+        const isLarge = $titleLargeEl.length || $navbarEl.hasClass('navbar-new-large');
+        let navbarHideHeight = 44;
+        const snapPageScrollToLargeTitle = app.params.navbarNew.snapPageScrollToLargeTitle;
+        const snapPageScrollToTransparentNavbar = app.params.navbarNew.snapPageScrollToTransparentNavbar;
+        let previousScrollTop;
+        let currentScrollTop;
+        let scrollHeight;
+        let offsetHeight;
+        let reachEnd;
+        let action;
+        let navbarHidden;
+        let navbarCollapsed;
+        let navbarTitleLargeHeight;
+        let navbarOffsetHeight;
+        if (needCollapse || needHide && isLarge) {
+          navbarTitleLargeHeight = $navbarEl.css('--f7-navbar-new-large-title-height');
+          if (navbarTitleLargeHeight && navbarTitleLargeHeight.indexOf('px') >= 0) {
+            navbarTitleLargeHeight = parseInt(navbarTitleLargeHeight, 10);
+            if (Number.isNaN(navbarTitleLargeHeight) && $titleLargeEl.length) {
+              navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
+            } else if (Number.isNaN(navbarTitleLargeHeight)) {
+              if (app.theme === 'ios') navbarTitleLargeHeight = 52;else if (app.theme === 'md') navbarTitleLargeHeight = 88;
+            }
+          } else if ($titleLargeEl.length) {
+            navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
+          } else {
+            // eslint-disable-next-line
+            if (app.theme === 'ios') navbarTitleLargeHeight = 52;else if (app.theme === 'md') navbarTitleLargeHeight = 88;
+          }
+        }
+        if (needHide && isLarge) {
+          navbarHideHeight += navbarTitleLargeHeight;
+        }
+        let scrollChanged;
+        let scrollContent;
+        let scrollTimeoutId;
+        let touchEndTimeoutId;
+        const touchSnapTimeout = 70;
+        const desktopSnapTimeout = 300;
+        function calcScrollableDistance() {
+          $pageEl.find('.page-content').each(pageContentEl => {
+            pageContentEl.f7ScrollableDistance = pageContentEl.scrollHeight - pageContentEl.offsetHeight;
+          });
+        }
+        function snapLargeNavbar() {
+          const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+          if (inSearchbarExpanded) return;
+          if (!scrollContent || currentScrollTop < 0) return;
+          if (currentScrollTop >= navbarTitleLargeHeight / 2 && currentScrollTop < navbarTitleLargeHeight) {
+            $(scrollContent).scrollTop(navbarTitleLargeHeight, 100);
+          } else if (currentScrollTop < navbarTitleLargeHeight) {
+            $(scrollContent).scrollTop(0, 200);
+          }
+        }
+        function snapTransparentNavbar() {
+          const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+          if (inSearchbarExpanded) return;
+          if (!scrollContent || currentScrollTop < 0) return;
+          if (currentScrollTop >= navbarOffsetHeight / 2 && currentScrollTop < navbarOffsetHeight) {
+            $(scrollContent).scrollTop(navbarOffsetHeight, 100);
+          } else if (currentScrollTop < navbarOffsetHeight) {
+            $(scrollContent).scrollTop(0, 200);
+          }
+        }
+        function handleNavbarTransparent() {
+          const isHidden = $navbarEl.hasClass('navbar-new-hidden');
+          const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+          if (inSearchbarExpanded || isHidden) return;
+          if (!navbarOffsetHeight) {
+            navbarOffsetHeight = navbarEl.offsetHeight;
+          }
+          let opacity = currentScrollTop / navbarOffsetHeight;
+          const notTransparent = $navbarEl.hasClass('navbar-new-transparent-visible');
+          opacity = Math.max(Math.min(opacity, 1), 0);
+          if (notTransparent && opacity === 1 || !notTransparent && opacity === 0) {
+            $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+            return;
+          }
+          if (notTransparent && opacity === 0) {
+            $navbarEl.trigger('navbar-new:transparenthide');
+            app.emit('navbarNewTransparentHide', $navbarEl[0]);
+            $navbarEl.removeClass('navbar-new-transparent-visible');
+            $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+            return;
+          }
+          if (!notTransparent && opacity === 1) {
+            $navbarEl.trigger('navbar-new:transparentshow');
+            app.emit('navbarNewTransparentShow', $navbarEl[0]);
+            $navbarEl.addClass('navbar-new-transparent-visible');
+            $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+            return;
+          }
+          $navbarEl.find('.navbar-new-bg, .title').css('opacity', opacity);
+          if (snapPageScrollToTransparentNavbar) {
+            if (!support.touch) {
+              clearTimeout(scrollTimeoutId);
+              scrollTimeoutId = setTimeout(() => {
+                snapTransparentNavbar();
+              }, desktopSnapTimeout);
+            } else if (touchEndTimeoutId) {
+              clearTimeout(touchEndTimeoutId);
+              touchEndTimeoutId = null;
+              touchEndTimeoutId = setTimeout(() => {
+                snapTransparentNavbar();
+                clearTimeout(touchEndTimeoutId);
+                touchEndTimeoutId = null;
+              }, touchSnapTimeout);
+            }
+          }
+        }
+        let previousCollapseProgress = null;
+        let collapseProgress = null;
+        function handleLargeNavbarCollapse(pageContentEl) {
+          const isHidden = $navbarEl.hasClass('navbar-new-hidden');
+          if (isHidden) return;
+          const isLargeTransparent = $navbarEl.hasClass('navbar-new-large-transparent') || $navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-transparent');
+          previousCollapseProgress = collapseProgress;
+          const scrollableDistance = Math.min(navbarTitleLargeHeight, pageContentEl.f7ScrollableDistance || navbarTitleLargeHeight);
+          collapseProgress = Math.min(Math.max(currentScrollTop / scrollableDistance, 0), 1);
+          const previousCollapseWasInMiddle = previousCollapseProgress > 0 && previousCollapseProgress < 1;
+          const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+          if (inSearchbarExpanded) return;
+          navbarCollapsed = $navbarEl.hasClass('navbar-new-large-collapsed');
+          const $bgEl = $navbarEl.find('.navbar-new-bg');
+          if (collapseProgress === 0 && navbarCollapsed) {
+            app.navbarNew.expandLargeTitle($navbarEl[0]);
+          } else if (collapseProgress === 1 && !navbarCollapsed) {
+            app.navbarNew.collapseLargeTitle($navbarEl[0]);
+          }
+          if (collapseProgress === 0 && navbarCollapsed || collapseProgress === 0 && previousCollapseWasInMiddle || collapseProgress === 1 && !navbarCollapsed || collapseProgress === 1 && previousCollapseWasInMiddle) {
+            if (app.theme === 'md') {
+              $navbarEl.find('.navbar-new-inner').css('overflow', '');
+            }
+            $navbarEl.find('.title').css('opacity', '');
+            $navbarEl.find('.title-large-text, .subnavbar').css('transform', '');
+            $navbarEl.find('.title-large-text').css('opacity', '');
+            if (app.theme === 'md') {
+              if (isLargeTransparent) {
+                $bgEl.css('opacity', '');
+              }
+              $bgEl.css('transform', '');
+            }
+          } else if (collapseProgress > 0 && collapseProgress < 1) {
+            if (app.theme === 'md') {
+              $navbarEl.find('.navbar-new-inner').css('overflow', 'visible');
+            }
+            $navbarEl.find('.title').css('opacity', -0.5 + collapseProgress * 1.5);
+            $navbarEl.find('.title-large-text, .subnavbar').css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
+            $navbarEl.find('.title-large-text').css('opacity', 1 - collapseProgress * 2);
+            if (app.theme === 'md') {
+              if (isLargeTransparent) {
+                $bgEl.css('opacity', collapseProgress);
+              }
+              $bgEl.css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
+            }
+          }
+          if (snapPageScrollToLargeTitle) {
+            if (!support.touch) {
+              clearTimeout(scrollTimeoutId);
+              scrollTimeoutId = setTimeout(() => {
+                snapLargeNavbar();
+              }, desktopSnapTimeout);
+            } else if (touchEndTimeoutId) {
+              clearTimeout(touchEndTimeoutId);
+              touchEndTimeoutId = null;
+              touchEndTimeoutId = setTimeout(() => {
+                snapLargeNavbar();
+                clearTimeout(touchEndTimeoutId);
+                touchEndTimeoutId = null;
+              }, touchSnapTimeout);
+            }
+          }
+        }
+        function handleTitleHideShow() {
+          if ($pageEl.hasClass('page-with-card-opened')) return;
+          scrollHeight = scrollContent.scrollHeight;
+          offsetHeight = scrollContent.offsetHeight;
+          reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
+          navbarHidden = $navbarEl.hasClass('navbar-new-hidden');
+          if (reachEnd) {
+            if (app.params.navbarNew.showOnPageScrollEnd) {
+              action = 'show';
+            }
+          } else if (previousScrollTop > currentScrollTop) {
+            if (app.params.navbarNew.showOnPageScrollTop || currentScrollTop <= navbarHideHeight) {
+              action = 'show';
+            } else {
+              action = 'hide';
+            }
+          } else if (currentScrollTop > navbarHideHeight) {
+            action = 'hide';
+          } else {
+            action = 'show';
+          }
+          if (action === 'show' && navbarHidden) {
+            app.navbarNew.show($navbarEl, true, true);
+            navbarHidden = false;
+          } else if (action === 'hide' && !navbarHidden) {
+            app.navbarNew.hide($navbarEl, true, false, true);
+            navbarHidden = true;
+          }
+          previousScrollTop = currentScrollTop;
+        }
+        function handleScroll(e) {
+          scrollContent = this;
+          if (e && e.target && e.target !== scrollContent) {
+            return;
+          }
+          currentScrollTop = scrollContent.scrollTop;
+          scrollChanged = currentScrollTop;
+          if (needCollapse) {
+            handleLargeNavbarCollapse(scrollContent);
+          } else if (needTransparent) {
+            handleNavbarTransparent();
+          }
+          if ($pageEl.hasClass('page-previous')) return;
+          if (needHide) {
+            handleTitleHideShow();
+          }
+        }
+        function handeTouchStart() {
+          scrollChanged = false;
+        }
+        function handleTouchEnd() {
+          clearTimeout(touchEndTimeoutId);
+          touchEndTimeoutId = null;
+          touchEndTimeoutId = setTimeout(() => {
+            if (scrollChanged !== false) {
+              if (needTransparent && !needCollapse) {
+                snapTransparentNavbar();
+              } else {
+                snapLargeNavbar();
+              }
+              clearTimeout(touchEndTimeoutId);
+              touchEndTimeoutId = null;
+            }
+          }, touchSnapTimeout);
+        }
+        $pageEl.on('scroll', '.page-content', handleScroll, true);
+        if (support.touch && (needCollapse && snapPageScrollToLargeTitle || needTransparent && snapPageScrollToTransparentNavbar)) {
+          app.on('touchstart:passive', handeTouchStart);
+          app.on('touchend:passive', handleTouchEnd);
+        }
+        calcScrollableDistance();
+        if (needCollapse || needTransparent) {
+          $pageEl.find('.page-content').each(pageContentEl => {
+            if (pageContentEl.scrollTop > 0) handleScroll.call(pageContentEl);
+          });
+        }
+        app.on('resize', calcScrollableDistance);
+        $pageEl[0].f7DetachNavbarNewScrollHandlers = function f7DetachNavbarNewScrollHandlers() {
+          app.off('resize', calcScrollableDistance);
+          delete $pageEl[0].f7DetachNavbarNewScrollHandlers;
+          $pageEl.off('scroll', '.page-content', handleScroll, true);
+          if (support.touch && (needCollapse && snapPageScrollToLargeTitle || needTransparent && snapPageScrollToTransparentNavbar)) {
+            app.off('touchstart:passive', handeTouchStart);
+            app.off('touchend:passive', handleTouchEnd);
+          }
+        };
+      }
+    };
+    var NavbarNew = {
+      name: 'navbar-new',
+      create() {
+        const app = this;
+        bindMethods(app, {
+          navbarNew: Navbar
+        });
+      },
+      params: {
+        navbarNew: {
+          scrollTopOnTitleClick: true,
+          iosCenterTitle: true,
+          mdCenterTitle: false,
+          hideOnPageScroll: false,
+          showOnPageScrollEnd: true,
+          showOnPageScrollTop: true,
+          collapseLargeTitleOnScroll: true,
+          snapPageScrollToLargeTitle: true,
+          snapPageScrollToTransparentNavbar: true
+        }
+      },
+      on: {
+        'panelBreakpoint panelCollapsedBreakpoint panelResize viewResize resize viewMasterDetailBreakpoint': function onPanelResize() {
+          const app = this;
+          $('.navbar-new').each(navbarEl => {
+            app.navbarNew.size(navbarEl);
+          });
+        },
+        pageBeforeRemove(page) {
+          if (page.$el[0].f7DetachNavbarNewScrollHandlers) {
+            page.$el[0].f7DetachNavbarNewScrollHandlers();
+          }
+        },
+        pageReinit(page) {
+          const app = this;
+          const $navbarEl = $(app.navbarNew.getElByPage(page));
+          if (!$navbarEl || $navbarEl.length === 0) return;
+          app.navbarNew.size($navbarEl);
+        },
+        pageInit(page) {
+          const app = this;
+          const $navbarEl = $(app.navbarNew.getElByPage(page));
+          if (!$navbarEl || $navbarEl.length === 0) return;
+
+          // Size
+          app.navbarNew.size($navbarEl);
+
+          // Need Collapse On Scroll
+          let needCollapseOnScrollHandler;
+          if ($navbarEl.find('.title-large').length > 0) {
+            $navbarEl.addClass('navbar-new-large');
+          }
+          if ($navbarEl.hasClass('navbar-new-large')) {
+            if (app.params.navbarNew.collapseLargeTitleOnScroll) needCollapseOnScrollHandler = true;
+            page.$el.addClass('page-with-navbar-new-large');
+          }
+
+          // Need transparent on scroll
+          let needTransparentOnScroll;
+          if (!needCollapseOnScrollHandler && $navbarEl.hasClass('navbar-new-transparent')) {
+            needTransparentOnScroll = true;
+          }
+
+          // Need Hide On Scroll
+          let needHideOnScrollHandler;
+          if (app.params.navbarNew.hideOnPageScroll || page.$el.find('.hide-navbar-new-on-scroll').length || page.$el.hasClass('hide-navbar-new-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
+            if (page.$el.find('.keep-navbar-new-on-scroll').length || page.$el.hasClass('keep-navbar-new-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
+              needHideOnScrollHandler = false;
+            } else {
+              needHideOnScrollHandler = true;
+            }
+          }
+          if (needCollapseOnScrollHandler || needHideOnScrollHandler || needTransparentOnScroll) {
+            app.navbarNew.initNavbarOnScroll(page.el, $navbarEl[0], needHideOnScrollHandler, needCollapseOnScrollHandler, needTransparentOnScroll);
+          }
+        },
+        'panelOpen panelSwipeOpen modalOpen': function onPanelModalOpen(instance) {
+          const app = this;
+          instance.$el.find('.navbar-new').each(navbarEl => {
+            app.navbarNew.size(navbarEl);
+          });
+        },
+        tabShow(tabEl) {
+          const app = this;
+          $(tabEl).find('.navbar-new').each(navbarEl => {
+            app.navbarNew.size(navbarEl);
+          });
+        }
+      },
+      clicks: {
+        '.navbar-new .title': function onTitleClick($clickedEl, clickedData, e) {
+          const app = this;
+          if (!app.params.navbarNew.scrollTopOnTitleClick) return;
+          if ($(e.target).closest('a, button').length > 0) {
+            return;
+          }
+          let $pageContentEl;
+
+          // Find active page
+          const $navbarEl = $clickedEl.parents('.navbar-new');
+
+          // Static Layout
+          $pageContentEl = $navbarEl.parents('.page-content');
+          if ($pageContentEl.length === 0) {
+            // Fixed Layout
+            if ($navbarEl.parents('.page').length > 0) {
+              $pageContentEl = $navbarEl.parents('.page').find('.page-content');
+            }
+          }
+          if ($pageContentEl && $pageContentEl.length > 0) {
+            // Check for tab
+            if ($pageContentEl.hasClass('tab')) {
+              $pageContentEl = $pageContentEl.parent('.tabs').children('.page-content.tab-active');
+            }
+            if ($pageContentEl.length > 0) $pageContentEl.scrollTop(0, 300);
+          }
+        }
+      },
+      vnode: {
+        'navbar-new': {
+          postpatch(vnode) {
+            const app = this;
+            app.navbarNew.size(vnode.elm);
+          }
+        }
+      }
+    };
+
+    /* eslint no-control-regex: "off" */
+    const defaultDiacriticsRemovalap$1 = [{
+      base: 'A',
+      letters: '\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F'
+    }, {
+      base: 'AA',
+      letters: '\uA732'
+    }, {
+      base: 'AE',
+      letters: '\u00C6\u01FC\u01E2'
+    }, {
+      base: 'AO',
+      letters: '\uA734'
+    }, {
+      base: 'AU',
+      letters: '\uA736'
+    }, {
+      base: 'AV',
+      letters: '\uA738\uA73A'
+    }, {
+      base: 'AY',
+      letters: '\uA73C'
+    }, {
+      base: 'B',
+      letters: '\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181'
+    }, {
+      base: 'C',
+      letters: '\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E'
+    }, {
+      base: 'D',
+      letters: '\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779'
+    }, {
+      base: 'DZ',
+      letters: '\u01F1\u01C4'
+    }, {
+      base: 'Dz',
+      letters: '\u01F2\u01C5'
+    }, {
+      base: 'E',
+      letters: '\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E'
+    }, {
+      base: 'F',
+      letters: '\u0046\u24BB\uFF26\u1E1E\u0191\uA77B'
+    }, {
+      base: 'G',
+      letters: '\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E'
+    }, {
+      base: 'H',
+      letters: '\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D'
+    }, {
+      base: 'I',
+      letters: '\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197'
+    }, {
+      base: 'J',
+      letters: '\u004A\u24BF\uFF2A\u0134\u0248'
+    }, {
+      base: 'K',
+      letters: '\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2'
+    }, {
+      base: 'L',
+      letters: '\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780'
+    }, {
+      base: 'LJ',
+      letters: '\u01C7'
+    }, {
+      base: 'Lj',
+      letters: '\u01C8'
+    }, {
+      base: 'M',
+      letters: '\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C'
+    }, {
+      base: 'N',
+      letters: '\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4'
+    }, {
+      base: 'NJ',
+      letters: '\u01CA'
+    }, {
+      base: 'Nj',
+      letters: '\u01CB'
+    }, {
+      base: 'O',
+      letters: '\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C'
+    }, {
+      base: 'OI',
+      letters: '\u01A2'
+    }, {
+      base: 'OO',
+      letters: '\uA74E'
+    }, {
+      base: 'OU',
+      letters: '\u0222'
+    }, {
+      base: 'OE',
+      letters: '\u008C\u0152'
+    }, {
+      base: 'oe',
+      letters: '\u009C\u0153'
+    }, {
+      base: 'P',
+      letters: '\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754'
+    }, {
+      base: 'Q',
+      letters: '\u0051\u24C6\uFF31\uA756\uA758\u024A'
+    }, {
+      base: 'R',
+      letters: '\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782'
+    }, {
+      base: 'S',
+      letters: '\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784'
+    }, {
+      base: 'T',
+      letters: '\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786'
+    }, {
+      base: 'TZ',
+      letters: '\uA728'
+    }, {
+      base: 'U',
+      letters: '\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244'
+    }, {
+      base: 'V',
+      letters: '\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245'
+    }, {
+      base: 'VY',
+      letters: '\uA760'
+    }, {
+      base: 'W',
+      letters: '\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72'
+    }, {
+      base: 'X',
+      letters: '\u0058\u24CD\uFF38\u1E8A\u1E8C'
+    }, {
+      base: 'Y',
+      letters: '\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE'
+    }, {
+      base: 'Z',
+      letters: '\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762'
+    }, {
+      base: 'a',
+      letters: '\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250'
+    }, {
+      base: 'aa',
+      letters: '\uA733'
+    }, {
+      base: 'ae',
+      letters: '\u00E6\u01FD\u01E3'
+    }, {
+      base: 'ao',
+      letters: '\uA735'
+    }, {
+      base: 'au',
+      letters: '\uA737'
+    }, {
+      base: 'av',
+      letters: '\uA739\uA73B'
+    }, {
+      base: 'ay',
+      letters: '\uA73D'
+    }, {
+      base: 'b',
+      letters: '\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253'
+    }, {
+      base: 'c',
+      letters: '\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184'
+    }, {
+      base: 'd',
+      letters: '\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A'
+    }, {
+      base: 'dz',
+      letters: '\u01F3\u01C6'
+    }, {
+      base: 'e',
+      letters: '\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD'
+    }, {
+      base: 'f',
+      letters: '\u0066\u24D5\uFF46\u1E1F\u0192\uA77C'
+    }, {
+      base: 'g',
+      letters: '\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F'
+    }, {
+      base: 'h',
+      letters: '\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265'
+    }, {
+      base: 'hv',
+      letters: '\u0195'
+    }, {
+      base: 'i',
+      letters: '\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131'
+    }, {
+      base: 'j',
+      letters: '\u006A\u24D9\uFF4A\u0135\u01F0\u0249'
+    }, {
+      base: 'k',
+      letters: '\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3'
+    }, {
+      base: 'l',
+      letters: '\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747'
+    }, {
+      base: 'lj',
+      letters: '\u01C9'
+    }, {
+      base: 'm',
+      letters: '\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F'
+    }, {
+      base: 'n',
+      letters: '\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5'
+    }, {
+      base: 'nj',
+      letters: '\u01CC'
+    }, {
+      base: 'o',
+      letters: '\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275'
+    }, {
+      base: 'oi',
+      letters: '\u01A3'
+    }, {
+      base: 'ou',
+      letters: '\u0223'
+    }, {
+      base: 'oo',
+      letters: '\uA74F'
+    }, {
+      base: 'p',
+      letters: '\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755'
+    }, {
+      base: 'q',
+      letters: '\u0071\u24E0\uFF51\u024B\uA757\uA759'
+    }, {
+      base: 'r',
+      letters: '\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783'
+    }, {
+      base: 's',
+      letters: '\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B'
+    }, {
+      base: 't',
+      letters: '\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787'
+    }, {
+      base: 'tz',
+      letters: '\uA729'
+    }, {
+      base: 'u',
+      letters: '\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289'
+    }, {
+      base: 'v',
+      letters: '\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C'
+    }, {
+      base: 'vy',
+      letters: '\uA761'
+    }, {
+      base: 'w',
+      letters: '\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73'
+    }, {
+      base: 'x',
+      letters: '\u0078\u24E7\uFF58\u1E8B\u1E8D'
+    }, {
+      base: 'y',
+      letters: '\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF'
+    }, {
+      base: 'z',
+      letters: '\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763'
+    }];
+    const diacriticsMap$1 = {};
+    for (let i = 0; i < defaultDiacriticsRemovalap$1.length; i += 1) {
+      const letters = defaultDiacriticsRemovalap$1[i].letters;
+      for (let j = 0; j < letters.length; j += 1) {
+        diacriticsMap$1[letters[j]] = defaultDiacriticsRemovalap$1[i].base;
+      }
+    }
+    function removeDiacritics$1(str) {
+      return str.replace(/[^\u0000-\u007E]/g, a => diacriticsMap$1[a] || a);
+    }
+
+    let SearchbarNew$1 = class SearchbarNew extends Framework7Class {
+      constructor(app, params) {
+        if (params === void 0) {
+          params = {};
+        }
+        super(params, [app]);
+        const sb = this;
+        const defaults = {
+          el: undefined,
+          inputEl: undefined,
+          inputEvents: 'change input compositionend',
+          disableButton: true,
+          disableButtonEl: undefined,
+          backdropEl: undefined,
+          searchContainer: undefined,
+          // container to search, HTMLElement or CSS selector
+          searchItem: 'li',
+          // single item selector, CSS selector
+          searchIn: undefined,
+          // where to search in item, CSS selector
+          searchGroup: '.list-group',
+          searchGroupTitle: '.list-group-title',
+          ignore: '.searchbar-new-ignore',
+          foundEl: '.searchbar-new-found',
+          notFoundEl: '.searchbar-new-not-found',
+          hideOnEnableEl: '.searchbar-new-hide-on-enable',
+          hideOnSearchEl: '.searchbar-new-hide-on-search',
+          backdrop: true,
+          removeDiacritics: true,
+          customSearch: false,
+          hideGroupTitles: true,
+          hideGroups: true,
+          disableOnBackdropClick: true,
+          expandable: false,
+          inline: false
+        };
+
+        // Extend defaults with modules params
+        sb.useModulesParams(defaults);
+        sb.params = extend$3(defaults, params);
+        const $el = $(sb.params.el);
+        if ($el.length === 0) return sb;
+        if ($el[0].f7SearchbarNew) return $el[0].f7SearchbarNew;
+        $el[0].f7SearchbarNew = sb;
+        let $pageEl;
+        const $navbarEl = $el.parents('.navbar-new');
+        if ($el.parents('.page').length > 0) {
+          $pageEl = $el.parents('.page');
+        } else if ($navbarEl.length > 0) {
+          $pageEl = $(app.navbarNew.getPageByEl($navbarEl[0]));
+          if (!$pageEl.length) {
+            const $currentPageEl = $el.parents('.view').find('.page-current');
+            if ($currentPageEl[0] && $currentPageEl[0].f7Page && $currentPageEl[0].f7Page.navbarNewEl === $navbarEl[0]) {
+              $pageEl = $currentPageEl;
+            }
+          }
+        }
+        let $foundEl;
+        if (params.foundEl) {
+          $foundEl = $(params.foundEl);
+        } else if (typeof sb.params.foundEl === 'string' && $pageEl) {
+          $foundEl = $pageEl.find(sb.params.foundEl);
+        }
+        let $notFoundEl;
+        if (params.notFoundEl) {
+          $notFoundEl = $(params.notFoundEl);
+        } else if (typeof sb.params.notFoundEl === 'string' && $pageEl) {
+          $notFoundEl = $pageEl.find(sb.params.notFoundEl);
+        }
+        let $hideOnEnableEl;
+        if (params.hideOnEnableEl) {
+          $hideOnEnableEl = $(params.hideOnEnableEl);
+        } else if (typeof sb.params.hideOnEnableEl === 'string' && $pageEl) {
+          $hideOnEnableEl = $pageEl.find(sb.params.hideOnEnableEl);
+        }
+        let $hideOnSearchEl;
+        if (params.hideOnSearchEl) {
+          $hideOnSearchEl = $(params.hideOnSearchEl);
+        } else if (typeof sb.params.hideOnSearchEl === 'string' && $pageEl) {
+          $hideOnSearchEl = $pageEl.find(sb.params.hideOnSearchEl);
+        }
+        const expandable = sb.params.expandable || $el.hasClass('searchbar-new-expandable');
+        const inline = sb.params.inline || $el.hasClass('searchbar-new-inline');
+        if (typeof sb.params.backdrop === 'undefined') {
+          sb.params.backdrop = !inline;
+        }
+        let $backdropEl;
+        if (sb.params.backdrop) {
+          if (sb.params.backdropEl) {
+            $backdropEl = $(sb.params.backdropEl);
+          } else if ($pageEl && $pageEl.length > 0) {
+            $backdropEl = $pageEl.find('.searchbar-new-backdrop');
+          } else {
+            $backdropEl = $el.siblings('.searchbar-new-backdrop');
+          }
+          if ($backdropEl.length === 0) {
+            $backdropEl = $('<div class="searchbar-new-backdrop"></div>');
+            if ($pageEl && $pageEl.length) {
+              if ($el.parents($pageEl).length > 0 && $navbarEl && $el.parents($navbarEl).length === 0) {
+                $backdropEl.insertBefore($el);
+              } else {
+                $backdropEl.insertBefore($pageEl.find('.page-content').eq(0));
+              }
+            } else {
+              $backdropEl.insertBefore($el);
+            }
+          }
+        }
+        let $searchContainer;
+        if (sb.params.searchContainer) {
+          $searchContainer = $(sb.params.searchContainer);
+        }
+        let $inputEl;
+        if (sb.params.inputEl) {
+          $inputEl = $(sb.params.inputEl);
+        } else {
+          $inputEl = $el.find('input[type="search"]').eq(0);
+        }
+        let $disableButtonEl;
+        if (sb.params.disableButton) {
+          if (sb.params.disableButtonEl) {
+            $disableButtonEl = $(sb.params.disableButtonEl);
+          } else {
+            $disableButtonEl = $el.find('.searchbar-new-disable-button');
+          }
+        }
+        extend$3(sb, {
+          app,
+          view: app.views.get($el.parents('.view')),
+          $el,
+          el: $el[0],
+          $backdropEl,
+          backdropEl: $backdropEl && $backdropEl[0],
+          $searchContainer,
+          searchContainer: $searchContainer && $searchContainer[0],
+          $inputEl,
+          inputEl: $inputEl[0],
+          $disableButtonEl,
+          disableButtonEl: $disableButtonEl && $disableButtonEl[0],
+          disableButtonHasMargin: false,
+          $pageEl,
+          pageEl: $pageEl && $pageEl[0],
+          $navbarEl,
+          navbarEl: $navbarEl && $navbarEl[0],
+          $foundEl,
+          foundEl: $foundEl && $foundEl[0],
+          $notFoundEl,
+          notFoundEl: $notFoundEl && $notFoundEl[0],
+          $hideOnEnableEl,
+          hideOnEnableEl: $hideOnEnableEl && $hideOnEnableEl[0],
+          $hideOnSearchEl,
+          hideOnSearchEl: $hideOnSearchEl && $hideOnSearchEl[0],
+          previousQuery: '',
+          query: '',
+          isVirtualList: $searchContainer && $searchContainer.hasClass('virtual-list'),
+          virtualList: undefined,
+          enabled: false,
+          expandable,
+          inline
+        });
+
+        // Events
+        function preventSubmit(e) {
+          e.preventDefault();
+        }
+        function onInputFocus(e) {
+          sb.enable(e);
+          sb.$el.addClass('searchbar-new-focused');
+        }
+        function onInputBlur() {
+          sb.$el.removeClass('searchbar-new-focused');
+        }
+        function onInputChange() {
+          const value = sb.$inputEl.val().trim();
+          if (sb.$searchContainer && sb.$searchContainer.length > 0 && (sb.params.searchIn || sb.isVirtualList || sb.params.searchIn === sb.params.searchItem) || sb.params.customSearch) {
+            sb.search(value, true);
+          }
+        }
+        function onInputClear(e, previousValue) {
+          sb.$el.trigger('searchbar-new:clear', previousValue);
+          sb.emit('local::clear searchbarNewClear', sb, previousValue);
+        }
+        function disableOnClick(e) {
+          sb.disable(e);
+        }
+        function onPageBeforeOut() {
+          if (!sb || sb && !sb.$el) return;
+          if (sb.enabled) {
+            sb.$el.removeClass('searchbar-new-enabled');
+            if (sb.expandable) {
+              sb.$el.parents('.navbar-new').removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition');
+            }
+          }
+        }
+        function onPageBeforeIn() {
+          if (!sb || sb && !sb.$el) return;
+          if (sb.enabled) {
+            sb.$el.addClass('searchbar-new-enabled');
+            if (sb.expandable) {
+              sb.$el.parents('.navbar-new').addClass('with-searchbar-new-expandable-enabled-no-transition');
+            }
+          }
+        }
+        sb.attachEvents = function attachEvents() {
+          $el.on('submit', preventSubmit);
+          if (sb.params.disableButton) {
+            sb.$disableButtonEl.on('click', disableOnClick);
+          }
+          if (sb.params.disableOnBackdropClick && sb.$backdropEl) {
+            sb.$backdropEl.on('click', disableOnClick);
+          }
+          if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) {
+            sb.$pageEl.on('page:beforeout', onPageBeforeOut);
+            sb.$pageEl.on('page:beforein', onPageBeforeIn);
+          }
+          sb.$inputEl.on('focus', onInputFocus);
+          sb.$inputEl.on('blur', onInputBlur);
+          sb.$inputEl.on(sb.params.inputEvents, onInputChange);
+          sb.$inputEl.on('input:clear', onInputClear);
+        };
+        sb.detachEvents = function detachEvents() {
+          $el.off('submit', preventSubmit);
+          if (sb.params.disableButton) {
+            sb.$disableButtonEl.off('click', disableOnClick);
+          }
+          if (sb.params.disableOnBackdropClick && sb.$backdropEl) {
+            sb.$backdropEl.off('click', disableOnClick);
+          }
+          if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) {
+            sb.$pageEl.off('page:beforeout', onPageBeforeOut);
+            sb.$pageEl.off('page:beforein', onPageBeforeIn);
+          }
+          sb.$inputEl.off('focus', onInputFocus);
+          sb.$inputEl.off('blur', onInputBlur);
+          sb.$inputEl.off(sb.params.inputEvents, onInputChange);
+          sb.$inputEl.off('input:clear', onInputClear);
+        };
+
+        // Install Modules
+        sb.useModules();
+
+        // Init
+        sb.init();
+        return sb;
+      }
+      clear(e) {
+        const sb = this;
+        if (!sb.query && e && $(e.target).hasClass('searchbar-new-clear')) {
+          sb.disable();
+          return sb;
+        }
+        const previousQuery = sb.value;
+        sb.$inputEl.val('').trigger('change').focus();
+        sb.$el.trigger('searchbar-new:clear', previousQuery);
+        sb.emit('local::clear searchbarNewClear', sb, previousQuery);
+        return sb;
+      }
+      setDisableButtonMargin() {
+        const sb = this;
+        if (sb.expandable) return;
+        const app = sb.app;
+        sb.$disableButtonEl.transition(0).show();
+        sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
+        /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
+        sb._clientLeft = sb.$disableButtonEl[0].clientLeft;
+        sb.$disableButtonEl.transition('');
+        sb.disableButtonHasMargin = true;
+      }
+      enable(setFocus) {
+        const sb = this;
+        if (sb.enabled) return sb;
+        const app = sb.app;
+        const document = getDocument$1();
+        const device = getDevice$1();
+        sb.enabled = true;
+        function enable() {
+          if (sb.$backdropEl && (sb.$searchContainer && sb.$searchContainer.length || sb.params.customSearch) && !sb.$el.hasClass('searchbar-new-enabled') && !sb.query) {
+            sb.backdropShow();
+          }
+          sb.$el.addClass('searchbar-new-enabled');
+          if (!sb.$disableButtonEl || sb.$disableButtonEl && sb.$disableButtonEl.length === 0) {
+            sb.$el.addClass('searchbar-new-enabled-no-disable-button');
+          }
+          if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') {
+            if (!sb.disableButtonHasMargin) {
+              sb.setDisableButtonMargin();
+            }
+            sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, '0px');
+          }
+          if (sb.expandable) {
+            const $navbarEl = sb.$el.parents('.navbar-new');
+            if ($navbarEl.hasClass('navbar-new-large') && sb.$pageEl) {
+              const $pageContentEl = sb.$pageEl.find('.page-content');
+              const $titleLargeEl = $navbarEl.find('.title-large');
+              $pageContentEl.addClass('with-searchbar-new-expandable-enabled');
+              if ($navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-large-collapsed') && $titleLargeEl.length && $pageContentEl.length) {
+                $pageContentEl.transition(0);
+                $pageContentEl[0].scrollTop -= $titleLargeEl[0].offsetHeight;
+                setTimeout(() => {
+                  $pageContentEl.transition('');
+                }, 200);
+              }
+            }
+            if (app.theme === 'md' && $navbarEl.length) {
+              $navbarEl.addClass('with-searchbar-new-expandable-enabled');
+            } else {
+              $navbarEl.addClass('with-searchbar-new-expandable-enabled');
+              if ($navbarEl.hasClass('navbar-new-large')) {
+                $navbarEl.addClass('navbar-new-large-collapsed');
+              }
+            }
+          }
+          if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.addClass('hidden-by-searchbar-new');
+          sb.$el.trigger('searchbar-new:enable');
+          sb.emit('local::enable searchbarNewEnable', sb);
+        }
+        let needsFocus = false;
+        if (setFocus === true) {
+          if (document.activeElement !== sb.inputEl) {
+            needsFocus = true;
+          }
+        }
+        const isIos = device.ios && app.theme === 'ios';
+        if (isIos) {
+          if (sb.expandable) {
+            if (needsFocus) sb.$inputEl.focus();
+            enable();
+          } else {
+            if (needsFocus) sb.$inputEl.focus();
+            if (setFocus && (setFocus.type === 'focus' || setFocus === true)) {
+              nextTick$1(() => {
+                enable();
+              }, 400);
+            } else {
+              enable();
+            }
+          }
+        } else {
+          if (needsFocus) sb.$inputEl.focus();
+          if (app.theme === 'md' && sb.expandable) {
+            sb.$el.parents('.page, .view, .navbar-new-inner, .navbar-new').scrollLeft(app.rtl ? 100 : 0);
+          }
+          enable();
+        }
+        return sb;
+      }
+      disable() {
+        const sb = this;
+        if (!sb.enabled) return sb;
+        const app = sb.app;
+        sb.$inputEl.val('').trigger('change');
+        sb.$el.removeClass('searchbar-new-enabled searchbar-new-focused searchbar-new-enabled-no-disable-button');
+        if (sb.expandable) {
+          const $navbarEl = sb.$el.parents('.navbar-new');
+          const $pageContentEl = sb.$pageEl && sb.$pageEl.find('.page-content');
+          if ($navbarEl.hasClass('navbar-new-large') && $pageContentEl.length) {
+            const $titleLargeEl = $navbarEl.find('.title-large');
+            sb.$el.transitionEnd(() => {
+              $pageContentEl.removeClass('with-searchbar-new-expandable-closing');
+            });
+            if ($navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-large-collapsed') && $titleLargeEl.length) {
+              const scrollTop = $pageContentEl[0].scrollTop;
+              const titleLargeHeight = $titleLargeEl[0].offsetHeight;
+              if (scrollTop > titleLargeHeight) {
+                $pageContentEl.transition(0);
+                $pageContentEl[0].scrollTop = scrollTop + titleLargeHeight;
+                setTimeout(() => {
+                  $pageContentEl.transition('');
+                }, 200);
+              }
+            }
+            $pageContentEl.removeClass('with-searchbar-new-expandable-enabled').addClass('with-searchbar-new-expandable-closing');
+          }
+          if (app.theme === 'md' && $navbarEl.length) {
+            $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
+            sb.$el.transitionEnd(() => {
+              $navbarEl.removeClass('with-searchbar-new-expandable-closing');
+            });
+          } else {
+            $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
+            sb.$el.transitionEnd(() => {
+              $navbarEl.removeClass('with-searchbar-new-expandable-closing');
+            });
+            if (sb.$pageEl) {
+              sb.$pageEl.find('.page-content').trigger('scroll');
+            }
+          }
+        }
+        if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') {
+          sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
+        }
+        if (sb.$backdropEl && (sb.$searchContainer && sb.$searchContainer.length || sb.params.customSearch)) {
+          sb.backdropHide();
+        }
+        sb.enabled = false;
+        sb.$inputEl.blur();
+        if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.removeClass('hidden-by-searchbar-new');
+        sb.$el.trigger('searchbar-new:disable');
+        sb.emit('local::disable searchbarNewDisable', sb);
+        return sb;
+      }
+      toggle() {
+        const sb = this;
+        if (sb.enabled) sb.disable();else sb.enable(true);
+        return sb;
+      }
+      backdropShow() {
+        const sb = this;
+        if (sb.$backdropEl) {
+          sb.$backdropEl.addClass('searchbar-new-backdrop-in');
+        }
+        return sb;
+      }
+      backdropHide() {
+        const sb = this;
+        if (sb.$backdropEl) {
+          sb.$backdropEl.removeClass('searchbar-new-backdrop-in');
+        }
+        return sb;
+      }
+      search(query, internal) {
+        const sb = this;
+        sb.previousQuery = sb.query || '';
+        if (query === sb.previousQuery) return sb;
+        if (!internal) {
+          if (!sb.enabled) {
+            sb.enable();
+          }
+          sb.$inputEl.val(query);
+          sb.$inputEl.trigger('input');
+        }
+        sb.query = query;
+        sb.value = query;
+        const {
+          $searchContainer,
+          $el,
+          $foundEl,
+          $notFoundEl,
+          $hideOnSearchEl,
+          isVirtualList
+        } = sb;
+
+        // Hide on search element
+        if (query.length > 0 && $hideOnSearchEl) {
+          $hideOnSearchEl.addClass('hidden-by-searchbar-new');
+        } else if ($hideOnSearchEl) {
+          $hideOnSearchEl.removeClass('hidden-by-searchbar-new');
+        }
+        // Add active/inactive classes on overlay
+        if ($searchContainer && $searchContainer.length && $el.hasClass('searchbar-new-enabled') || sb.params.customSearch && $el.hasClass('searchbar-new-enabled')) {
+          if (query.length === 0) {
+            sb.backdropShow();
+          } else {
+            sb.backdropHide();
+          }
+        }
+        if (sb.params.customSearch) {
+          $el.trigger('searchbar-new:search', {
+            query,
+            previousQuery: sb.previousQuery
+          });
+          sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+          return sb;
+        }
+        let foundItems = [];
+        let vlQuery;
+        if (isVirtualList) {
+          sb.virtualList = $searchContainer[0].f7VirtualList;
+          if (query.trim() === '') {
+            sb.virtualList.resetFilter();
+            if ($notFoundEl) $notFoundEl.hide();
+            if ($foundEl) $foundEl.show();
+            $el.trigger('searchbar-new:search', {
+              query,
+              previousQuery: sb.previousQuery
+            });
+            sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+            return sb;
+          }
+          vlQuery = sb.params.removeDiacritics ? removeDiacritics$1(query) : query;
+          if (sb.virtualList.params.searchAll) {
+            foundItems = sb.virtualList.params.searchAll(vlQuery, sb.virtualList.items) || [];
+          } else if (sb.virtualList.params.searchByItem) {
+            for (let i = 0; i < sb.virtualList.items.length; i += 1) {
+              if (sb.virtualList.params.searchByItem(vlQuery, sb.virtualList.items[i], i)) {
+                foundItems.push(i);
+              }
+            }
+          }
+        } else {
+          let values;
+          if (sb.params.removeDiacritics) values = removeDiacritics$1(query.trim().toLowerCase()).split(' ');else {
+            values = query.trim().toLowerCase().split(' ');
+          }
+          $searchContainer.find(sb.params.searchItem).removeClass('hidden-by-searchbar-new').each(itemEl => {
+            const $itemEl = $(itemEl);
+            let compareWithText = [];
+            let $searchIn = sb.params.searchIn ? $itemEl.find(sb.params.searchIn) : $itemEl;
+            if (sb.params.searchIn === sb.params.searchItem) {
+              $searchIn = $itemEl;
+            }
+            $searchIn.each(searchInEl => {
+              let itemText = $(searchInEl).text().trim().toLowerCase();
+              if (sb.params.removeDiacritics) itemText = removeDiacritics$1(itemText);
+              compareWithText.push(itemText);
+            });
+            compareWithText = compareWithText.join(' ');
+            let wordsMatch = 0;
+            for (let i = 0; i < values.length; i += 1) {
+              if (compareWithText.indexOf(values[i]) >= 0) wordsMatch += 1;
+            }
+            if (wordsMatch !== values.length && !(sb.params.ignore && $itemEl.is(sb.params.ignore))) {
+              $itemEl.addClass('hidden-by-searchbar-new');
+            } else {
+              foundItems.push($itemEl[0]);
+            }
+          });
+          if (sb.params.hideGroupTitles) {
+            $searchContainer.find(sb.params.searchGroupTitle).each(titleEl => {
+              const $titleEl = $(titleEl);
+              const $nextElements = $titleEl.nextAll(sb.params.searchItem);
+              let hide = true;
+              for (let i = 0; i < $nextElements.length; i += 1) {
+                const $nextEl = $nextElements.eq(i);
+                if ($nextEl.is(sb.params.searchGroupTitle)) break;
+                if (!$nextEl.hasClass('hidden-by-searchbar-new')) {
+                  hide = false;
+                }
+              }
+              const ignore = sb.params.ignore && $titleEl.is(sb.params.ignore);
+              if (hide && !ignore) $titleEl.addClass('hidden-by-searchbar-new');else $titleEl.removeClass('hidden-by-searchbar-new');
+            });
+          }
+          if (sb.params.hideGroups) {
+            $searchContainer.find(sb.params.searchGroup).each(groupEl => {
+              const $groupEl = $(groupEl);
+              const ignore = sb.params.ignore && $groupEl.is(sb.params.ignore);
+              // eslint-disable-next-line
+              const notHidden = $groupEl.find(sb.params.searchItem).filter(el => {
+                return !$(el).hasClass('hidden-by-searchbar-new');
+              });
+              if (notHidden.length === 0 && !ignore) {
+                $groupEl.addClass('hidden-by-searchbar-new');
+              } else {
+                $groupEl.removeClass('hidden-by-searchbar-new');
+              }
+            });
+          }
+        }
+        if (foundItems.length === 0) {
+          if ($notFoundEl) $notFoundEl.show();
+          if ($foundEl) $foundEl.hide();
+        } else {
+          if ($notFoundEl) $notFoundEl.hide();
+          if ($foundEl) $foundEl.show();
+        }
+        if (isVirtualList && sb.virtualList) {
+          sb.virtualList.filterItems(foundItems);
+        }
+        $el.trigger('searchbar-new:search', {
+          query,
+          previousQuery: sb.previousQuery,
+          foundItems
+        });
+        sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery, foundItems);
+        return sb;
+      }
+      init() {
+        const sb = this;
+        if (sb.expandable && sb.$el) sb.$el.addClass('searchbar-new-expandable');
+        if (sb.inline && sb.$el) sb.$el.addClass('searchbar-new-inline');
+        sb.attachEvents();
+      }
+      destroy() {
+        const sb = this;
+        sb.emit('local::beforeDestroy searchbarNewBeforeDestroy', sb);
+        sb.$el.trigger('searchbar-new:beforedestroy');
+        sb.detachEvents();
+        if (sb.$el[0]) {
+          sb.$el[0].f7SearchbarNew = null;
+          delete sb.$el[0].f7SearchbarNew;
+        }
+        deleteProps$1(sb);
+      }
+    };
+
+    var SearchbarNew = {
+      name: 'searchbar-new',
+      static: {
+        SearchbarNew: SearchbarNew$1
+      },
+      create() {
+        const app = this;
+        app.searchbarNew = ConstructorMethods({
+          defaultSelector: '.searchbar-new',
+          constructor: SearchbarNew$1,
+          app,
+          domProp: 'f7SearchbarNew',
+          addMethods: 'clear enable disable toggle search'.split(' ')
+        });
+      },
+      on: {
+        tabMounted(tabEl) {
+          const app = this;
+          $(tabEl).find('.searchbar-new-init').each(searchbarEl => {
+            const $searchbarEl = $(searchbarEl);
+            app.searchbarNew.create(extend$3($searchbarEl.dataset(), {
+              el: searchbarEl
+            }));
+          });
+        },
+        tabBeforeRemove(tabEl) {
+          $(tabEl).find('.searchbar-new-init').each(searchbarEl => {
+            if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+              searchbarEl.f7SearchbarNew.destroy();
+            }
+          });
+        },
+        pageInit(page) {
+          const app = this;
+          page.$el.find('.searchbar-new-init').each(searchbarEl => {
+            const $searchbarEl = $(searchbarEl);
+            app.searchbarNew.create(extend$3($searchbarEl.dataset(), {
+              el: searchbarEl
+            }));
+          });
+          if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarNewEl && page.$navbarNewEl.length > 0) {
+            page.$navbarNewEl.find('.searchbar-new-init').each(searchbarEl => {
+              const $searchbarEl = $(searchbarEl);
+              app.searchbarNew.create(extend$3($searchbarEl.dataset(), {
+                el: searchbarEl
+              }));
+            });
+          }
+        },
+        pageBeforeRemove(page) {
+          const app = this;
+          page.$el.find('.searchbar-new-init').each(searchbarEl => {
+            if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+              searchbarEl.f7SearchbarNew.destroy();
+            }
+          });
+          if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarNewEl && page.$navbarNewEl.length > 0) {
+            page.$navbarNewEl.find('.searchbar-new-init').each(searchbarEl => {
+              if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+                searchbarEl.f7SearchbarNew.destroy();
+              }
+            });
+          }
+        }
+      },
+      clicks: {
+        '.searchbar-new-clear': function clear($clickedEl, data) {
+          if (data === void 0) {
+            data = {};
+          }
+          const app = this;
+          const sb = app.searchbarNew.get(data.searchbar);
+          if (sb) sb.clear();
+        },
+        '.searchbar-new-enable': function enable($clickedEl, data) {
+          if (data === void 0) {
+            data = {};
+          }
+          const app = this;
+          const sb = app.searchbarNew.get(data.searchbar);
+          if (sb) sb.enable(true);
+        },
+        '.searchbar-new-disable': function disable($clickedEl, data) {
+          if (data === void 0) {
+            data = {};
+          }
+          const app = this;
+          const sb = app.searchbarNew.get(data.searchbar);
+          if (sb) sb.disable();
+        },
+        '.searchbar-new-toggle': function toggle($clickedEl, data) {
+          if (data === void 0) {
+            data = {};
+          }
+          const app = this;
+          const sb = app.searchbarNew.get(data.searchbar);
+          if (sb) sb.toggle();
+        }
+      },
+      vnode: {
+        'searchbar-new-init': {
+          insert(vnode) {
+            const app = this;
+            const searchbarEl = vnode.elm;
+            const $searchbarEl = $(searchbarEl);
+            app.searchbarNew.create(extend$3($searchbarEl.dataset(), {
+              el: searchbarEl
+            }));
+          },
+          destroy(vnode) {
+            const searchbarEl = vnode.elm;
+            if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+              searchbarEl.f7SearchbarNew.destroy();
+            }
+          }
+        }
+      }
+    };
+
+    const startAnimation = data => {
+      data.raf = requestAnimationFrame(() => {
+        if (!data.setTransform) return;
+        const highlightEl = data.highlightEl;
+        if (!highlightEl) return;
+        highlightEl.style.transform = data.setTransform;
+        highlightEl.style.transitionTimingFunction = 'ease-out';
+        data.setTransform = null;
+      });
+    };
+    const stopAnimation = data => {
+      cancelAnimationFrame(data.raf);
+    };
+    const setHighlightOnTouch = (data, e) => {
+      const {
+        rect,
+        linkEls,
+        highlightEl
+      } = data;
+      if (!highlightEl) return;
+      const {
+        clientX
+      } = e;
+      const highlightWidth = rect.width / linkEls.length;
+      const leftOffset = clientX - rect.left - highlightWidth / 2;
+      const minLeft = 0;
+      const maxLeft = rect.width - highlightWidth;
+      const translateX = Math.max(minLeft, Math.min(leftOffset, maxLeft));
+      const linkCenters = [...linkEls].map((el, index) => {
+        return index * highlightWidth + highlightWidth / 2;
+      });
+      const closestLinkCenter = linkCenters.reduce((prev, curr) => {
+        const highlightCenter = translateX + highlightWidth / 2;
+        return Math.abs(curr - highlightCenter) < Math.abs(prev - highlightCenter) ? curr : prev;
+      }, linkCenters[0]);
+      const closestLinkIndex = linkCenters.indexOf(closestLinkCenter);
+      data.newActiveIndex = closestLinkIndex;
+      highlightEl.classList.add('tab-link-highlight-pressed');
+      data.setTransform = `translateX(${translateX}px)`;
+      startAnimation(data);
+    };
+    const unsetHighlightOnTouch = data => {
+      cancelAnimationFrame(data.raf);
+      data.setTransform = null;
+      const {
+        highlightEl
+      } = data;
+      if (!highlightEl) return;
+      highlightEl.classList.remove('tab-link-highlight-pressed');
+      const {
+        activeIndex,
+        newActiveIndex,
+        linkEls
+      } = data;
+      if (activeIndex !== newActiveIndex) {
+        linkEls[newActiveIndex].click();
+      }
+      highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+      highlightEl.style.transitionTimingFunction = '';
+      highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+    };
+    const initTabbarNewHighlight = el => {
+      const document = getDocument$1();
+      if (!el) return;
+      if (el.classList.contains('tabbar-new-scrollable')) {
+        return;
+      }
+      const highlightEl = el.querySelector('.tab-link-highlight');
+      const toolbarPaneEl = el.querySelector('.toolbar-new-pane');
+      if (!highlightEl || !toolbarPaneEl) return;
+      const data = {
+        el,
+        highlightEl,
+        touched: false,
+        moved: false,
+        rect: null,
+        setTransform: null,
+        raf: null
+      };
+      el.f7ToolbarNewHighlightData = data;
+      el.f7ToolbarNewOnPointer = e => {
+        if (e.type === 'touchstart') {
+          e.preventDefault();
+        }
+        if (e.pointerType !== 'touch') return;
+        if (!el) return;
+        if (e.type === 'pointerdown') {
+          data.linkEls = el.querySelectorAll('.tab-link');
+          data.rect = toolbarPaneEl.getBoundingClientRect();
+          data.touched = true;
+          setHighlightOnTouch(data, e);
+          startAnimation(data);
+        }
+        if (e.type === 'pointermove') {
+          if (!data.touched) return;
+          data.moved = true;
+          setHighlightOnTouch(data, e);
+        }
+        if (e.type === 'pointerup') {
+          if (!data.touched) return;
+          data.touched = false;
+          data.moved = false;
+          unsetHighlightOnTouch(data);
+          stopAnimation(data);
+        }
+      };
+      el.addEventListener('touchstart', el.f7ToolbarNewOnPointer, {
+        passive: false
+      });
+      el.addEventListener('pointerdown', el.f7ToolbarNewOnPointer, {
+        passive: false
+      });
+      document.addEventListener('pointermove', el.f7ToolbarNewOnPointer, {
+        passive: false
+      });
+      document.addEventListener('pointerup', el.f7ToolbarNewOnPointer, {
+        passive: false
+      });
+      document.addEventListener('pointercancel', el.f7ToolbarNewOnPointer, {
+        passive: false
+      });
+    };
+    const destroyTabbarNewHighlight = el => {
+      if (!el || !el.f7ToolbarNewOnPointer) return;
+      const document = getDocument$1();
+      el.removeEventListener('touchstart', el.f7ToolbarNewOnPointer);
+      el.removeEventListener('pointerdown', el.f7ToolbarNewOnPointer);
+      document.removeEventListener('pointermove', el.f7ToolbarNewOnPointer);
+      document.removeEventListener('pointerup', el.f7ToolbarNewOnPointer);
+      document.removeEventListener('pointercancel', el.f7ToolbarNewOnPointer);
+      el.f7ToolbarNewOnPointer = null;
+      el.f7ToolbarNewHighlightData = null;
+    };
+
+    const ToolbarNew = {
+      setHighlight(tabbarEl) {
+        const app = this;
+        const $tabbarEl = $(tabbarEl);
+        if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar-new') || $tabbarEl.hasClass('tabbar-new-icons'))) {
+          return;
+        }
+        let $highlightEl = $tabbarEl.find('.tab-link-highlight');
+        const tabLinksCount = $tabbarEl.find('.tab-link').length;
+        if (tabLinksCount === 0) {
+          $highlightEl.remove();
+          return;
+        }
+        if ($highlightEl.length === 0) {
+          if (app.theme === 'ios') {
+            $tabbarEl.children('.toolbar-new-inner').children('.toolbar-new-pane').append('<span class="tab-link-highlight"></span>');
+          } else {
+            $tabbarEl.children('.toolbar-new-inner').append('<span class="tab-link-highlight"></span>');
+          }
+          $highlightEl = $tabbarEl.find('.tab-link-highlight');
+        } else if ($highlightEl.next('a,button,.tab-link').length) {
+          if (app.theme === 'ios') {
+            $tabbarEl.children('.toolbar-new-inner').children('.toolbar-new-pane').append($highlightEl);
+          } else {
+            $tabbarEl.children('.toolbar-new-inner').append($highlightEl);
+          }
+        }
+        const $activeLink = $tabbarEl.find('.tab-link-active');
+        let highlightWidth;
+        let highlightTranslate;
+        if ($tabbarEl.hasClass('tabbar-new-scrollable') && $activeLink && $activeLink[0]) {
+          highlightWidth = `${$activeLink[0].offsetWidth}px`;
+          highlightTranslate = `${$activeLink[0].offsetLeft}px`;
+        } else {
+          const activeIndex = $activeLink.index();
+          highlightWidth = `${100 / tabLinksCount}%`;
+          highlightTranslate = `${(app.rtl ? -activeIndex : activeIndex) * 100}%`;
+        }
+        nextFrame$1(() => {
+          $highlightEl.css('width', highlightWidth).transform(`translate3d(${highlightTranslate},0,0)`);
+        });
+      },
+      init(tabbarEl) {
+        const app = this;
+        app.toolbarNew.setHighlight(tabbarEl);
+        if (app.theme !== 'ios') return;
+        initTabbarNewHighlight(tabbarEl);
+      },
+      destroy(tabbarEl) {
+        const app = this;
+        if (app.theme !== 'ios') return;
+        destroyTabbarNewHighlight(tabbarEl);
+      },
+      hide(el, animate) {
+        if (animate === void 0) {
+          animate = true;
+        }
+        const app = this;
+        const $el = $(el);
+        if ($el.hasClass('toolbar-new-hidden')) return;
+        const className = `toolbar-new-hidden${animate ? ' toolbar-new-transitioning' : ''}`;
+        $el.transitionEnd(() => {
+          $el.removeClass('toolbar-new-transitioning');
+        });
+        $el.addClass(className);
+        $el.trigger('toolbar-new:hide');
+        app.emit('toolbarNewHide', $el[0]);
+      },
+      show(el, animate) {
+        if (animate === void 0) {
+          animate = true;
+        }
+        const app = this;
+        const $el = $(el);
+        if (!$el.hasClass('toolbar-new-hidden')) return;
+        if (animate) {
+          $el.addClass('toolbar-new-transitioning');
+          $el.transitionEnd(() => {
+            $el.removeClass('toolbar-new-transitioning');
+          });
+        }
+        $el.removeClass('toolbar-new-hidden');
+        $el.trigger('toolbar-new:show');
+        app.emit('toolbarNewShow', $el[0]);
+      },
+      initToolbarOnScroll(pageEl) {
+        const app = this;
+        const $pageEl = $(pageEl);
+        let $toolbarEl = $pageEl.parents('.view').children('.toolbar-new');
+        if ($toolbarEl.length === 0) {
+          $toolbarEl = $pageEl.find('.toolbar-new');
+        }
+        if ($toolbarEl.length === 0) {
+          $toolbarEl = $pageEl.parents('.views').children('.tabbar-new, .tabbar-new-icons');
+        }
+        if ($toolbarEl.length === 0) {
+          return;
+        }
+        let previousScrollTop;
+        let currentScrollTop;
+        let scrollHeight;
+        let offsetHeight;
+        let reachEnd;
+        let action;
+        let toolbarHidden;
+        function handleScroll(e) {
+          if ($pageEl.hasClass('page-with-card-opened')) return;
+          if ($pageEl.hasClass('page-previous')) return;
+          const scrollContent = this;
+          if (e && e.target && e.target !== scrollContent) {
+            return;
+          }
+          currentScrollTop = scrollContent.scrollTop;
+          scrollHeight = scrollContent.scrollHeight;
+          offsetHeight = scrollContent.offsetHeight;
+          reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
+          toolbarHidden = $toolbarEl.hasClass('toolbar-new-hidden');
           if (reachEnd) {
-            if (app.params.toolbar.showOnPageScrollEnd) {
+            if (app.params.toolbarNew.showOnPageScrollEnd) {
               action = 'show';
             }
           } else if (previousScrollTop > currentScrollTop) {
-            if (app.params.toolbar.showOnPageScrollTop || currentScrollTop <= 44) {
+            if (app.params.toolbarNew.showOnPageScrollTop || currentScrollTop <= 44) {
               action = 'show';
             } else {
               action = 'hide';
@@ -15086,28 +17399,28 @@
             action = 'show';
           }
           if (action === 'show' && toolbarHidden) {
-            app.toolbar.show($toolbarEl);
+            app.toolbarNew.show($toolbarEl);
             toolbarHidden = false;
           } else if (action === 'hide' && !toolbarHidden) {
-            app.toolbar.hide($toolbarEl);
+            app.toolbarNew.hide($toolbarEl);
             toolbarHidden = true;
           }
           previousScrollTop = currentScrollTop;
         }
         $pageEl.on('scroll', '.page-content', handleScroll, true);
-        $pageEl[0].f7ScrollToolbarHandler = handleScroll;
+        $pageEl[0].f7ScrollToolbarNewHandler = handleScroll;
       }
     };
-    var Toolbar$1 = {
-      name: 'toolbar',
+    var ToolbarNew$1 = {
+      name: 'toolbar-new',
       create() {
         const app = this;
         bindMethods(app, {
-          toolbar: Toolbar
+          toolbarNew: ToolbarNew
         });
       },
       params: {
-        toolbar: {
+        toolbarNew: {
           hideOnPageScroll: false,
           showOnPageScrollEnd: true,
           showOnPageScrollTop: true
@@ -15115,477 +17428,61 @@
       },
       on: {
         pageBeforeRemove(page) {
-          if (page.$el[0].f7ScrollToolbarHandler) {
-            page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true);
+          const app = this;
+          if (page.$el[0].f7ScrollToolbarNewHandler) {
+            page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarNewHandler, true);
           }
+          page.$el.find('.tabbar-new, .tabbar-new-icons').each(tabbarEl => {
+            app.toolbarNew.destroy(tabbarEl);
+          });
         },
         pageBeforeIn(page) {
           const app = this;
-          let $toolbarEl = page.$el.parents('.view').children('.toolbar');
+          let $toolbarEl = page.$el.parents('.view').children('.toolbar-new');
           if ($toolbarEl.length === 0) {
-            $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-icons');
+            $toolbarEl = page.$el.parents('.views').children('.tabbar-new, .tabbar-new-icons');
           }
           if ($toolbarEl.length === 0) {
-            $toolbarEl = page.$el.find('.toolbar');
+            $toolbarEl = page.$el.find('.toolbar-new');
           }
           if ($toolbarEl.length === 0) {
             return;
           }
-          if (page.$el.hasClass('no-toolbar')) {
-            app.toolbar.hide($toolbarEl);
+          if (page.$el.hasClass('no-toolbar-new')) {
+            app.toolbarNew.hide($toolbarEl);
           } else {
-            app.toolbar.show($toolbarEl);
+            app.toolbarNew.show($toolbarEl);
           }
         },
         pageInit(page) {
           const app = this;
-          page.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
-            app.toolbar.init(tabbarEl);
+          page.$el.find('.tabbar-new, .tabbar-new-icons').each(tabbarEl => {
+            app.toolbarNew.init(tabbarEl);
           });
-          if (app.params.toolbar.hideOnPageScroll || page.$el.find('.hide-toolbar-on-scroll').length || page.$el.hasClass('hide-toolbar-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
-            if (page.$el.find('.keep-toolbar-on-scroll').length || page.$el.hasClass('keep-toolbar-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
+          if (app.params.toolbarNew.hideOnPageScroll || page.$el.find('.hide-toolbar-new-on-scroll').length || page.$el.hasClass('hide-toolbar-new-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
+            if (page.$el.find('.keep-toolbar-new-on-scroll').length || page.$el.hasClass('keep-toolbar-new-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
               return;
             }
-            app.toolbar.initToolbarOnScroll(page.el);
+            app.toolbarNew.initToolbarOnScroll(page.el);
           }
         },
         init() {
           const app = this;
-          app.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
-            app.toolbar.init(tabbarEl);
+          app.$el.find('.tabbar-new, .tabbar-new-icons').each(tabbarEl => {
+            app.toolbarNew.init(tabbarEl);
           });
         }
       },
       vnode: {
-        tabbar: {
+        tabbarNew: {
           insert(vnode) {
             const app = this;
-            app.toolbar.init(vnode.elm);
-          }
-        }
-      }
-    };
-
-    var Subnavbar = {
-      name: 'subnavbar',
-      on: {
-        pageInit(page) {
-          if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length) {
-            page.$el.addClass('page-with-subnavbar');
-          }
-          const $innerSubnavbars = page.$el.find('.subnavbar').filter(subnavbarEl => {
-            return $(subnavbarEl).parents('.page')[0] === page.$el[0];
-          });
-          if ($innerSubnavbars.length) {
-            page.$el.addClass('page-with-subnavbar');
-          }
-        }
-      }
-    };
-
-    let TouchRipple$1 = class TouchRipple {
-      constructor(app, $el, x, y) {
-        const ripple = this;
-        if (!$el) return undefined;
-        const {
-          left,
-          top,
-          width,
-          height
-        } = $el[0].getBoundingClientRect();
-        const center = {
-          x: x - left,
-          y: y - top
-        };
-        let diameter = Math.max((height ** 2 + width ** 2) ** 0.5, 48);
-        let isInset = false;
-        const insetElements = app.params.touch.touchRippleInsetElements || '';
-        if (insetElements && $el.is(insetElements)) {
-          isInset = true;
-        }
-        if (isInset) {
-          diameter = Math.max(Math.min(width, height), 48);
-        }
-        if (!isInset && $el.css('overflow') === 'hidden') {
-          const distanceFromCenter = ((center.x - width / 2) ** 2 + (center.y - height / 2) ** 2) ** 0.5;
-          const scale = (diameter / 2 + distanceFromCenter) / (diameter / 2);
-          ripple.rippleTransform = `translate3d(0px, 0px, 0) scale(${scale * 2})`;
-        } else {
-          // prettier-ignore
-          ripple.rippleTransform = `translate3d(${-center.x + width / 2}px, ${-center.y + height / 2}px, 0) scale(1)`;
-        }
-        if (isInset) {
-          $el.addClass('ripple-inset');
-        }
-        ripple.$rippleWaveEl = $(`<div class="ripple-wave${isInset ? ' ripple-wave-inset' : ''}" style="width: ${diameter}px; height: ${diameter}px; margin-top:-${diameter / 2}px; margin-left:-${diameter / 2}px; left:${center.x}px; top:${center.y}px; --f7-ripple-transform: ${ripple.rippleTransform}"></div>`);
-        $el.prepend(ripple.$rippleWaveEl);
-        ripple.$rippleWaveEl.animationEnd(() => {
-          if (!ripple.$rippleWaveEl) return;
-          if (ripple.$rippleWaveEl.hasClass('ripple-wave-out')) return;
-          ripple.$rippleWaveEl.addClass('ripple-wave-in');
-          if (ripple.shouldBeRemoved) {
-            ripple.out();
-          }
-        });
-        return ripple;
-      }
-      destroy() {
-        let ripple = this;
-        if (ripple.$rippleWaveEl) {
-          ripple.$rippleWaveEl.remove();
-        }
-        Object.keys(ripple).forEach(key => {
-          ripple[key] = null;
-          delete ripple[key];
-        });
-        ripple = null;
-      }
-      out() {
-        const ripple = this;
-        const {
-          $rippleWaveEl
-        } = this;
-        clearTimeout(ripple.removeTimeout);
-        $rippleWaveEl.addClass('ripple-wave-out');
-        ripple.removeTimeout = setTimeout(() => {
-          ripple.destroy();
-        }, 300);
-        $rippleWaveEl.animationEnd(() => {
-          clearTimeout(ripple.removeTimeout);
-          ripple.destroy();
-        });
-      }
-      remove() {
-        const ripple = this;
-        if (ripple.shouldBeRemoved) return;
-        ripple.removeTimeout = setTimeout(() => {
-          ripple.destroy();
-        }, 400);
-        ripple.shouldBeRemoved = true;
-        if (ripple.$rippleWaveEl.hasClass('ripple-wave-in')) {
-          ripple.out();
-        }
-      }
-    };
-
-    var TouchRipple = {
-      name: 'touch-ripple',
-      static: {
-        TouchRipple: TouchRipple$1
-      },
-      create() {
-        const app = this;
-        app.touchRipple = {
-          create() {
-            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-              args[_key] = arguments[_key];
-            }
-            return new TouchRipple$1(...args);
-          }
-        };
-      }
-    };
-
-    const openedModals = [];
-    const dialogsQueue = [];
-    function clearDialogsQueue() {
-      if (dialogsQueue.length === 0) return;
-      const dialog = dialogsQueue.shift();
-      dialog.open();
-    }
-    let Modal$1 = class Modal extends Framework7Class {
-      constructor(app, params) {
-        super(params, [app]);
-        const modal = this;
-        const defaults = {};
-
-        // Extend defaults with modules params
-        modal.useModulesParams(defaults);
-        modal.params = extend$3(defaults, params);
-        modal.opened = false;
-        let $containerEl = modal.params.containerEl ? $(modal.params.containerEl).eq(0) : app.$el;
-        if (!$containerEl.length) $containerEl = app.$el;
-        modal.$containerEl = $containerEl;
-        modal.containerEl = $containerEl[0];
-
-        // Install Modules
-        modal.useModules();
-        return this;
-      }
-      onOpen() {
-        const modal = this;
-        modal.opened = true;
-        openedModals.push(modal);
-        $('html').addClass(`with-modal-${modal.type.toLowerCase()}`);
-        modal.$el.trigger(`modal:open ${modal.type.toLowerCase()}:open`);
-        modal.emit(`local::open modalOpen ${modal.type}Open`, modal);
-      }
-      onOpened() {
-        const modal = this;
-        modal.$el.trigger(`modal:opened ${modal.type.toLowerCase()}:opened`);
-        modal.emit(`local::opened modalOpened ${modal.type}Opened`, modal);
-      }
-      onClose() {
-        const modal = this;
-        modal.opened = false;
-        if (!modal.type || !modal.$el) return;
-        openedModals.splice(openedModals.indexOf(modal), 1);
-        $('html').removeClass(`with-modal-${modal.type.toLowerCase()}`);
-        modal.$el.trigger(`modal:close ${modal.type.toLowerCase()}:close`);
-        modal.emit(`local::close modalClose ${modal.type}Close`, modal);
-      }
-      onClosed() {
-        const modal = this;
-        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);
-      }
-      open(animateModal, force) {
-        const modal = this;
-        const document = getDocument$1();
-        const app = modal.app;
-        const $el = modal.$el;
-        const $backdropEl = modal.$backdropEl;
-        const type = modal.type;
-        let animate = true;
-        if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
-          animate = modal.params.animate;
-        }
-        if (!$el || $el.hasClass('modal-in')) {
-          if (animateModal === false && $el[0] && type !== 'dialog') {
-            $el[0].style.display = 'block';
-          }
-          if (!force) return modal;
-        }
-        if (type === 'dialog' && app.params.modal.queueDialogs) {
-          let pushToQueue;
-          if ($('.dialog.modal-in').length > 0) {
-            pushToQueue = true;
-          } else if (openedModals.length > 0) {
-            openedModals.forEach(openedModal => {
-              if (openedModal.type === 'dialog') pushToQueue = true;
-            });
-          }
-          if (pushToQueue) {
-            dialogsQueue.push(modal);
-            return modal;
-          }
-        }
-        const $modalParentEl = $el.parent();
-        const wasInDom = $el.parents(document).length > 0;
-        if (!$modalParentEl.is(modal.$containerEl)) {
-          modal.$containerEl.append($el);
-          modal.once(`${type}Closed`, () => {
-            if (wasInDom) {
-              $modalParentEl.append($el);
-            } else {
-              $el.remove();
-            }
-          });
-        }
-        // Show Modal
-        $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() {
-          if ($el.hasClass('modal-out')) {
-            modal.onClosed();
-          } else if ($el.hasClass('modal-in')) {
-            modal.onOpened();
-          }
-        }
-        if (animate) {
-          if ($backdropEl) {
-            $backdropEl.removeClass('not-animated');
-            $backdropEl.addClass('backdrop-in');
-          }
-          $el.animationEnd(() => {
-            transitionEnd();
-          });
-          $el.transitionEnd(() => {
-            transitionEnd();
-          });
-          $el.removeClass('modal-out not-animated').addClass('modal-in');
-          modal.onOpen();
-        } else {
-          if ($backdropEl) {
-            $backdropEl.addClass('backdrop-in not-animated');
-          }
-          $el.removeClass('modal-out').addClass('modal-in not-animated');
-          modal.onOpen();
-          modal.onOpened();
-        }
-        return modal;
-      }
-      close(animateModal) {
-        const modal = this;
-        const $el = modal.$el;
-        const $backdropEl = modal.$backdropEl;
-        let animate = true;
-        if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
-          animate = modal.params.animate;
-        }
-        if (!$el || !$el.hasClass('modal-in')) {
-          if (dialogsQueue.indexOf(modal) >= 0) {
-            dialogsQueue.splice(dialogsQueue.indexOf(modal), 1);
-          }
-          return modal;
-        }
-
-        // backdrop
-        if ($backdropEl) {
-          let needToHideBackdrop = true;
-          if (modal.type === 'popup') {
-            modal.$el.prevAll('.popup.modal-in').add(modal.$el.nextAll('.popup.modal-in')).each(popupEl => {
-              const popupInstance = popupEl.f7Modal;
-              if (!popupInstance) return;
-              if (popupInstance.params.closeByBackdropClick && popupInstance.params.backdrop && popupInstance.backdropEl === modal.backdropEl) {
-                needToHideBackdrop = false;
-              }
-            });
-          }
-          if (needToHideBackdrop) {
-            $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
-            $backdropEl.removeClass('backdrop-in');
-          }
-        }
-
-        // Modal
-        $el[animate ? 'removeClass' : 'addClass']('not-animated');
-        function transitionEnd() {
-          if ($el.hasClass('modal-out')) {
-            modal.onClosed();
-          } else if ($el.hasClass('modal-in')) {
-            modal.onOpened();
-          }
-        }
-        if (animate) {
-          $el.animationEnd(() => {
-            transitionEnd();
-          });
-          $el.transitionEnd(() => {
-            transitionEnd();
-          });
-          $el.removeClass('modal-in').addClass('modal-out');
-          // Emit close
-          modal.onClose();
-        } else {
-          $el.addClass('not-animated').removeClass('modal-in').addClass('modal-out');
-          // Emit close
-          modal.onClose();
-          modal.onClosed();
-        }
-        if (modal.type === 'dialog') {
-          clearDialogsQueue();
-        }
-        return modal;
-      }
-      destroy() {
-        const modal = this;
-        if (modal.destroyed) return;
-        modal.emit(`local::beforeDestroy modalBeforeDestroy ${modal.type}BeforeDestroy`, modal);
-        if (modal.$el) {
-          modal.$el.trigger(`modal:beforedestroy ${modal.type.toLowerCase()}:beforedestroy`);
-          if (modal.$el.length && modal.$el[0].f7Modal) {
-            delete modal.$el[0].f7Modal;
-          }
-        }
-        deleteProps$1(modal);
-        modal.destroyed = true;
-      }
-    };
-
-    class CustomModal extends Modal$1 {
-      constructor(app, params) {
-        const extendedParams = extend$3({
-          backdrop: true,
-          closeByBackdropClick: true,
-          on: {}
-        }, params);
-
-        // Extends with open/close Modal methods;
-        super(app, extendedParams);
-        const customModal = this;
-        customModal.params = extendedParams;
-
-        // Find Element
-        let $el;
-        if (!customModal.params.el) {
-          $el = $(customModal.params.content);
-        } else {
-          $el = $(customModal.params.el);
-        }
-        if ($el && $el.length > 0 && $el[0].f7Modal) {
-          return $el[0].f7Modal;
-        }
-        if ($el.length === 0) {
-          return customModal.destroy();
-        }
-        let $backdropEl;
-        if (customModal.params.backdrop) {
-          $backdropEl = app.$el.children('.custom-modal-backdrop');
-          if ($backdropEl.length === 0) {
-            $backdropEl = $('<div class="custom-modal-backdrop"></div>');
-            app.$el.append($backdropEl);
-          }
-        }
-        function handleClick(e) {
-          if (!customModal || customModal.destroyed) return;
-          if ($backdropEl && e.target === $backdropEl[0]) {
-            customModal.close();
-          }
-        }
-        customModal.on('customModalOpened', () => {
-          if (customModal.params.closeByBackdropClick && customModal.params.backdrop) {
-            app.on('click', handleClick);
-          }
-        });
-        customModal.on('customModalClose', () => {
-          if (customModal.params.closeByBackdropClick && customModal.params.backdrop) {
-            app.off('click', handleClick);
-          }
-        });
-        extend$3(customModal, {
-          app,
-          $el,
-          el: $el[0],
-          $backdropEl,
-          backdropEl: $backdropEl && $backdropEl[0],
-          type: 'customModal'
-        });
-        $el[0].f7Modal = customModal;
-        return customModal;
-      }
-    }
-
-    var Modal = {
-      name: 'modal',
-      static: {
-        Modal: Modal$1,
-        CustomModal
-      },
-      create() {
-        const app = this;
-        app.customModal = {
-          create(params) {
-            return new CustomModal(app, params);
+            app.toolbarNew.init(vnode.elm);
+          },
+          destroy(vnode) {
+            const app = this;
+            app.toolbarNew.destroy(vnode.elm);
           }
-        };
-      },
-      params: {
-        modal: {
-          queueDialogs: true
         }
       }
     };
@@ -18582,7 +20479,6 @@
         let $overswipeRightButton;
         let overswipeLeft;
         let overswipeRight;
-        const isIOS = app.theme === 'ios';
         function handleTouchStart(e) {
           if (!app.swipeout.allow) return;
           isMoved = false;
@@ -18717,7 +20613,7 @@
               buttonOffset = buttonEl.f7SwipeoutButtonOffset;
               const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
               if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') {
-                if (isIOS) {
+                if (app.theme === 'ios') {
                   const newWidth = overswipeRight ? buttonWidth + buttonOffset - 8 : buttonWidth;
                   const diff = newWidth - buttonWidth;
                   $buttonEl.css({
@@ -18743,7 +20639,7 @@
                   $buttonEl.removeClass('swipeout-overswipe-active');
                 }
               }
-              if (isIOS) {
+              if (app.theme === 'ios') {
                 const buttonEndPos = actionsRightWidth - buttonOffset;
                 const buttonStartPos = actionsRightWidth - buttonOffset - buttonWidth;
                 let buttonProgress = (-buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
@@ -18776,12 +20672,12 @@
                 $buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
               }
               if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
-                $buttonEl[0].f7SwipeoutButtonOffset = isIOS ? buttonEl.offsetLeft : actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
+                $buttonEl[0].f7SwipeoutButtonOffset = app.theme === 'ios' ? buttonEl.offsetLeft : actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
               }
               const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
               buttonOffset = buttonEl.f7SwipeoutButtonOffset;
               if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') {
-                if (isIOS) {
+                if (app.theme === 'ios') {
                   const newWidth = overswipeLeft ? actionsLeftWidth - 16 : buttonWidth;
                   const diff = newWidth - buttonWidth;
                   $buttonEl.css({
@@ -18810,7 +20706,7 @@
               if ($leftButtons.length > 1) {
                 $buttonEl.css('z-index', $leftButtons.length - index);
               }
-              if (isIOS) {
+              if (app.theme === 'ios') {
                 const buttonStartPos = buttonOffset;
                 const buttonEndPos = buttonStartPos + buttonWidth;
                 let buttonProgress = (buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
@@ -18860,7 +20756,7 @@
             $buttons = direction === 'to-left' ? $rightButtons : $leftButtons;
             if ($buttons) {
               for (i = 0; i < $buttons.length; i += 1) {
-                if (isIOS) {
+                if (app.theme === 'ios') {
                   $($buttons[i]).transform(`scale(1)`);
                 } else {
                   $($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
@@ -18889,7 +20785,7 @@
               if (typeof buttonOffset === 'undefined') {
                 $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
               }
-              if (isIOS) {
+              if (app.theme === 'ios') {
                 $buttonEl.transform(`scale(0)`);
               } else {
                 $buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
@@ -18903,7 +20799,7 @@
               if (typeof buttonOffset === 'undefined') {
                 $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
               }
-              if (isIOS) {
+              if (app.theme === 'ios') {
                 $buttonEl.transform(`scale(0)`);
               } else {
                 $buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);
@@ -20443,6 +22339,11 @@
             if (hasHighlight) {
               app.toolbar.setHighlight($tabbarEl);
             }
+            // Toolbar New Highlight
+            const $tabbarNewEl = $tabLinkEl.parents('.tabbar-new, .tabbar-new-icons');
+            if (app.toolbarNew && $tabbarNewEl.length > 0) {
+              app.toolbarNew.setHighlight($tabbarNewEl);
+            }
           }
         }
         return {
@@ -50010,7 +51911,7 @@
     // UMD_ONLY_END
 
     Router.use([RouterComponentLoaderModule]);
-    Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar$1, View, Navbar$1, Toolbar$1, Subnavbar, TouchRipple, Modal, 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$1, Calendar, Picker, InfiniteScroll$1, PullToRefresh, DataTable, Fab$1, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, ColorPicker, Treeview$1, TextEditor, PieChart, AreaChart, Breadcrumbs$1, Typography]);
+    Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar$1, View, Navbar$2, NavbarNew, SearchbarNew, Toolbar$1, ToolbarNew$1, Subnavbar, TouchRipple, Modal, 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$1, Calendar, Picker, InfiniteScroll$1, PullToRefresh, DataTable, Fab$1, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, ColorPicker, Treeview$1, TextEditor, PieChart, AreaChart, Breadcrumbs$1, Typography]);
 
     return Framework7;