framework7 6.3.4 → 7.0.0-beta.3

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

@@ -1,13 +1,3 @@
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 /* eslint "no-useless-escape": "off" */
 import $ from '../../shared/dom7';
 import { extend, id, nextTick, deleteProps, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils';
@@ -17,23 +7,13 @@ import Framework7Class from '../../shared/class';
 
 import $jsx from '../../shared/$jsx';
 
-var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Autocomplete, _Framework7Class);
-
-  function Autocomplete(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var ac = _assertThisInitialized(_this);
-
+class Autocomplete extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const ac = this;
     ac.app = app;
-    var device = getDevice();
-    var defaults = extend({
+    const device = getDevice();
+    const defaults = extend({
       on: {}
     }, app.params.autocomplete);
 
@@ -44,22 +24,22 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
     ac.useModulesParams(defaults);
     ac.params = extend(defaults, params);
-    var $openerEl;
+    let $openerEl;
 
     if (ac.params.openerEl) {
       $openerEl = $(ac.params.openerEl);
       if ($openerEl.length) $openerEl[0].f7Autocomplete = ac;
     }
 
-    var $inputEl;
+    let $inputEl;
 
     if (ac.params.inputEl) {
       $inputEl = $(ac.params.inputEl);
       if ($inputEl.length) $inputEl[0].f7Autocomplete = ac;
     }
 
-    var uniqueId = id();
-    var url = params.url;
+    const uniqueId = id();
+    let url = params.url;
 
     if (!url && $openerEl && $openerEl.length) {
       if ($openerEl.attr('href')) url = $openerEl.attr('href');else if ($openerEl.find('a').length > 0) {
@@ -68,42 +48,42 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (!url || url === '#' || url === '') url = ac.params.url;
-    var inputType = ac.params.multiple ? 'checkbox' : 'radio';
+    const inputType = ac.params.multiple ? 'checkbox' : 'radio';
     extend(ac, {
-      $openerEl: $openerEl,
+      $openerEl,
       openerEl: $openerEl && $openerEl[0],
-      $inputEl: $inputEl,
+      $inputEl,
       inputEl: $inputEl && $inputEl[0],
       id: uniqueId,
-      url: url,
+      url,
       value: ac.params.value || [],
-      inputType: inputType,
-      inputName: inputType + "-" + uniqueId,
+      inputType,
+      inputName: `${inputType}-${uniqueId}`,
       $modalEl: undefined,
       $dropdownEl: undefined
     });
-    var previousQuery = '';
+    let previousQuery = '';
 
     function onInputChange() {
-      var query = ac.$inputEl.val().trim();
+      let query = ac.$inputEl.val().trim();
       if (!ac.params.source) return;
-      ac.params.source.call(ac, query, function (items) {
-        var itemsHTML = '';
-        var limit = ac.params.limit ? Math.min(ac.params.limit, items.length) : items.length;
+      ac.params.source.call(ac, query, items => {
+        let itemsHTML = '';
+        const limit = ac.params.limit ? Math.min(ac.params.limit, items.length) : items.length;
         ac.items = items;
-        var regExp;
+        let regExp;
 
         if (ac.params.highlightMatches) {
           query = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
-          regExp = new RegExp("(" + query + ")", 'i');
+          regExp = new RegExp(`(${query})`, 'i');
         }
 
-        var firstValue;
-        var firstItem;
+        let firstValue;
+        let firstItem;
 
-        for (var i = 0; i < limit; i += 1) {
-          var itemValue = typeof items[i] === 'object' ? items[i][ac.params.valueProperty] : items[i];
-          var itemText = typeof items[i] === 'object' ? items[i][ac.params.textProperty] : items[i];
+        for (let i = 0; i < limit; i += 1) {
+          const itemValue = typeof items[i] === 'object' ? items[i][ac.params.valueProperty] : items[i];
+          const itemText = typeof items[i] === 'object' ? items[i][ac.params.textProperty] : items[i];
 
           if (i === 0) {
             firstValue = itemValue;
@@ -147,7 +127,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
           $inputEl.val(firstValue);
           $inputEl[0].setSelectionRange(query.length, firstValue.length);
-          var previousValue = typeof ac.value[0] === 'object' ? ac.value[0][ac.params.valueProperty] : ac.value[0];
+          const previousValue = typeof ac.value[0] === 'object' ? ac.value[0][ac.params.valueProperty] : ac.value[0];
 
           if (!previousValue || firstValue.toLowerCase() !== previousValue.toLowerCase()) {
             ac.value = [firstItem];
@@ -160,16 +140,16 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     function onPageInputChange() {
-      var inputEl = this;
-      var value = inputEl.value;
-      var isValues = $(inputEl).parents('.autocomplete-values').length > 0;
-      var item;
-      var itemValue;
-      var aValue;
+      const inputEl = this;
+      const value = inputEl.value;
+      const isValues = $(inputEl).parents('.autocomplete-values').length > 0;
+      let item;
+      let itemValue;
+      let aValue;
 
       if (isValues) {
         if (ac.inputType === 'checkbox' && !inputEl.checked) {
-          for (var i = 0; i < ac.value.length; i += 1) {
+          for (let i = 0; i < ac.value.length; i += 1) {
             aValue = typeof ac.value[i] === 'string' ? ac.value[i] : ac.value[i][ac.params.valueProperty];
 
             if (aValue === value || aValue * 1 === value * 1) {
@@ -185,9 +165,9 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
       } // Find Related Item
 
 
-      for (var _i = 0; _i < ac.items.length; _i += 1) {
-        itemValue = typeof ac.items[_i] === 'object' ? ac.items[_i][ac.params.valueProperty] : ac.items[_i];
-        if (itemValue === value || itemValue * 1 === value * 1) item = ac.items[_i];
+      for (let i = 0; i < ac.items.length; i += 1) {
+        itemValue = typeof ac.items[i] === 'object' ? ac.items[i][ac.params.valueProperty] : ac.items[i];
+        if (itemValue === value || itemValue * 1 === value * 1) item = ac.items[i];
       }
 
       if (ac.inputType === 'radio') {
@@ -195,11 +175,11 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
       } else if (inputEl.checked) {
         ac.value.push(item);
       } else {
-        for (var _i2 = 0; _i2 < ac.value.length; _i2 += 1) {
-          aValue = typeof ac.value[_i2] === 'object' ? ac.value[_i2][ac.params.valueProperty] : ac.value[_i2];
+        for (let i = 0; i < ac.value.length; i += 1) {
+          aValue = typeof ac.value[i] === 'object' ? ac.value[i][ac.params.valueProperty] : ac.value[i];
 
           if (aValue === value || aValue * 1 === value * 1) {
-            ac.value.splice(_i2, 1);
+            ac.value.splice(i, 1);
           }
         }
       } // Update Values Block
@@ -213,7 +193,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     function onHtmlClick(e) {
-      var $targetEl = $(e.target);
+      const $targetEl = $(e.target);
       if ($targetEl.is(ac.$inputEl[0]) || ac.$dropdownEl && $targetEl.closest(ac.$dropdownEl[0]).length) return;
       ac.close();
     }
@@ -228,7 +208,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
     function onInputBlur() {
       if (ac.$dropdownEl.find('label.active-state').length > 0) return;
-      setTimeout(function () {
+      setTimeout(() => {
         ac.close();
       }, 0);
     }
@@ -249,7 +229,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
       if (e.keyCode === 13) {
         // Enter
-        var $selectedItemLabel = ac.$dropdownEl.find('.autocomplete-dropdown-selected label');
+        const $selectedItemLabel = ac.$dropdownEl.find('.autocomplete-dropdown-selected label');
 
         if ($selectedItemLabel.length) {
           e.preventDefault();
@@ -268,8 +248,8 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
       if (e.keyCode !== 40 && e.keyCode !== 38) return;
       e.preventDefault();
-      var $selectedItem = ac.$dropdownEl.find('.autocomplete-dropdown-selected');
-      var $newItem;
+      const $selectedItem = ac.$dropdownEl.find('.autocomplete-dropdown-selected');
+      let $newItem;
 
       if ($selectedItem.length) {
         $newItem = $selectedItem[e.keyCode === 40 ? 'next' : 'prev']('li');
@@ -287,12 +267,12 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     function onDropdownClick() {
-      var $clickedEl = $(this);
-      var clickedItem;
+      const $clickedEl = $(this);
+      let clickedItem;
 
-      for (var i = 0; i < ac.items.length; i += 1) {
-        var itemValue = typeof ac.items[i] === 'object' ? ac.items[i][ac.params.valueProperty] : ac.items[i];
-        var value = $clickedEl.attr('data-value');
+      for (let i = 0; i < ac.items.length; i += 1) {
+        const itemValue = typeof ac.items[i] === 'object' ? ac.items[i][ac.params.valueProperty] : ac.items[i];
+        const value = $clickedEl.attr('data-value');
 
         if (itemValue === value || itemValue * 1 === value * 1) {
           clickedItem = ac.items[i];
@@ -361,8 +341,8 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
       ac.$el.on('change', 'input[type="radio"], input[type="checkbox"]', onPageInputChange);
 
       if (ac.params.closeOnSelect && !ac.params.multiple) {
-        ac.$el.once('click', '.list label', function () {
-          nextTick(function () {
+        ac.$el.once('click', '.list label', () => {
+          nextTick(() => {
             ac.close();
           });
         });
@@ -377,73 +357,94 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     ac.useModules(); // Init
 
     ac.init();
-    return ac || _assertThisInitialized(_this);
+    return ac;
   }
 
-  var _proto = Autocomplete.prototype;
+  get view() {
+    const ac = this;
+    const {
+      $openerEl,
+      $inputEl,
+      app
+    } = ac;
+    let view;
+
+    if (ac.params.view) {
+      view = ac.params.view;
+    } else if ($openerEl || $inputEl) {
+      const $el = $openerEl || $inputEl;
+      view = $el.closest('.view').length && $el.closest('.view')[0].f7View;
+    }
 
-  _proto.positionDropdown = function positionDropdown() {
-    var _$dropdownEl$children;
+    if (!view) view = app.views.main;
+    return view;
+  }
 
-    var ac = this;
-    var $inputEl = ac.$inputEl,
-        app = ac.app,
-        $dropdownEl = ac.$dropdownEl;
-    var $pageContentEl = $inputEl.parents('.page-content');
+  positionDropdown() {
+    const ac = this;
+    const {
+      $inputEl,
+      app,
+      $dropdownEl
+    } = ac;
+    const $pageContentEl = $inputEl.parents('.page-content');
     if ($pageContentEl.length === 0) return;
-    var inputOffset = $inputEl.offset();
-    var inputOffsetWidth = $inputEl[0].offsetWidth;
-    var inputOffsetHeight = $inputEl[0].offsetHeight;
-    var $listEl = $inputEl.parents('.list');
-    var $listParent;
-    $listEl.parents().each(function (parentEl) {
+    const inputOffset = $inputEl.offset();
+    const inputOffsetWidth = $inputEl[0].offsetWidth;
+    const inputOffsetHeight = $inputEl[0].offsetHeight;
+    const $listEl = $inputEl.parents('.list');
+    let $listParent;
+    $listEl.parents().each(parentEl => {
       if ($listParent) return;
-      var $parentEl = $(parentEl);
+      const $parentEl = $(parentEl);
       if ($parentEl.parent($pageContentEl).length) $listParent = $parentEl;
     });
-    var listOffset = $listEl.offset();
-    var paddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
-    var listOffsetLeft = $listEl.length > 0 ? listOffset.left - $pageContentEl.offset().left : 0;
-    var inputOffsetLeft = inputOffset.left - ($listEl.length > 0 ? listOffset.left : 0) - (app.rtl ? 0 : 0);
-    var inputOffsetTop = inputOffset.top - ($pageContentEl.offset().top - $pageContentEl[0].scrollTop);
-    var maxHeight = $pageContentEl[0].scrollHeight - paddingBottom - (inputOffsetTop + $pageContentEl[0].scrollTop) - $inputEl[0].offsetHeight;
-    var paddingProp = app.rtl ? 'padding-right' : 'padding-left';
-    var paddingValue;
+    const listOffset = $listEl.offset();
+    const paddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
+    const listOffsetLeft = $listEl.length > 0 ? listOffset.left - $pageContentEl.offset().left : 0;
+    const inputOffsetLeft = inputOffset.left - ($listEl.length > 0 ? listOffset.left : 0) - (app.rtl ? 0 : 0);
+    const inputOffsetTop = inputOffset.top - ($pageContentEl.offset().top - $pageContentEl[0].scrollTop);
+    const maxHeight = $pageContentEl[0].scrollHeight - paddingBottom - (inputOffsetTop + $pageContentEl[0].scrollTop) - $inputEl[0].offsetHeight;
+    const paddingProp = app.rtl ? 'padding-right' : 'padding-left';
+    let paddingValue;
 
     if ($listEl.length && !ac.params.expandInput) {
       paddingValue = (app.rtl ? $listEl[0].offsetWidth - inputOffsetLeft - inputOffsetWidth : inputOffsetLeft) - (app.theme === 'md' ? 16 : 15);
     }
 
     $dropdownEl.css({
-      left: ($listEl.length > 0 ? listOffsetLeft : inputOffsetLeft) + "px",
-      top: inputOffsetTop + $pageContentEl[0].scrollTop + inputOffsetHeight + "px",
-      width: ($listEl.length > 0 ? $listEl[0].offsetWidth : inputOffsetWidth) + "px"
+      left: `${$listEl.length > 0 ? listOffsetLeft : inputOffsetLeft}px`,
+      top: `${inputOffsetTop + $pageContentEl[0].scrollTop + inputOffsetHeight}px`,
+      width: `${$listEl.length > 0 ? $listEl[0].offsetWidth : inputOffsetWidth}px`
     });
-    $dropdownEl.children('.autocomplete-dropdown-inner').css((_$dropdownEl$children = {
-      maxHeight: maxHeight + "px"
-    }, _$dropdownEl$children[paddingProp] = $listEl.length > 0 && !ac.params.expandInput ? paddingValue + "px" : '', _$dropdownEl$children));
-  };
+    $dropdownEl.children('.autocomplete-dropdown-inner').css({
+      maxHeight: `${maxHeight}px`,
+      [paddingProp]: $listEl.length > 0 && !ac.params.expandInput ? `${paddingValue}px` : ''
+    });
+  }
 
-  _proto.focus = function focus() {
-    var ac = this;
+  focus() {
+    const ac = this;
     ac.$el.find('input[type=search]').focus();
-  };
+  }
 
-  _proto.source = function source(query) {
-    var ac = this;
+  source(query) {
+    const ac = this;
     if (!ac.params.source) return;
-    var $el = ac.$el;
-    ac.params.source.call(ac, query, function (items) {
-      var itemsHTML = '';
-      var limit = ac.params.limit ? Math.min(ac.params.limit, items.length) : items.length;
+    const {
+      $el
+    } = ac;
+    ac.params.source.call(ac, query, items => {
+      let itemsHTML = '';
+      const limit = ac.params.limit ? Math.min(ac.params.limit, items.length) : items.length;
       ac.items = items;
 
-      for (var i = 0; i < limit; i += 1) {
-        var selected = false;
-        var itemValue = typeof items[i] === 'object' ? items[i][ac.params.valueProperty] : items[i];
+      for (let i = 0; i < limit; i += 1) {
+        let selected = false;
+        const itemValue = typeof items[i] === 'object' ? items[i][ac.params.valueProperty] : items[i];
 
-        for (var j = 0; j < ac.value.length; j += 1) {
-          var aValue = typeof ac.value[j] === 'object' ? ac.value[j][ac.params.valueProperty] : ac.value[j];
+        for (let j = 0; j < ac.value.length; j += 1) {
+          const aValue = typeof ac.value[j] === 'object' ? ac.value[j][ac.params.valueProperty] : ac.value[j];
           if (aValue === itemValue || aValue * 1 === itemValue * 1) selected = true;
         }
 
@@ -453,7 +454,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
           inputType: ac.inputType,
           id: ac.id,
           inputName: ac.inputName,
-          selected: selected
+          selected
         }, i);
       }
 
@@ -472,60 +473,60 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
         $el.find('.autocomplete-not-found, .autocomplete-values').hide();
       }
     });
-  };
+  }
 
-  _proto.updateValues = function updateValues() {
-    var ac = this;
-    var valuesHTML = '';
+  updateValues() {
+    const ac = this;
+    let valuesHTML = '';
 
-    for (var i = 0; i < ac.value.length; i += 1) {
+    for (let i = 0; i < ac.value.length; i += 1) {
       valuesHTML += ac.renderItem({
         value: typeof ac.value[i] === 'object' ? ac.value[i][ac.params.valueProperty] : ac.value[i],
         text: typeof ac.value[i] === 'object' ? ac.value[i][ac.params.textProperty] : ac.value[i],
         inputType: ac.inputType,
         id: ac.id,
-        inputName: ac.inputName + "-checked}",
+        inputName: `${ac.inputName}-checked}`,
         selected: true
       }, i);
     }
 
     ac.$el.find('.autocomplete-values ul').html(valuesHTML);
-  };
+  }
 
-  _proto.preloaderHide = function preloaderHide() {
-    var ac = this;
+  preloaderHide() {
+    const ac = this;
 
     if (ac.params.openIn === 'dropdown' && ac.$dropdownEl) {
       ac.$dropdownEl.find('.autocomplete-preloader').removeClass('autocomplete-preloader-visible');
     } else {
       $('.autocomplete-preloader').removeClass('autocomplete-preloader-visible');
     }
-  };
+  }
 
-  _proto.preloaderShow = function preloaderShow() {
-    var ac = this;
+  preloaderShow() {
+    const ac = this;
 
     if (ac.params.openIn === 'dropdown' && ac.$dropdownEl) {
       ac.$dropdownEl.find('.autocomplete-preloader').addClass('autocomplete-preloader-visible');
     } else {
       $('.autocomplete-preloader').addClass('autocomplete-preloader-visible');
     }
-  };
-
-  _proto.renderPreloader = function renderPreloader() {
-    var ac = this;
-    var preloaders = {
-      iosPreloaderContent: iosPreloaderContent,
-      mdPreloaderContent: mdPreloaderContent,
-      auroraPreloaderContent: auroraPreloaderContent
+  }
+
+  renderPreloader() {
+    const ac = this;
+    const preloaders = {
+      iosPreloaderContent,
+      mdPreloaderContent,
+      auroraPreloaderContent
     };
     return $jsx("div", {
-      class: "autocomplete-preloader preloader " + (ac.params.preloaderColor ? "color-" + ac.params.preloaderColor : '')
-    }, preloaders[ac.app.theme + "PreloaderContent"] || '');
-  };
+      class: `autocomplete-preloader preloader ${ac.params.preloaderColor ? `color-${ac.params.preloaderColor}` : ''}`
+    }, preloaders[`${ac.app.theme}PreloaderContent`] || '');
+  }
 
-  _proto.renderSearchbar = function renderSearchbar() {
-    var ac = this;
+  renderSearchbar() {
+    const ac = this;
     if (ac.params.renderSearchbar) return ac.params.renderSearchbar.call(ac);
     return $jsx("form", {
       class: "searchbar"
@@ -544,23 +545,23 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     })), ac.params.searchbarDisableButton && $jsx("span", {
       class: "searchbar-disable-button"
     }, ac.params.searchbarDisableText)));
-  };
+  }
 
-  _proto.renderItem = function renderItem(item, index) {
-    var ac = this;
+  renderItem(item, index) {
+    const ac = this;
     if (ac.params.renderItem) return ac.params.renderItem.call(ac, item, index);
-    var itemValue = item.value && typeof item.value === 'string' ? item.value.replace(/"/g, '&quot;') : item.value;
+    const itemValue = item.value && typeof item.value === 'string' ? item.value.replace(/"/g, '&quot;') : item.value;
 
     if (ac.params.openIn !== 'dropdown') {
       return $jsx("li", null, $jsx("label", {
-        class: "item-" + item.inputType + " item-content"
+        class: `item-${item.inputType} item-content`
       }, $jsx("input", {
         type: item.inputType,
         name: item.inputName,
         value: itemValue,
         _checked: item.selected
       }), $jsx("i", {
-        class: "icon icon-" + item.inputType
+        class: `icon icon-${item.inputType}`
       }), $jsx("div", {
         class: "item-inner"
       }, $jsx("div", {
@@ -590,20 +591,20 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }, $jsx("div", {
       class: "item-title"
     }, item.text))));
-  };
+  }
 
-  _proto.renderNavbar = function renderNavbar() {
-    var ac = this;
+  renderNavbar() {
+    const ac = this;
     if (ac.params.renderNavbar) return ac.params.renderNavbar.call(ac);
-    var pageTitle = ac.params.pageTitle;
+    let pageTitle = ac.params.pageTitle;
 
     if (typeof pageTitle === 'undefined' && ac.$openerEl && ac.$openerEl.length) {
       pageTitle = ac.$openerEl.find('.item-title').text().trim();
     }
 
-    var inPopup = ac.params.openIn === 'popup'; // eslint-disable-next-line
+    const inPopup = ac.params.openIn === 'popup'; // eslint-disable-next-line
 
-    var navbarLeft = inPopup ? ac.params.preloader && $jsx("div", {
+    const navbarLeft = inPopup ? ac.params.preloader && $jsx("div", {
       class: "left"
     }, ac.renderPreloader()) : $jsx("div", {
       class: "left sliding"
@@ -614,7 +615,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }), $jsx("span", {
       class: "if-not-md"
     }, ac.params.pageBackLinkText)));
-    var navbarRight = inPopup ? $jsx("div", {
+    const navbarRight = inPopup ? $jsx("div", {
       class: "right"
     }, $jsx("a", {
       class: "link popup-close",
@@ -623,32 +624,32 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
       class: "right"
     }, ac.renderPreloader());
     return $jsx("div", {
-      class: "navbar " + (ac.params.navbarColorTheme ? "color-" + ac.params.navbarColorTheme : '')
+      class: `navbar ${ac.params.navbarColorTheme ? `color-${ac.params.navbarColorTheme}` : ''}`
     }, $jsx("div", {
       class: "navbar-bg"
     }), $jsx("div", {
-      class: "navbar-inner " + (ac.params.navbarColorTheme ? "color-" + ac.params.navbarColorTheme : '')
+      class: `navbar-inner ${ac.params.navbarColorTheme ? `color-${ac.params.navbarColorTheme}` : ''}`
     }, navbarLeft, pageTitle && $jsx("div", {
       class: "title sliding"
     }, pageTitle), navbarRight, $jsx("div", {
       class: "subnavbar sliding"
     }, ac.renderSearchbar())));
-  };
+  }
 
-  _proto.renderDropdown = function renderDropdown() {
-    var ac = this;
+  renderDropdown() {
+    const ac = this;
     if (ac.params.renderDropdown) return ac.params.renderDropdown.call(ac, ac.items);
     return $jsx("div", {
       class: "autocomplete-dropdown"
     }, $jsx("div", {
       class: "autocomplete-dropdown-inner"
     }, $jsx("div", {
-      class: "list " + (!ac.params.expandInput ? 'no-safe-areas' : '')
+      class: `list ${!ac.params.expandInput ? 'no-safe-areas' : ''}`
     }, $jsx("ul", null))), ac.params.preloader && ac.renderPreloader());
-  };
+  }
 
-  _proto.renderPage = function renderPage(inPopup) {
-    var ac = this;
+  renderPage(inPopup) {
+    const ac = this;
     if (ac.params.renderPage) return ac.params.renderPage.call(ac, ac.items);
     return $jsx("div", {
       class: "page page-with-subnavbar autocomplete-page",
@@ -658,7 +659,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }), $jsx("div", {
       class: "page-content"
     }, $jsx("div", {
-      class: "list autocomplete-list autocomplete-found autocomplete-list-" + ac.id + " " + (ac.params.formColorTheme ? "color-" + ac.params.formColorTheme : '')
+      class: `list autocomplete-list autocomplete-found autocomplete-list-${ac.id} ${ac.params.formColorTheme ? `color-${ac.params.formColorTheme}` : ''}`
     }, $jsx("ul", null)), $jsx("div", {
       class: "list autocomplete-not-found"
     }, $jsx("ul", null, $jsx("li", {
@@ -670,22 +671,22 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }, ac.params.notFoundText))))), $jsx("div", {
       class: "list autocomplete-values"
     }, $jsx("ul", null))));
-  };
+  }
 
-  _proto.renderPopup = function renderPopup() {
-    var ac = this;
+  renderPopup() {
+    const ac = this;
     if (ac.params.renderPopup) return ac.params.renderPopup.call(ac, ac.items);
     return $jsx("div", {
       class: "popup autocomplete-popup"
     }, $jsx("div", {
       class: "view"
     }, ac.renderPage(true), ";"));
-  };
+  }
 
-  _proto.onOpen = function onOpen(type, el) {
-    var ac = this;
-    var app = ac.app;
-    var $el = $(el);
+  onOpen(type, el) {
+    const ac = this;
+    const app = ac.app;
+    const $el = $(el);
     ac.$el = $el;
     ac.el = $el[0];
     ac.openedIn = type;
@@ -697,7 +698,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
       ac.$inputEl.trigger('input');
     } else {
       // Init SB
-      var $searchbarEl = $el.find('.searchbar');
+      let $searchbarEl = $el.find('.searchbar');
 
       if (ac.params.openIn === 'page' && app.theme === 'ios' && $searchbarEl.length === 0) {
         $searchbarEl = $(app.navbar.getElByPage($el)).find('.searchbar');
@@ -708,7 +709,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
         backdropEl: $el.find('.searchbar-backdrop'),
         customSearch: true,
         on: {
-          search: function search(sb, query) {
+          search(sb, query) {
             if (query.length === 0 && ac.searchbar.enabled) {
               ac.searchbar.backdropShow();
             } else {
@@ -717,6 +718,7 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
             ac.source(query);
           }
+
         }
       }); // Attach page events
 
@@ -728,30 +730,30 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     ac.emit('local::open autocompleteOpen', ac);
-  };
+  }
 
-  _proto.autoFocus = function autoFocus() {
-    var ac = this;
+  autoFocus() {
+    const ac = this;
 
     if (ac.searchbar && ac.searchbar.$inputEl) {
       ac.searchbar.$inputEl.focus();
     }
 
     return ac;
-  };
+  }
 
-  _proto.onOpened = function onOpened() {
-    var ac = this;
+  onOpened() {
+    const ac = this;
 
     if (ac.params.openIn !== 'dropdown' && ac.params.autoFocus) {
       ac.autoFocus();
     }
 
     ac.emit('local::opened autocompleteOpened', ac);
-  };
+  }
 
-  _proto.onClose = function onClose() {
-    var ac = this;
+  onClose() {
+    const ac = this;
     if (ac.destroyed) return; // Destroy SB
 
     if (ac.searchbar && ac.searchbar.destroy) {
@@ -769,10 +771,10 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     ac.emit('local::close autocompleteClose', ac);
-  };
+  }
 
-  _proto.onClosed = function onClosed() {
-    var ac = this;
+  onClosed() {
+    const ac = this;
     if (ac.destroyed) return;
     ac.opened = false;
     ac.$el = null;
@@ -780,30 +782,34 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     delete ac.$el;
     delete ac.el;
     ac.emit('local::closed autocompleteClosed', ac);
-  };
+  }
 
-  _proto.openPage = function openPage() {
-    var ac = this;
+  openPage() {
+    const ac = this;
     if (ac.opened) return ac;
-    var pageHtml = ac.renderPage();
+    const pageHtml = ac.renderPage();
     ac.view.router.navigate({
       url: ac.url,
       route: {
         content: pageHtml,
         path: ac.url,
         on: {
-          pageBeforeIn: function pageBeforeIn(e, page) {
+          pageBeforeIn(e, page) {
             ac.onOpen('page', page.el);
           },
-          pageAfterIn: function pageAfterIn(e, page) {
+
+          pageAfterIn(e, page) {
             ac.onOpened('page', page.el);
           },
-          pageBeforeOut: function pageBeforeOut(e, page) {
+
+          pageBeforeOut(e, page) {
             ac.onClose('page', page.el);
           },
-          pageAfterOut: function pageAfterOut(e, page) {
+
+          pageAfterOut(e, page) {
             ac.onClosed('page', page.el);
           }
+
         },
         options: {
           animate: ac.params.animate
@@ -811,30 +817,34 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
       }
     });
     return ac;
-  };
+  }
 
-  _proto.openPopup = function openPopup() {
-    var ac = this;
+  openPopup() {
+    const ac = this;
     if (ac.opened) return ac;
-    var popupHtml = ac.renderPopup();
-    var popupParams = {
+    const popupHtml = ac.renderPopup();
+    const popupParams = {
       content: popupHtml,
       animate: ac.params.animate,
       push: ac.params.popupPush,
       swipeToClose: ac.params.popupSwipeToClose,
       on: {
-        popupOpen: function popupOpen(popup) {
+        popupOpen(popup) {
           ac.onOpen('popup', popup.el);
         },
-        popupOpened: function popupOpened(popup) {
+
+        popupOpened(popup) {
           ac.onOpened('popup', popup.el);
         },
-        popupClose: function popupClose(popup) {
+
+        popupClose(popup) {
           ac.onClose('popup', popup.el);
         },
-        popupClosed: function popupClosed(popup) {
+
+        popupClosed(popup) {
           ac.onClosed('popup', popup.el);
         }
+
       }
     };
 
@@ -851,22 +861,22 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return ac;
-  };
+  }
 
-  _proto.openDropdown = function openDropdown() {
-    var ac = this;
+  openDropdown() {
+    const ac = this;
 
     if (!ac.$dropdownEl) {
       ac.$dropdownEl = $(ac.renderDropdown());
     }
 
-    var $listEl = ac.$inputEl.parents('.list');
+    const $listEl = ac.$inputEl.parents('.list');
 
     if ($listEl.length && ac.$inputEl.parents('.item-content').length > 0 && ac.params.expandInput) {
       ac.$inputEl.parents('.item-content').addClass('item-content-dropdown-expanded');
     }
 
-    var $pageContentEl = ac.$inputEl.parents('.page-content');
+    const $pageContentEl = ac.$inputEl.parents('.page-content');
 
     if (ac.params.dropdownContainerEl) {
       $(ac.params.dropdownContainerEl).append(ac.$dropdownEl);
@@ -879,21 +889,21 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
     ac.onOpen('dropdown', ac.$dropdownEl);
     ac.onOpened('dropdown', ac.$dropdownEl);
-  };
+  }
 
-  _proto.open = function open() {
-    var ac = this;
+  open() {
+    const ac = this;
     if (ac.opened) return ac;
-    var openIn = ac.params.openIn;
-    ac["open" + openIn.split('').map(function (el, index) {
+    const openIn = ac.params.openIn;
+    ac[`open${openIn.split('').map((el, index) => {
       if (index === 0) return el.toUpperCase();
       return el;
-    }).join('')]();
+    }).join('')}`]();
     return ac;
-  };
+  }
 
-  _proto.close = function close() {
-    var ac = this;
+  close() {
+    const ac = this;
     if (!ac.opened) return ac;
 
     if (ac.params.openIn === 'dropdown') {
@@ -904,8 +914,8 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
         animate: ac.params.animate
       });
     } else {
-      ac.modal.once('modalClosed', function () {
-        nextTick(function () {
+      ac.modal.once('modalClosed', () => {
+        nextTick(() => {
           if (ac.destroyed) return;
           ac.modal.destroy();
           delete ac.modal;
@@ -915,15 +925,15 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return ac;
-  };
+  }
 
-  _proto.init = function init() {
-    var ac = this;
+  init() {
+    const ac = this;
     ac.attachEvents();
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var ac = this;
+  destroy() {
+    const ac = this;
     ac.emit('local::beforeDestroy autocompleteBeforeDestroy', ac);
     ac.detachEvents();
 
@@ -937,30 +947,8 @@ var Autocomplete = /*#__PURE__*/function (_Framework7Class) {
 
     deleteProps(ac);
     ac.destroyed = true;
-  };
-
-  _createClass(Autocomplete, [{
-    key: "view",
-    get: function get() {
-      var ac = this;
-      var $openerEl = ac.$openerEl,
-          $inputEl = ac.$inputEl,
-          app = ac.app;
-      var view;
-
-      if (ac.params.view) {
-        view = ac.params.view;
-      } else if ($openerEl || $inputEl) {
-        var $el = $openerEl || $inputEl;
-        view = $el.closest('.view').length && $el.closest('.view')[0].f7View;
-      }
-
-      if (!view) view = app.views.main;
-      return view;
-    }
-  }]);
+  }
 
-  return Autocomplete;
-}(Framework7Class);
+}
 
 export default Autocomplete;