@vaadin/vaadin-notification 22.0.0-alpha6 → 22.0.0-beta1

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-notification",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-notification",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-notification"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-notification/issues"
+  },
   "main": "vaadin-notification.js",
   "module": "vaadin-notification.js",
-  "repository": "vaadin/vaadin-notification",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-notification",
@@ -12,35 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-notification/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/button": "^22.0.0-alpha6",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha6",
-    "lit": "^2.0.0-rc.1",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/notification": "22.0.0-beta1"
   },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

package/src/vaadin-notification.d.ts

@@ -1,164 +1,18 @@
-import { TemplateResult } from 'lit';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { NotificationEventMap, NotificationPosition, NotificationRenderer, ShowOptions } from './interfaces';
-
 /**
- * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class NotificationContainer extends ElementMixin(ThemableMixin(HTMLElement)) {
-  /**
-   * True when the container is opened
-   */
-  opened: boolean;
-}
+import { Notification } from '@vaadin/notification/src/vaadin-notification.js';
 
 /**
- * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
+ * @deprecated Import `Notification` from `@vaadin/notification` instead.
  */
-declare class NotificationCard extends ThemableMixin(HTMLElement) {}
+export type NotificationElement = Notification;
 
 /**
- * `<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).
- *
- * ### Rendering
- *
- * The content of the notification can be populated by using the renderer callback function.
- *
- * The renderer function provides `root`, `notification` arguments.
- * Generate DOM content, append it to the `root` element and control the state
- * of the host element by accessing `notification`. Before generating new content,
- * users are able to check if there is already content in `root` for reusing it.
- *
- * ```html
- * <vaadin-notification id="notification"></vaadin-notification>
- * ```
- * ```js
- * const notification = document.querySelector('#notification');
- * notification.renderer = function(root, notification) {
- *   root.textContent = "Your work has been saved";
- * };
- * ```
- *
- * Renderer is called on the opening of the notification.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
- *
- * ### Styling
- *
- * `<vaadin-notification>` uses `<vaadin-notification-card>` internal
- * themable component as the actual visible notification cards.
- *
- * The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
- *
- * Part name | Description
- * ----------------|----------------
- * `overlay` | The notification container
- * `content` | The content of the notification
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * Note: the `theme` attribute value set on `<vaadin-notification>` is
- * propagated to the internal `<vaadin-notification-card>`.
- *
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @deprecated Import `Notification` from `@vaadin/notification` instead.
  */
