framework7 6.3.16 → 7.0.0-beta.12

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

@@ -1,33 +1,17 @@
-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 { getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, deleteProps } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
-import swipePanel from './swipe-panel';
-import resizablePanel from './resizable-panel';
-
-var Panel = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Panel, _Framework7Class);
-
-  function Panel(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    var extendedParams = extend({
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import swipePanel from './swipe-panel.js';
+import resizablePanel from './resizable-panel.js';
+
+class Panel extends Framework7Class {
+  constructor(app, params = {}) {
+    const extendedParams = extend({
       on: {}
     }, app.params.panel, params);
-    _this = _Framework7Class.call(this, extendedParams, [app]) || this;
-
-    var panel = _assertThisInitialized(_this);
-
+    super(extendedParams, [app]);
+    const panel = this;
     panel.params = extendedParams;
     panel.$containerEl = panel.params.containerEl ? $(panel.params.containerEl).eq(0) : app.$el;
     panel.containerEl = panel.$containerEl[0];
@@ -37,28 +21,27 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
       panel.containerEl = app.$el[0];
     }
 
-    var $el;
+    let $el;
 
     if (panel.params.el) {
       $el = $(panel.params.el).eq(0);
     } else if (panel.params.content) {
-      $el = $(panel.params.content).filter(function (node) {
-        return node.nodeType === 1;
-      }).eq(0);
+      $el = $(panel.params.content).filter(node => node.nodeType === 1).eq(0);
     }
 
-    if ($el.length === 0) return panel || _assertThisInitialized(_this);
-    if ($el[0].f7Panel) return $el[0].f7Panel || _assertThisInitialized(_this);
+    if ($el.length === 0) return panel;
+    if ($el[0].f7Panel) return $el[0].f7Panel;
     $el[0].f7Panel = panel;
-    var _panel$params = panel.params,
-        side = _panel$params.side,
-        effect = _panel$params.effect,
-        resizable = _panel$params.resizable;
+    let {
+      side,
+      effect,
+      resizable
+    } = panel.params;
     if (typeof side === 'undefined') side = $el.hasClass('panel-left') ? 'left' : 'right';
     if (typeof effect === 'undefined') // eslint-disable-next-line
       effect = $el.hasClass('panel-cover') ? 'cover' : $el.hasClass('panel-push') ? 'push' : 'reveal';
     if (typeof resizable === 'undefined') resizable = $el.hasClass('panel-resizable');
-    var $backdropEl;
+    let $backdropEl;
 
     if (panel.params.backdrop && panel.params.backdropEl) {
       $backdropEl = $(panel.params.backdropEl);
@@ -72,28 +55,26 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     extend(panel, {
-      app: app,
-      side: side,
-      effect: effect,
-      resizable: resizable,
-      $el: $el,
+      app,
+      side,
+      effect,
+      resizable,
+      $el,
       el: $el[0],
       opened: false,
-      $backdropEl: $backdropEl,
+      $backdropEl,
       backdropEl: $backdropEl && $backdropEl[0]
     }); // Install Modules
 
     panel.useModules(); // Init
 
     panel.init();
-    return panel || _assertThisInitialized(_this);
+    return panel;
   }
 
-  var _proto = Panel.prototype;
-
-  _proto.getViewEl = function getViewEl() {
-    var panel = this;
-    var viewEl;
+  getViewEl() {
+    const panel = this;
+    let viewEl;
 
     if (panel.$containerEl.children('.views').length > 0) {
       viewEl = panel.$containerEl.children('.views')[0];
@@ -102,18 +83,20 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return viewEl;
-  };
+  }
 
-  _proto.setStateClasses = function setStateClasses(state) {
-    var panel = this;
-    var side = panel.side,
-        el = panel.el;
-    var viewEl = panel.getViewEl();
-    var panelInView = viewEl && viewEl.contains(el);
-    var $targetEl = !viewEl || panelInView ? panel.$containerEl : $('html');
+  setStateClasses(state) {
+    const panel = this;
+    const {
+      side,
+      el
+    } = panel;
+    const viewEl = panel.getViewEl();
+    const panelInView = viewEl && viewEl.contains(el);
+    const $targetEl = !viewEl || panelInView ? panel.$containerEl : $('html');
 
     if (state === 'open') {
-      $targetEl.addClass("with-panel with-panel-" + panel.side + "-" + panel.effect);
+      $targetEl.addClass(`with-panel with-panel-${panel.side}-${panel.effect}`);
     }
 
     if (state === 'before-closing') {
@@ -122,7 +105,7 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
 
     if (state === 'closing') {
       $targetEl.addClass('with-panel-closing');
-      $targetEl.removeClass("with-panel with-panel-" + panel.side + "-" + panel.effect);
+      $targetEl.removeClass(`with-panel with-panel-${panel.side}-${panel.effect}`);
     }
 
     if (state === 'after-closing') {
@@ -130,38 +113,34 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (state === 'closed') {
-      $targetEl.removeClass("with-panel-" + side + "-reveal with-panel-" + side + "-cover with-panel-" + side + "-push with-panel");
+      $targetEl.removeClass(`with-panel-${side}-reveal with-panel-${side}-cover with-panel-${side}-push with-panel`);
     }
-  };
+  }
 
-  _proto.enableVisibleBreakpoint = function enableVisibleBreakpoint() {
-    var panel = this;
+  enableVisibleBreakpoint() {
+    const panel = this;
     panel.visibleBreakpointDisabled = false;
     panel.setVisibleBreakpoint();
     return panel;
-  };
+  }
 
-  _proto.disableVisibleBreakpoint = function disableVisibleBreakpoint() {
-    var panel = this;
+  disableVisibleBreakpoint() {
+    const panel = this;
     panel.visibleBreakpointDisabled = true;
     panel.setVisibleBreakpoint();
     return panel;
-  };
+  }
 
-  _proto.toggleVisibleBreakpoint = function toggleVisibleBreakpoint() {
-    var panel = this;
+  toggleVisibleBreakpoint() {
+    const panel = this;
     panel.visibleBreakpointDisabled = !panel.visibleBreakpointDisabled;
     panel.setVisibleBreakpoint();
     return panel;
-  };
-
-  _proto.setVisibleBreakpoint = function setVisibleBreakpoint(emitEvents) {
-    if (emitEvents === void 0) {
-      emitEvents = true;
-    }
+  }
 
-    var panel = this;
-    var app = panel.app;
+  setVisibleBreakpoint(emitEvents = true) {
+    const panel = this;
+    const app = panel.app;
 
     if (!panel.visibleBreakpointResizeHandler) {
       panel.visibleBreakpointResizeHandler = function visibleBreakpointResizeHandler() {
@@ -171,14 +150,16 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
       app.on('resize', panel.visibleBreakpointResizeHandler);
     }
 
-    var side = panel.side,
-        $el = panel.$el,
-        $containerEl = panel.$containerEl,
-        params = panel.params,
-        visibleBreakpointDisabled = panel.visibleBreakpointDisabled;
-    var breakpoint = params.visibleBreakpoint;
-    var $viewEl = $(panel.getViewEl());
-    var wasVisible = $el.hasClass('panel-in-breakpoint');
+    const {
+      side,
+      $el,
+      $containerEl,
+      params,
+      visibleBreakpointDisabled
+    } = panel;
+    const breakpoint = params.visibleBreakpoint;
+    const $viewEl = $(panel.getViewEl());
+    const wasVisible = $el.hasClass('panel-in-breakpoint');
 
     if ($containerEl && $containerEl.hasClass('page')) {
       $viewEl.add($containerEl.children('.page-content, .tabs, .fab'));
@@ -186,13 +167,13 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
 
     if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !visibleBreakpointDisabled) {
       if (!wasVisible) {
-        var _$viewEl$css;
-
         panel.setStateClasses('closed');
         $el.addClass('panel-in-breakpoint').removeClass('panel-in panel-in-collapsed');
         panel.onOpen(false);
         panel.onOpened();
-        $viewEl.css((_$viewEl$css = {}, _$viewEl$css["margin-" + side] = $el.width() + "px", _$viewEl$css));
+        $viewEl.css({
+          [`margin-${side}`]: `${$el.width()}px`
+        });
         app.allowPanelOpen = true;
 
         if (emitEvents) {
@@ -200,53 +181,49 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
           panel.$el.trigger('panel:breakpoint');
         }
       } else {
-        var _$viewEl$css2;
-
-        $viewEl.css((_$viewEl$css2 = {}, _$viewEl$css2["margin-" + side] = $el.width() + "px", _$viewEl$css2));
+        $viewEl.css({
+          [`margin-${side}`]: `${$el.width()}px`
+        });
       }
     } else if (wasVisible) {
-      var _$viewEl$css3;
-
       $el.removeClass('panel-in-breakpoint panel-in');
       panel.onClose();
       panel.onClosed();
-      $viewEl.css((_$viewEl$css3 = {}, _$viewEl$css3["margin-" + side] = '', _$viewEl$css3));
+      $viewEl.css({
+        [`margin-${side}`]: ''
+      });
 
       if (emitEvents) {
         panel.emit('local::breakpoint panelBreakpoint', panel);
         panel.$el.trigger('panel:breakpoint');
       }
     }
-  };
+  }
 
-  _proto.enableCollapsedBreakpoint = function enableCollapsedBreakpoint() {
-    var panel = this;
+  enableCollapsedBreakpoint() {
+    const panel = this;
     panel.collapsedBreakpointDisabled = false;
     panel.setCollapsedBreakpoint();
     return panel;
-  };
+  }
 
-  _proto.disableCollapsedBreakpoint = function disableCollapsedBreakpoint() {
-    var panel = this;
+  disableCollapsedBreakpoint() {
+    const panel = this;
     panel.collapsedBreakpointDisabled = true;
     panel.setCollapsedBreakpoint();
     return panel;
-  };
+  }
 
-  _proto.toggleCollapsedBreakpoint = function toggleCollapsedBreakpoint() {
-    var panel = this;
+  toggleCollapsedBreakpoint() {
+    const panel = this;
     panel.collapsedBreakpointDisabled = !panel.collapsedBreakpointDisabled;
     panel.setCollapsedBreakpoint();
     return panel;
-  };
-
-  _proto.setCollapsedBreakpoint = function setCollapsedBreakpoint(emitEvents) {
-    if (emitEvents === void 0) {
-      emitEvents = true;
-    }
+  }
 
-    var panel = this;
-    var app = panel.app;
+  setCollapsedBreakpoint(emitEvents = true) {
+    const panel = this;
+    const app = panel.app;
 
     if (!panel.collapsedBreakpointResizeHandler) {
       panel.collapsedBreakpointResizeHandler = function collapsedBreakpointResizeHandler() {
@@ -256,12 +233,14 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
       app.on('resize', panel.collapsedBreakpointResizeHandler);
     }
 
-    var $el = panel.$el,
-        params = panel.params,
-        collapsedBreakpointDisabled = panel.collapsedBreakpointDisabled;
+    const {
+      $el,
+      params,
+      collapsedBreakpointDisabled
+    } = panel;
     if ($el.hasClass('panel-in-breakpoint')) return;
-    var breakpoint = params.collapsedBreakpoint;
-    var wasVisible = $el.hasClass('panel-in-collapsed');
+    const breakpoint = params.collapsedBreakpoint;
+    const wasVisible = $el.hasClass('panel-in-collapsed');
 
     if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !collapsedBreakpointDisabled) {
       if (!wasVisible) {
@@ -284,10 +263,10 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
         panel.$el.trigger('panel:collapsedbreakpoint');
       }
     }
-  };
+  }
 
-  _proto.enableResizable = function enableResizable() {
-    var panel = this;
+  enableResizable() {
+    const panel = this;
 
     if (panel.resizableInitialized) {
       panel.resizable = true;
@@ -297,17 +276,17 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return panel;
-  };
+  }
 
-  _proto.disableResizable = function disableResizable() {
-    var panel = this;
+  disableResizable() {
+    const panel = this;
     panel.resizable = false;
     panel.$el.removeClass('panel-resizable');
     return panel;
-  };
+  }
 
-  _proto.enableSwipe = function enableSwipe() {
-    var panel = this;
+  enableSwipe() {
+    const panel = this;
 
     if (panel.swipeInitialized) {
       panel.swipeable = true;
@@ -316,21 +295,17 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return panel;
-  };
+  }
 
-  _proto.disableSwipe = function disableSwipe() {
-    var panel = this;
+  disableSwipe() {
+    const panel = this;
     panel.swipeable = false;
     return panel;
-  };
-
-  _proto.onOpen = function onOpen(modifyHtmlClasses) {
-    if (modifyHtmlClasses === void 0) {
-      modifyHtmlClasses = true;
-    }
+  }
 
-    var panel = this;
-    var app = panel.app;
+  onOpen(modifyHtmlClasses = true) {
+    const panel = this;
+    const app = panel.app;
     panel.opened = true;
     app.panel.allowOpen = false;
     panel.$el.trigger('panel:beforeopen');
@@ -342,19 +317,19 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
 
     panel.$el.trigger('panel:open');
     panel.emit('local::open panelOpen', panel);
-  };
+  }
 
-  _proto.onOpened = function onOpened() {
-    var panel = this;
-    var app = panel.app;
+  onOpened() {
+    const panel = this;
+    const app = panel.app;
     app.panel.allowOpen = true;
     panel.$el.trigger('panel:opened');
     panel.emit('local::opened panelOpened', panel);
-  };
+  }
 
-  _proto.onClose = function onClose() {
-    var panel = this;
-    var app = panel.app;
+  onClose() {
+    const panel = this;
+    const app = panel.app;
     panel.opened = false;
     app.panel.allowOpen = false;
     panel.$el.trigger('panel:beforeclose');
@@ -362,18 +337,18 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     panel.setStateClasses('closing');
     panel.$el.trigger('panel:close');
     panel.emit('local::close panelClose', panel);
-  };
+  }
 
-  _proto.onClosed = function onClosed() {
-    var panel = this;
-    var app = panel.app;
+  onClosed() {
+    const panel = this;
+    const app = panel.app;
     app.panel.allowOpen = true;
     panel.setStateClasses('after-closing');
     panel.$el.removeClass('panel-out');
 
     if (panel.$backdropEl) {
-      var otherPanel = app.panel.get('.panel-in');
-      var shouldHideBackdrop = !otherPanel || otherPanel && !otherPanel.$backdropEl;
+      const otherPanel = app.panel.get('.panel-in');
+      const shouldHideBackdrop = !otherPanel || otherPanel && !otherPanel.$backdropEl;
 
       if (shouldHideBackdrop) {
         panel.$backdropEl.removeClass('panel-backdrop-in');
@@ -382,16 +357,12 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
 
     panel.$el.trigger('panel:closed');
     panel.emit('local::closed panelClosed', panel);
-  };
-
-  _proto.toggle = function toggle(animate) {
-    if (animate === void 0) {
-      animate = true;
-    }
+  }
 
-    var panel = this;
-    var breakpoint = panel.params.visibleBreakpoint;
-    var app = panel.app;
+  toggle(animate = true) {
+    const panel = this;
+    const breakpoint = panel.params.visibleBreakpoint;
+    const app = panel.app;
 
     if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null) {
       return panel.toggleVisibleBreakpoint();
@@ -399,20 +370,22 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
 
     if (panel.opened) panel.close(animate);else panel.open(animate);
     return panel;
-  };
+  }
 
-  _proto.insertToRoot = function insertToRoot() {
-    var panel = this;
-    var document = getDocument();
-    var $el = panel.$el,
-        $backdropEl = panel.$backdropEl,
-        $containerEl = panel.$containerEl;
-    var $panelParentEl = $el.parent();
-    var wasInDom = $el.parents(document).length > 0;
+  insertToRoot() {
+    const panel = this;
+    const document = getDocument();
+    const {
+      $el,
+      $backdropEl,
+      $containerEl
+    } = panel;
+    const $panelParentEl = $el.parent();
+    const wasInDom = $el.parents(document).length > 0;
 
     if (!$panelParentEl.is($containerEl) || $el.prevAll('.views, .view').length) {
-      var $insertBeforeEl = $containerEl.children('.panel, .views, .view').eq(0);
-      var $insertAfterEl = $containerEl.children('.panel-backdrop').eq(0);
+      const $insertBeforeEl = $containerEl.children('.panel, .views, .view').eq(0);
+      const $insertAfterEl = $containerEl.children('.panel-backdrop').eq(0);
 
       if ($insertBeforeEl.length) {
         $el.insertBefore($insertBeforeEl);
@@ -426,7 +399,7 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
         $backdropEl.insertBefore($el);
       }
 
-      panel.once('panelClosed', function () {
+      panel.once('panelClosed', () => {
         if (wasInDom) {
           $panelParentEl.append($el);
         } else {
@@ -434,21 +407,19 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
         }
       });
     }
-  };
-
-  _proto.open = function open(animate) {
-    if (animate === void 0) {
-      animate = true;
-    }
+  }
 
-    var panel = this;
-    var app = panel.app;
+  open(animate = true) {
+    const panel = this;
+    const app = panel.app;
     if (!app.panel.allowOpen) return false;
-    var effect = panel.effect,
-        $el = panel.$el,
-        $backdropEl = panel.$backdropEl,
-        opened = panel.opened,
-        $containerEl = panel.$containerEl;
+    const {
+      effect,
+      $el,
+      $backdropEl,
+      opened,
+      $containerEl
+    } = panel;
 
     if (!$el || $el.hasClass('panel-in')) {
       return panel;
@@ -458,7 +429,7 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
 
     if (opened || $el.hasClass('panel-in-breakpoint') || $el.hasClass('panel-in')) return false; // Close if some panel is opened
 
-    var otherOpenedPanel = app.panel.get('.panel-in');
+    const otherOpenedPanel = app.panel.get('.panel-in');
 
     if (otherOpenedPanel && otherOpenedPanel !== panel) {
       otherOpenedPanel.close(animate);
@@ -478,16 +449,16 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     } // Transitionend
 
 
-    var $viewEl = $(panel.getViewEl());
+    const $viewEl = $(panel.getViewEl());
 
     if ($containerEl && $containerEl.hasClass('page')) {
       $viewEl.add($containerEl.children('.page-content, .tabs'));
     }
 
-    var transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
+    const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
 
     function panelTransitionEnd() {
-      transitionEndTarget.transitionEnd(function (e) {
+      transitionEndTarget.transitionEnd(e => {
         if ($(e.target).is(transitionEndTarget)) {
           if ($el.hasClass('panel-out')) {
             panel.onClosed();
@@ -517,19 +488,17 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return true;
-  };
-
-  _proto.close = function close(animate) {
-    if (animate === void 0) {
-      animate = true;
-    }
+  }
 
-    var panel = this;
-    var effect = panel.effect,
-        $el = panel.$el,
-        $backdropEl = panel.$backdropEl,
-        opened = panel.opened,
-        $containerEl = panel.$containerEl;
+  close(animate = true) {
+    const panel = this;
+    const {
+      effect,
+      $el,
+      $backdropEl,
+      opened,
+      $containerEl
+    } = panel;
     if (!opened || $el.hasClass('panel-in-breakpoint') || !$el.hasClass('panel-in')) return panel;
     $el[animate ? 'removeClass' : 'addClass']('not-animated');
 
@@ -537,13 +506,13 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
       $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
     }
 
-    var $viewEl = $(panel.getViewEl());
+    const $viewEl = $(panel.getViewEl());
 
     if ($containerEl && $containerEl.hasClass('page')) {
       $viewEl.add($containerEl.children('.page-content, .tabs'));
     }
 
-    var transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
+    const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
 
     function transitionEnd() {
       if ($el.hasClass('panel-out')) {
@@ -556,7 +525,7 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (animate) {
-      transitionEndTarget.transitionEnd(function () {
+      transitionEndTarget.transitionEnd(() => {
         transitionEnd();
       });
       $el.removeClass('panel-in').addClass('panel-out'); // Emit close
@@ -570,10 +539,10 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return panel;
-  };
+  }
 
-  _proto.init = function init() {
-    var panel = this; // const app = panel.app;
+  init() {
+    const panel = this; // const app = panel.app;
 
     if (typeof panel.params.visibleBreakpoint !== 'undefined') {
       panel.setVisibleBreakpoint();
@@ -590,13 +559,14 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     if (panel.resizable) {
       panel.enableResizable();
     }
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var panel = this;
-    var app = panel.app;
-    var _panel = panel,
-        $containerEl = _panel.$containerEl;
+  destroy() {
+    let panel = this;
+    const app = panel.app;
+    const {
+      $containerEl
+    } = panel;
 
     if (!panel.$el) {
       // Panel already destroyed
@@ -615,16 +585,16 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (panel.$el.hasClass('panel-in-breakpoint') || panel.$el.hasClass('panel-in-collapsed')) {
-      var _$viewEl$css4;
-
-      var $viewEl = $(panel.getViewEl());
+      const $viewEl = $(panel.getViewEl());
 
       if ($containerEl && $containerEl.hasClass('page')) {
         $viewEl.add($containerEl.children('.page-content, .tabs'));
       }
 
       panel.$el.removeClass('panel-in-breakpoint panel-in-collapsed panel-in');
-      $viewEl.css((_$viewEl$css4 = {}, _$viewEl$css4["margin-" + panel.side] = '', _$viewEl$css4));
+      $viewEl.css({
+        [`margin-${panel.side}`]: ''
+      });
       panel.emit('local::breakpoint panelBreakpoint', panel);
       panel.$el.trigger('panel:breakpoint');
     }
@@ -639,9 +609,8 @@ var Panel = /*#__PURE__*/function (_Framework7Class) {
 
     deleteProps(panel);
     panel = null;
-  };
+  }
 
-  return Panel;
-}(Framework7Class);
+}
 
 export default Panel;