framework7 6.3.16 → 7.0.0-beta.12

package/components/login-screen/login-screen.js

@@ -1 +1,28 @@
-(function framework7ComponentLoader(e,n){void 0===n&&(n=!0);var t=e.$,r=e.utils,o=(e.getDevice,e.getSupport,e.Class,e.Modal),i=(e.ConstructorMethods,e.ModalMethods);function c(e){this.wrapped=e}function a(e){var n,t;function r(n,t){try{var i=e[n](t),a=i.value,u=a instanceof c;Promise.resolve(u?a.wrapped:a).then((function(e){u?r("return"===n?"return":"next",e):o(i.done?"return":"normal",e)}),(function(e){r("throw",e)}))}catch(e){o("throw",e)}}function o(e,o){switch(e){case"return":n.resolve({value:o,done:!0});break;case"throw":n.reject(o);break;default:n.resolve({value:o,done:!1})}(n=n.next)?r(n.key,n.arg):t=null}this._invoke=function(e,o){return new Promise((function(i,c){var a={key:e,arg:o,resolve:i,reject:c,next:null};t?t=t.next=a:(n=t=a,r(e,o))}))},"function"!=typeof e.return&&(this.return=void 0)}function u(e,n){return(u=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}a.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},a.prototype.next=function(e){return this._invoke("next",e)},a.prototype.throw=function(e){return this._invoke("throw",e)},a.prototype.return=function(e){return this._invoke("return",e)};var l=r.extend,p=function(e){var n,r;function o(n,r){var o,i,c=l({on:{}},r),a=s(o=e.call(this,n,c)||this);return a.params=c,(i=a.params.el?t(a.params.el).eq(0):t(a.params.content).filter((function(e){return 1===e.nodeType})).eq(0))&&i.length>0&&i[0].f7Modal?i[0].f7Modal||s(o):0===i.length?a.destroy()||s(o):(l(a,{app:n,$el:i,el:i[0],type:"loginScreen"}),i[0].f7Modal=a,a||s(o))}return r=e,(n=o).prototype=Object.create(r.prototype),n.prototype.constructor=n,u(n,r),o}(o),f={name:"loginScreen",static:{LoginScreen:p},create:function(){this.loginScreen=i({app:this,constructor:p,defaultSelector:".login-screen.modal-in"})},clicks:{".login-screen-open":function(e,n){void 0===n&&(n={});this.loginScreen.open(n.loginScreen,n.animate,e)},".login-screen-close":function(e,n){void 0===n&&(n={});this.loginScreen.close(n.loginScreen,n.animate,e)}}};if(n){if(e.prototype.modules&&e.prototype.modules[f.name])return;e.use(f),e.instance&&(e.instance.useModuleParams(f,e.instance.params),e.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import LoginScreen from './login-screen-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'loginScreen',
+  static: {
+    LoginScreen
+  },
+
+  create() {
+    const app = this;
+    app.loginScreen = ModalMethods({
+      app,
+      constructor: LoginScreen,
+      defaultSelector: '.login-screen.modal-in'
+    });
+  },
+
+  clicks: {
+    '.login-screen-open': function openLoginScreen($clickedEl, data = {}) {
+      const app = this;
+      app.loginScreen.open(data.loginScreen, data.animate, $clickedEl);
+    },
+    '.login-screen-close': function closeLoginScreen($clickedEl, data = {}) {
+      const app = this;
+      app.loginScreen.close(data.loginScreen, data.animate, $clickedEl);
+    }
+  }
+};

package/components/login-screen/login-screen.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,n){void 0===n&&(n=!0);var o=e.$,t=e.utils,r=(e.getDevice,e.getSupport,e.Class,e.Modal),s=(e.ConstructorMethods,e.ModalMethods),a=t.extend;class l extends r{constructor(e,n){const t=a({on:{}},n);super(e,t);const r=this;let s;return r.params=t,s=r.params.el?o(r.params.el).eq(0):o(r.params.content).filter((e=>1===e.nodeType)).eq(0),s&&s.length>0&&s[0].f7Modal?s[0].f7Modal:0===s.length?r.destroy():(a(r,{app:e,$el:s,el:s[0],type:"loginScreen"}),s[0].f7Modal=r,r)}}var c={name:"loginScreen",static:{LoginScreen:l},create(){this.loginScreen=s({app:this,constructor:l,defaultSelector:".login-screen.modal-in"})},clicks:{".login-screen-open":function(e,n={}){this.loginScreen.open(n.loginScreen,n.animate,e)},".login-screen-close":function(e,n={}){this.loginScreen.close(n.loginScreen,n.animate,e)}}};if(n){if(e.prototype.modules&&e.prototype.modules[c.name])return;e.use(c),e.instance&&(e.instance.useModuleParams(c,e.instance.params),e.instance.useModule(c))}return c}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/login-screen/login-screen.less

@@ -84,7 +84,7 @@
   }
 }
 