-declare class NotificationElement extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
-  /**
-   * The duration in milliseconds to show the notification.
-   * Set to `0` or a negative number to disable the notification auto-closing.
-   */
-  duration: number;
-
-  /**
-   * True if the notification is currently displayed.
-   */
-  opened: boolean;
-
-  /**
-   * Alignment of the notification in the viewport
-   * Valid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`
-   */
-  position: NotificationPosition;
-
-  /**
-   * Custom function for rendering the content of the notification.
-   * Receives two arguments:
-   *
-   * - `root` The `<vaadin-notification-card>` DOM element. Append
-   *   your content to it.
-   * - `notification` The reference to the `<vaadin-notification>` element.
-   */
-  renderer: NotificationRenderer | undefined;
-
-  /**
-   * Requests an update for the content of the notification.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate(): void;
-
-  /**
-   * Manually invoke existing renderer.
-   *
-   * @deprecated Since Vaadin 21, `render()` is deprecated. Please use `requestContentUpdate()` instead.
-   */
-  render(): void;
-
-  /**
-   * Opens the notification.
-   */
-  open(): void;
-
-  /**
-   * Closes the notification.
-   */
-  close(): void;
-
-  addEventListener<K extends keyof NotificationEventMap>(
-    type: K,
-    listener: (this: NotificationElement, ev: NotificationEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof NotificationEventMap>(
-    type: K,
-    listener: (this: NotificationElement, 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
-   * }
-   * ```
-   *
-   * 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): NotificationElement;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-notification-container': NotificationContainer;
-    'vaadin-notification-card': NotificationCard;
-    'vaadin-notification': NotificationElement;
-  }
-}
+export const NotificationElement: typeof Notification;
 
-export { NotificationElement };
+export * from '@vaadin/notification/src/vaadin-notification.js';

package/src/vaadin-notification.js

@@ -3,534 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { isTemplateResult } from 'lit/directive-helpers.js';
-import { render } from 'lit';
+import { Notification } from '@vaadin/notification/src/vaadin-notification.js';
 
 /**
- * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @private
+ * @deprecated Import `Notification` from `@vaadin/notification` instead.
  */
-class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          position: fixed;
-          z-index: 1000;
-          top: 0;
-          left: 0;
-          bottom: 0;
-          right: 0;
-          box-sizing: border-box;
+export const NotificationElement = Notification;
 
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          pointer-events: none;
-        }
-
-        [region-group] {
-          flex: 1 1 0%;
-          display: flex;
-        }
-
-        [region-group='top'] {
-          align-items: flex-start;
-        }
-
-        [region-group='bottom'] {
-          align-items: flex-end;
-        }
-
-        [region-group] > [region] {
-          flex: 1 1 0%;
-        }
-
-        @media (max-width: 420px) {
-          [region-group] {
-            flex-direction: column;
-            align-items: stretch;
-          }
-
-          [region-group='top'] {
-            justify-content: flex-start;
-          }
-
-          [region-group='bottom'] {
-            justify-content: flex-end;
-          }
-
-          [region-group] > [region] {
-            flex: initial;
-          }
-        }
-      </style>
-
-      <div region="top-stretch"><slot name="top-stretch"></slot></div>
-      <div region-group="top">
-        <div region="top-start"><slot name="top-start"></slot></div>
-        <div region="top-center"><slot name="top-center"></slot></div>
-        <div region="top-end"><slot name="top-end"></slot></div>
-      </div>
-      <div region="middle"><slot name="middle"></slot></div>
-      <div region-group="bottom">
-        <div region="bottom-start"><slot name="bottom-start"></slot></div>
-        <div region="bottom-center"><slot name="bottom-center"></slot></div>
-        <div region="bottom-end"><slot name="bottom-end"></slot></div>
-      </div>
-      <div region="bottom-stretch"><slot name="bottom-stretch"></slot></div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-notification-container';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * True when the container is opened
-       * @type {boolean}
-       */
-      opened: {
-        type: Boolean,
-        value: false,
-        observer: '_openedChanged'
-      }
-    };
-  }
-
-  /** @private */
-  _openedChanged(opened) {
-    if (opened) {
-      document.body.appendChild(this);
-      if (this._boundIosResizeListener) {
-        this._detectIosNavbar();
-        window.addEventListener('resize', this._boundIosResizeListener);
-      }
-    } else {
-      document.body.removeChild(this);
-      if (this._boundIosResizeListener) {
-        window.removeEventListener('resize', this._boundIosResizeListener);
-      }
-    }
-  }
-
-  constructor() {
-    super();
-
-    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
-      this._boundIosResizeListener = () => this._detectIosNavbar();
-    }
-  }
-
-  /** @private */
-  _detectIosNavbar() {
-    const innerHeight = window.innerHeight;
-    const innerWidth = window.innerWidth;
-    const landscape = innerWidth > innerHeight;
-    const clientHeight = document.documentElement.clientHeight;
-    if (landscape && clientHeight > innerHeight) {
-      this.style.bottom = clientHeight - innerHeight + 'px';
-    } else {
-      this.style.bottom = '0';
-    }
-  }
-}
-
-/**
- * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @private
- */
-class NotificationCard extends ThemableMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        [part='overlay'] {
-          pointer-events: auto;
-        }
-      </style>
-
-      <div part="overlay">
-        <div part="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-notification-card';
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    this.setAttribute('role', 'alert');
-    this.setAttribute('aria-live', 'polite');
-  }
-}
-
-/**
- * `<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).
- *
- * ### Rendering
- *
- * The content of the notification can be populated by using the renderer callback function.
- *
- * The renderer function provides `root`, `notification` arguments.
- * Generate DOM content, append it to the `root` element and control the state
- * of the host element by accessing `notification`. Before generating new content,
- * users are able to check if there is already content in `root` for reusing it.
- *
- * ```html
- * <vaadin-notification id="notification"></vaadin-notification>
- * ```
- * ```js
- * const notification = document.querySelector('#notification');
- * notification.renderer = function(root, notification) {
- *   root.textContent = "Your work has been saved";
- * };
- * ```
- *
- * Renderer is called on the opening of the notification.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
- *
- * ### Styling
- *
- * `<vaadin-notification>` uses `<vaadin-notification-card>` internal
- * themable component as the actual visible notification cards.
- *
- * The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
- *
- * Part name | Description
- * ----------------|----------------
- * `overlay` | The notification container
- * `content` | The content of the notification
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * Note: the `theme` attribute value set on `<vaadin-notification>` is
- * propagated to the internal `<vaadin-notification-card>`.
- *
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- *
- * @extends HTMLElement
- * @mixes ThemePropertyMixin
- * @mixes ElementMixin
- */
-class NotificationElement extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: none;
-        }
-      </style>
-      <vaadin-notification-card theme$="[[theme]]"> </vaadin-notification-card>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-notification';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The duration in milliseconds to show the notification.
-       * Set to `0` or a negative number to disable the notification auto-closing.
-       * @type {number}
-       */
-      duration: {
-        type: Number,
-        value: 5000
-      },
-
-      /**
-       * True if the notification is currently displayed.
-       * @type {boolean}
-       */
-      opened: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        observer: '_openedChanged'
-      },
-
-      /**
-       * Alignment of the notification in the viewport
-       * Valid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`
-       * @type {!NotificationPosition}
-       */
-      position: {
-        type: String,
-        value: 'bottom-start',
-        observer: '_positionChanged'
-      },
-
-      /**
-       * Custom function for rendering the content of the notification.
-       * Receives two arguments:
-       *
-       * - `root` The `<vaadin-notification-card>` DOM element. Append
-       *   your content to it.
-       * - `notification` The reference to the `<vaadin-notification>` element.
-       * @type {!NotificationRenderer | undefined}
-       */
-      renderer: Function
-    };
-  }
-
-  static get observers() {
-    return ['_durationChanged(duration, opened)', '_rendererChanged(renderer, opened, _card)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._card = this.shadowRoot.querySelector('vaadin-notification-card');
-
-    processTemplates(this);
-  }
-
-  /**
-   * Requests an update for the content of the notification.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate() {
-    if (!this.renderer) return;
-
-    this.renderer(this._card, this);
-  }
-
-  /**
-   * Manually invoke existing renderer.
-   *
-   * @deprecated Since Vaadin 21, `render()` is deprecated. Please use `requestContentUpdate()` instead.
-   */
-  render() {
-    console.warn('WARNING: Since Vaadin 21, render() is deprecated. Please use requestContentUpdate() instead.');
-
-    this.requestContentUpdate();
-  }
-
-  /** @private */
-  _rendererChanged(renderer, opened, card) {
-    if (!card) {
-      return;
-    }
-
-    const rendererChanged = this._oldRenderer !== renderer;
-    this._oldRenderer = renderer;
-
-    if (rendererChanged) {
-      card.innerHTML = '';
-      // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
-      // When clearing the rendered content, this part needs to be manually disposed of.
-      // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-      delete card._$litPart$;
-    }
-
-    if (opened) {
-      if (!this._didAnimateNotificationAppend) {
-        this._animatedAppendNotificationCard();
-      }
-      this.requestContentUpdate();
-    }
-  }
-
-  /**
-   * Opens the notification.
-   */
-  open() {
-    this.opened = true;
-  }
-
-  /**
-   * Closes the notification.
-   */
-  close() {
-    this.opened = false;
-  }
-
-  /** @private */
-  get _container() {
-    if (!NotificationElement._container) {
-      NotificationElement._container = document.createElement('vaadin-notification-container');
-      document.body.appendChild(NotificationElement._container);
-    }
-    return NotificationElement._container;
-  }
-
-  /** @private */
-  _openedChanged(opened) {
-    if (opened) {
-      this._container.opened = true;
-      this._animatedAppendNotificationCard();
-    } else if (this._card) {
-      this._closeNotificationCard();
-    }
-  }
-
-  /** @private */
-  _animatedAppendNotificationCard() {
-    if (this._card) {
-      this._card.setAttribute('opening', '');
-      this._appendNotificationCard();
-      const listener = () => {
-        this._card.removeEventListener('animationend', listener);
-        this._card.removeAttribute('opening');
-      };
-      this._card.addEventListener('animationend', listener);
-      this._didAnimateNotificationAppend = true;
-    } else {
-      this._didAnimateNotificationAppend = false;
-    }
-  }
-
-  /** @private */
-  _appendNotificationCard() {
-    if (!this._card) {
-      return;
-    }
-
-    if (!this._container.shadowRoot.querySelector(`slot[name="${this.position}"]`)) {
-      console.warn(`Invalid alignment parameter provided: position=${this.position}`);
-      return;
-    }
-
-    this._card.slot = this.position;
-    if (this._container.firstElementChild && /top/.test(this.position)) {
-      this._container.insertBefore(this._card, this._container.firstElementChild);
-    } else {
-      this._container.appendChild(this._card);
-    }
-  }
-
-  /** @private */
-  _removeNotificationCard() {
-    this._card.parentNode && this._card.parentNode.removeChild(this._card);
-    this._card.removeAttribute('closing');
-    this._container.opened = Boolean(this._container.firstElementChild);
-  }
-
-  /** @private */
-  _closeNotificationCard() {
-    this._durationTimeoutId && clearTimeout(this._durationTimeoutId);
-    this._animatedRemoveNotificationCard();
-  }
-
-  /** @private */
-  _animatedRemoveNotificationCard() {
-    this._card.setAttribute('closing', '');
-    const name = getComputedStyle(this._card).getPropertyValue('animation-name');
-    if (name && name != 'none') {
-      const listener = () => {
-        this._removeNotificationCard();
-        this._card.removeEventListener('animationend', listener);
-      };
-      this._card.addEventListener('animationend', listener);
-    } else {
-      this._removeNotificationCard();
-    }
-  }
-
-  /** @private */
-  _positionChanged() {
-    if (this.opened) {
-      this._animatedAppendNotificationCard();
-    }
-  }
-
-  /** @private */
-  _durationChanged(duration, opened) {
-    if (opened) {
-      clearTimeout(this._durationTimeoutId);
-      if (duration > 0) {
-        this._durationTimeoutId = setTimeout(() => this.close(), duration);
-      }
-    }
-  }
-
-  /**
-   * 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
-   * }
-   * ```
-   *
-   * 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 NotificationElement._createAndShowNotification((root) => {
-        render(contents, root);
-      }, options);
-    } else {
-      return NotificationElement._createAndShowNotification((root) => {
-        root.innerText = contents;
-      }, options);
-    }
-  }
-
-  /** @private */
-  static _createAndShowNotification(renderer, options) {
-    const notification = document.createElement(NotificationElement.is);
-    if (options && options.duration) {
-      notification.duration = options.duration;
-    }
-    if (options && options.position) {
-      notification.position = options.position;
-    }
-    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);
-customElements.define(NotificationCard.is, NotificationCard);
-customElements.define(NotificationElement.is, NotificationElement);
-
-export { NotificationElement };
+export * from '@vaadin/notification/src/vaadin-notification.js';

package/theme/lumo/vaadin-notification.js

@@ -1,2 +1 @@
-import './vaadin-notification-styles.js';
-import '../../src/vaadin-notification.js';
+import '@vaadin/notification/theme/lumo/vaadin-notification.js';

package/theme/material/vaadin-notification.js

@@ -1,2 +1 @@
-import './vaadin-notification-styles.js';
-import '../../src/vaadin-notification.js';
+import '@vaadin/notification/theme/material/vaadin-notification.js';

package/vaadin-notification.d.ts

@@ -1,2 +1 @@
 export * from './src/vaadin-notification.js';
-export * from './src/interfaces';

package/src/interfaces.d.ts

@@ -1,30 +0,0 @@
-import { NotificationElement } from './vaadin-notification';
-
-export type NotificationPosition =
-  | 'top-stretch'
-  | 'top-start'
-  | 'top-center'
-  | 'top-end'
-  | 'middle'
-  | 'bottom-start'
-  | 'bottom-center'
-  | 'bottom-end'
-  | 'bottom-stretch';
-
-export type NotificationRenderer = (root: HTMLElement, notification?: NotificationElement) => void;
-
-/**
- * Fired when the `opened` property changes.
- */
-export type NotificationOpenedChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface NotificationElementEventMap {
-  'opened-changed': NotificationOpenedChangedEvent;
-}
-
-export interface NotificationEventMap extends HTMLElementEventMap, NotificationElementEventMap {}
-
-export interface ShowOptions {
-  duration?: number;
-  position?: NotificationPosition;
-}

package/theme/lumo/vaadin-notification-styles.js

@@ -1,188 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-
-registerStyles(
-  'vaadin-notification-card',
-  css`
-    :host {
-      position: relative;
-      margin: var(--lumo-space-s);
-    }
-
-    [part='overlay'] {
-      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
-      border-radius: var(--lumo-border-radius-l);
-      box-shadow: 0 0 0 1px var(--lumo-contrast-10pct), var(--lumo-box-shadow-l);
-      font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-m);
-      font-weight: 400;
-      line-height: var(--lumo-line-height-s);
-      letter-spacing: 0;
-      text-transform: none;
-      -webkit-text-size-adjust: 100%;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    [part='content'] {
-      padding: var(--lumo-space-wide-l);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    [part='content'] ::slotted(vaadin-button) {
-      flex: none;
-      margin: 0 calc(var(--lumo-space-s) * -1) 0 var(--lumo-space-m);
-    }
-
-    :host([slot^='middle']) {
-      max-width: 80vw;
-      margin: var(--lumo-space-s) auto;
-    }
-
-    :host([slot\$='stretch']) {
-      margin: 0;
-    }
-
-    :host([slot\$='stretch']) [part='overlay'] {
-      border-radius: 0;
-    }
-
-    @media (min-width: 421px) {
-      :host(:not([slot\$='stretch'])) {
-        display: flex;
-      }
-
-      :host([slot\$='end']) {
-        justify-content: flex-end;
-      }
-
-      :host([slot^='middle']),
-      :host([slot\$='center']) {
-        display: flex;
-        justify-content: center;
-      }
-    }
-
-    @keyframes lumo-notification-exit-fade-out {
-      100% {
-        opacity: 0;
-      }
-    }
-
-    @keyframes lumo-notification-enter-fade-in {
-      0% {
-        opacity: 0;
-      }
-    }
-
-    @keyframes lumo-notification-enter-slide-down {
-      0% {
-        transform: translateY(-200%);
-        opacity: 0;
-      }
-    }
-
-    @keyframes lumo-notification-exit-slide-up {
-      100% {
-        transform: translateY(-200%);
-        opacity: 0;
-      }
-    }
-
-    @keyframes lumo-notification-enter-slide-up {
-      0% {
-        transform: translateY(200%);
-        opacity: 0;
-      }
-    }
-
-    @keyframes lumo-notification-exit-slide-down {
-      100% {
-        transform: translateY(200%);
-        opacity: 0;
-      }
-    }
-
-    :host([slot='middle'][opening]) {
-      animation: lumo-notification-enter-fade-in 300ms;
-    }
-
-    :host([slot='middle'][closing]) {
-      animation: lumo-notification-exit-fade-out 300ms;
-    }
-
-    :host([slot^='top'][opening]) {
-      animation: lumo-notification-enter-slide-down 300ms;
-    }
-
-    :host([slot^='top'][closing]) {
-      animation: lumo-notification-exit-slide-up 300ms;
-    }
-
-    :host([slot^='bottom'][opening]) {
-      animation: lumo-notification-enter-slide-up 300ms;
-    }
-
-    :host([slot^='bottom'][closing]) {
-      animation: lumo-notification-exit-slide-down 300ms;
-    }
-
-    :host([theme~='primary']) [part='overlay'] {
-      background: var(--lumo-primary-color);
-      color: var(--lumo-primary-contrast-color);
-      box-shadow: var(--lumo-box-shadow-l);
-    }
-
-    :host([theme~='primary']) {
-      --_lumo-button-background-color: var(--lumo-shade-20pct);
-      --_lumo-button-color: var(--lumo-primary-contrast-color);
-      --_lumo-button-primary-background-color: var(--lumo-primary-contrast-color);
-      --_lumo-button-primary-color: var(--lumo-primary-text-color);
-    }
-
-    :host([theme~='contrast']) [part='overlay'] {
-      background: var(--lumo-contrast);
-      color: var(--lumo-base-color);
-      box-shadow: var(--lumo-box-shadow-l);
-    }
-
-    :host([theme~='contrast']) {
-      --_lumo-button-background-color: var(--lumo-contrast-20pct);
-      --_lumo-button-color: var(--lumo-base-color);
-      --_lumo-button-primary-background-color: var(--lumo-base-color);
-      --_lumo-button-primary-color: var(--lumo-contrast);
-    }
-
-    :host([theme~='success']) [part='overlay'] {
-      background: var(--lumo-success-color);
-      color: var(--lumo-success-contrast-color);
-      box-shadow: var(--lumo-box-shadow-l);
-    }
-
-    :host([theme~='success']) {
-      --_lumo-button-background-color: var(--lumo-shade-20pct);
-      --_lumo-button-color: var(--lumo-success-contrast-color);
-      --_lumo-button-primary-background-color: var(--lumo-success-contrast-color);
-      --_lumo-button-primary-color: var(--lumo-success-text-color);
-    }
-
-    :host([theme~='error']) [part='overlay'] {
-      background: var(--lumo-error-color);
-      color: var(--lumo-error-contrast-color);
-      box-shadow: var(--lumo-box-shadow-l);
-    }
-
-    :host([theme~='error']) {
-      --_lumo-button-background-color: var(--lumo-shade-20pct);
-      --_lumo-button-color: var(--lumo-error-contrast-color);
-      --_lumo-button-primary-background-color: var(--lumo-error-contrast-color);
-      --_lumo-button-primary-color: var(--lumo-error-text-color);
-    }
-  `,
-  { moduleId: 'lumo-notification-card' }
-);

package/theme/material/vaadin-notification-styles.js

@@ -1,156 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { colorDark } from '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-
-registerStyles(
-  'vaadin-notification-container',
-  css`
-    :host {
-      top: 0;
-      bottom: 0;
-      left: 4px;
-      right: 4px;
-    }
-
-    @media (min-width: 420px) {
-      :host {
-        top: 0;
-        bottom: 0;
-        left: 12px;
-        right: 12px;
-      }
-    }
-  `,
-  { moduleId: 'material-notification-container' }
-);
-
-const notificationCard = css`
-  :host {
-    min-height: 48px;
-    margin: 8px 4px;
-    background-color: transparent;
-  }
-
-  [part='overlay'] {
-    background-color: var(--material-background-color);
-    border-radius: 4px;
-    box-shadow: var(--material-shadow-elevation-6dp);
-
-    padding: 14px 16px;
-    justify-content: stretch;
-  }
-
-  [part='content'] {
-    font-family: var(--material-font-family);
-    font-size: var(--material-small-font-size);
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0;
-    text-transform: none;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  /* NOTE(platosha): Makes the button take exactly 1 line of vertical space */
-  [part='content'] ::slotted(vaadin-button) {
-    margin: -8px 0;
-  }
-
-  :host([slot\$='stretch']) {
-    margin: 0 -4px;
-  }
-
-  :host([slot\$='stretch']) [part='overlay'] {
-    border-radius: 0;
-  }
-
-  @media (min-width: 420px) {
-    :host {
-      margin: 24px 12px;
-    }
-
-    :host([slot^='middle']) {
-      width: 372px;
-      margin: auto;
-    }
-
-    :host([slot\$='stretch']) {
-      margin: 0 -12px;
-    }
-  }
-
-  @keyframes material-notification-exit-fade-out {
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @keyframes material-notification-enter-fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes material-notification-enter-slide-down {
-    0% {
-      transform: translateY(-200%);
-      opacity: 0;
-    }
-  }
-
-  @keyframes material-notification-exit-slide-up {
-    100% {
-      transform: translateY(-200%);
-      opacity: 0;
-    }
-  }
-
-  @keyframes material-notification-enter-slide-up {
-    0% {
-      transform: translateY(200%);
-      opacity: 0;
-    }
-  }
-
-  @keyframes material-notification-exit-slide-down {
-    100% {
-      transform: translateY(200%);
-      opacity: 0;
-    }
-  }
-
-  :host([slot='middle'][opening]) {
-    animation: material-notification-enter-fade-in 300ms;
-  }
-
-  :host([slot='middle'][closing]) {
-    animation: material-notification-exit-fade-out 300ms;
-  }
-
-  :host([slot^='top'][opening]) {
-    animation: material-notification-enter-slide-down 300ms;
-  }
-
-  :host([slot^='top'][closing]) {
-    animation: material-notification-exit-slide-up 300ms;
-  }
-
-  :host([slot^='bottom'][opening]) {
-    animation: material-notification-enter-slide-up 300ms;
-  }
-
-  :host([slot^='bottom'][closing]) {
-    animation: material-notification-exit-slide-down 300ms;
-  }
-`;
-
-registerStyles('vaadin-notification-card', [colorDark, notificationCard], {
-  moduleId: 'material-notification-card'
-});