framework7 6.3.4 → 7.0.0-beta.3

package/cjs/components/autocomplete/autocomplete-class.js

@@ -1,975 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../shared/dom7"));
-
-var _utils = require("../../shared/utils");
-
-var _getDevice = require("../../shared/get-device");
-
-var _class = _interopRequireDefault(require("../../shared/class"));
-
-var _$jsx = _interopRequireDefault(require("../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-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);
-
-    ac.app = app;
-    var device = (0, _getDevice.getDevice)();
-    var defaults = (0, _utils.extend)({
-      on: {}
-    }, app.params.autocomplete);
-
-    if (typeof defaults.searchbarDisableButton === 'undefined') {
-      defaults.searchbarDisableButton = app.theme !== 'aurora';
-    } // Extend defaults with modules params
-
-
-    ac.useModulesParams(defaults);
-    ac.params = (0, _utils.extend)(defaults, params);
-    var $openerEl;
-
-    if (ac.params.openerEl) {
-      $openerEl = (0, _dom.default)(ac.params.openerEl);
-      if ($openerEl.length) $openerEl[0].f7Autocomplete = ac;
-    }
-
-    var $inputEl;
-
-    if (ac.params.inputEl) {
-      $inputEl = (0, _dom.default)(ac.params.inputEl);
-      if ($inputEl.length) $inputEl[0].f7Autocomplete = ac;
-    }
-
-    var uniqueId = (0, _utils.id)();
-    var url = params.url;
-
-    if (!url && $openerEl && $openerEl.length) {
-      if ($openerEl.attr('href')) url = $openerEl.attr('href');else if ($openerEl.find('a').length > 0) {
-        url = $openerEl.find('a').attr('href');
-      }
-    }
-
-    if (!url || url === '#' || url === '') url = ac.params.url;
-    var inputType = ac.params.multiple ? 'checkbox' : 'radio';
-    (0, _utils.extend)(ac, {
-      $openerEl: $openerEl,
-      openerEl: $openerEl && $openerEl[0],
-      $inputEl: $inputEl,
-      inputEl: $inputEl && $inputEl[0],
-      id: uniqueId,
-      url: url,
-      value: ac.params.value || [],
-      inputType: inputType,
-      inputName: inputType + "-" + uniqueId,
-      $modalEl: undefined,
-      $dropdownEl: undefined
-    });
-    var previousQuery = '';
-
-    function onInputChange() {
-      var 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.items = items;
-        var regExp;
-
-        if (ac.params.highlightMatches) {
-          query = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
-          regExp = new RegExp("(" + query + ")", 'i');
-        }
-
-        var firstValue;
-        var 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];
-
-          if (i === 0) {
-            firstValue = itemValue;
-            firstItem = ac.items[i];
-          }
-
-          itemsHTML += ac.renderItem({
-            value: itemValue,
-            text: ac.params.highlightMatches ? itemText.replace(regExp, '<b>$1</b>') : itemText
-          }, i);
-        }
-
-        if (itemsHTML === '' && query === '' && ac.params.dropdownPlaceholderText) {
-          itemsHTML += ac.renderItem({
-            placeholder: true,
-            text: ac.params.dropdownPlaceholderText
-          });
-        }
-
-        ac.$dropdownEl.find('ul').html(itemsHTML);
-
-        if (ac.params.typeahead) {
-          if (!firstValue || !firstItem) {
-            return;
-          }
-
-          if (firstValue.toLowerCase().indexOf(query.toLowerCase()) !== 0) {
-            return;
-          }
-
-          if (previousQuery.toLowerCase() === query.toLowerCase()) {
-            ac.value = [];
-            return;
-          }
-
-          if (previousQuery.toLowerCase().indexOf(query.toLowerCase()) === 0) {
-            previousQuery = query;
-            ac.value = [];
-            return;
-          }
-
-          $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];
-
-          if (!previousValue || firstValue.toLowerCase() !== previousValue.toLowerCase()) {
-            ac.value = [firstItem];
-            ac.emit('local::change autocompleteChange', [firstItem]);
-          }
-        }
-
-        previousQuery = query;
-      });
-    }
-
-    function onPageInputChange() {
-      var inputEl = this;
-      var value = inputEl.value;
-      var isValues = (0, _dom.default)(inputEl).parents('.autocomplete-values').length > 0;
-      var item;
-      var itemValue;
-      var aValue;
-
-      if (isValues) {
-        if (ac.inputType === 'checkbox' && !inputEl.checked) {
-          for (var 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) {
-              ac.value.splice(i, 1);
-            }
-          }
-
-          ac.updateValues();
-          ac.emit('local::change autocompleteChange', ac.value);
-        }
-
-        return;
-      } // 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];
-      }
-
-      if (ac.inputType === 'radio') {
-        ac.value = [item];
-      } 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];
-
-          if (aValue === value || aValue * 1 === value * 1) {
-            ac.value.splice(_i2, 1);
-          }
-        }
-      } // Update Values Block
-
-
-      ac.updateValues(); // On Select Callback
-
-      if (ac.inputType === 'radio' && inputEl.checked || ac.inputType === 'checkbox') {
-        ac.emit('local::change autocompleteChange', ac.value);
-      }
-    }
-
-    function onHtmlClick(e) {
-      var $targetEl = (0, _dom.default)(e.target);
-      if ($targetEl.is(ac.$inputEl[0]) || ac.$dropdownEl && $targetEl.closest(ac.$dropdownEl[0]).length) return;
-      ac.close();
-    }
-
-    function onOpenerClick() {
-      ac.open();
-    }
-
-    function onInputFocus() {
-      ac.open();
-    }
-
-    function onInputBlur() {
-      if (ac.$dropdownEl.find('label.active-state').length > 0) return;
-      setTimeout(function () {
-        ac.close();
-      }, 0);
-    }
-
-    function onResize() {
-      ac.positionDropdown();
-    }
-
-    function onKeyDown(e) {
-      if (!ac.opened) return;
-
-      if (e.keyCode === 27) {
-        // ESC
-        e.preventDefault();
-        ac.$inputEl.blur();
-        return;
-      }
-
-      if (e.keyCode === 13) {
-        // Enter
-        var $selectedItemLabel = ac.$dropdownEl.find('.autocomplete-dropdown-selected label');
-
-        if ($selectedItemLabel.length) {
-          e.preventDefault();
-          $selectedItemLabel.trigger('click');
-          ac.$inputEl.blur();
-          return;
-        }
-
-        if (ac.params.typeahead) {
-          e.preventDefault();
-          ac.$inputEl.blur();
-        }
-
-        return;
-      }
-
-      if (e.keyCode !== 40 && e.keyCode !== 38) return;
-      e.preventDefault();
-      var $selectedItem = ac.$dropdownEl.find('.autocomplete-dropdown-selected');
-      var $newItem;
-
-      if ($selectedItem.length) {
-        $newItem = $selectedItem[e.keyCode === 40 ? 'next' : 'prev']('li');
-
-        if (!$newItem.length) {
-          $newItem = ac.$dropdownEl.find('li').eq(e.keyCode === 40 ? 0 : ac.$dropdownEl.find('li').length - 1);
-        }
-      } else {
-        $newItem = ac.$dropdownEl.find('li').eq(e.keyCode === 40 ? 0 : ac.$dropdownEl.find('li').length - 1);
-      }
-
-      if ($newItem.hasClass('autocomplete-dropdown-placeholder')) return;
-      $selectedItem.removeClass('autocomplete-dropdown-selected');
-      $newItem.addClass('autocomplete-dropdown-selected');
-    }
-
-    function onDropdownClick() {
-      var $clickedEl = (0, _dom.default)(this);
-      var 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');
-
-        if (itemValue === value || itemValue * 1 === value * 1) {
-          clickedItem = ac.items[i];
-        }
-      }
-
-      if (ac.params.updateInputValueOnSelect) {
-        ac.$inputEl.val(typeof clickedItem === 'object' ? clickedItem[ac.params.valueProperty] : clickedItem);
-        ac.$inputEl.trigger('input change');
-      }
-
-      ac.value = [clickedItem];
-      ac.emit('local::change autocompleteChange', [clickedItem]);
-      ac.close();
-    }
-
-    ac.attachEvents = function attachEvents() {
-      if (ac.params.openIn !== 'dropdown' && ac.$openerEl) {
-        ac.$openerEl.on('click', onOpenerClick);
-      }
-
-      if (ac.params.openIn === 'dropdown' && ac.$inputEl) {
-        ac.$inputEl.on('focus', onInputFocus);
-        ac.$inputEl.on(ac.params.inputEvents, onInputChange);
-
-        if (device.android) {
-          (0, _dom.default)('html').on('click', onHtmlClick);
-        } else {
-          ac.$inputEl.on('blur', onInputBlur);
-        }
-
-        ac.$inputEl.on('keydown', onKeyDown);
-      }
-    };
-
-    ac.detachEvents = function attachEvents() {
-      if (ac.params.openIn !== 'dropdown' && ac.$openerEl) {
-        ac.$openerEl.off('click', onOpenerClick);
-      }
-
-      if (ac.params.openIn === 'dropdown' && ac.$inputEl) {
-        ac.$inputEl.off('focus', onInputFocus);
-        ac.$inputEl.off(ac.params.inputEvents, onInputChange);
-
-        if (device.android) {
-          (0, _dom.default)('html').off('click', onHtmlClick);
-        } else {
-          ac.$inputEl.off('blur', onInputBlur);
-        }
-
-        ac.$inputEl.off('keydown', onKeyDown);
-      }
-    };
-
-    ac.attachDropdownEvents = function attachDropdownEvents() {
-      ac.$dropdownEl.on('click', 'label', onDropdownClick);
-      app.on('resize', onResize);
-    };
-
-    ac.detachDropdownEvents = function detachDropdownEvents() {
-      ac.$dropdownEl.off('click', 'label', onDropdownClick);
-      app.off('resize', onResize);
-    };
-
-    ac.attachPageEvents = function attachPageEvents() {
-      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 () {
-          (0, _utils.nextTick)(function () {
-            ac.close();
-          });
-        });
-      }
-    };
-
-    ac.detachPageEvents = function detachPageEvents() {
-      ac.$el.off('change', 'input[type="radio"], input[type="checkbox"]', onPageInputChange);
-    }; // Install Modules
-
-
-    ac.useModules(); // Init
-
-    ac.init();
-    return ac || _assertThisInitialized(_this);
-  }
-
-  var _proto = Autocomplete.prototype;
-
-  _proto.positionDropdown = function positionDropdown() {
-    var _$dropdownEl$children;
-
-    var ac = this;
-    var $inputEl = ac.$inputEl,
-        app = ac.app,
-        $dropdownEl = ac.$dropdownEl;
-    var $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) {
-      if ($listParent) return;
-      var $parentEl = (0, _dom.default)(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;
-
-    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"
-    });
-    $dropdownEl.children('.autocomplete-dropdown-inner').css((_$dropdownEl$children = {
-      maxHeight: maxHeight + "px"
-    }, _$dropdownEl$children[paddingProp] = $listEl.length > 0 && !ac.params.expandInput ? paddingValue + "px" : '', _$dropdownEl$children));
-  };
-
-  _proto.focus = function focus() {
-    var ac = this;
-    ac.$el.find('input[type=search]').focus();
-  };
-
-  _proto.source = function source(query) {
-    var 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;
-      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 (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];
-          if (aValue === itemValue || aValue * 1 === itemValue * 1) selected = true;
-        }
-
-        itemsHTML += ac.renderItem({
-          value: itemValue,
-          text: typeof items[i] === 'object' ? items[i][ac.params.textProperty] : items[i],
-          inputType: ac.inputType,
-          id: ac.id,
-          inputName: ac.inputName,
-          selected: selected
-        }, i);
-      }
-
-      $el.find('.autocomplete-found ul').html(itemsHTML);
-
-      if (items.length === 0) {
-        if (query.length !== 0) {
-          $el.find('.autocomplete-not-found').show();
-          $el.find('.autocomplete-found, .autocomplete-values').hide();
-        } else {
-          $el.find('.autocomplete-values').show();
-          $el.find('.autocomplete-found, .autocomplete-not-found').hide();
-        }
-      } else {
-        $el.find('.autocomplete-found').show();
-        $el.find('.autocomplete-not-found, .autocomplete-values').hide();
-      }
-    });
-  };
-
-  _proto.updateValues = function updateValues() {
-    var ac = this;
-    var valuesHTML = '';
-
-    for (var 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}",
-        selected: true
-      }, i);
-    }
-
-    ac.$el.find('.autocomplete-values ul').html(valuesHTML);
-  };
-
-  _proto.preloaderHide = function preloaderHide() {
-    var ac = this;
-
-    if (ac.params.openIn === 'dropdown' && ac.$dropdownEl) {
-      ac.$dropdownEl.find('.autocomplete-preloader').removeClass('autocomplete-preloader-visible');
-    } else {
-      (0, _dom.default)('.autocomplete-preloader').removeClass('autocomplete-preloader-visible');
-    }
-  };
-
-  _proto.preloaderShow = function preloaderShow() {
-    var ac = this;
-
-    if (ac.params.openIn === 'dropdown' && ac.$dropdownEl) {
-      ac.$dropdownEl.find('.autocomplete-preloader').addClass('autocomplete-preloader-visible');
-    } else {
-      (0, _dom.default)('.autocomplete-preloader').addClass('autocomplete-preloader-visible');
-    }
-  };
-
-  _proto.renderPreloader = function renderPreloader() {
-    var ac = this;
-    var preloaders = {
-      iosPreloaderContent: _utils.iosPreloaderContent,
-      mdPreloaderContent: _utils.mdPreloaderContent,
-      auroraPreloaderContent: _utils.auroraPreloaderContent
-    };
-    return (0, _$jsx.default)("div", {
-      class: "autocomplete-preloader preloader " + (ac.params.preloaderColor ? "color-" + ac.params.preloaderColor : '')
-    }, preloaders[ac.app.theme + "PreloaderContent"] || '');
-  };
-
-  _proto.renderSearchbar = function renderSearchbar() {
-    var ac = this;
-    if (ac.params.renderSearchbar) return ac.params.renderSearchbar.call(ac);
-    return (0, _$jsx.default)("form", {
-      class: "searchbar"
-    }, (0, _$jsx.default)("div", {
-      class: "searchbar-inner"
-    }, (0, _$jsx.default)("div", {
-      class: "searchbar-input-wrap"
-    }, (0, _$jsx.default)("input", {
-      type: "search",
-      spellcheck: ac.params.searchbarSpellcheck || 'false',
-      placeholder: ac.params.searchbarPlaceholder
-    }), (0, _$jsx.default)("i", {
-      class: "searchbar-icon"
-    }), (0, _$jsx.default)("span", {
-      class: "input-clear-button"
-    })), ac.params.searchbarDisableButton && (0, _$jsx.default)("span", {
-      class: "searchbar-disable-button"
-    }, ac.params.searchbarDisableText)));
-  };
-
-  _proto.renderItem = function renderItem(item, index) {
-    var 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;
-
-    if (ac.params.openIn !== 'dropdown') {
-      return (0, _$jsx.default)("li", null, (0, _$jsx.default)("label", {
-        class: "item-" + item.inputType + " item-content"
-      }, (0, _$jsx.default)("input", {
-        type: item.inputType,
-        name: item.inputName,
-        value: itemValue,
-        _checked: item.selected
-      }), (0, _$jsx.default)("i", {
-        class: "icon icon-" + item.inputType
-      }), (0, _$jsx.default)("div", {
-        class: "item-inner"
-      }, (0, _$jsx.default)("div", {
-        class: "item-title"
-      }, item.text))));
-    } // Dropdown
-
-
-    if (!item.placeholder) {
-      return (0, _$jsx.default)("li", null, (0, _$jsx.default)("label", {
-        class: "item-radio item-content",
-        "data-value": itemValue
-      }, (0, _$jsx.default)("div", {
-        class: "item-inner"
-      }, (0, _$jsx.default)("div", {
-        class: "item-title"
-      }, item.text))));
-    } // Dropwdown placeholder
-
-
-    return (0, _$jsx.default)("li", {
-      class: "autocomplete-dropdown-placeholder"
-    }, (0, _$jsx.default)("label", {
-      class: "item-content"
-    }, (0, _$jsx.default)("div", {
-      class: "item-inner"
-    }, (0, _$jsx.default)("div", {
-      class: "item-title"
-    }, item.text))));
-  };
-
-  _proto.renderNavbar = function renderNavbar() {
-    var ac = this;
-    if (ac.params.renderNavbar) return ac.params.renderNavbar.call(ac);
-    var 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
-
-    var navbarLeft = inPopup ? ac.params.preloader && (0, _$jsx.default)("div", {
-      class: "left"
-    }, ac.renderPreloader()) : (0, _$jsx.default)("div", {
-      class: "left sliding"
-    }, (0, _$jsx.default)("a", {
-      class: "link back"
-    }, (0, _$jsx.default)("i", {
-      class: "icon icon-back"
-    }), (0, _$jsx.default)("span", {
-      class: "if-not-md"
-    }, ac.params.pageBackLinkText)));
-    var navbarRight = inPopup ? (0, _$jsx.default)("div", {
-      class: "right"
-    }, (0, _$jsx.default)("a", {
-      class: "link popup-close",
-      "data-popup": ".autocomplete-popup"
-    }, ac.params.popupCloseLinkText)) : ac.params.preloader && (0, _$jsx.default)("div", {
-      class: "right"
-    }, ac.renderPreloader());
-    return (0, _$jsx.default)("div", {
-      class: "navbar " + (ac.params.navbarColorTheme ? "color-" + ac.params.navbarColorTheme : '')
-    }, (0, _$jsx.default)("div", {
-      class: "navbar-bg"
-    }), (0, _$jsx.default)("div", {
-      class: "navbar-inner " + (ac.params.navbarColorTheme ? "color-" + ac.params.navbarColorTheme : '')
-    }, navbarLeft, pageTitle && (0, _$jsx.default)("div", {
-      class: "title sliding"
-    }, pageTitle), navbarRight, (0, _$jsx.default)("div", {
-      class: "subnavbar sliding"
-    }, ac.renderSearchbar())));
-  };
-
-  _proto.renderDropdown = function renderDropdown() {
-    var ac = this;
-    if (ac.params.renderDropdown) return ac.params.renderDropdown.call(ac, ac.items);
-    return (0, _$jsx.default)("div", {
-      class: "autocomplete-dropdown"
-    }, (0, _$jsx.default)("div", {
-      class: "autocomplete-dropdown-inner"
-    }, (0, _$jsx.default)("div", {
-      class: "list " + (!ac.params.expandInput ? 'no-safe-areas' : '')
-    }, (0, _$jsx.default)("ul", null))), ac.params.preloader && ac.renderPreloader());
-  };
-
-  _proto.renderPage = function renderPage(inPopup) {
-    var ac = this;
-    if (ac.params.renderPage) return ac.params.renderPage.call(ac, ac.items);
-    return (0, _$jsx.default)("div", {
-      class: "page page-with-subnavbar autocomplete-page",
-      "data-name": "autocomplete-page"
-    }, ac.renderNavbar(inPopup), (0, _$jsx.default)("div", {
-      class: "searchbar-backdrop"
-    }), (0, _$jsx.default)("div", {
-      class: "page-content"
-    }, (0, _$jsx.default)("div", {
-      class: "list autocomplete-list autocomplete-found autocomplete-list-" + ac.id + " " + (ac.params.formColorTheme ? "color-" + ac.params.formColorTheme : '')
-    }, (0, _$jsx.default)("ul", null)), (0, _$jsx.default)("div", {
-      class: "list autocomplete-not-found"
-    }, (0, _$jsx.default)("ul", null, (0, _$jsx.default)("li", {
-      class: "item-content"
-    }, (0, _$jsx.default)("div", {
-      class: "item-inner"
-    }, (0, _$jsx.default)("div", {
-      class: "item-title"
-    }, ac.params.notFoundText))))), (0, _$jsx.default)("div", {
-      class: "list autocomplete-values"
-    }, (0, _$jsx.default)("ul", null))));
-  };
-
-  _proto.renderPopup = function renderPopup() {
-    var ac = this;
-    if (ac.params.renderPopup) return ac.params.renderPopup.call(ac, ac.items);
-    return (0, _$jsx.default)("div", {
-      class: "popup autocomplete-popup"
-    }, (0, _$jsx.default)("div", {
-      class: "view"
-    }, ac.renderPage(true), ";"));
-  };
-
-  _proto.onOpen = function onOpen(type, el) {
-    var ac = this;
-    var app = ac.app;
-    var $el = (0, _dom.default)(el);
-    ac.$el = $el;
-    ac.el = $el[0];
-    ac.openedIn = type;
-    ac.opened = true;
-
-    if (ac.params.openIn === 'dropdown') {
-      ac.attachDropdownEvents();
-      ac.$dropdownEl.addClass('autocomplete-dropdown-in');
-      ac.$inputEl.trigger('input');
-    } else {
-      // Init SB
-      var $searchbarEl = $el.find('.searchbar');
-
-      if (ac.params.openIn === 'page' && app.theme === 'ios' && $searchbarEl.length === 0) {
-        $searchbarEl = (0, _dom.default)(app.navbar.getElByPage($el)).find('.searchbar');
-      }
-
-      ac.searchbar = app.searchbar.create({
-        el: $searchbarEl,
-        backdropEl: $el.find('.searchbar-backdrop'),
-        customSearch: true,
-        on: {
-          search: function search(sb, query) {
-            if (query.length === 0 && ac.searchbar.enabled) {
-              ac.searchbar.backdropShow();
-            } else {
-              ac.searchbar.backdropHide();
-            }
-
-            ac.source(query);
-          }
-        }
-      }); // Attach page events
-
-      ac.attachPageEvents(); // Update Values On Page Init
-
-      ac.updateValues(); // Source on load
-
-      if (ac.params.requestSourceOnOpen) ac.source('');
-    }
-
-    ac.emit('local::open autocompleteOpen', ac);
-  };
-
-  _proto.autoFocus = function autoFocus() {
-    var ac = this;
-
-    if (ac.searchbar && ac.searchbar.$inputEl) {
-      ac.searchbar.$inputEl.focus();
-    }
-
-    return ac;
-  };
-
-  _proto.onOpened = function onOpened() {
-    var 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;
-    if (ac.destroyed) return; // Destroy SB
-
-    if (ac.searchbar && ac.searchbar.destroy) {
-      ac.searchbar.destroy();
-      ac.searchbar = null;
-      delete ac.searchbar;
-    }
-
-    if (ac.params.openIn === 'dropdown') {
-      ac.detachDropdownEvents();
-      ac.$dropdownEl.removeClass('autocomplete-dropdown-in').remove();
-      ac.$inputEl.parents('.item-content-dropdown-expanded').removeClass('item-content-dropdown-expanded');
-    } else {
-      ac.detachPageEvents();
-    }
-
-    ac.emit('local::close autocompleteClose', ac);
-  };
-
-  _proto.onClosed = function onClosed() {
-    var ac = this;
-    if (ac.destroyed) return;
-    ac.opened = false;
-    ac.$el = null;
-    ac.el = null;
-    delete ac.$el;
-    delete ac.el;
-    ac.emit('local::closed autocompleteClosed', ac);
-  };
-
-  _proto.openPage = function openPage() {
-    var ac = this;
-    if (ac.opened) return ac;
-    var pageHtml = ac.renderPage();
-    ac.view.router.navigate({
-      url: ac.url,
-      route: {
-        content: pageHtml,
-        path: ac.url,
-        on: {
-          pageBeforeIn: function pageBeforeIn(e, page) {
-            ac.onOpen('page', page.el);
-          },
-          pageAfterIn: function pageAfterIn(e, page) {
-            ac.onOpened('page', page.el);
-          },
-          pageBeforeOut: function pageBeforeOut(e, page) {
-            ac.onClose('page', page.el);
-          },
-          pageAfterOut: function pageAfterOut(e, page) {
-            ac.onClosed('page', page.el);
-          }
-        },
-        options: {
-          animate: ac.params.animate
-        }
-      }
-    });
-    return ac;
-  };
-
-  _proto.openPopup = function openPopup() {
-    var ac = this;
-    if (ac.opened) return ac;
-    var popupHtml = ac.renderPopup();
-    var popupParams = {
-      content: popupHtml,
-      animate: ac.params.animate,
-      push: ac.params.popupPush,
-      swipeToClose: ac.params.popupSwipeToClose,
-      on: {
-        popupOpen: function popupOpen(popup) {
-          ac.onOpen('popup', popup.el);
-        },
-        popupOpened: function popupOpened(popup) {
-          ac.onOpened('popup', popup.el);
-        },
-        popupClose: function popupClose(popup) {
-          ac.onClose('popup', popup.el);
-        },
-        popupClosed: function popupClosed(popup) {
-          ac.onClosed('popup', popup.el);
-        }
-      }
-    };
-
-    if (ac.params.routableModals && ac.view) {
-      ac.view.router.navigate({
-        url: ac.url,
-        route: {
-          path: ac.url,
-          popup: popupParams
-        }
-      });
-    } else {
-      ac.modal = ac.app.popup.create(popupParams).open(ac.params.animate);
-    }
-
-    return ac;
-  };
-
-  _proto.openDropdown = function openDropdown() {
-    var ac = this;
-
-    if (!ac.$dropdownEl) {
-      ac.$dropdownEl = (0, _dom.default)(ac.renderDropdown());
-    }
-
-    var $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');
-
-    if (ac.params.dropdownContainerEl) {
-      (0, _dom.default)(ac.params.dropdownContainerEl).append(ac.$dropdownEl);
-    } else if ($pageContentEl.length === 0) {
-      ac.$dropdownEl.insertAfter(ac.$inputEl);
-    } else {
-      ac.positionDropdown();
-      $pageContentEl.append(ac.$dropdownEl);
-    }
-
-    ac.onOpen('dropdown', ac.$dropdownEl);
-    ac.onOpened('dropdown', ac.$dropdownEl);
-  };
-
-  _proto.open = function open() {
-    var ac = this;
-    if (ac.opened) return ac;
-    var openIn = ac.params.openIn;
-    ac["open" + openIn.split('').map(function (el, index) {
-      if (index === 0) return el.toUpperCase();
-      return el;
-    }).join('')]();
-    return ac;
-  };
-
-  _proto.close = function close() {
-    var ac = this;
-    if (!ac.opened) return ac;
-
-    if (ac.params.openIn === 'dropdown') {
-      ac.onClose();
-      ac.onClosed();
-    } else if (ac.params.routableModals && ac.view || ac.openedIn === 'page') {
-      ac.view.router.back({
-        animate: ac.params.animate
-      });
-    } else {
-      ac.modal.once('modalClosed', function () {
-        (0, _utils.nextTick)(function () {
-          if (ac.destroyed) return;
-          ac.modal.destroy();
-          delete ac.modal;
-        });
-      });
-      ac.modal.close();
-    }
-
-    return ac;
-  };
-
-  _proto.init = function init() {
-    var ac = this;
-    ac.attachEvents();
-  };
-
-  _proto.destroy = function destroy() {
-    var ac = this;
-    ac.emit('local::beforeDestroy autocompleteBeforeDestroy', ac);
-    ac.detachEvents();
-
-    if (ac.$inputEl && ac.$inputEl[0]) {
-      delete ac.$inputEl[0].f7Autocomplete;
-    }
-
-    if (ac.$openerEl && ac.$openerEl[0]) {
-      delete ac.$openerEl[0].f7Autocomplete;
-    }
-
-    (0, _utils.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;
-}(_class.default);
-
-var _default = Autocomplete;
-exports.default = _default;