@vaadin/notification 23.1.0-beta3 → 23.1.0-rc2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "23.1.0-beta3",
+  "version": "23.1.0-rc2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,19 +36,19 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-beta3",
-    "@vaadin/lit-renderer": "23.1.0-beta3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-beta3",
-    "@vaadin/vaadin-material-styles": "23.1.0-beta3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-beta3",
+    "@vaadin/component-base": "23.1.0-rc2",
+    "@vaadin/lit-renderer": "23.1.0-rc2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-rc2",
+    "@vaadin/vaadin-material-styles": "23.1.0-rc2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-rc2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/button": "23.1.0-beta3",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-beta3",
+    "@vaadin/button": "23.1.0-rc2",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-rc2",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c787ceb8a312f88631c6d429ff320d5f89b1b838"
+  "gitHead": "154c6782c42145fed21e443559fbe2d781ad3ec7"
 }

package/src/vaadin-notification.d.ts

@@ -100,6 +100,29 @@ declare class NotificationCard extends ThemableMixin(HTMLElement) {}
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
 declare class Notification extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
+  /**
+   * Shows a notification with the given content.
+   * By default, positions the notification at `bottom-start` and uses a 5 second duration.
+   * An options object can be passed to configure the notification.
+   * The options object has the following structure:
+   *
+   * ```
+   * {
+   *   position?: string
+   *   duration?: number
+   *   theme?: string
+   * }
+   * ```
+   *
+   * See the individual documentation for:
+   * - [`position`](#/elements/vaadin-notification#property-position)
+   * - [`duration`](#/elements/vaadin-notification#property-duration)
+   *
+   * @param contents the contents to show, either as a string or a Lit template.
+   * @param options optional options for customizing the notification.
+   */
+  static show(contents: string | TemplateResult, options?: ShowOptions): Notification;
+
   /**
    * The duration in milliseconds to show the notification.
    * Set to `0` or a negative number to disable the notification auto-closing.
@@ -156,29 +179,6 @@ declare class Notification extends ThemePropertyMixin(ElementMixin(HTMLElement))
     listener: (this: Notification, ev: NotificationEventMap[K]) => void,
     options?: boolean | EventListenerOptions,
   ): void;
-
-  /**
-   * Shows a notification with the given content.
-   * By default, positions the notification at `bottom-start` and uses a 5 second duration.
-   * An options object can be passed to configure the notification.
-   * The options object has the following structure:
-   *
-   * ```
-   * {
-   *   position?: string
-   *   duration?: number
-   *   theme?: string
-   * }
-   * ```
-   *
-   * See the individual documentation for:
-   * - [`position`](#/elements/vaadin-notification#property-position)
-   * - [`duration`](#/elements/vaadin-notification#property-duration)
-   *
-   * @param contents the contents to show, either as a string or a Lit template.
-   * @param options optional options for customizing the notification.
-   */
-  static show(contents: string | TemplateResult, options?: ShowOptions): Notification;
 }
 
 declare global {

package/src/vaadin-notification.js

@@ -110,6 +110,15 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
     };
   }
 
+  constructor() {
+    super();
+
+    this._boundVaadinOverlayClose = this._onVaadinOverlayClose.bind(this);
+    if (isIOS) {
+      this._boundIosResizeListener = () => this._detectIosNavbar();
+    }
+  }
+
   /** @private */
   _openedChanged(opened) {
     if (opened) {
@@ -128,15 +137,6 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
     }
   }
 
-  constructor() {
-    super();
-
-    this._boundVaadinOverlayClose = this._onVaadinOverlayClose.bind(this);
-    if (isIOS) {
-      this._boundIosResizeListener = () => this._detectIosNavbar();
-    }
-  }
-
   /** @private */
   _detectIosNavbar() {
     const innerHeight = window.innerHeight;
@@ -319,6 +319,63 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     return ['_durationChanged(duration, opened)', '_rendererChanged(renderer, opened, _card)'];
   }
 
+  /**
+   * Shows a notification with the given content.
+   * By default, positions the notification at `bottom-start` and uses a 5 second duration.
+   * An options object can be passed to configure the notification.
+   * The options object has the following structure:
+   *
+   * ```
+   * {
+   *   position?: string
+   *   duration?: number
+   *   theme?: string
+   * }
+   * ```
+   *
+   * See the individual documentation for:
+   * - [`position`](#/elements/vaadin-notification#property-position)
+   * - [`duration`](#/elements/vaadin-notification#property-duration)
+   *
+   * @param contents the contents to show, either as a string or a Lit template.
+   * @param options optional options for customizing the notification.
+   */
+  static show(contents, options) {
+    if (isTemplateResult(contents)) {
+      return Notification._createAndShowNotification((root) => {
+        render(contents, root);
+      }, options);
+    }
+    return Notification._createAndShowNotification((root) => {
+      root.innerText = contents;
+    }, options);
+  }
+
+  /** @private */
+  static _createAndShowNotification(renderer, options) {
+    const notification = document.createElement(Notification.is);
+    if (options && Number.isFinite(options.duration)) {
+      notification.duration = options.duration;
+    }
+    if (options && options.position) {
+      notification.position = options.position;
+    }
+    if (options && options.theme) {
+      notification.setAttribute('theme', options.theme);
+    }
+    notification.renderer = renderer;
+    document.body.appendChild(notification);
+    notification.opened = true;
+
+    notification.addEventListener('opened-changed', (e) => {
+      if (!e.detail.value) {
+        notification.remove();
+      }
+    });
+
+    return notification;
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -489,63 +546,6 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       }
     }
   }
-
-  /**
-   * Shows a notification with the given content.
-   * By default, positions the notification at `bottom-start` and uses a 5 second duration.
-   * An options object can be passed to configure the notification.
-   * The options object has the following structure:
-   *
-   * ```
-   * {
-   *   position?: string
-   *   duration?: number
-   *   theme?: string
-   * }
-   * ```
-   *
-   * See the individual documentation for:
-   * - [`position`](#/elements/vaadin-notification#property-position)
-   * - [`duration`](#/elements/vaadin-notification#property-duration)
-   *
-   * @param contents the contents to show, either as a string or a Lit template.
-   * @param options optional options for customizing the notification.
-   */
-  static show(contents, options) {
-    if (isTemplateResult(contents)) {
-      return Notification._createAndShowNotification((root) => {
-        render(contents, root);
-      }, options);
-    }
-    return Notification._createAndShowNotification((root) => {
-      root.innerText = contents;
-    }, options);
-  }
-
-  /** @private */
-  static _createAndShowNotification(renderer, options) {
-    const notification = document.createElement(Notification.is);
-    if (options && Number.isFinite(options.duration)) {
-      notification.duration = options.duration;
-    }
-    if (options && options.position) {
-      notification.position = options.position;
-    }
-    if (options && options.theme) {
-      notification.setAttribute('theme', options.theme);
-    }
-    notification.renderer = renderer;
-    document.body.appendChild(notification);
-    notification.opened = true;
-
-    notification.addEventListener('opened-changed', (e) => {
-      if (!e.detail.value) {
-        notification.remove();
-      }
-    });
-
-    return notification;
-  }
 }
 
 customElements.define(NotificationContainer.is, NotificationContainer);