-.theme-dark {
+.dark {
   .login-screen-content .list ul,
   .login-screen-content .block-strong,
   .login-screen-page .list ul,

package/components/menu/menu.js

@@ -1 +1,79 @@
-(function framework7ComponentLoader(e,n){void 0===n&&(n=!0);var o=e.$,t=e.utils,s=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,t.bindMethods),d={open:function(e){void 0===e&&(e=".menu-item-dropdown");if(e){var n=o(e).closest(".menu-item-dropdown");if(n.length){var t=n.closest(".menu").eq(0);if(t.length){var s=t.css("z-index"),d=t[0].style.zIndex;t.css("z-index",parseInt(s||0,10)+1),t[0].f7MenuZIndex=d}n.eq(0).addClass("menu-item-dropdown-opened").trigger("menu:opened"),this.emit("menuOpened",n.eq(0)[0])}}},close:function(e){void 0===e&&(e=".menu-item-dropdown-opened");if(e){var n=o(e).closest(".menu-item-dropdown-opened");if(n.length){var t=n.closest(".menu").eq(0);if(t.length){var s=t[0].f7MenuZIndex;t.css("z-index",s),delete t[0].f7MenuZIndex}n.eq(0).removeClass("menu-item-dropdown-opened").trigger("menu:closed"),this.emit("menuClosed",n.eq(0)[0])}}}},i={name:"menu",create:function(){s(this,{menu:d})},on:{click:function(e){var n=this,t=o(".menu-item-dropdown-opened");t.length&&t.each((function(t){o(e.target).closest(".menu-item-dropdown-opened").length||n.menu.close(t)}))}},clicks:{".menu-item-dropdown":function(e,n,t){if(e.hasClass("menu-item-dropdown-opened")){if(o(t.target).closest(".menu-dropdown").length)return;this.menu.close(e)}else this.menu.open(e)},".menu-close":function(){this.menu.close()}}};if(n){if(e.prototype.modules&&e.prototype.modules[i.name])return;e.use(i),e.instance&&(e.instance.useModuleParams(i,e.instance.params),e.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7.js';
+import { bindMethods } from '../../shared/utils.js';
+const Menu = {
+  open(el = '.menu-item-dropdown') {
+    const app = this;
+    if (!el) return;
+    const $el = $(el).closest('.menu-item-dropdown');
+    if (!$el.length) return;
+    const $menuEl = $el.closest('.menu').eq(0);
+
+    if ($menuEl.length) {
+      const zIndex = $menuEl.css('z-index');
+      const originalZIndex = $menuEl[0].style.zIndex;
+      $menuEl.css('z-index', parseInt(zIndex || 0, 10) + 1);
+      $menuEl[0].f7MenuZIndex = originalZIndex;
+    }
+
+    $el.eq(0).addClass('menu-item-dropdown-opened').trigger('menu:opened');
+    app.emit('menuOpened', $el.eq(0)[0]);
+  },
+
+  close(el = '.menu-item-dropdown-opened') {
+    const app = this;
+    if (!el) return;
+    const $el = $(el).closest('.menu-item-dropdown-opened');
+    if (!$el.length) return;
+    const $menuEl = $el.closest('.menu').eq(0);
+
+    if ($menuEl.length) {
+      const zIndex = $menuEl[0].f7MenuZIndex;
+      $menuEl.css('z-index', zIndex);
+      delete $menuEl[0].f7MenuZIndex;
+    }
+
+    $el.eq(0).removeClass('menu-item-dropdown-opened').trigger('menu:closed');
+    app.emit('menuClosed', $el.eq(0)[0]);
+  }
+
+};
+export default {
+  name: 'menu',
+
+  create() {
+    const app = this;
+    bindMethods(app, {
+      menu: Menu
+    });
+  },
+
+  on: {
+    click(e) {
+      const app = this;
+      const openedMenus = $('.menu-item-dropdown-opened');
+      if (!openedMenus.length) return;
+      openedMenus.each(el => {
+        if (!$(e.target).closest('.menu-item-dropdown-opened').length) {
+          app.menu.close(el);
+        }
+      });
+    }
+
+  },
+  clicks: {
+    '.menu-item-dropdown': function onClick($clickedEl, dataset, e) {
+      const app = this;
+
+      if ($clickedEl.hasClass('menu-item-dropdown-opened')) {
+        if ($(e.target).closest('.menu-dropdown').length) return;
+        app.menu.close($clickedEl);
+      } else {
+        app.menu.open($clickedEl);
+      }
+    },
+    '.menu-close': function onClick() {
+      const app = this;
+      app.menu.close();
+    }
+  }
+};

package/components/menu/menu.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,n){void 0===n&&(n=!0);var o=e.$,t=e.utils,s=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,t.bindMethods);const d={open(e=".menu-item-dropdown"){if(!e)return;const n=o(e).closest(".menu-item-dropdown");if(!n.length)return;const t=n.closest(".menu").eq(0);if(t.length){const e=t.css("z-index"),n=t[0].style.zIndex;t.css("z-index",parseInt(e||0,10)+1),t[0].f7MenuZIndex=n}n.eq(0).addClass("menu-item-dropdown-opened").trigger("menu:opened"),this.emit("menuOpened",n.eq(0)[0])},close(e=".menu-item-dropdown-opened"){if(!e)return;const n=o(e).closest(".menu-item-dropdown-opened");if(!n.length)return;const t=n.closest(".menu").eq(0);if(t.length){const e=t[0].f7MenuZIndex;t.css("z-index",e),delete t[0].f7MenuZIndex}n.eq(0).removeClass("menu-item-dropdown-opened").trigger("menu:closed"),this.emit("menuClosed",n.eq(0)[0])}};var u={name:"menu",create(){s(this,{menu:d})},on:{click(e){const n=this,t=o(".menu-item-dropdown-opened");t.length&&t.each((t=>{o(e.target).closest(".menu-item-dropdown-opened").length||n.menu.close(t)}))}},clicks:{".menu-item-dropdown":function(e,n,t){const s=this;if(e.hasClass("menu-item-dropdown-opened")){if(o(t.target).closest(".menu-dropdown").length)return;s.menu.close(e)}else s.menu.open(e)},".menu-close":function(){this.menu.close()}}};if(n){if(e.prototype.modules&&e.prototype.modules[u.name])return;e.use(u),e.instance&&(e.instance.useModuleParams(u,e.instance.params),e.instance.useModule(u))}return u}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

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

@@ -1,28 +1,12 @@
-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 } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
-
-var Messagebar = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Messagebar, _Framework7Class);
-
-  function Messagebar(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var messagebar = _assertThisInitialized(_this);
-
-    var defaults = {
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+
+class Messagebar extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const messagebar = this;
+    const defaults = {
       top: false,
       topOffset: 0,
       bottomOffset: 0,
@@ -36,17 +20,17 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     messagebar.useModulesParams(defaults);
     messagebar.params = extend(defaults, params); // El
 
-    var $el = $(messagebar.params.el);
-    if ($el.length === 0) return messagebar || _assertThisInitialized(_this);
-    if ($el[0].f7Messagebar) return $el[0].f7Messagebar || _assertThisInitialized(_this);
+    const $el = $(messagebar.params.el);
+    if ($el.length === 0) return messagebar;
+    if ($el[0].f7Messagebar) return $el[0].f7Messagebar;
     $el[0].f7Messagebar = messagebar; // Page and PageContent
 
-    var $pageEl = $el.parents('.page').eq(0);
-    var $pageContentEl = $pageEl.find('.page-content').eq(0); // Area
+    const $pageEl = $el.parents('.page').eq(0);
+    const $pageContentEl = $pageEl.find('.page-content').eq(0); // Area
 
-    var $areaEl = $el.find('.messagebar-area'); // Textarea
+    const $areaEl = $el.find('.messagebar-area'); // Textarea
 
-    var $textareaEl;
+    let $textareaEl;
 
     if (messagebar.params.textareaEl) {
       $textareaEl = $(messagebar.params.textareaEl);
@@ -55,29 +39,29 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     } // Attachments & Library
 
 
-    var $attachmentsEl = $el.find('.messagebar-attachments');
-    var $sheetEl = $el.find('.messagebar-sheet');
+    const $attachmentsEl = $el.find('.messagebar-attachments');
+    const $sheetEl = $el.find('.messagebar-sheet');
 
     if (messagebar.params.top) {
       $el.addClass('messagebar-top');
     }
 
     extend(messagebar, {
-      $el: $el,
+      $el,
       el: $el[0],
-      $areaEl: $areaEl,
+      $areaEl,
       areaEl: $areaEl[0],
-      $textareaEl: $textareaEl,
+      $textareaEl,
       textareaEl: $textareaEl[0],
-      $attachmentsEl: $attachmentsEl,
+      $attachmentsEl,
       attachmentsEl: $attachmentsEl[0],
       attachmentsVisible: $attachmentsEl.hasClass('messagebar-attachments-visible'),
-      $sheetEl: $sheetEl,
+      $sheetEl,
       sheetEl: $sheetEl[0],
       sheetVisible: $sheetEl.hasClass('messagebar-sheet-visible'),
-      $pageEl: $pageEl,
+      $pageEl,
       pageEl: $pageEl[0],
-      $pageContentEl: $pageContentEl,
+      $pageContentEl,
       pageContentEl: $pageContentEl,
       top: $el.hasClass('messagebar-top') || messagebar.params.top,
       attachments: []
@@ -94,7 +78,7 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     function onAttachmentClick(e) {
-      var index = $(this).index();
+      const index = $(this).index();
 
       if ($(e.target).closest('.messagebar-attachment-delete').length) {
         $(this).trigger('messagebar:attachmentdelete', index);
@@ -148,59 +132,59 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     messagebar.useModules(); // Init
 
     messagebar.init();
-    return messagebar || _assertThisInitialized(_this);
+    return messagebar;
   }
 
-  var _proto = Messagebar.prototype;
-
-  _proto.focus = function focus() {
-    var messagebar = this;
+  focus() {
+    const messagebar = this;
     messagebar.$textareaEl.focus();
     return messagebar;
-  };
+  }
 
-  _proto.blur = function blur() {
-    var messagebar = this;
+  blur() {
+    const messagebar = this;
     messagebar.$textareaEl.blur();
     return messagebar;
-  };
+  }
 
-  _proto.clear = function clear() {
-    var messagebar = this;
+  clear() {
+    const messagebar = this;
     messagebar.$textareaEl.val('').trigger('change');
     return messagebar;
-  };
+  }
 
-  _proto.getValue = function getValue() {
-    var messagebar = this;
+  getValue() {
+    const messagebar = this;
     return messagebar.$textareaEl.val().trim();
-  };
+  }
 
-  _proto.setValue = function setValue(value) {
-    var messagebar = this;
+  setValue(value) {
+    const messagebar = this;
     messagebar.$textareaEl.val(value).trigger('change');
     return messagebar;
-  };
+  }
 
-  _proto.setPlaceholder = function setPlaceholder(placeholder) {
-    var messagebar = this;
+  setPlaceholder(placeholder) {
+    const messagebar = this;
     messagebar.$textareaEl.attr('placeholder', placeholder);
     return messagebar;
-  };
-
-  _proto.resizePage = function resizePage() {
-    var messagebar = this;
-    var params = messagebar.params,
-        $el = messagebar.$el,
-        top = messagebar.top,
-        $pageEl = messagebar.$pageEl,
-        $pageContentEl = messagebar.$pageContentEl,
-        $areaEl = messagebar.$areaEl,
-        $textareaEl = messagebar.$textareaEl,
-        $sheetEl = messagebar.$sheetEl,
-        $attachmentsEl = messagebar.$attachmentsEl;
-    var elHeight = $el[0].offsetHeight;
-    var maxHeight = params.maxHeight;
+  }
+
+  resizePage() {
+    const messagebar = this;
+    const {
+      params,
+      $el,
+      top,
+      $pageEl,
+      $pageContentEl,
+      $areaEl,
+      $textareaEl,
+      $sheetEl,
+      $attachmentsEl
+    } = messagebar;
+    const elHeight = $el[0].offsetHeight;
+    let maxHeight = params.maxHeight;
 
     if (top) {
       /*
@@ -218,22 +202,22 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
       }
       */
     } else {
-      var currentPaddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
-      var requiredPaddingBottom = elHeight + params.bottomOffset;
+      const currentPaddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
+      const requiredPaddingBottom = elHeight + params.bottomOffset;
 
       if (requiredPaddingBottom !== currentPaddingBottom && $pageContentEl.length) {
-        var currentPaddingTop = parseInt($pageContentEl.css('padding-top'), 10);
-        var pageScrollHeight = $pageContentEl[0].scrollHeight;
-        var pageOffsetHeight = $pageContentEl[0].offsetHeight;
-        var pageScrollTop = $pageContentEl[0].scrollTop;
-        var scrollOnBottom = pageScrollTop === pageScrollHeight - pageOffsetHeight;
+        const currentPaddingTop = parseInt($pageContentEl.css('padding-top'), 10);
+        const pageScrollHeight = $pageContentEl[0].scrollHeight;
+        const pageOffsetHeight = $pageContentEl[0].offsetHeight;
+        const pageScrollTop = $pageContentEl[0].scrollTop;
+        const scrollOnBottom = pageScrollTop === pageScrollHeight - pageOffsetHeight;
 
         if (!maxHeight) {
           maxHeight = $pageEl[0].offsetHeight - currentPaddingTop - $sheetEl.outerHeight() - $attachmentsEl.outerHeight() - parseInt($areaEl.css('margin-top'), 10) - parseInt($areaEl.css('margin-bottom'), 10);
         }
 
-        $textareaEl.css('max-height', maxHeight + "px");
-        $pageContentEl.css('padding-bottom', requiredPaddingBottom + "px");
+        $textareaEl.css('max-height', `${maxHeight}px`);
+        $pageContentEl.css('padding-bottom', `${requiredPaddingBottom}px`);
 
         if (scrollOnBottom) {
           $pageContentEl.scrollTop($pageContentEl[0].scrollHeight - pageOffsetHeight);
@@ -243,42 +227,36 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
         messagebar.emit('local::resizePage messagebarResizePage', messagebar);
       }
     }
-  };
+  }
 
-  _proto.checkEmptyState = function checkEmptyState() {
-    var messagebar = this;
-    var $el = messagebar.$el,
-        $textareaEl = messagebar.$textareaEl;
-    var value = $textareaEl.val().trim();
+  checkEmptyState() {
+    const messagebar = this;
+    const {
+      $el,
+      $textareaEl
+    } = messagebar;
+    const value = $textareaEl.val().trim();
 
     if (value && value.length) {
       $el.addClass('messagebar-with-value');
     } else {
       $el.removeClass('messagebar-with-value');
     }
-  };
-
-  _proto.attachmentsCreate = function attachmentsCreate(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  }
 
-    var messagebar = this;
-    var $attachmentsEl = $("<div class=\"messagebar-attachments\">" + innerHTML + "</div>");
+  attachmentsCreate(innerHTML = '') {
+    const messagebar = this;
+    const $attachmentsEl = $(`<div class="messagebar-attachments">${innerHTML}</div>`);
     $attachmentsEl.insertBefore(messagebar.$textareaEl);
     extend(messagebar, {
-      $attachmentsEl: $attachmentsEl,
+      $attachmentsEl,
       attachmentsEl: $attachmentsEl[0]
     });
     return messagebar;
-  };
-
-  _proto.attachmentsShow = function attachmentsShow(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  }
 
-    var messagebar = this;
+  attachmentsShow(innerHTML = '') {
+    const messagebar = this;
     messagebar.$attachmentsEl = messagebar.$el.find('.messagebar-attachments');
 
     if (messagebar.$attachmentsEl.length === 0) {
@@ -293,10 +271,10 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return messagebar;
-  };
+  }
 
-  _proto.attachmentsHide = function attachmentsHide() {
-    var messagebar = this;
+  attachmentsHide() {
+    const messagebar = this;
     messagebar.$el.removeClass('messagebar-attachments-visible');
     messagebar.attachmentsVisible = false;
 
@@ -305,10 +283,10 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return messagebar;
-  };
+  }
 
-  _proto.attachmentsToggle = function attachmentsToggle() {
-    var messagebar = this;
+  attachmentsToggle() {
+    const messagebar = this;
 
     if (messagebar.attachmentsVisible) {
       messagebar.attachmentsHide();
@@ -317,28 +295,31 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return messagebar;
-  };
+  }
 
-  _proto.renderAttachment = function renderAttachment(attachment) {
-    var messagebar = this;
+  renderAttachment(attachment) {
+    const messagebar = this;
 
     if (messagebar.params.renderAttachment) {
       return messagebar.params.renderAttachment.call(messagebar, attachment);
     }
 
-    return "\n      <div class=\"messagebar-attachment\">\n        <img src=\"" + attachment + "\">\n        <span class=\"messagebar-attachment-delete\"></span>\n      </div>\n    ";
-  };
+    return `
+      <div class="messagebar-attachment">
+        <img src="${attachment}">
+        <span class="messagebar-attachment-delete"></span>
+      </div>
+    `;
+  }
 
-  _proto.renderAttachments = function renderAttachments() {
-    var messagebar = this;
-    var html;
+  renderAttachments() {
+    const messagebar = this;
+    let html;
 
     if (messagebar.params.renderAttachments) {
       html = messagebar.params.renderAttachments.call(messagebar, messagebar.attachments);
     } else {
-      html = "" + messagebar.attachments.map(function (attachment) {
-        return messagebar.renderAttachment(attachment);
-      }).join('');
+      html = `${messagebar.attachments.map(attachment => messagebar.renderAttachment(attachment)).join('')}`;
     }
 
     if (messagebar.$attachmentsEl.length === 0) {
@@ -346,29 +327,21 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     } else {
       messagebar.$attachmentsEl.html(html);
     }
-  };
-
-  _proto.sheetCreate = function sheetCreate(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  }
 
-    var messagebar = this;
-    var $sheetEl = $("<div class=\"messagebar-sheet\">" + innerHTML + "</div>");
+  sheetCreate(innerHTML = '') {
+    const messagebar = this;
+    const $sheetEl = $(`<div class="messagebar-sheet">${innerHTML}</div>`);
     messagebar.$el.append($sheetEl);
     extend(messagebar, {
-      $sheetEl: $sheetEl,
+      $sheetEl,
       sheetEl: $sheetEl[0]
     });
     return messagebar;
-  };
-
-  _proto.sheetShow = function sheetShow(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  }
 
-    var messagebar = this;
+  sheetShow(innerHTML = '') {
+    const messagebar = this;
     messagebar.$sheetEl = messagebar.$el.find('.messagebar-sheet');
 
     if (messagebar.$sheetEl.length === 0) {
@@ -383,10 +356,10 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return messagebar;
-  };
+  }
 
-  _proto.sheetHide = function sheetHide() {
-    var messagebar = this;
+  sheetHide() {
+    const messagebar = this;
     messagebar.$el.removeClass('messagebar-sheet-visible');
     messagebar.sheetVisible = false;
 
@@ -395,10 +368,10 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return messagebar;
-  };
+  }
 
-  _proto.sheetToggle = function sheetToggle() {
-    var messagebar = this;
+  sheetToggle() {
+    const messagebar = this;
 
     if (messagebar.sheetVisible) {
       messagebar.sheetHide();
@@ -407,17 +380,17 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return messagebar;
-  };
+  }
 
-  _proto.init = function init() {
-    var messagebar = this;
+  init() {
+    const messagebar = this;
     messagebar.attachEvents();
     messagebar.checkEmptyState();
     return messagebar;
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var messagebar = this;
+  destroy() {
+    const messagebar = this;
     messagebar.emit('local::beforeDestroy messagebarBeforeDestroy', messagebar);
     messagebar.$el.trigger('messagebar:beforedestroy');
     messagebar.detachEvents();
@@ -428,9 +401,8 @@ var Messagebar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     deleteProps(messagebar);
-  };
+  }
 
-  return Messagebar;
-}(Framework7Class);
+}
 
 export default Messagebar;

package/components/messagebar/messagebar-rtl.css

@@ -1 +1 @@
-:root{--f7-messagebar-shadow-image:none;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-attachments-height:155px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}:root .theme-dark,:root.theme-dark{--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:17px;--f7-messagebar-textarea-padding:6px 16px;--f7-messagebar-textarea-height:34px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-bg-color:#d1d5da;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.ios .theme-dark,.ios.theme-dark{--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color)}.md{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:0px;--f7-messagebar-textarea-padding:5px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:4px;--f7-messagebar-link-color:#333;--f7-messagebar-border-color:#d1d1d1;--f7-messagebar-textarea-text-color:#333;--f7-messagebar-attachments-border-color:#ddd}.md .theme-dark,.md.theme-dark{--f7-messagebar-border-color:transparent;--f7-messagebar-link-color:rgba(255, 255, 255, 0.87);--f7-messagebar-textarea-text-color:rgba(255, 255, 255, 0.87);--f7-messagebar-attachments-border-color:rgba(255, 255, 255, 0.2)}.aurora{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:8px;--f7-messagebar-textarea-padding:4px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:8px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.aurora .theme-dark,.aurora.theme-dark{--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color)}.messagebar{transform:translate3d(0,0,0);background:var(--f7-messagebar-bg-color);height:auto;min-height:var(--f7-messagebar-height);font-size:var(--f7-messagebar-font-size);padding-bottom:var(--f7-safe-area-bottom);bottom:0}.messagebar:before{content:'';position:absolute;background-color:var(--f7-messagebar-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.messagebar:after{content:'';position:absolute;right:0;width:100%;bottom:100%;height:8px;top:auto;pointer-events:none;background:var(--f7-messagebar-shadow-image);transform:translate3d(0,0,0)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .messagebar{background-color:rgba(var(--f7-messagebar-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.messagebar.no-border:before,.messagebar.no-hairline:before{display:none!important}.messagebar.no-shadow:after,.messagebar.toolbar-hidden:after{display:none!important}.messagebar .toolbar-inner{top:auto;position:relative;height:auto;bottom:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left,var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right,var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));flex-direction:row-reverse}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{width:100%;flex-shrink:1;overflow:hidden;position:relative}.messagebar textarea{width:100%;flex-shrink:1;background-color:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius);padding:var(--f7-messagebar-textarea-padding);height:var(--f7-messagebar-textarea-height);color:var(--f7-messagebar-textarea-text-color);font-size:var(--f7-messagebar-textarea-font-size);line-height:var(--f7-messagebar-textarea-line-height);border:var(--f7-messagebar-textarea-border)}.messagebar a.link{align-self:flex-end;flex-shrink:0;color:var(--f7-messagebar-link-color,var(--f7-theme-color))}.messagebar-attachments{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-size:0;white-space:nowrap;box-sizing:border-box;position:relative}.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}.messagebar-attachment{background-size:cover;background-position:center;background-repeat:no-repeat;display:inline-block;vertical-align:middle;white-space:normal;height:var(--f7-messagebar-attachment-height);position:relative;border-radius:var(--f7-messagebar-attachment-border-radius)}@media (orientation:landscape){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{display:block;width:auto;height:100%;border-radius:var(--f7-messagebar-attachment-border-radius)}.messagebar-attachment+.messagebar-attachment{margin-right:8px}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:wrap;flex-direction:column;align-content:flex-start;height:var(--f7-messagebar-sheet-height);background-color:var(--f7-messagebar-sheet-bg-color);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}@media (orientation:landscape){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image,.messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;margin-top:1px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);margin-right:1px}@media (orientation:landscape){.messagebar-sheet-image,.messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.messagebar-sheet-image .icon-checkbox,.messagebar-sheet-image .icon-radio,.messagebar-sheet-item .icon-checkbox,.messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{position:absolute;content:'';left:50%;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar a.link.icon-only:first-child{margin-left:-8px}.ios .messagebar a.link.icon-only:last-child{margin-right:-8px}.ios .messagebar a.link:not(.icon-only)+.messagebar-area{margin-left:8px}.ios .messagebar .messagebar-area+a.link:not(.icon-only){margin-left:8px}.ios .messagebar-area{margin-top:5px;margin-bottom:5px}.ios .messagebar-attachments{padding:5px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.md .messagebar-attachments{padding:8px;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.md .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color);border-radius:4px}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}.aurora .messagebar a.link+.messagebar-area{margin-left:8px}.aurora .messagebar .messagebar-area+a.link{margin-left:8px}.aurora .messagebar-area{margin-top:8px;margin-bottom:8px}.aurora .messagebar-sheet-image .icon-checkbox,.aurora .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.aurora .messagebar-attachments{padding:8px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.aurora .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.aurora .messagebar-attachment{font-size:14px}.aurora .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color)}.aurora .messagebar-attachment-delete:after,.aurora .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}
+:root{--f7-messagebar-shadow-image:none;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-attachments-height:155px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}:root .dark,:root.dark{--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:17px;--f7-messagebar-textarea-padding:6px 16px;--f7-messagebar-textarea-height:34px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-bg-color:#d1d5da;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.ios .dark,.ios.dark{--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color)}.md{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:0px;--f7-messagebar-textarea-padding:5px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:4px;--f7-messagebar-link-color:#333;--f7-messagebar-border-color:#d1d1d1;--f7-messagebar-textarea-text-color:#333;--f7-messagebar-attachments-border-color:#ddd}.md .dark,.md.dark{--f7-messagebar-border-color:transparent;--f7-messagebar-link-color:rgba(255, 255, 255, 0.87);--f7-messagebar-textarea-text-color:rgba(255, 255, 255, 0.87);--f7-messagebar-attachments-border-color:rgba(255, 255, 255, 0.2)}.aurora{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:8px;--f7-messagebar-textarea-padding:4px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:8px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.aurora .dark,.aurora.dark{--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color)}.messagebar{transform:translate3d(0,0,0);background:var(--f7-messagebar-bg-color);height:auto;min-height:var(--f7-messagebar-height);font-size:var(--f7-messagebar-font-size);padding-bottom:var(--f7-safe-area-bottom);bottom:0}.messagebar:before{content:'';position:absolute;background-color:var(--f7-messagebar-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.messagebar:after{content:'';position:absolute;right:0;width:100%;bottom:100%;height:8px;top:auto;pointer-events:none;background:var(--f7-messagebar-shadow-image);transform:translate3d(0,0,0)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .messagebar{background-color:rgba(var(--f7-messagebar-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.messagebar.no-border:before,.messagebar.no-hairline:before{display:none!important}.messagebar.no-shadow:after,.messagebar.toolbar-hidden:after{display:none!important}.messagebar .toolbar-inner{top:auto;position:relative;height:auto;bottom:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left,var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right,var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));flex-direction:row-reverse}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{width:100%;flex-shrink:1;overflow:hidden;position:relative}.messagebar textarea{width:100%;flex-shrink:1;background-color:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius);padding:var(--f7-messagebar-textarea-padding);height:var(--f7-messagebar-textarea-height);color:var(--f7-messagebar-textarea-text-color);font-size:var(--f7-messagebar-textarea-font-size);line-height:var(--f7-messagebar-textarea-line-height);border:var(--f7-messagebar-textarea-border)}.messagebar a.link{align-self:flex-end;flex-shrink:0;color:var(--f7-messagebar-link-color,var(--f7-theme-color))}.messagebar-attachments{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-size:0;white-space:nowrap;box-sizing:border-box;position:relative}.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}.messagebar-attachment{background-size:cover;background-position:center;background-repeat:no-repeat;display:inline-block;vertical-align:middle;white-space:normal;height:var(--f7-messagebar-attachment-height);position:relative;border-radius:var(--f7-messagebar-attachment-border-radius)}@media (orientation:landscape){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{display:block;width:auto;height:100%;border-radius:var(--f7-messagebar-attachment-border-radius)}.messagebar-attachment+.messagebar-attachment{margin-right:8px}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:wrap;flex-direction:column;align-content:flex-start;height:var(--f7-messagebar-sheet-height);background-color:var(--f7-messagebar-sheet-bg-color);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}@media (orientation:landscape){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image,.messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;margin-top:1px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);margin-right:1px}@media (orientation:landscape){.messagebar-sheet-image,.messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.messagebar-sheet-image .icon-checkbox,.messagebar-sheet-image .icon-radio,.messagebar-sheet-item .icon-checkbox,.messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{position:absolute;content:'';left:50%;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar a.link.icon-only:first-child{margin-left:-8px}.ios .messagebar a.link.icon-only:last-child{margin-right:-8px}.ios .messagebar a.link:not(.icon-only)+.messagebar-area{margin-left:8px}.ios .messagebar .messagebar-area+a.link:not(.icon-only){margin-left:8px}.ios .messagebar-area{margin-top:5px;margin-bottom:5px}.ios .messagebar-attachments{padding:5px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.md .messagebar-attachments{padding:8px;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.md .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color);border-radius:4px}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}.aurora .messagebar a.link+.messagebar-area{margin-left:8px}.aurora .messagebar .messagebar-area+a.link{margin-left:8px}.aurora .messagebar-area{margin-top:8px;margin-bottom:8px}.aurora .messagebar-sheet-image .icon-checkbox,.aurora .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.aurora .messagebar-attachments{padding:8px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.aurora .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.aurora .messagebar-attachment{font-size:14px}.aurora .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color)}.aurora .messagebar-attachment-delete:after,.aurora .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}