framework7 6.3.15 → 7.0.0-beta.11

package/components/notification/notification-aurora.less

@@ -50,7 +50,7 @@
     }
   }
   .if-dark-theme({
-    .theme-dark, &.theme-dark {
+    .dark, &.dark {
       .notification-close-button:after {
         color: #fff;
       }

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

@@ -1,54 +1,43 @@
-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 } from '../../shared/utils';
-import Modal from '../modal/modal-class';
+import $ from '../../shared/dom7.js';
+import { extend, now, nextTick } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
 /** @jsx $jsx */
 
-import $jsx from '../../shared/$jsx';
-
-var Notification = /*#__PURE__*/function (_Modal) {
-  _inheritsLoose(Notification, _Modal);
-
-  function Notification(app, params) {
-    var _this;
+import $jsx from '../../shared/$jsx.js';
 
-    var extendedParams = extend({
+class Notification extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
       on: {}
     }, app.params.notification, params); // Extends with open/close Modal methods;
 
-    _this = _Modal.call(this, app, extendedParams) || this;
-
-    var notification = _assertThisInitialized(_this);
-
+    super(app, extendedParams);
+    const notification = this;
     notification.app = app;
     notification.params = extendedParams;
-    var _notification$params = notification.params,
-        icon = _notification$params.icon,
-        title = _notification$params.title,
-        titleRightText = _notification$params.titleRightText,
-        subtitle = _notification$params.subtitle,
-        text = _notification$params.text,
-        closeButton = _notification$params.closeButton,
-        closeTimeout = _notification$params.closeTimeout,
-        cssClass = _notification$params.cssClass,
-        closeOnClick = _notification$params.closeOnClick;
-    var $el;
+    const {
+      icon,
+      title,
+      titleRightText,
+      subtitle,
+      text,
+      closeButton,
+      closeTimeout,
+      cssClass,
+      closeOnClick
+    } = notification.params;
+    let $el;
 
     if (!notification.params.el) {
       // Find Element
-      var notificationHtml = notification.render({
-        icon: icon,
-        title: title,
-        titleRightText: titleRightText,
-        subtitle: subtitle,
-        text: text,
-        closeButton: closeButton,
-        cssClass: cssClass
+      const notificationHtml = notification.render({
+        icon,
+        title,
+        titleRightText,
+        subtitle,
+        text,
+        closeButton,
+        cssClass
       });
       $el = $(notificationHtml);
     } else {
@@ -56,27 +45,27 @@ var Notification = /*#__PURE__*/function (_Modal) {
     }
 
     if ($el && $el.length > 0 && $el[0].f7Modal) {
-      return $el[0].f7Modal || _assertThisInitialized(_this);
+      return $el[0].f7Modal;
     }
 
     if ($el.length === 0) {
-      return notification.destroy() || _assertThisInitialized(_this);
+      return notification.destroy();
     }
 
     extend(notification, {
-      $el: $el,
+      $el,
       el: $el[0],
       type: 'notification'
     });
     $el[0].f7Modal = notification;
 
     if (closeButton) {
-      $el.find('.notification-close-button').on('click', function () {
+      $el.find('.notification-close-button').on('click', () => {
         notification.close();
       });
     }
 
-    $el.on('click', function (e) {
+    $el.on('click', e => {
       if (closeButton && $(e.target).closest('.notification-close-button').length) {
         return;
       }
@@ -84,18 +73,18 @@ var Notification = /*#__PURE__*/function (_Modal) {
       notification.emit('local::click notificationClick', notification);
       if (closeOnClick) notification.close();
     });
-    notification.on('beforeDestroy', function () {
+    notification.on('beforeDestroy', () => {
       $el.off('click');
     });
     /* Touch Events */
 
-    var isTouched;
-    var isMoved;
-    var isScrolling;
-    var touchesDiff;
-    var touchStartTime;
-    var notificationHeight;
-    var touchesStart = {};
+    let isTouched;
+    let isMoved;
+    let isScrolling;
+    let touchesDiff;
+    let touchStartTime;
+    let notificationHeight;
+    const touchesStart = {};
 
     function handleTouchStart(e) {
       if (isTouched) return;
@@ -109,8 +98,8 @@ var Notification = /*#__PURE__*/function (_Modal) {
 
     function handleTouchMove(e) {
       if (!isTouched) return;
-      var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
-      var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
 
       if (typeof isScrolling === 'undefined') {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) < Math.abs(pageX - touchesStart.x));
@@ -131,13 +120,13 @@ var Notification = /*#__PURE__*/function (_Modal) {
 
       isMoved = true;
       touchesDiff = pageY - touchesStart.y;
-      var newTranslate = touchesDiff;
+      let newTranslate = touchesDiff;
 
       if (touchesDiff > 0) {
-        newTranslate = Math.pow(touchesDiff, 0.8);
+        newTranslate = touchesDiff ** 0.8;
       }
 
-      notification.$el.transform("translate3d(0, " + newTranslate + "px, 0)");
+      notification.$el.transform(`translate3d(0, ${newTranslate}px, 0)`);
     }
 
     function handleTouchEnd() {
@@ -154,7 +143,7 @@ var Notification = /*#__PURE__*/function (_Modal) {
         return;
       }
 
-      var timeDiff = now() - touchStartTime;
+      const timeDiff = now() - touchStartTime;
       notification.$el.transition('');
       notification.$el.addClass('notification-transitioning');
       notification.$el.transform('');
@@ -180,10 +169,10 @@ var Notification = /*#__PURE__*/function (_Modal) {
       app.off('touchend:passive', handleTouchEnd);
     }
 
-    var timeoutId;
+    let timeoutId;
 
     function closeOnTimeout() {
-      timeoutId = nextTick(function () {
+      timeoutId = nextTick(() => {
         if (isTouched && isMoved) {
           closeOnTimeout();
           return;
@@ -193,13 +182,13 @@ var Notification = /*#__PURE__*/function (_Modal) {
       }, closeTimeout);
     }
 
-    notification.on('open', function () {
+    notification.on('open', () => {
       if (notification.params.swipeToClose) {
         attachTouchEvents();
       }
 
-      $('.notification.modal-in').each(function (openedEl) {
-        var notificationInstance = app.notification.get(openedEl);
+      $('.notification.modal-in').each(openedEl => {
+        const notificationInstance = app.notification.get(openedEl);
 
         if (openedEl !== notification.el && notificationInstance) {
           notificationInstance.close();
@@ -210,31 +199,30 @@ var Notification = /*#__PURE__*/function (_Modal) {
         closeOnTimeout();
       }
     });
-    notification.on('close beforeDestroy', function () {
+    notification.on('close beforeDestroy', () => {
       if (notification.params.swipeToClose) {
         detachTouchEvents();
       }
 
       clearTimeout(timeoutId);
     });
-    return notification || _assertThisInitialized(_this);
+    return notification;
   }
 
-  var _proto = Notification.prototype;
-
-  _proto.render = function render() {
-    var notification = this;
+  render() {
+    const notification = this;
     if (notification.params.render) return notification.params.render.call(notification, notification);
-    var _notification$params2 = notification.params,
-        icon = _notification$params2.icon,
-        title = _notification$params2.title,
-        titleRightText = _notification$params2.titleRightText,
-        subtitle = _notification$params2.subtitle,
-        text = _notification$params2.text,
-        closeButton = _notification$params2.closeButton,
-        cssClass = _notification$params2.cssClass;
+    const {
+      icon,
+      title,
+      titleRightText,
+      subtitle,
+      text,
+      closeButton,
+      cssClass
+    } = notification.params;
     return $jsx("div", {
-      class: "notification " + (cssClass || '')
+      class: `notification ${cssClass || ''}`
     }, $jsx("div", {
       class: "notification-header"
     }, icon && $jsx("div", {
@@ -252,9 +240,8 @@ var Notification = /*#__PURE__*/function (_Modal) {
     }, subtitle), text && $jsx("div", {
       class: "notification-text"
     }, text)));
-  };
+  }
 
-  return Notification;
-}(Modal);
+}
 
 export default Notification;

package/components/notification/notification-ios.less

@@ -46,7 +46,7 @@
     }
   }
   .if-dark-theme({
-    .theme-dark, &.theme-dark {
+    .dark, &.dark {
       .notification-close-button:after {
         color: #fff;
       }

package/components/notification/notification-rtl.css

@@ -1 +1 @@
-:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}:root .theme-dark,:root.theme-dark{--f7-notification-subtitle-color:#fff}.ios{--f7-notification-margin:8px;--f7-notification-padding:10px;--f7-notification-border-radius:12px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:20px;--f7-notification-title-font-size:13px;--f7-notification-title-text-transform:uppercase;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:400;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:13px;--f7-notification-subtitle-font-size:15px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:15px;--f7-notification-text-line-height:1.2;--f7-notification-bg-color:rgba(250, 250, 250, 0.95);--f7-notification-bg-color-rgb:255,255,255;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.45);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .theme-dark,.ios.theme-dark{--f7-notification-bg-color:rgba(30, 30, 30, 0.95);--f7-notification-bg-color-rgb:30,30,30;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.55)}.md{--f7-notification-margin:0px;--f7-notification-padding:16px;--f7-notification-border-radius:0px;--f7-notification-box-shadow:0 2px 4px rgba(0, 0, 0, 0.22),0 1px 2px rgba(0, 0, 0, 0.24);--f7-notification-icon-size:16px;--f7-notification-title-color:var(--f7-theme-color);--f7-notification-title-font-size:12px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1;--f7-notification-title-font-weight:400;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-right-color:rgba(0, 0, 0, 0.54);--f7-notification-subtitle-color:#212121;--f7-notification-text-color:rgba(0, 0, 0, 0.54)}.md .theme-dark,.md.theme-dark{--f7-notification-bg-color:#242424;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54);--f7-notification-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-notification-margin:16px;--f7-notification-padding:16px;--f7-notification-border-radius:8px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:600;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.6);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.aurora .theme-dark,.aurora.theme-dark{--f7-notification-bg-color:#242424;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54)}.notification{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);position:absolute;left:var(--f7-notification-margin);top:var(--f7-notification-margin);width:calc(100% - var(--f7-notification-margin) * 2);z-index:20000;font-size:14px;margin:0;border:none;display:none;box-sizing:border-box;transition-property:transform;direction:ltr;max-width:var(--f7-notification-max-width);padding:var(--f7-notification-padding);border-radius:var(--f7-notification-border-radius);box-shadow:var(--f7-notification-box-shadow);background:var(--f7-notification-bg-color);margin-top:var(--f7-safe-area-top)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .notification{background-color:rgba(var(--f7-notification-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}@media (min-width:568px){.notification{left:50%;width:var(--f7-notification-max-width);margin-left:calc(-1 * var(--f7-notification-max-width)/ 2)}}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);text-transform:var(--f7-notification-title-text-transform);line-height:var(--f7-notification-title-line-height);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);text-transform:var(--f7-notification-subtitle-text-transform);line-height:var(--f7-notification-subtitle-line-height);font-weight:var(--f7-notification-subtitle-font-weight)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);text-transform:var(--f7-notification-text-text-transform);line-height:var(--f7-notification-text-line-height);font-weight:var(--f7-notification-text-font-weight)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{width:var(--f7-notification-icon-size)!important;height:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{display:flex;justify-content:flex-start;align-items:center}.notification-close-button{margin-left:auto;cursor:pointer;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';display:block;width:100%;height:100%;font-size:20px;position:absolute;left:50%;top:50%;text-align:center}.ios .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.ios .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.ios .notification.modal-out{transform:translate3d(0%,-200%,0)}.ios .notification-icon{margin-right:8px}.ios .notification-header+.notification-content{margin-top:10px}.ios .notification-title-right-text{margin-right:6px;margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:10px}.ios .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.3;transition-duration:.3s}.ios .notification-close-button.active-state{transition-duration:0s;opacity:.1}.ios .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .theme-dark .notification-close-button:after,.ios.theme-dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transition-duration:0s;animation:notification-md-in .4s ease-out;transform:translate3d(0,0%,0)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transition-duration:.2s;transition-timing-function:ease-in;transform:translate3d(0,-150%,0)}.md .notification-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:2px}.md .notification-header+.notification-content{margin-top:6px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{content:'';width:3px;height:3px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;background:var(--f7-notification-title-right-color)}.md .notification-close-button{width:16px;height:16px;transition-duration:.3s}.md .notification-close-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md .notification-close-button.icon-only:before,.md .notification-close-button.input-clear-button:before,.md .notification-close-button.notification-close-button:before,.md .notification-close-button.ripple-inset:before,.md .notification-close-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md .notification-close-button.active-state:before{opacity:1;transition-duration:150ms}.md .notification-close-button:after,.md .notification-close-button:before{width:48px;height:48px;left:50%;top:50%;margin-left:-24px;margin-top:-24px}.md .notification-close-button:after{color:#737373;content:'delete_md';line-height:48px;font-size:14px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}.aurora .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.aurora .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.aurora .notification.modal-out{transform:translate3d(0%,-200%,0)}.aurora .notification-icon{margin-right:8px}.aurora .notification-header+.notification-content{margin-top:8px}.aurora .notification-title-right-text{margin-right:0px;margin-left:auto}.aurora .notification-title-right-text+.notification-close-button{margin-left:8px}.aurora .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.4;transition-duration:.3s}.aurora .notification-close-button:hover{transition-duration:0s;opacity:.5}.aurora .notification-close-button.active-state{transition-duration:0s;opacity:.6}.aurora .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.aurora .theme-dark .notification-close-button:after,.aurora.theme-dark .notification-close-button:after{color:#fff}
+:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}:root .dark,:root.dark{--f7-notification-subtitle-color:#fff}.ios{--f7-notification-margin:8px;--f7-notification-padding:10px;--f7-notification-border-radius:12px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:20px;--f7-notification-title-font-size:13px;--f7-notification-title-text-transform:uppercase;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:400;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:13px;--f7-notification-subtitle-font-size:15px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:15px;--f7-notification-text-line-height:1.2;--f7-notification-bg-color:rgba(250, 250, 250, 0.95);--f7-notification-bg-color-rgb:255,255,255;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.45);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .dark,.ios.dark{--f7-notification-bg-color:rgba(30, 30, 30, 0.95);--f7-notification-bg-color-rgb:30,30,30;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.55)}.md{--f7-notification-margin:0px;--f7-notification-padding:16px;--f7-notification-border-radius:0px;--f7-notification-box-shadow:0 2px 4px rgba(0, 0, 0, 0.22),0 1px 2px rgba(0, 0, 0, 0.24);--f7-notification-icon-size:16px;--f7-notification-title-color:var(--f7-theme-color);--f7-notification-title-font-size:12px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1;--f7-notification-title-font-weight:400;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-right-color:rgba(0, 0, 0, 0.54);--f7-notification-subtitle-color:#212121;--f7-notification-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-notification-bg-color:#242424;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54);--f7-notification-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-notification-margin:16px;--f7-notification-padding:16px;--f7-notification-border-radius:8px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:600;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.6);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.aurora .dark,.aurora.dark{--f7-notification-bg-color:#242424;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54)}.notification{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);position:absolute;left:var(--f7-notification-margin);top:var(--f7-notification-margin);width:calc(100% - var(--f7-notification-margin) * 2);z-index:20000;font-size:14px;margin:0;border:none;display:none;box-sizing:border-box;transition-property:transform;direction:ltr;max-width:var(--f7-notification-max-width);padding:var(--f7-notification-padding);border-radius:var(--f7-notification-border-radius);box-shadow:var(--f7-notification-box-shadow);background:var(--f7-notification-bg-color);margin-top:var(--f7-safe-area-top)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .notification{background-color:rgba(var(--f7-notification-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}@media (min-width:568px){.notification{left:50%;width:var(--f7-notification-max-width);margin-left:calc(-1 * var(--f7-notification-max-width)/ 2)}}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);text-transform:var(--f7-notification-title-text-transform);line-height:var(--f7-notification-title-line-height);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);text-transform:var(--f7-notification-subtitle-text-transform);line-height:var(--f7-notification-subtitle-line-height);font-weight:var(--f7-notification-subtitle-font-weight)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);text-transform:var(--f7-notification-text-text-transform);line-height:var(--f7-notification-text-line-height);font-weight:var(--f7-notification-text-font-weight)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{width:var(--f7-notification-icon-size)!important;height:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{display:flex;justify-content:flex-start;align-items:center}.notification-close-button{margin-left:auto;cursor:pointer;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';display:block;width:100%;height:100%;font-size:20px;position:absolute;left:50%;top:50%;text-align:center}.ios .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.ios .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.ios .notification.modal-out{transform:translate3d(0%,-200%,0)}.ios .notification-icon{margin-right:8px}.ios .notification-header+.notification-content{margin-top:10px}.ios .notification-title-right-text{margin-right:6px;margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:10px}.ios .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.3;transition-duration:.3s}.ios .notification-close-button.active-state{transition-duration:0s;opacity:.1}.ios .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .dark .notification-close-button:after,.ios.dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transition-duration:0s;animation:notification-md-in .4s ease-out;transform:translate3d(0,0%,0)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transition-duration:.2s;transition-timing-function:ease-in;transform:translate3d(0,-150%,0)}.md .notification-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:2px}.md .notification-header+.notification-content{margin-top:6px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{content:'';width:3px;height:3px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;background:var(--f7-notification-title-right-color)}.md .notification-close-button{width:16px;height:16px;transition-duration:.3s}.md .notification-close-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md .notification-close-button.icon-only:before,.md .notification-close-button.input-clear-button:before,.md .notification-close-button.notification-close-button:before,.md .notification-close-button.ripple-inset:before,.md .notification-close-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md .notification-close-button.active-state:before{opacity:1;transition-duration:150ms}.md .notification-close-button:after,.md .notification-close-button:before{width:48px;height:48px;left:50%;top:50%;margin-left:-24px;margin-top:-24px}.md .notification-close-button:after{color:#737373;content:'delete_md';line-height:48px;font-size:14px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}.aurora .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.aurora .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.aurora .notification.modal-out{transform:translate3d(0%,-200%,0)}.aurora .notification-icon{margin-right:8px}.aurora .notification-header+.notification-content{margin-top:8px}.aurora .notification-title-right-text{margin-right:0px;margin-left:auto}.aurora .notification-title-right-text+.notification-close-button{margin-left:8px}.aurora .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.4;transition-duration:.3s}.aurora .notification-close-button:hover{transition-duration:0s;opacity:.5}.aurora .notification-close-button.active-state{transition-duration:0s;opacity:.6}.aurora .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.aurora .dark .notification-close-button:after,.aurora.dark .notification-close-button:after{color:#fff}

package/components/notification/notification.css

@@ -1 +1 @@
-:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}:root .theme-dark,:root.theme-dark{--f7-notification-subtitle-color:#fff}.ios{--f7-notification-margin:8px;--f7-notification-padding:10px;--f7-notification-border-radius:12px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:20px;--f7-notification-title-font-size:13px;--f7-notification-title-text-transform:uppercase;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:400;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:13px;--f7-notification-subtitle-font-size:15px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:15px;--f7-notification-text-line-height:1.2;--f7-notification-bg-color:rgba(250, 250, 250, 0.95);--f7-notification-bg-color-rgb:255,255,255;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.45);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .theme-dark,.ios.theme-dark{--f7-notification-bg-color:rgba(30, 30, 30, 0.95);--f7-notification-bg-color-rgb:30,30,30;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.55)}.md{--f7-notification-margin:0px;--f7-notification-padding:16px;--f7-notification-border-radius:0px;--f7-notification-box-shadow:0 2px 4px rgba(0, 0, 0, 0.22),0 1px 2px rgba(0, 0, 0, 0.24);--f7-notification-icon-size:16px;--f7-notification-title-color:var(--f7-theme-color);--f7-notification-title-font-size:12px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1;--f7-notification-title-font-weight:400;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-right-color:rgba(0, 0, 0, 0.54);--f7-notification-subtitle-color:#212121;--f7-notification-text-color:rgba(0, 0, 0, 0.54)}.md .theme-dark,.md.theme-dark{--f7-notification-bg-color:#242424;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54);--f7-notification-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-notification-margin:16px;--f7-notification-padding:16px;--f7-notification-border-radius:8px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:600;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.6);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.aurora .theme-dark,.aurora.theme-dark{--f7-notification-bg-color:#242424;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54)}.notification{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);position:absolute;left:var(--f7-notification-margin);top:var(--f7-notification-margin);width:calc(100% - var(--f7-notification-margin) * 2);z-index:20000;font-size:14px;margin:0;border:none;display:none;box-sizing:border-box;transition-property:transform;direction:ltr;max-width:var(--f7-notification-max-width);padding:var(--f7-notification-padding);border-radius:var(--f7-notification-border-radius);box-shadow:var(--f7-notification-box-shadow);background:var(--f7-notification-bg-color);margin-top:var(--f7-safe-area-top)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .notification{background-color:rgba(var(--f7-notification-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}@media (min-width:568px){.notification{left:50%;width:var(--f7-notification-max-width);margin-left:calc(-1 * var(--f7-notification-max-width)/ 2)}}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);text-transform:var(--f7-notification-title-text-transform);line-height:var(--f7-notification-title-line-height);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);text-transform:var(--f7-notification-subtitle-text-transform);line-height:var(--f7-notification-subtitle-line-height);font-weight:var(--f7-notification-subtitle-font-weight)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);text-transform:var(--f7-notification-text-text-transform);line-height:var(--f7-notification-text-line-height);font-weight:var(--f7-notification-text-font-weight)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{width:var(--f7-notification-icon-size)!important;height:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{display:flex;justify-content:flex-start;align-items:center}.notification-close-button{margin-left:auto;cursor:pointer;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';display:block;width:100%;height:100%;font-size:20px;position:absolute;left:50%;top:50%;text-align:center}.ios .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.ios .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.ios .notification.modal-out{transform:translate3d(0%,-200%,0)}.ios .notification-icon{margin-right:8px}.ios .notification-header+.notification-content{margin-top:10px}.ios .notification-title-right-text{margin-right:6px;margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:10px}.ios .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.3;transition-duration:.3s}.ios .notification-close-button.active-state{transition-duration:0s;opacity:.1}.ios .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .theme-dark .notification-close-button:after,.ios.theme-dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transition-duration:0s;animation:notification-md-in .4s ease-out;transform:translate3d(0,0%,0)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transition-duration:.2s;transition-timing-function:ease-in;transform:translate3d(0,-150%,0)}.md .notification-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:2px}.md .notification-header+.notification-content{margin-top:6px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{content:'';width:3px;height:3px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;background:var(--f7-notification-title-right-color)}.md .notification-close-button{width:16px;height:16px;transition-duration:.3s}.md .notification-close-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md .notification-close-button.icon-only:before,.md .notification-close-button.input-clear-button:before,.md .notification-close-button.notification-close-button:before,.md .notification-close-button.ripple-inset:before,.md .notification-close-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md .notification-close-button.active-state:before{opacity:1;transition-duration:150ms}.md .notification-close-button:after,.md .notification-close-button:before{width:48px;height:48px;left:50%;top:50%;margin-left:-24px;margin-top:-24px}.md .notification-close-button:after{color:#737373;content:'delete_md';line-height:48px;font-size:14px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}.aurora .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.aurora .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.aurora .notification.modal-out{transform:translate3d(0%,-200%,0)}.aurora .notification-icon{margin-right:8px}.aurora .notification-header+.notification-content{margin-top:8px}.aurora .notification-title-right-text{margin-right:0px;margin-left:auto}.aurora .notification-title-right-text+.notification-close-button{margin-left:8px}.aurora .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.4;transition-duration:.3s}.aurora .notification-close-button:hover{transition-duration:0s;opacity:.5}.aurora .notification-close-button.active-state{transition-duration:0s;opacity:.6}.aurora .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.aurora .theme-dark .notification-close-button:after,.aurora.theme-dark .notification-close-button:after{color:#fff}
+:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}:root .dark,:root.dark{--f7-notification-subtitle-color:#fff}.ios{--f7-notification-margin:8px;--f7-notification-padding:10px;--f7-notification-border-radius:12px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:20px;--f7-notification-title-font-size:13px;--f7-notification-title-text-transform:uppercase;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:400;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:13px;--f7-notification-subtitle-font-size:15px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:15px;--f7-notification-text-line-height:1.2;--f7-notification-bg-color:rgba(250, 250, 250, 0.95);--f7-notification-bg-color-rgb:255,255,255;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.45);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .dark,.ios.dark{--f7-notification-bg-color:rgba(30, 30, 30, 0.95);--f7-notification-bg-color-rgb:30,30,30;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.55)}.md{--f7-notification-margin:0px;--f7-notification-padding:16px;--f7-notification-border-radius:0px;--f7-notification-box-shadow:0 2px 4px rgba(0, 0, 0, 0.22),0 1px 2px rgba(0, 0, 0, 0.24);--f7-notification-icon-size:16px;--f7-notification-title-color:var(--f7-theme-color);--f7-notification-title-font-size:12px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1;--f7-notification-title-font-weight:400;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-right-color:rgba(0, 0, 0, 0.54);--f7-notification-subtitle-color:#212121;--f7-notification-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-notification-bg-color:#242424;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54);--f7-notification-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-notification-margin:16px;--f7-notification-padding:16px;--f7-notification-border-radius:8px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:600;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.6);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.aurora .dark,.aurora.dark{--f7-notification-bg-color:#242424;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54)}.notification{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);position:absolute;left:var(--f7-notification-margin);top:var(--f7-notification-margin);width:calc(100% - var(--f7-notification-margin) * 2);z-index:20000;font-size:14px;margin:0;border:none;display:none;box-sizing:border-box;transition-property:transform;direction:ltr;max-width:var(--f7-notification-max-width);padding:var(--f7-notification-padding);border-radius:var(--f7-notification-border-radius);box-shadow:var(--f7-notification-box-shadow);background:var(--f7-notification-bg-color);margin-top:var(--f7-safe-area-top)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .notification{background-color:rgba(var(--f7-notification-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}@media (min-width:568px){.notification{left:50%;width:var(--f7-notification-max-width);margin-left:calc(-1 * var(--f7-notification-max-width)/ 2)}}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);text-transform:var(--f7-notification-title-text-transform);line-height:var(--f7-notification-title-line-height);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);text-transform:var(--f7-notification-subtitle-text-transform);line-height:var(--f7-notification-subtitle-line-height);font-weight:var(--f7-notification-subtitle-font-weight)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);text-transform:var(--f7-notification-text-text-transform);line-height:var(--f7-notification-text-line-height);font-weight:var(--f7-notification-text-font-weight)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{width:var(--f7-notification-icon-size)!important;height:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{display:flex;justify-content:flex-start;align-items:center}.notification-close-button{margin-left:auto;cursor:pointer;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';display:block;width:100%;height:100%;font-size:20px;position:absolute;left:50%;top:50%;text-align:center}.ios .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.ios .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.ios .notification.modal-out{transform:translate3d(0%,-200%,0)}.ios .notification-icon{margin-right:8px}.ios .notification-header+.notification-content{margin-top:10px}.ios .notification-title-right-text{margin-right:6px;margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:10px}.ios .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.3;transition-duration:.3s}.ios .notification-close-button.active-state{transition-duration:0s;opacity:.1}.ios .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .dark .notification-close-button:after,.ios.dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transition-duration:0s;animation:notification-md-in .4s ease-out;transform:translate3d(0,0%,0)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transition-duration:.2s;transition-timing-function:ease-in;transform:translate3d(0,-150%,0)}.md .notification-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:2px}.md .notification-header+.notification-content{margin-top:6px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{content:'';width:3px;height:3px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;background:var(--f7-notification-title-right-color)}.md .notification-close-button{width:16px;height:16px;transition-duration:.3s}.md .notification-close-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md .notification-close-button.icon-only:before,.md .notification-close-button.input-clear-button:before,.md .notification-close-button.notification-close-button:before,.md .notification-close-button.ripple-inset:before,.md .notification-close-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md .notification-close-button.active-state:before{opacity:1;transition-duration:150ms}.md .notification-close-button:after,.md .notification-close-button:before{width:48px;height:48px;left:50%;top:50%;margin-left:-24px;margin-top:-24px}.md .notification-close-button:after{color:#737373;content:'delete_md';line-height:48px;font-size:14px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}.aurora .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.aurora .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.aurora .notification.modal-out{transform:translate3d(0%,-200%,0)}.aurora .notification-icon{margin-right:8px}.aurora .notification-header+.notification-content{margin-top:8px}.aurora .notification-title-right-text{margin-right:0px;margin-left:auto}.aurora .notification-title-right-text+.notification-close-button{margin-left:8px}.aurora .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.4;transition-duration:.3s}.aurora .notification-close-button:hover{transition-duration:0s;opacity:.5}.aurora .notification-close-button.active-state{transition-duration:0s;opacity:.6}.aurora .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.aurora .dark .notification-close-button:after,.aurora.dark .notification-close-button:after{color:#fff}

package/components/notification/notification.d.ts

@@ -13,9 +13,9 @@ export namespace Notification {
     params: Parameters;
 
     /** Open notification */
-    open(): Notification;
+    open(animate?: boolean): Notification;
     /** Close notification */
-    close(): Notification;
+    close(animate?: boolean): Notification;
   }
 
   interface Parameters {
@@ -88,10 +88,10 @@ export namespace Notification {
       get(el: HTMLElement | CSSSelector): Notification;
 
       /** open Notification */
-      open(el: HTMLElement | CSSSelector): Notification;
+      open(el: HTMLElement | CSSSelector, animate?: boolean): Notification;
 
       /** closes Notification */
-      close(el: HTMLElement | CSSSelector): Notification;
+      close(el: HTMLElement | CSSSelector, animate?: boolean): Notification;
     };
   }
   interface AppParams {

package/components/notification/notification.js

@@ -1 +1,35 @@
-(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,n=t.utils,i=(t.getDevice,t.getSupport,t.Class,t.Modal),r=(t.ConstructorMethods,t.ModalMethods),s=n.extend,a=n.now,c=n.nextTick;function l(t){this.wrapped=t}function u(t){var e,o;function n(e,o){try{var r=t[e](o),s=r.value,a=s instanceof l;Promise.resolve(a?s.wrapped:s).then((function(t){a?n("return"===e?"return":"next",t):i(r.done?"return":"normal",t)}),(function(t){n("throw",t)}))}catch(t){i("throw",t)}}function i(t,i){switch(t){case"return":e.resolve({value:i,done:!0});break;case"throw":e.reject(i);break;default:e.resolve({value:i,done:!1})}(e=e.next)?n(e.key,e.arg):o=null}this._invoke=function(t,i){return new Promise((function(r,s){var a={key:t,arg:i,resolve:r,reject:s,next:null};o?o=o.next=a:(e=o=a,n(t,i))}))},"function"!=typeof t.return&&(this.return=void 0)}function f(t,e){return(f=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function p(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}u.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},u.prototype.next=function(t){return this._invoke("next",t)},u.prototype.throw=function(t){return this._invoke("throw",t)},u.prototype.return=function(t){return this._invoke("return",t)};var v=function(t){var e,n;function i(e,n){var i,r=s({on:{}},e.params.notification,n),l=p(i=t.call(this,e,r)||this);l.app=e,l.params=r;var u,f,v,h,d,m,y,x=l.params,g=x.icon,b=x.title,$=x.titleRightText,k=x.subtitle,w=x.text,C=x.closeButton,T=x.closeTimeout,j=x.cssClass,M=x.closeOnClick;if(l.params.el)u=o(l.params.el);else{var _=l.render({icon:g,title:b,titleRightText:$,subtitle:k,text:w,closeButton:C,cssClass:j});u=o(_)}if(u&&u.length>0&&u[0].f7Modal)return u[0].f7Modal||p(i);if(0===u.length)return l.destroy()||p(i);s(l,{$el:u,el:u[0],type:"notification"}),u[0].f7Modal=l,C&&u.find(".notification-close-button").on("click",(function(){l.close()})),u.on("click",(function(t){C&&o(t.target).closest(".notification-close-button").length||(l.emit("local::click notificationClick",l),M&&l.close())})),l.on("beforeDestroy",(function(){u.off("click")}));var O,R={};function B(t){f||(f=!0,v=!1,h=void 0,m=a(),R.x="touchstart"===t.type?t.targetTouches[0].pageX:t.pageX,R.y="touchstart"===t.type?t.targetTouches[0].pageY:t.pageY)}function D(t){if(f){var e="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,o="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY;if(void 0===h&&(h=!!(h||Math.abs(o-R.y)<Math.abs(e-R.x))),h)f=!1;else{t.preventDefault(),v||(l.$el.removeClass("notification-transitioning"),l.$el.transition(0),y=l.$el[0].offsetHeight/2),v=!0;var n=d=o-R.y;d>0&&(n=Math.pow(d,.8)),l.$el.transform("translate3d(0, "+n+"px, 0)")}}}function E(){if(!f||!v)return f=!1,void(v=!1);if(f=!1,v=!1,0!==d){var t=a()-m;l.$el.transition(""),l.$el.addClass("notification-transitioning"),l.$el.transform(""),(d<-10&&t<300||-d>=y/1)&&l.close()}}function P(){O=c((function(){f&&v?P():l.close()}),T)}return l.on("open",(function(){l.params.swipeToClose&&(l.$el.on(e.touchEvents.start,B,{passive:!0}),e.on("touchmove:active",D),e.on("touchend:passive",E)),o(".notification.modal-in").each((function(t){var o=e.notification.get(t);t!==l.el&&o&&o.close()})),T&&P()})),l.on("close beforeDestroy",(function(){l.params.swipeToClose&&(l.$el.off(e.touchEvents.start,B,{passive:!0}),e.off("touchmove:active",D),e.off("touchend:passive",E)),clearTimeout(O)})),l||p(i)}return n=t,(e=i).prototype=Object.create(n.prototype),e.prototype.constructor=e,f(e,n),i.prototype.render=function(){var t=this;if(t.params.render)return t.params.render.call(t,t);var e=t.params,o=e.icon,n=e.title,i=e.titleRightText,r=e.subtitle,s=e.text,a=e.closeButton,c=e.cssClass;return $jsx("div",{class:"notification "+(c||"")},$jsx("div",{class:"notification-header"},o&&$jsx("div",{class:"notification-icon"},o),n&&$jsx("div",{class:"notification-title"},n),i&&$jsx("div",{class:"notification-title-right-text"},i),a&&$jsx("span",{class:"notification-close-button"})),$jsx("div",{class:"notification-content"},r&&$jsx("div",{class:"notification-subtitle"},r),s&&$jsx("div",{class:"notification-text"},s)))},i}(i),h={name:"notification",static:{Notification:v},create:function(){this.notification=s({},r({app:this,constructor:v,defaultSelector:".notification.modal-in"}))},params:{notification:{icon:null,title:null,titleRightText:null,subtitle:null,text:null,closeButton:!1,closeTimeout:null,closeOnClick:!1,swipeToClose:!0,cssClass:null,render:null,containerEl:null}}};if(e){if(t.prototype.modules&&t.prototype.modules[h.name])return;t.use(h),t.instance&&(t.instance.useModuleParams(h,t.instance.params),t.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import { extend } from '../../shared/utils.js';
+import Notification from './notification-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'notification',
+  static: {
+    Notification
+  },
+
+  create() {
+    const app = this;
+    app.notification = extend({}, ModalMethods({
+      app,
+      constructor: Notification,
+      defaultSelector: '.notification.modal-in'
+    }));
+  },
+
+  params: {
+    notification: {
+      icon: null,
+      title: null,
+      titleRightText: null,
+      subtitle: null,
+      text: null,
+      closeButton: false,
+      closeTimeout: null,
+      closeOnClick: false,
+      swipeToClose: true,
+      cssClass: null,
+      render: null,
+      containerEl: null
+    }
+  }
+};

package/components/notification/notification.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,i=t.utils,n=(t.getDevice,t.getSupport,t.Class,t.Modal),s=(t.ConstructorMethods,t.ModalMethods),a=i.extend,c=i.now,l=i.nextTick;class r extends n{constructor(t,e){const i=a({on:{}},t.params.notification,e);super(t,i);const n=this;n.app=t,n.params=i;const{icon:s,title:r,titleRightText:u,subtitle:f,text:p,closeButton:d,closeTimeout:h,cssClass:m,closeOnClick:v}=n.params;let g,x,$,C,T,y,b;if(n.params.el)g=o(n.params.el);else{const t=n.render({icon:s,title:r,titleRightText:u,subtitle:f,text:p,closeButton:d,cssClass:m});g=o(t)}if(g&&g.length>0&&g[0].f7Modal)return g[0].f7Modal;if(0===g.length)return n.destroy();a(n,{$el:g,el:g[0],type:"notification"}),g[0].f7Modal=n,d&&g.find(".notification-close-button").on("click",(()=>{n.close()})),g.on("click",(t=>{d&&o(t.target).closest(".notification-close-button").length||(n.emit("local::click notificationClick",n),v&&n.close())})),n.on("beforeDestroy",(()=>{g.off("click")}));const M={};function j(t){x||(x=!0,$=!1,C=void 0,y=c(),M.x="touchstart"===t.type?t.targetTouches[0].pageX:t.pageX,M.y="touchstart"===t.type?t.targetTouches[0].pageY:t.pageY)}function k(t){if(!x)return;const e="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,o="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY;if(void 0===C&&(C=!!(C||Math.abs(o-M.y)<Math.abs(e-M.x))),C)return void(x=!1);t.preventDefault(),$||(n.$el.removeClass("notification-transitioning"),n.$el.transition(0),b=n.$el[0].offsetHeight/2),$=!0,T=o-M.y;let i=T;T>0&&(i=T**.8),n.$el.transform(`translate3d(0, ${i}px, 0)`)}function w(){if(!x||!$)return x=!1,void($=!1);if(x=!1,$=!1,0===T)return;const t=c()-y;n.$el.transition(""),n.$el.addClass("notification-transitioning"),n.$el.transform(""),(T<-10&&t<300||-T>=b/1)&&n.close()}let B;function D(){B=l((()=>{x&&$?D():n.close()}),h)}return n.on("open",(()=>{n.params.swipeToClose&&(n.$el.on(t.touchEvents.start,j,{passive:!0}),t.on("touchmove:active",k),t.on("touchend:passive",w)),o(".notification.modal-in").each((e=>{const o=t.notification.get(e);e!==n.el&&o&&o.close()})),h&&D()})),n.on("close beforeDestroy",(()=>{n.params.swipeToClose&&(n.$el.off(t.touchEvents.start,j,{passive:!0}),t.off("touchmove:active",k),t.off("touchend:passive",w)),clearTimeout(B)})),n}render(){const t=this;if(t.params.render)return t.params.render.call(t,t);const{icon:e,title:o,titleRightText:i,subtitle:n,text:s,closeButton:a,cssClass:c}=t.params;return $jsx("div",{class:`notification ${c||""}`},$jsx("div",{class:"notification-header"},e&&$jsx("div",{class:"notification-icon"},e),o&&$jsx("div",{class:"notification-title"},o),i&&$jsx("div",{class:"notification-title-right-text"},i),a&&$jsx("span",{class:"notification-close-button"})),$jsx("div",{class:"notification-content"},n&&$jsx("div",{class:"notification-subtitle"},n),s&&$jsx("div",{class:"notification-text"},s)))}}var u={name:"notification",static:{Notification:r},create(){this.notification=a({},s({app:this,constructor:r,defaultSelector:".notification.modal-in"}))},params:{notification:{icon:null,title:null,titleRightText:null,subtitle:null,text:null,closeButton:!1,closeTimeout:null,closeOnClick:!1,swipeToClose:!0,cssClass:null,render:null,containerEl:null}}};if(e){if(t.prototype.modules&&t.prototype.modules[u.name])return;t.use(u),t.instance&&(t.instance.useModuleParams(u,t.instance.params),t.instance.useModule(u))}return u}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/page/page-vars.less

@@ -58,6 +58,6 @@
     --f7-page-bg-color: #121212;
   });
 });
-.theme-dark {
+.dark {
   --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
 }