framework7 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/smart-select/smart-select-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); }
-
 import $ from '../../shared/dom7';
 import { extend, deleteProps, id, nextTick } from '../../shared/utils';
 import Framework7Class from '../../shared/class';
@@ -15,21 +5,11 @@ import Framework7Class from '../../shared/class';
 
 import $jsx from '../../shared/$jsx';
 
-var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(SmartSelect, _Framework7Class);
-
-  function SmartSelect(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var ss = _assertThisInitialized(_this);
-
-    var defaults = extend({
+class SmartSelect extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const ss = this;
+    const defaults = extend({
       on: {}
     }, app.params.smartSelect);
 
@@ -41,12 +21,12 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     ss.useModulesParams(defaults);
     ss.params = extend({}, defaults, params);
     ss.app = app;
-    var $el = $(ss.params.el).eq(0);
-    if ($el.length === 0) return ss || _assertThisInitialized(_this);
-    if ($el[0].f7SmartSelect) return $el[0].f7SmartSelect || _assertThisInitialized(_this);
-    var $selectEl = $el.find('select').eq(0);
-    if ($selectEl.length === 0) return ss || _assertThisInitialized(_this);
-    var $valueEl;
+    const $el = $(ss.params.el).eq(0);
+    if ($el.length === 0) return ss;
+    if ($el[0].f7SmartSelect) return $el[0].f7SmartSelect;
+    const $selectEl = $el.find('select').eq(0);
+    if ($selectEl.length === 0) return ss;
+    let $valueEl;
 
     if (ss.params.setValueText) {
       $valueEl = $(ss.params.valueEl);
@@ -62,28 +42,28 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     } // Url
 
 
-    var url = params.url;
+    let url = params.url;
 
     if (!url) {
-      if ($el.attr('href') && $el.attr('href') !== '#') url = $el.attr('href');else if ($selectEl.attr('name')) url = $selectEl.attr('name').toLowerCase() + "-select/";
+      if ($el.attr('href') && $el.attr('href') !== '#') url = $el.attr('href');else if ($selectEl.attr('name')) url = `${$selectEl.attr('name').toLowerCase()}-select/`;
     }
 
     if (!url) url = ss.params.url;
-    var multiple = $selectEl[0].multiple;
-    var inputType = multiple ? 'checkbox' : 'radio';
-    var selectId = id();
+    const multiple = $selectEl[0].multiple;
+    const inputType = multiple ? 'checkbox' : 'radio';
+    const selectId = id();
     extend(ss, {
-      $el: $el,
+      $el,
       el: $el[0],
-      $selectEl: $selectEl,
+      $selectEl,
       selectEl: $selectEl[0],
-      $valueEl: $valueEl,
+      $valueEl,
       valueEl: $valueEl && $valueEl[0],
-      url: url,
-      multiple: multiple,
-      inputType: inputType,
+      url,
+      multiple,
+      inputType,
       id: selectId,
-      inputName: inputType + "-" + selectId,
+      inputName: `${inputType}-${selectId}`,
       selectName: $selectEl.attr('name'),
       maxLength: $selectEl.attr('maxlength') || params.maxLength
     });
@@ -94,7 +74,7 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }
 
     function onChange() {
-      var value = ss.$selectEl.val();
+      const value = ss.$selectEl.val();
       ss.$el.trigger('smartselect:change', value);
       ss.emit('local::change smartSelectChange', ss, value);
 
@@ -116,15 +96,15 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     };
 
     function handleInputChange() {
-      var optionEl;
-      var text;
-      var inputEl = this;
-      var value = inputEl.value;
-      var optionText = [];
-      var displayAs;
+      let optionEl;
+      let text;
+      const inputEl = this;
+      const value = inputEl.value;
+      let optionText = [];
+      let displayAs;
 
       if (inputEl.type === 'checkbox') {
-        for (var i = 0; i < ss.selectEl.options.length; i += 1) {
+        for (let i = 0; i < ss.selectEl.options.length; i += 1) {
           optionEl = ss.selectEl.options[i];
 
           if (optionEl.value === value) {
@@ -142,12 +122,10 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
           ss.checkMaxLength();
         }
       } else {
-        optionEl = ss.$selectEl.find("option[value=\"" + value + "\"]")[0];
+        optionEl = ss.$selectEl.find(`option[value="${value}"]`)[0];
 
         if (!optionEl) {
-          optionEl = ss.$selectEl.find('option').filter(function (optEl) {
-            return optEl.value === value;
-          })[0];
+          optionEl = ss.$selectEl.find('option').filter(optEl => optEl.value === value)[0];
         }
 
         displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $(optionEl).data('display-as');
@@ -179,23 +157,21 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     ss.useModules(); // Init
 
     ss.init();
-    return ss || _assertThisInitialized(_this);
+    return ss;
   }
 
-  var _proto = SmartSelect.prototype;
-
-  _proto.setValue = function setValue(value) {
-    var ss = this;
-    var newValue = value;
-    var optionText = [];
-    var optionEl;
-    var displayAs;
-    var text;
+  setValue(value) {
+    const ss = this;
+    let newValue = value;
+    let optionText = [];
+    let optionEl;
+    let displayAs;
+    let text;
 
     if (ss.multiple) {
       if (!Array.isArray(newValue)) newValue = [newValue];
 
-      for (var i = 0; i < ss.selectEl.options.length; i += 1) {
+      for (let i = 0; i < ss.selectEl.options.length; i += 1) {
         optionEl = ss.selectEl.options[i];
 
         if (newValue.indexOf(optionEl.value) >= 0) {
@@ -211,7 +187,7 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
         }
       }
     } else {
-      optionEl = ss.$selectEl.find("option[value=\"" + newValue + "\"]")[0];
+      optionEl = ss.$selectEl.find(`option[value="${newValue}"]`)[0];
 
       if (optionEl) {
         displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $(optionEl).data('display-as');
@@ -228,39 +204,61 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
 
     ss.$selectEl.trigger('change');
     return ss;
-  };
+  }
 
-  _proto.unsetValue = function unsetValue() {
-    var ss = this;
+  unsetValue() {
+    const ss = this;
 
     if (ss.params.setValueText) {
       ss.$valueEl.text(ss.formatValueText([]));
     }
 
-    ss.$selectEl.find('option').each(function (optionEl) {
+    ss.$selectEl.find('option').each(optionEl => {
       optionEl.selected = false;
       optionEl.checked = false;
     });
     ss.$selectEl[0].value = null;
 
     if (ss.$containerEl) {
-      ss.$containerEl.find("input[name=\"" + ss.inputName + "\"][type=\"checkbox\"], input[name=\"" + ss.inputName + "\"][type=\"radio\"]").prop('checked', false);
+      ss.$containerEl.find(`input[name="${ss.inputName}"][type="checkbox"], input[name="${ss.inputName}"][type="radio"]`).prop('checked', false);
     }
 
     ss.$selectEl.trigger('change');
-  };
+  }
 
-  _proto.getValue = function getValue() {
-    var ss = this;
+  getValue() {
+    const ss = this;
     return ss.$selectEl.val();
-  };
+  }
 
-  _proto.checkMaxLength = function checkMaxLength() {
-    var ss = this;
-    var $containerEl = ss.$containerEl;
+  get view() {
+    const {
+      params,
+      $el
+    } = this;
+    let view;
+
+    if (params.view) {
+      view = params.view;
+    }
+
+    if (!view) {
+      view = $el.parents('.view').length && $el.parents('.view')[0].f7View;
+    }
+
+    if (!view && params.openIn === 'page') {
+      throw Error('Smart Select requires initialized View');
+    }
+
+    return view;
+  }
+
+  checkMaxLength() {
+    const ss = this;
+    const $containerEl = ss.$containerEl;
 
     if (ss.selectEl.selectedOptions.length >= ss.maxLength) {
-      $containerEl.find('input[type="checkbox"]').each(function (inputEl) {
+      $containerEl.find('input[type="checkbox"]').each(inputEl => {
         if (!inputEl.checked) {
           $(inputEl).parents('li').addClass('disabled');
         } else {
@@ -270,11 +268,11 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     } else {
       $containerEl.find('.disabled').removeClass('disabled');
     }
-  };
+  }
 
-  _proto.formatValueText = function formatValueText(values) {
-    var ss = this;
-    var textValue;
+  formatValueText(values) {
+    const ss = this;
+    let textValue;
 
     if (ss.params.formatValueText) {
       textValue = ss.params.formatValueText.call(ss, values, ss);
@@ -283,11 +281,11 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return textValue;
-  };
+  }
 
-  _proto.setValueText = function setValueText(value) {
-    var ss = this;
-    var valueArray = [];
+  setValueText(value) {
+    const ss = this;
+    let valueArray = [];
 
     if (typeof value !== 'undefined') {
       if (Array.isArray(value)) {
@@ -296,11 +294,11 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
         valueArray = [value];
       }
     } else {
-      ss.$selectEl.find('option').each(function (optionEl) {
-        var $optionEl = $(optionEl);
+      ss.$selectEl.find('option').each(optionEl => {
+        const $optionEl = $(optionEl);
 
         if (optionEl.selected) {
-          var displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $optionEl.data('display-value-as');
+          const displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $optionEl.data('display-value-as');
 
           if (displayAs && typeof displayAs !== 'undefined') {
             valueArray.push(displayAs);
@@ -314,28 +312,28 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     if (ss.params.setValueText) {
       ss.$valueEl.text(ss.formatValueText(valueArray));
     }
-  };
-
-  _proto.getItemsData = function getItemsData() {
-    var ss = this;
-    var theme = ss.app.theme;
-    var items = [];
-    var previousGroupEl;
-    ss.$selectEl.find('option').each(function (optionEl) {
-      var $optionEl = $(optionEl);
-      var optionData = $optionEl.dataset();
-      var optionImage = optionData.optionImage || ss.params.optionImage;
-      var optionIcon = optionData.optionIcon || ss.params.optionIcon;
-      var optionIconIos = theme === 'ios' && (optionData.optionIconIos || ss.params.optionIconIos);
-      var optionIconMd = theme === 'md' && (optionData.optionIconMd || ss.params.optionIconMd);
-      var optionIconAurora = theme === 'aurora' && (optionData.optionIconAurora || ss.params.optionIconAurora);
-      var optionHasMedia = optionImage || optionIcon || optionIconIos || optionIconMd || optionIconAurora;
-      var optionColor = optionData.optionColor;
-      var optionClassName = optionData.optionClass || '';
+  }
+
+  getItemsData() {
+    const ss = this;
+    const theme = ss.app.theme;
+    const items = [];
+    let previousGroupEl;
+    ss.$selectEl.find('option').each(optionEl => {
+      const $optionEl = $(optionEl);
+      const optionData = $optionEl.dataset();
+      const optionImage = optionData.optionImage || ss.params.optionImage;
+      const optionIcon = optionData.optionIcon || ss.params.optionIcon;
+      const optionIconIos = theme === 'ios' && (optionData.optionIconIos || ss.params.optionIconIos);
+      const optionIconMd = theme === 'md' && (optionData.optionIconMd || ss.params.optionIconMd);
+      const optionIconAurora = theme === 'aurora' && (optionData.optionIconAurora || ss.params.optionIconAurora);
+      const optionHasMedia = optionImage || optionIcon || optionIconIos || optionIconMd || optionIconAurora;
+      const optionColor = optionData.optionColor;
+      let optionClassName = optionData.optionClass || '';
       if ($optionEl[0].disabled) optionClassName += ' disabled';
-      var optionGroupEl = $optionEl.parent('optgroup')[0];
-      var optionGroupLabel = optionGroupEl && optionGroupEl.label;
-      var optionIsLabel = false;
+      const optionGroupEl = $optionEl.parent('optgroup')[0];
+      const optionGroupLabel = optionGroupEl && optionGroupEl.label;
+      let optionIsLabel = false;
 
       if (optionGroupEl && optionGroupEl !== previousGroupEl) {
         optionIsLabel = true;
@@ -370,10 +368,10 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     });
     ss.items = items;
     return items;
-  };
+  }
 
-  _proto.renderSearchbar = function renderSearchbar() {
-    var ss = this;
+  renderSearchbar() {
+    const ss = this;
     if (ss.params.renderSearchbar) return ss.params.renderSearchbar.call(ss);
     return $jsx("form", {
       class: "searchbar"
@@ -392,17 +390,13 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     })), ss.params.searchbarDisableButton && $jsx("span", {
       class: "searchbar-disable-button"
     }, ss.params.searchbarDisableText)));
-  };
+  }
 
-  _proto.renderItem = function renderItem(item, index) {
-    var ss = this;
+  renderItem(item, index) {
+    const ss = this;
     if (ss.params.renderItem) return ss.params.renderItem.call(ss, item, index);
 
-    function getIconContent(iconValue) {
-      if (iconValue === void 0) {
-        iconValue = '';
-      }
-
+    function getIconContent(iconValue = '') {
       if (iconValue.indexOf(':') >= 0) {
         return iconValue.split(':')[1];
       }
@@ -410,13 +404,9 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
       return '';
     }
 
-    function getIconClass(iconValue) {
-      if (iconValue === void 0) {
-        iconValue = '';
-      }
-
+    function getIconClass(iconValue = '') {
       if (iconValue.indexOf(':') >= 0) {
-        var className = iconValue.split(':')[0];
+        let className = iconValue.split(':')[0];
         if (className === 'f7') className = 'f7-icons';
         if (className === 'material') className = 'material-icons';
         return className;
@@ -425,16 +415,16 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
       return iconValue;
     }
 
-    var itemHtml;
+    let itemHtml;
 
     if (item.isLabel) {
-      itemHtml = "<li class=\"item-divider\">" + item.groupLabel + "</li>";
+      itemHtml = `<li class="item-divider">${item.groupLabel}</li>`;
     } else {
-      var selected = item.selected;
-      var disabled;
+      let selected = item.selected;
+      let disabled;
 
       if (ss.params.virtualList) {
-        var ssValue = ss.getValue();
+        const ssValue = ss.getValue();
         selected = ss.multiple ? ssValue.indexOf(item.value) >= 0 : ssValue === item.value;
 
         if (ss.multiple) {
@@ -442,70 +432,72 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
         }
       }
 
-      var icon = item.icon,
-          iconIos = item.iconIos,
-          iconMd = item.iconMd,
-          iconAurora = item.iconAurora;
-      var hasIcon = icon || iconIos || iconMd || iconAurora;
-      var iconContent = getIconContent(icon || iconIos || iconMd || iconAurora || '');
-      var iconClass = getIconClass(icon || iconIos || iconMd || iconAurora || '');
+      const {
+        icon,
+        iconIos,
+        iconMd,
+        iconAurora
+      } = item;
+      const hasIcon = icon || iconIos || iconMd || iconAurora;
+      const iconContent = getIconContent(icon || iconIos || iconMd || iconAurora || '');
+      const iconClass = getIconClass(icon || iconIos || iconMd || iconAurora || '');
       itemHtml = $jsx("li", {
-        class: "" + (item.className || '') + (disabled ? ' disabled' : '')
+        class: `${item.className || ''}${disabled ? ' disabled' : ''}`
       }, $jsx("label", {
-        class: "item-" + item.inputType + " item-content"
+        class: `item-${item.inputType} item-content`
       }, $jsx("input", {
         type: item.inputType,
         name: item.inputName,
         value: item.value,
         _checked: selected
       }), $jsx("i", {
-        class: "icon icon-" + item.inputType
+        class: `icon icon-${item.inputType}`
       }), item.hasMedia && $jsx("div", {
         class: "item-media"
       }, hasIcon && $jsx("i", {
-        class: "icon " + iconClass
+        class: `icon ${iconClass}`
       }, iconContent), item.image && $jsx("img", {
         src: item.image
       })), $jsx("div", {
         class: "item-inner"
       }, $jsx("div", {
-        class: "item-title" + (item.color ? " text-color-" + item.color : '')
+        class: `item-title${item.color ? ` text-color-${item.color}` : ''}`
       }, item.text))));
     }
 
     return itemHtml;
-  };
+  }
 
-  _proto.renderItems = function renderItems() {
-    var ss = this;
+  renderItems() {
+    const ss = this;
     if (ss.params.renderItems) return ss.params.renderItems.call(ss, ss.items);
-    var itemsHtml = "\n      " + ss.items.map(function (item, index) {
-      return "" + ss.renderItem(item, index);
-    }).join('') + "\n    ";
+    const itemsHtml = `
+      ${ss.items.map((item, index) => `${ss.renderItem(item, index)}`).join('')}
+    `;
     return itemsHtml;
-  };
+  }
 
-  _proto.renderPage = function renderPage() {
-    var ss = this;
+  renderPage() {
+    const ss = this;
     if (ss.params.renderPage) return ss.params.renderPage.call(ss, ss.items);
-    var pageTitle = ss.params.pageTitle;
+    let pageTitle = ss.params.pageTitle;
 
     if (typeof pageTitle === 'undefined') {
-      var $itemTitleEl = ss.$el.find('.item-title');
+      const $itemTitleEl = ss.$el.find('.item-title');
       pageTitle = $itemTitleEl.length ? $itemTitleEl.text().trim() : '';
     }
 
-    var cssClass = ss.params.cssClass;
+    const cssClass = ss.params.cssClass;
     return $jsx("div", {
-      class: "page smart-select-page " + cssClass,
+      class: `page smart-select-page ${cssClass}`,
       "data-name": "smart-select-page",
       "data-select-name": ss.selectName
     }, $jsx("div", {
-      class: "navbar " + (ss.params.navbarColorTheme ? "color-" + ss.params.navbarColorTheme : '')
+      class: `navbar ${ss.params.navbarColorTheme ? `color-${ss.params.navbarColorTheme}` : ''}`
     }, $jsx("div", {
       class: "navbar-bg"
     }), $jsx("div", {
-      class: "navbar-inner sliding " + (ss.params.navbarColorTheme ? "color-" + ss.params.navbarColorTheme : '')
+      class: `navbar-inner sliding ${ss.params.navbarColorTheme ? `color-${ss.params.navbarColorTheme}` : ''}`
     }, $jsx("div", {
       class: "left"
     }, $jsx("a", {
@@ -523,31 +515,31 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }), $jsx("div", {
       class: "page-content"
     }, $jsx("div", {
-      class: "list smart-select-list-" + ss.id + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? "color-" + ss.params.formColorTheme : '')
+      class: `list smart-select-list-${ss.id} ${ss.params.virtualList ? ' virtual-list' : ''} ${ss.params.formColorTheme ? `color-${ss.params.formColorTheme}` : ''}`
     }, $jsx("ul", null, !ss.params.virtualList && ss.renderItems(ss.items)))));
-  };
+  }
 
-  _proto.renderPopup = function renderPopup() {
-    var ss = this;
+  renderPopup() {
+    const ss = this;
     if (ss.params.renderPopup) return ss.params.renderPopup.call(ss, ss.items);
-    var pageTitle = ss.params.pageTitle;
+    let pageTitle = ss.params.pageTitle;
 
     if (typeof pageTitle === 'undefined') {
-      var $itemTitleEl = ss.$el.find('.item-title');
+      const $itemTitleEl = ss.$el.find('.item-title');
       pageTitle = $itemTitleEl.length ? $itemTitleEl.text().trim() : '';
     }
 
-    var cssClass = ss.params.cssClass || '';
+    const cssClass = ss.params.cssClass || '';
     return $jsx("div", {
-      class: "popup smart-select-popup " + cssClass + " " + (ss.params.popupTabletFullscreen ? 'popup-tablet-fullscreen' : ''),
+      class: `popup smart-select-popup ${cssClass} ${ss.params.popupTabletFullscreen ? 'popup-tablet-fullscreen' : ''}`,
       "data-select-name": ss.selectName
     }, $jsx("div", {
       class: "view"
     }, $jsx("div", {
-      class: "page smart-select-page " + (ss.params.searchbar ? 'page-with-subnavbar' : ''),
+      class: `page smart-select-page ${ss.params.searchbar ? 'page-with-subnavbar' : ''}`,
       "data-name": "smart-select-page"
     }, $jsx("div", {
-      class: "navbar " + (ss.params.navbarColorTheme ? "color-" + ss.params.navbarColorTheme : '')
+      class: `navbar ${ss.params.navbarColorTheme ? `color-${ss.params.navbarColorTheme}` : ''}`
     }, $jsx("div", {
       class: "navbar-bg"
     }), $jsx("div", {
@@ -558,7 +550,7 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
       class: "right"
     }, $jsx("a", {
       class: "link popup-close",
-      "data-popup": ".smart-select-popup[data-select-name='" + ss.selectName + "']"
+      "data-popup": `.smart-select-popup[data-select-name='${ss.selectName}']`
     }, ss.params.popupCloseLinkText)), ss.params.searchbar && $jsx("div", {
       class: "subnavbar"
     }, ss.renderSearchbar()))), ss.params.searchbar && $jsx("div", {
@@ -566,20 +558,20 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }), $jsx("div", {
       class: "page-content"
     }, $jsx("div", {
-      class: "list smart-select-list-" + ss.id + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? "color-" + ss.params.formColorTheme : '')
+      class: `list smart-select-list-${ss.id} ${ss.params.virtualList ? ' virtual-list' : ''} ${ss.params.formColorTheme ? `color-${ss.params.formColorTheme}` : ''}`
     }, $jsx("ul", null, !ss.params.virtualList && ss.renderItems(ss.items)))))));
-  };
+  }
 
-  _proto.renderSheet = function renderSheet() {
-    var ss = this;
+  renderSheet() {
+    const ss = this;
     if (ss.params.renderSheet) return ss.params.renderSheet.call(ss, ss.items);
-    var cssClass = ss.params.cssClass; // prettier-ignore
+    const cssClass = ss.params.cssClass; // prettier-ignore
 
     return $jsx("div", {
-      class: "sheet-modal smart-select-sheet " + cssClass,
+      class: `sheet-modal smart-select-sheet ${cssClass}`,
       "data-select-name": ss.selectName
     }, $jsx("div", {
-      class: "toolbar toolbar-top " + (ss.params.toolbarColorTheme ? "color-" + ss.params.toolbarColorTheme : '')
+      class: `toolbar toolbar-top ${ss.params.toolbarColorTheme ? `color-${ss.params.toolbarColorTheme}` : ''}`
     }, $jsx("div", {
       class: "toolbar-inner"
     }, $jsx("div", {
@@ -593,34 +585,36 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }, $jsx("div", {
       class: "page-content"
     }, $jsx("div", {
-      class: "list smart-select-list-" + ss.id + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? "color-" + ss.params.formColorTheme : '')
+      class: `list smart-select-list-${ss.id} ${ss.params.virtualList ? ' virtual-list' : ''} ${ss.params.formColorTheme ? `color-${ss.params.formColorTheme}` : ''}`
     }, $jsx("ul", null, !ss.params.virtualList && ss.renderItems(ss.items))))));
-  };
+  }
 
-  _proto.renderPopover = function renderPopover() {
-    var ss = this;
+  renderPopover() {
+    const ss = this;
     if (ss.params.renderPopover) return ss.params.renderPopover.call(ss, ss.items);
-    var cssClass = ss.params.cssClass; // prettier-ignore
+    const cssClass = ss.params.cssClass; // prettier-ignore
 
     return $jsx("div", {
-      class: "popover smart-select-popover " + cssClass,
+      class: `popover smart-select-popover ${cssClass}`,
       "data-select-name": ss.selectName
     }, $jsx("div", {
       class: "popover-inner"
     }, $jsx("div", {
-      class: "list smart-select-list-" + ss.id + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? "color-" + ss.params.formColorTheme : '')
+      class: `list smart-select-list-${ss.id} ${ss.params.virtualList ? ' virtual-list' : ''} ${ss.params.formColorTheme ? `color-${ss.params.formColorTheme}` : ''}`
     }, $jsx("ul", null, !ss.params.virtualList && ss.renderItems(ss.items)))));
-  };
+  }
 
-  _proto.scrollToSelectedItem = function scrollToSelectedItem() {
-    var ss = this;
-    var params = ss.params,
-        $containerEl = ss.$containerEl;
+  scrollToSelectedItem() {
+    const ss = this;
+    const {
+      params,
+      $containerEl
+    } = ss;
     if (!ss.opened) return ss;
 
     if (params.virtualList) {
-      var selectedIndex;
-      ss.vl.items.forEach(function (item, index) {
+      let selectedIndex;
+      ss.vl.items.forEach((item, index) => {
         if (typeof selectedIndex === 'undefined' && item.selected) {
           selectedIndex = index;
         }
@@ -630,20 +624,20 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
         ss.vl.scrollToItem(selectedIndex);
       }
     } else {
-      var $selectedItemEl = $containerEl.find('input:checked').parents('li');
+      const $selectedItemEl = $containerEl.find('input:checked').parents('li');
       if (!$selectedItemEl.length) return ss;
-      var $scrollableEl = $containerEl.find('.page-content, .popover-inner');
+      const $scrollableEl = $containerEl.find('.page-content, .popover-inner');
       if (!$scrollableEl.length) return ss;
       $scrollableEl.scrollTop($selectedItemEl.offset().top - $scrollableEl.offset().top - parseInt($scrollableEl.css('padding-top'), 10));
     }
 
     return ss;
-  };
+  }
 
-  _proto.onOpen = function onOpen(type, containerEl) {
-    var ss = this;
-    var app = ss.app;
-    var $containerEl = $(containerEl);
+  onOpen(type, containerEl) {
+    const ss = this;
+    const app = ss.app;
+    const $containerEl = $(containerEl);
     ss.$containerEl = $containerEl;
     ss.openedIn = type;
     ss.opened = true; // Init VL
@@ -654,10 +648,12 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
         items: ss.items,
         renderItem: ss.renderItem.bind(ss),
         height: ss.params.virtualListHeight,
-        searchByItem: function searchByItem(query, item) {
+
+        searchByItem(query, item) {
           if (item.text && item.text.toLowerCase().indexOf(query.trim().toLowerCase()) >= 0) return true;
           return false;
         }
+
       });
     }
 
@@ -667,17 +663,17 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
 
 
     if (ss.params.searchbar) {
-      var $searchbarEl = $containerEl.find('.searchbar');
+      let $searchbarEl = $containerEl.find('.searchbar');
 
       if (type === 'page' && app.theme === 'ios') {
         $searchbarEl = $(app.navbar.getElByPage($containerEl)).find('.searchbar');
       }
 
       if (ss.params.appendSearchbarNotFound && (type === 'page' || type === 'popup')) {
-        var $notFoundEl = null;
+        let $notFoundEl = null;
 
         if (typeof ss.params.appendSearchbarNotFound === 'string') {
-          $notFoundEl = $("<div class=\"block searchbar-not-found\">" + ss.params.appendSearchbarNotFound + "</div>");
+          $notFoundEl = $(`<div class="block searchbar-not-found">${ss.params.appendSearchbarNotFound}</div>`);
         } else if (typeof ss.params.appendSearchbarNotFound === 'boolean') {
           $notFoundEl = $('<div class="block searchbar-not-found">Nothing found</div>');
         } else {
@@ -689,10 +685,10 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
         }
       }
 
-      var searchbarParams = extend({
+      const searchbarParams = extend({
         el: $searchbarEl,
         backdropEl: $containerEl.find('.searchbar-backdrop'),
-        searchContainer: ".smart-select-list-" + ss.id,
+        searchContainer: `.smart-select-list-${ss.id}`,
         searchIn: '.item-title'
       }, typeof ss.params.searchbar === 'object' ? ss.params.searchbar : {});
       ss.searchbar = app.searchbar.create(searchbarParams);
@@ -705,7 +701,7 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
 
 
     if (ss.params.closeOnSelect) {
-      ss.$containerEl.find("input[type=\"radio\"][name=\"" + ss.inputName + "\"]:checked").parents('label').once('click', function () {
+      ss.$containerEl.find(`input[type="radio"][name="${ss.inputName}"]:checked`).parents('label').once('click', () => {
         ss.close();
       });
     } // Attach input events
@@ -714,16 +710,16 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     ss.attachInputsEvents();
     ss.$el.trigger('smartselect:open');
     ss.emit('local::open smartSelectOpen', ss);
-  };
+  }
 
-  _proto.onOpened = function onOpened() {
-    var ss = this;
+  onOpened() {
+    const ss = this;
     ss.$el.trigger('smartselect:opened');
     ss.emit('local::opened smartSelectOpened', ss);
-  };
+  }
 
-  _proto.onClose = function onClose() {
-    var ss = this;
+  onClose() {
+    const ss = this;
     if (ss.destroyed) return; // Destroy VL
 
     if (ss.vl && ss.vl.destroy) {
@@ -743,69 +739,77 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     ss.detachInputsEvents();
     ss.$el.trigger('smartselect:close');
     ss.emit('local::close smartSelectClose', ss);
-  };
+  }
 
-  _proto.onClosed = function onClosed() {
-    var ss = this;
+  onClosed() {
+    const ss = this;
     if (ss.destroyed) return;
     ss.opened = false;
     ss.$containerEl = null;
     delete ss.$containerEl;
     ss.$el.trigger('smartselect:closed');
     ss.emit('local::closed smartSelectClosed', ss);
-  };
+  }
 
-  _proto.openPage = function openPage() {
-    var ss = this;
+  openPage() {
+    const ss = this;
     if (ss.opened) return ss;
     ss.getItemsData();
-    var pageHtml = ss.renderPage(ss.items);
+    const pageHtml = ss.renderPage(ss.items);
     ss.view.router.navigate({
       url: ss.url,
       route: {
         content: pageHtml,
         path: ss.url,
         on: {
-          pageBeforeIn: function pageBeforeIn(e, page) {
+          pageBeforeIn(e, page) {
             ss.onOpen('page', page.el);
           },
-          pageAfterIn: function pageAfterIn(e, page) {
+
+          pageAfterIn(e, page) {
             ss.onOpened('page', page.el);
           },
-          pageBeforeOut: function pageBeforeOut(e, page) {
+
+          pageBeforeOut(e, page) {
             ss.onClose('page', page.el);
           },
-          pageAfterOut: function pageAfterOut(e, page) {
+
+          pageAfterOut(e, page) {
             ss.onClosed('page', page.el);
           }
+
         }
       }
     });
     return ss;
-  };
+  }
 
-  _proto.openPopup = function openPopup() {
-    var ss = this;
+  openPopup() {
+    const ss = this;
     if (ss.opened) return ss;
     ss.getItemsData();
-    var popupHtml = ss.renderPopup(ss.items);
-    var popupParams = {
+    const popupHtml = ss.renderPopup(ss.items);
+    const popupParams = {
       content: popupHtml,
       push: ss.params.popupPush,
       swipeToClose: ss.params.popupSwipeToClose,
       on: {
-        popupOpen: function popupOpen(popup) {
+        popupOpen(popup) {
           ss.onOpen('popup', popup.el);
         },
-        popupOpened: function popupOpened(popup) {
+
+        popupOpened(popup) {
           ss.onOpened('popup', popup.el);
         },
-        popupClose: function popupClose(popup) {
+
+        popupClose(popup) {
           ss.onClose('popup', popup.el);
         },
-        popupClosed: function popupClosed(popup) {
+
+        popupClosed(popup) {
           ss.onClosed('popup', popup.el);
         }
+
       }
     };
 
@@ -822,14 +826,14 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return ss;
-  };
+  }
 
-  _proto.openSheet = function openSheet() {
-    var ss = this;
+  openSheet() {
+    const ss = this;
     if (ss.opened) return ss;
     ss.getItemsData();
-    var sheetHtml = ss.renderSheet(ss.items);
-    var sheetParams = {
+    const sheetHtml = ss.renderSheet(ss.items);
+    const sheetParams = {
       content: sheetHtml,
       backdrop: ss.params.sheetBackdrop,
       scrollToEl: ss.$el,
@@ -837,18 +841,22 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
       push: ss.params.sheetPush,
       swipeToClose: ss.params.sheetSwipeToClose,
       on: {
-        sheetOpen: function sheetOpen(sheet) {
+        sheetOpen(sheet) {
           ss.onOpen('sheet', sheet.el);
         },
-        sheetOpened: function sheetOpened(sheet) {
+
+        sheetOpened(sheet) {
           ss.onOpened('sheet', sheet.el);
         },
-        sheetClose: function sheetClose(sheet) {
+
+        sheetClose(sheet) {
           ss.onClose('sheet', sheet.el);
         },
-        sheetClosed: function sheetClosed(sheet) {
+
+        sheetClosed(sheet) {
           ss.onClosed('sheet', sheet.el);
         }
+
       }
     };
 
@@ -865,29 +873,33 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return ss;
-  };
+  }
 
-  _proto.openPopover = function openPopover() {
-    var ss = this;
+  openPopover() {
+    const ss = this;
     if (ss.opened) return ss;
     ss.getItemsData();
-    var popoverHtml = ss.renderPopover(ss.items);
-    var popoverParams = {
+    const popoverHtml = ss.renderPopover(ss.items);
+    const popoverParams = {
       content: popoverHtml,
       targetEl: ss.$el,
       on: {
-        popoverOpen: function popoverOpen(popover) {
+        popoverOpen(popover) {
           ss.onOpen('popover', popover.el);
         },
-        popoverOpened: function popoverOpened(popover) {
+
+        popoverOpened(popover) {
           ss.onOpened('popover', popover.el);
         },
-        popoverClose: function popoverClose(popover) {
+
+        popoverClose(popover) {
           ss.onClose('popover', popover.el);
         },
-        popoverClosed: function popoverClosed(popover) {
+
+        popoverClosed(popover) {
           ss.onClosed('popover', popover.el);
         }
+
       }
     };
 
@@ -904,12 +916,12 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return ss;
-  };
+  }
 
-  _proto.open = function open(type) {
-    var ss = this;
+  open(type) {
+    const ss = this;
     if (ss.opened) return ss;
-    var prevented = false;
+    let prevented = false;
 
     function prevent() {
       prevented = true;
@@ -917,29 +929,29 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
 
     if (ss.$el) {
       ss.$el.trigger('smartselect:beforeopen', {
-        prevent: prevent
+        prevent
       });
     }
 
     ss.emit('local::beforeOpen smartSelectBeforeOpen', ss, prevent);
     if (prevented) return ss;
-    var openIn = type || ss.params.openIn;
-    ss["open" + openIn.split('').map(function (el, index) {
+    const openIn = type || ss.params.openIn;
+    ss[`open${openIn.split('').map((el, index) => {
       if (index === 0) return el.toUpperCase();
       return el;
-    }).join('')]();
+    }).join('')}`]();
     return ss;
-  };
+  }
 
-  _proto.close = function close() {
-    var ss = this;
+  close() {
+    const ss = this;
     if (!ss.opened) return ss;
 
     if (ss.params.routableModals && ss.view || ss.openedIn === 'page') {
       ss.view.router.back();
     } else {
-      ss.modal.once('modalClosed', function () {
-        nextTick(function () {
+      ss.modal.once('modalClosed', () => {
+        nextTick(() => {
           if (ss.destroyed) return;
           ss.modal.destroy();
           delete ss.modal;
@@ -949,48 +961,24 @@ var SmartSelect = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return ss;
-  };
+  }
 
-  _proto.init = function init() {
-    var ss = this;
+  init() {
+    const ss = this;
     ss.attachEvents();
     ss.setValueText();
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var ss = this;
+  destroy() {
+    const ss = this;
     ss.emit('local::beforeDestroy smartSelectBeforeDestroy', ss);
     ss.$el.trigger('smartselect:beforedestroy');
     ss.detachEvents();
     delete ss.$el[0].f7SmartSelect;
     deleteProps(ss);
     ss.destroyed = true;
-  };
-
-  _createClass(SmartSelect, [{
-    key: "view",
-    get: function get() {
-      var params = this.params,
-          $el = this.$el;
-      var view;
-
-      if (params.view) {
-        view = params.view;
-      }
-
-      if (!view) {
-        view = $el.parents('.view').length && $el.parents('.view')[0].f7View;
-      }
-
-      if (!view && params.openIn === 'page') {
-        throw Error('Smart Select requires initialized View');
-      }
-
-      return view;
-    }
-  }]);
+  }
 
-  return SmartSelect;
-}(Framework7Class);
+}
 
 export default SmartSelect;