framework7 6.3.4 → 7.0.0-beta.3

package/components/toast/toast.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(t,o){void 0===o&&(o=!0);var s=t.$,e=t.utils,n=(t.getDevice,t.getSupport,t.Class,t.Modal),a=(t.ConstructorMethods,t.ModalMethods),l=e.extend,c=e.nextTick;class r extends n{constructor(t,o){const e=l({on:{}},t.params.toast,o);super(t,e);const n=this,a=getWindow();n.app=t,n.params=e;const{closeButton:r,closeTimeout:i}=n.params;let u,d;if(n.params.el)u=s(n.params.el);else{const t=n.render();u=s(t)}return u&&u.length>0&&u[0].f7Modal?u[0].f7Modal:0===u.length?n.destroy():(l(n,{$el:u,el:u[0],type:"toast"}),u[0].f7Modal=n,r&&(u.find(".toast-button").on("click",(()=>{n.emit("local::closeButtonClick toastCloseButtonClick",n),n.close()})),n.on("beforeDestroy",(()=>{u.find(".toast-button").off("click")}))),n.on("open",(()=>{s(".toast.modal-in").each((o=>{const s=t.toast.get(o);o!==n.el&&s&&s.close()})),i&&(d=c((()=>{n.close()}),i))})),n.on("close",(()=>{a.clearTimeout(d)})),n.params.destroyOnClose&&n.once("closed",(()=>{setTimeout((()=>{n.destroy()}),0)})),n)}render(){const t=this;if(t.params.render)return t.params.render.call(t,t);const{position:o,horizontalPosition:s,cssClass:e,icon:n,text:a,closeButton:l,closeButtonColor:c,closeButtonText:r}=t.params;return $jsx("div",{class:`toast toast-${o} ${"top"===o||"bottom"===o?`toast-horizontal-${s}`:""} ${e||""} ${n?"toast-with-icon":""}`},$jsx("div",{class:"toast-content"},n&&$jsx("div",{class:"toast-icon"},n),$jsx("div",{class:"toast-text"},a),l&&!n&&$jsx("a",{class:"toast-button button "+(c?`color-${c}`:"")},r)))}}var i={name:"toast",static:{Toast:r},create(){const t=this;t.toast=l({},a({app:t,constructor:r,defaultSelector:".toast.modal-in"}),{show:o=>(l(o,{destroyOnClose:!0}),new r(t,o).open())})},params:{toast:{icon:null,text:null,position:"bottom",horizontalPosition:"left",closeButton:!1,closeButtonColor:null,closeButtonText:"Ok",closeTimeout:null,cssClass:null,render:null,containerEl:null}}};if(o){if(t.prototype.modules&&t.prototype.modules[i.name])return;t.use(i),t.instance&&(t.instance.useModuleParams(i,t.instance.params),t.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

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

@@ -1,68 +1,55 @@
-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, now, nextTick, deleteProps } from '../../shared/utils';
 import Framework7Class from '../../shared/class';
 import { getSupport } from '../../shared/get-support';
 
-var Toggle = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Toggle, _Framework7Class);
-
-  function Toggle(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var toggle = _assertThisInitialized(_this);
-
-    var support = getSupport();
-    var defaults = {}; // Extend defaults with modules params
+class Toggle extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const toggle = this;
+    const support = getSupport();
+    const defaults = {}; // Extend defaults with modules params
 
     toggle.useModulesParams(defaults);
     toggle.params = extend(defaults, params);
-    var el = toggle.params.el;
-    if (!el) return toggle || _assertThisInitialized(_this);
-    var $el = $(el);
-    if ($el.length === 0) return toggle || _assertThisInitialized(_this);
-    if ($el[0].f7Toggle) return $el[0].f7Toggle || _assertThisInitialized(_this);
-    var $inputEl = $el.children('input[type="checkbox"]');
+    const el = toggle.params.el;
+    if (!el) return toggle;
+    const $el = $(el);
+    if ($el.length === 0) return toggle;
+    if ($el[0].f7Toggle) return $el[0].f7Toggle;
+    const $inputEl = $el.children('input[type="checkbox"]');
     extend(toggle, {
-      app: app,
-      $el: $el,
+      app,
+      $el,
       el: $el[0],
-      $inputEl: $inputEl,
+      $inputEl,
       inputEl: $inputEl[0],
       disabled: $el.hasClass('disabled') || $inputEl.hasClass('disabled') || $inputEl.attr('disabled') || $inputEl[0].disabled
     });
     Object.defineProperty(toggle, 'checked', {
       enumerable: true,
       configurable: true,
-      set: function set(checked) {
+
+      set(checked) {
         if (!toggle || typeof toggle.$inputEl === 'undefined') return;
         if (toggle.checked === checked) return;
         $inputEl[0].checked = checked;
         toggle.$inputEl.trigger('change');
       },
-      get: function get() {
+
+      get() {
         return $inputEl[0].checked;
       }
+
     });
     $el[0].f7Toggle = toggle;
-    var isTouched;
-    var touchesStart = {};
-    var isScrolling;
-    var touchesDiff;
-    var toggleWidth;
-    var touchStartTime;
-    var touchStartChecked;
+    let isTouched;
+    const touchesStart = {};
+    let isScrolling;
+    let touchesDiff;
+    let toggleWidth;
+    let touchStartTime;
+    let touchStartChecked;
 
     function handleTouchStart(e) {
       if (isTouched || toggle.disabled) return;
@@ -74,7 +61,7 @@ var Toggle = /*#__PURE__*/function (_Framework7Class) {
       touchStartTime = now();
       touchStartChecked = toggle.checked;
       toggleWidth = $el[0].offsetWidth;
-      nextTick(function () {
+      nextTick(() => {
         if (isTouched) {
           $el.addClass('toggle-active-state');
         }
@@ -83,9 +70,9 @@ var Toggle = /*#__PURE__*/function (_Framework7Class) {
 
     function handleTouchMove(e) {
       if (!isTouched || toggle.disabled) return;
-      var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
-      var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-      var inverter = app.rtl ? -1 : 1;
+      const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      const inverter = app.rtl ? -1 : 1;
 
       if (typeof isScrolling === 'undefined') {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
@@ -98,7 +85,7 @@ var Toggle = /*#__PURE__*/function (_Framework7Class) {
 
       e.preventDefault();
       touchesDiff = pageX - touchesStart.x;
-      var changed;
+      let changed;
 
       if (touchesDiff * inverter < 0 && Math.abs(touchesDiff) > toggleWidth / 3 && touchStartChecked) {
         changed = true;
@@ -122,10 +109,10 @@ var Toggle = /*#__PURE__*/function (_Framework7Class) {
         return;
       }
 
-      var inverter = app.rtl ? -1 : 1;
+      const inverter = app.rtl ? -1 : 1;
       isTouched = false;
       $el.removeClass('toggle-active-state');
-      var changed;
+      let changed;
 
       if (now() - touchStartTime < 300) {
         if (touchesDiff * inverter < 0 && touchStartChecked) {
@@ -148,7 +135,7 @@ var Toggle = /*#__PURE__*/function (_Framework7Class) {
     }
 
     toggle.attachEvents = function attachEvents() {
-      var passive = support.passiveListener ? {
+      const passive = support.passiveListener ? {
         passive: true
       } : false;
       $el.on(app.touchEvents.start, handleTouchStart, passive);
@@ -158,7 +145,7 @@ var Toggle = /*#__PURE__*/function (_Framework7Class) {
     };
 
     toggle.detachEvents = function detachEvents() {
-      var passive = support.passiveListener ? {
+      const passive = support.passiveListener ? {
         passive: true
       } : false;
       $el.off(app.touchEvents.start, handleTouchStart, passive);
@@ -171,32 +158,28 @@ var Toggle = /*#__PURE__*/function (_Framework7Class) {
     toggle.useModules(); // Init
 
     toggle.init();
-    return _this;
   }
 
-  var _proto = Toggle.prototype;
-
-  _proto.toggle = function toggle() {
-    var toggle = this;
+  toggle() {
+    const toggle = this;
     toggle.checked = !toggle.checked;
-  };
+  }
 
-  _proto.init = function init() {
-    var toggle = this;
+  init() {
+    const toggle = this;
     toggle.attachEvents();
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var toggle = this;
+  destroy() {
+    let toggle = this;
     toggle.$el.trigger('toggle:beforedestroy');
     toggle.emit('local::beforeDestroy toggleBeforeDestroy', toggle);
     delete toggle.$el[0].f7Toggle;
     toggle.detachEvents();
     deleteProps(toggle);
     toggle = null;
-  };
+  }
 
-  return Toggle;
-}(Framework7Class);
+}
 
 export default Toggle;

package/components/toggle/toggle-rtl.css

@@ -1 +1 @@
-:root{--f7-toggle-handle-color:#fff}:root .theme-dark,:root.theme-dark{--f7-toggle-inactive-color:#555}.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-border-color:#e5e5e5;--f7-toggle-inactive-color:#fff}.ios .theme-dark,.ios.theme-dark{--f7-toggle-border-color:#555}.md{--f7-toggle-width:36px;--f7-toggle-height:14px;--f7-toggle-inactive-color:#b0afaf}.aurora{--f7-toggle-width:40px;--f7-toggle-height:20px;--f7-toggle-inactive-color:#aaa}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{background:var(--f7-toggle-handle-color);position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,rgba(var(--f7-theme-color-rgb),.5))}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));background:var(--f7-toggle-active-color,var(--f7-theme-color))}.md .toggle-icon{background:var(--f7-toggle-inactive-color)}.md .toggle-icon:after{height:calc(var(--f7-toggle-height) + 6px);width:calc(var(--f7-toggle-height) + 6px);top:-3px;box-shadow:0 2px 5px rgba(0,0,0,.4);border-radius:var(--f7-toggle-height);right:0}.aurora .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.aurora .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.aurora .toggle-icon{background:var(--f7-toggle-inactive-color)}.aurora .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;border-radius:calc(var(--f7-toggle-height) - 4px)}
+:root{--f7-toggle-handle-color:#fff}:root .dark,:root.dark{--f7-toggle-inactive-color:#555}.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-border-color:#e5e5e5;--f7-toggle-inactive-color:#fff}.ios .dark,.ios.dark{--f7-toggle-border-color:#555}.md{--f7-toggle-width:36px;--f7-toggle-height:14px;--f7-toggle-inactive-color:#b0afaf}.aurora{--f7-toggle-width:40px;--f7-toggle-height:20px;--f7-toggle-inactive-color:#aaa}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{background:var(--f7-toggle-handle-color);position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,rgba(var(--f7-theme-color-rgb),.5))}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));background:var(--f7-toggle-active-color,var(--f7-theme-color))}.md .toggle-icon{background:var(--f7-toggle-inactive-color)}.md .toggle-icon:after{height:calc(var(--f7-toggle-height) + 6px);width:calc(var(--f7-toggle-height) + 6px);top:-3px;box-shadow:0 2px 5px rgba(0,0,0,.4);border-radius:var(--f7-toggle-height);right:0}.aurora .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.aurora .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.aurora .toggle-icon{background:var(--f7-toggle-inactive-color)}.aurora .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;border-radius:calc(var(--f7-toggle-height) - 4px)}

package/components/toggle/toggle.css

@@ -1 +1 @@
-:root{--f7-toggle-handle-color:#fff}:root .theme-dark,:root.theme-dark{--f7-toggle-inactive-color:#555}.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-border-color:#e5e5e5;--f7-toggle-inactive-color:#fff}.ios .theme-dark,.ios.theme-dark{--f7-toggle-border-color:#555}.md{--f7-toggle-width:36px;--f7-toggle-height:14px;--f7-toggle-inactive-color:#b0afaf}.aurora{--f7-toggle-width:40px;--f7-toggle-height:20px;--f7-toggle-inactive-color:#aaa}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{background:var(--f7-toggle-handle-color);position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;left:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,rgba(var(--f7-theme-color-rgb),.5))}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));background:var(--f7-toggle-active-color,var(--f7-theme-color))}.md .toggle-icon{background:var(--f7-toggle-inactive-color)}.md .toggle-icon:after{height:calc(var(--f7-toggle-height) + 6px);width:calc(var(--f7-toggle-height) + 6px);top:-3px;box-shadow:0 2px 5px rgba(0,0,0,.4);border-radius:var(--f7-toggle-height);left:0}.aurora .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.aurora .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.aurora .toggle-icon{background:var(--f7-toggle-inactive-color)}.aurora .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;border-radius:calc(var(--f7-toggle-height) - 4px)}
+:root{--f7-toggle-handle-color:#fff}:root .dark,:root.dark{--f7-toggle-inactive-color:#555}.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-border-color:#e5e5e5;--f7-toggle-inactive-color:#fff}.ios .dark,.ios.dark{--f7-toggle-border-color:#555}.md{--f7-toggle-width:36px;--f7-toggle-height:14px;--f7-toggle-inactive-color:#b0afaf}.aurora{--f7-toggle-width:40px;--f7-toggle-height:20px;--f7-toggle-inactive-color:#aaa}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{background:var(--f7-toggle-handle-color);position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;left:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,rgba(var(--f7-theme-color-rgb),.5))}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));background:var(--f7-toggle-active-color,var(--f7-theme-color))}.md .toggle-icon{background:var(--f7-toggle-inactive-color)}.md .toggle-icon:after{height:calc(var(--f7-toggle-height) + 6px);width:calc(var(--f7-toggle-height) + 6px);top:-3px;box-shadow:0 2px 5px rgba(0,0,0,.4);border-radius:var(--f7-toggle-height);left:0}.aurora .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.aurora .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.aurora .toggle-icon{background:var(--f7-toggle-inactive-color)}.aurora .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;border-radius:calc(var(--f7-toggle-height) - 4px)}

package/components/toggle/toggle.js

@@ -1 +1,65 @@
-(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var o=e.$,n=e.utils,r=(e.getDevice,e.getSupport),a=e.Class,i=(e.Modal,e.ConstructorMethods);e.ModalMethods;function c(e){this.wrapped=e}function s(e){var t,o;function n(t,o){try{var a=e[t](o),i=a.value,s=i instanceof c;Promise.resolve(s?i.wrapped:i).then((function(e){s?n("return"===t?"return":"next",e):r(a.done?"return":"normal",e)}),(function(e){n("throw",e)}))}catch(e){r("throw",e)}}function r(e,r){switch(e){case"return":t.resolve({value:r,done:!0});break;case"throw":t.reject(r);break;default:t.resolve({value:r,done:!1})}(t=t.next)?n(t.key,t.arg):o=null}this._invoke=function(e,r){return new Promise((function(a,i){var c={key:e,arg:r,resolve:a,reject:i,next:null};o?o=o.next=c:(t=o=c,n(e,r))}))},"function"!=typeof e.return&&(this.return=void 0)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}s.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},s.prototype.next=function(e){return this._invoke("next",e)},s.prototype.throw=function(e){return this._invoke("throw",e)},s.prototype.return=function(e){return this._invoke("return",e)};var g=n.extend,f=n.now,h=n.nextTick,d=n.deleteProps,p=function(e){var t,n;function a(t,n){var a;void 0===n&&(n={});var i=l(a=e.call(this,n,[t])||this),c=r(),s={};i.useModulesParams(s),i.params=g(s,n);var u=i.params.el;if(!u)return i||l(a);var d=o(u);if(0===d.length)return i||l(a);if(d[0].f7Toggle)return d[0].f7Toggle||l(a);var p,v=d.children('input[type="checkbox"]');g(i,{app:t,$el:d,el:d[0],$inputEl:v,inputEl:v[0],disabled:d.hasClass("disabled")||v.hasClass("disabled")||v.attr("disabled")||v[0].disabled}),Object.defineProperty(i,"checked",{enumerable:!0,configurable:!0,set:function(e){i&&void 0!==i.$inputEl&&i.checked!==e&&(v[0].checked=e,i.$inputEl.trigger("change"))},get:function(){return v[0].checked}}),d[0].f7Toggle=i;var y,m,b,k,T,w={};function x(e){p||i.disabled||(w.x="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,w.y="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,m=0,p=!0,y=void 0,k=f(),T=i.checked,b=d[0].offsetWidth,h((function(){p&&d.addClass("toggle-active-state")})))}function E(e){if(p&&!i.disabled){var o,n="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,r="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,a=t.rtl?-1:1;if(void 0===y&&(y=!!(y||Math.abs(r-w.y)>Math.abs(n-w.x))),y)p=!1;else e.preventDefault(),(m=n-w.x)*a<0&&Math.abs(m)>b/3&&T&&(o=!0),m*a>0&&Math.abs(m)>b/3&&!T&&(o=!0),o&&(w.x=n,i.checked=!T,T=!T)}}function M(){if(!p||i.disabled)return y&&d.removeClass("toggle-active-state"),void(p=!1);var e,o=t.rtl?-1:1;p=!1,d.removeClass("toggle-active-state"),f()-k<300&&(m*o<0&&T&&(e=!0),m*o>0&&!T&&(e=!0),e&&(i.checked=!T))}function $(){i.$el.trigger("toggle:change"),i.emit("local::change toggleChange",i)}return i.attachEvents=function(){var e=!!c.passiveListener&&{passive:!0};d.on(t.touchEvents.start,x,e),t.on("touchmove",E),t.on("touchend:passive",M),i.$inputEl.on("change",$)},i.detachEvents=function(){var e=!!c.passiveListener&&{passive:!0};d.off(t.touchEvents.start,x,e),t.off("touchmove",E),t.off("touchend:passive",M),i.$inputEl.off("change",$)},i.useModules(),i.init(),a}n=e,(t=a).prototype=Object.create(n.prototype),t.prototype.constructor=t,u(t,n);var i=a.prototype;return i.toggle=function(){this.checked=!this.checked},i.init=function(){this.attachEvents()},i.destroy=function(){var e=this;e.$el.trigger("toggle:beforedestroy"),e.emit("local::beforeDestroy toggleBeforeDestroy",e),delete e.$el[0].f7Toggle,e.detachEvents(),d(e),e=null},a}(a),v={name:"toggle",create:function(){this.toggle=i({defaultSelector:".toggle",constructor:p,app:this,domProp:"f7Toggle"})},static:{Toggle:p},on:{tabMounted:function(e){var t=this;o(e).find(".toggle-init").each((function(e){return t.toggle.create({el:e})}))},tabBeforeRemove:function(e){o(e).find(".toggle-init").each((function(e){e.f7Toggle&&e.f7Toggle.destroy()}))},pageInit:function(e){var t=this;e.$el.find(".toggle-init").each((function(e){return t.toggle.create({el:e})}))},pageBeforeRemove:function(e){e.$el.find(".toggle-init").each((function(e){e.f7Toggle&&e.f7Toggle.destroy()}))}},vnode:{"toggle-init":{insert:function(e){var t=e.elm;this.toggle.create({el:t})},destroy:function(e){var t=e.elm;t.f7Toggle&&t.f7Toggle.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[v.name])return;e.use(v),e.instance&&(e.instance.useModuleParams(v,e.instance.params),e.instance.useModule(v))}return v}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7';
+import ConstructorMethods from '../../shared/constructor-methods';
+import Toggle from './toggle-class';
+export default {
+  name: 'toggle',
+
+  create() {
+    const app = this;
+    app.toggle = ConstructorMethods({
+      defaultSelector: '.toggle',
+      constructor: Toggle,
+      app,
+      domProp: 'f7Toggle'
+    });
+  },
+
+  static: {
+    Toggle
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.toggle-init').each(toggleEl => app.toggle.create({
+        el: toggleEl
+      }));
+    },
+
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.toggle-init').each(toggleEl => {
+        if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
+      });
+    },
+
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.toggle-init').each(toggleEl => app.toggle.create({
+        el: toggleEl
+      }));
+    },
+
+    pageBeforeRemove(page) {
+      page.$el.find('.toggle-init').each(toggleEl => {
+        if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
+      });
+    }
+
+  },
+  vnode: {
+    'toggle-init': {
+      insert(vnode) {
+        const app = this;
+        const toggleEl = vnode.elm;
+        app.toggle.create({
+          el: toggleEl
+        });
+      },
+
+      destroy(vnode) {
+        const toggleEl = vnode.elm;
+        if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
+      }
+
+    }
+  }
+};

package/components/toggle/toggle.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var o=e.$,s=e.utils,a=(e.getDevice,e.getSupport),n=e.Class,l=(e.Modal,e.ConstructorMethods),i=(e.ModalMethods,s.extend),c=s.now,g=s.nextTick,r=s.deleteProps;class d extends n{constructor(e,t={}){super(t,[e]);const s=this,n=a(),l={};s.useModulesParams(l),s.params=i(l,t);const r=s.params.el;if(!r)return s;const d=o(r);if(0===d.length)return s;if(d[0].f7Toggle)return d[0].f7Toggle;const h=d.children('input[type="checkbox"]');let u;i(s,{app:e,$el:d,el:d[0],$inputEl:h,inputEl:h[0],disabled:d.hasClass("disabled")||h.hasClass("disabled")||h.attr("disabled")||h[0].disabled}),Object.defineProperty(s,"checked",{enumerable:!0,configurable:!0,set(e){s&&void 0!==s.$inputEl&&s.checked!==e&&(h[0].checked=e,s.$inputEl.trigger("change"))},get:()=>h[0].checked}),d[0].f7Toggle=s;const f={};let p,v,m,b,y;function T(e){u||s.disabled||(f.x="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,f.y="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,v=0,u=!0,p=void 0,b=c(),y=s.checked,m=d[0].offsetWidth,g((()=>{u&&d.addClass("toggle-active-state")})))}function M(t){if(!u||s.disabled)return;const o="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,a="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY,n=e.rtl?-1:1;if(void 0===p&&(p=!!(p||Math.abs(a-f.y)>Math.abs(o-f.x))),p)return void(u=!1);let l;t.preventDefault(),v=o-f.x,v*n<0&&Math.abs(v)>m/3&&y&&(l=!0),v*n>0&&Math.abs(v)>m/3&&!y&&(l=!0),l&&(f.x=o,s.checked=!y,y=!y)}function k(){if(!u||s.disabled)return p&&d.removeClass("toggle-active-state"),void(u=!1);const t=e.rtl?-1:1;let o;u=!1,d.removeClass("toggle-active-state"),c()-b<300&&(v*t<0&&y&&(o=!0),v*t>0&&!y&&(o=!0),o&&(s.checked=!y))}function E(){s.$el.trigger("toggle:change"),s.emit("local::change toggleChange",s)}s.attachEvents=function(){const t=!!n.passiveListener&&{passive:!0};d.on(e.touchEvents.start,T,t),e.on("touchmove",M),e.on("touchend:passive",k),s.$inputEl.on("change",E)},s.detachEvents=function(){const t=!!n.passiveListener&&{passive:!0};d.off(e.touchEvents.start,T,t),e.off("touchmove",M),e.off("touchend:passive",k),s.$inputEl.off("change",E)},s.useModules(),s.init()}toggle(){this.checked=!this.checked}init(){this.attachEvents()}destroy(){let e=this;e.$el.trigger("toggle:beforedestroy"),e.emit("local::beforeDestroy toggleBeforeDestroy",e),delete e.$el[0].f7Toggle,e.detachEvents(),r(e),e=null}}var h={name:"toggle",create(){this.toggle=l({defaultSelector:".toggle",constructor:d,app:this,domProp:"f7Toggle"})},static:{Toggle:d},on:{tabMounted(e){const t=this;o(e).find(".toggle-init").each((e=>t.toggle.create({el:e})))},tabBeforeRemove(e){o(e).find(".toggle-init").each((e=>{e.f7Toggle&&e.f7Toggle.destroy()}))},pageInit(e){const t=this;e.$el.find(".toggle-init").each((e=>t.toggle.create({el:e})))},pageBeforeRemove(e){e.$el.find(".toggle-init").each((e=>{e.f7Toggle&&e.f7Toggle.destroy()}))}},vnode:{"toggle-init":{insert(e){const t=e.elm;this.toggle.create({el:t})},destroy(e){const t=e.elm;t.f7Toggle&&t.f7Toggle.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[h.name])return;e.use(h),e.instance&&(e.instance.useModuleParams(h,e.instance.params),e.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/{esm/components → components}/toolbar/toolbar.js

@@ -1,13 +1,13 @@
 import $ from '../../shared/dom7';
 import { nextFrame, bindMethods } from '../../shared/utils';
-var Toolbar = {
-  setHighlight: function setHighlight(tabbarEl) {
-    var app = this;
+const Toolbar = {
+  setHighlight(tabbarEl) {
+    const app = this;
     if (app.theme === 'ios') return;
-    var $tabbarEl = $(tabbarEl);
+    const $tabbarEl = $(tabbarEl);
     if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) return;
-    var $highlightEl = $tabbarEl.find('.tab-link-highlight');
-    var tabLinksCount = $tabbarEl.find('.tab-link').length;
+    let $highlightEl = $tabbarEl.find('.tab-link-highlight');
+    const tabLinksCount = $tabbarEl.find('.tab-link').length;
 
     if (tabLinksCount === 0) {
       $highlightEl.remove();
@@ -21,55 +21,50 @@ var Toolbar = {
       $tabbarEl.children('.toolbar-inner').append($highlightEl);
     }
 
-    var $activeLink = $tabbarEl.find('.tab-link-active');
-    var highlightWidth;
-    var highlightTranslate;
+    const $activeLink = $tabbarEl.find('.tab-link-active');
+    let highlightWidth;
+    let highlightTranslate;
 
     if ($tabbarEl.hasClass('tabbar-scrollable') && $activeLink && $activeLink[0]) {
-      highlightWidth = $activeLink[0].offsetWidth + "px";
-      highlightTranslate = $activeLink[0].offsetLeft + "px";
+      highlightWidth = `${$activeLink[0].offsetWidth}px`;
+      highlightTranslate = `${$activeLink[0].offsetLeft}px`;
     } else {
-      var activeIndex = $activeLink.index();
-      highlightWidth = 100 / tabLinksCount + "%";
-      highlightTranslate = (app.rtl ? -activeIndex : activeIndex) * 100 + "%";
+      const activeIndex = $activeLink.index();
+      highlightWidth = `${100 / tabLinksCount}%`;
+      highlightTranslate = `${(app.rtl ? -activeIndex : activeIndex) * 100}%`;
     }
 
-    nextFrame(function () {
-      $highlightEl.css('width', highlightWidth).transform("translate3d(" + highlightTranslate + ",0,0)");
+    nextFrame(() => {
+      $highlightEl.css('width', highlightWidth).transform(`translate3d(${highlightTranslate},0,0)`);
     });
   },
-  init: function init(tabbarEl) {
-    var app = this;
+
+  init(tabbarEl) {
+    const app = this;
     app.toolbar.setHighlight(tabbarEl);
   },
-  hide: function hide(el, animate) {
-    if (animate === void 0) {
-      animate = true;
-    }
 
-    var app = this;
-    var $el = $(el);
+  hide(el, animate = true) {
+    const app = this;
+    const $el = $(el);
     if ($el.hasClass('toolbar-hidden')) return;
-    var className = "toolbar-hidden" + (animate ? ' toolbar-transitioning' : '');
-    $el.transitionEnd(function () {
+    const className = `toolbar-hidden${animate ? ' toolbar-transitioning' : ''}`;
+    $el.transitionEnd(() => {
       $el.removeClass('toolbar-transitioning');
     });
     $el.addClass(className);
     $el.trigger('toolbar:hide');
     app.emit('toolbarHide', $el[0]);
   },
-  show: function show(el, animate) {
-    if (animate === void 0) {
-      animate = true;
-    }
 
-    var app = this;
-    var $el = $(el);
+  show(el, animate = true) {
+    const app = this;
+    const $el = $(el);
     if (!$el.hasClass('toolbar-hidden')) return;
 
     if (animate) {
       $el.addClass('toolbar-transitioning');
-      $el.transitionEnd(function () {
+      $el.transitionEnd(() => {
         $el.removeClass('toolbar-transitioning');
       });
     }
@@ -78,10 +73,11 @@ var Toolbar = {
     $el.trigger('toolbar:show');
     app.emit('toolbarShow', $el[0]);
   },
-  initToolbarOnScroll: function initToolbarOnScroll(pageEl) {
-    var app = this;
-    var $pageEl = $(pageEl);
-    var $toolbarEl = $pageEl.parents('.view').children('.toolbar');
+
+  initToolbarOnScroll(pageEl) {
+    const app = this;
+    const $pageEl = $(pageEl);
+    let $toolbarEl = $pageEl.parents('.view').children('.toolbar');
 
     if ($toolbarEl.length === 0) {
       $toolbarEl = $pageEl.find('.toolbar');
@@ -95,18 +91,18 @@ var Toolbar = {
       return;
     }
 
-    var previousScrollTop;
-    var currentScrollTop;
-    var scrollHeight;
-    var offsetHeight;
-    var reachEnd;
-    var action;
-    var toolbarHidden;
+    let previousScrollTop;
+    let currentScrollTop;
+    let scrollHeight;
+    let offsetHeight;
+    let reachEnd;
+    let action;
+    let toolbarHidden;
 
     function handleScroll(e) {
       if ($pageEl.hasClass('page-with-card-opened')) return;
       if ($pageEl.hasClass('page-previous')) return;
-      var scrollContent = this;
+      const scrollContent = this;
 
       if (e && e.target && e.target !== scrollContent) {
         return;
@@ -148,15 +144,18 @@ var Toolbar = {
     $pageEl.on('scroll', '.page-content', handleScroll, true);
     $pageEl[0].f7ScrollToolbarHandler = handleScroll;
   }
+
 };
 export default {
   name: 'toolbar',
-  create: function create() {
-    var app = this;
+
+  create() {
+    const app = this;
     bindMethods(app, {
       toolbar: Toolbar
     });
   },
+
   params: {
     toolbar: {
       hideOnPageScroll: false,
@@ -165,14 +164,15 @@ export default {
     }
   },
   on: {
-    pageBeforeRemove: function pageBeforeRemove(page) {
+    pageBeforeRemove(page) {
       if (page.$el[0].f7ScrollToolbarHandler) {
         page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true);
       }
     },
-    pageBeforeIn: function pageBeforeIn(page) {
-      var app = this;
-      var $toolbarEl = page.$el.parents('.view').children('.toolbar');
+
+    pageBeforeIn(page) {
+      const app = this;
+      let $toolbarEl = page.$el.parents('.view').children('.toolbar');
 
       if ($toolbarEl.length === 0) {
         $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-labels');
@@ -192,9 +192,10 @@ export default {
         app.toolbar.show($toolbarEl);
       }
     },
-    pageInit: function pageInit(page) {
-      var app = this;
-      page.$el.find('.tabbar, .tabbar-labels').each(function (tabbarEl) {
+
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.tabbar, .tabbar-labels').each(tabbarEl => {
         app.toolbar.init(tabbarEl);
       });
 
@@ -206,19 +207,22 @@ export default {
         app.toolbar.initToolbarOnScroll(page.el);
       }
     },
-    init: function init() {
-      var app = this;
-      app.$el.find('.tabbar, .tabbar-labels').each(function (tabbarEl) {
+
+    init() {
+      const app = this;
+      app.$el.find('.tabbar, .tabbar-labels').each(tabbarEl => {
         app.toolbar.init(tabbarEl);
       });
     }
+
   },
   vnode: {
     tabbar: {
-      insert: function insert(vnode) {
-        var app = this;
+      insert(vnode) {
+        const app = this;
         app.toolbar.init(vnode.elm);
       }
+
     }
   }
 };