@vaadin/notification 23.1.0-alpha3 → 23.1.0-beta2

package/lit.d.ts

@@ -0,0 +1 @@
+export * from './src/lit/renderer-directives.js';

package/lit.js

@@ -0,0 +1 @@
+export * from './src/lit/renderer-directives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +22,8 @@
   "files": [
     "src",
     "theme",
+    "lit.js",
+    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -34,18 +36,19 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/lit-renderer": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/button": "23.1.0-alpha3",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
+    "@vaadin/button": "23.1.0-beta2",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/lit/renderer-directives.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { Notification } from '../vaadin-notification.js';
+
+export type NotificationLitRenderer = (notification: Notification) => TemplateResult;
+
+export class NotificationRendererDirective extends LitRendererDirective<Notification, NotificationLitRenderer> {
+  /**
+   * Adds the renderer callback to the notification.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the renderer callback on the notification.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the renderer callback from the notification.
+   */
+  removeRenderer(): void;
+}
+
+/**
+ * A Lit directive for populating the content of the notification.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the notification
+ * via the `renderer` property. The renderer is called once to populate the content when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-notification
+ *   ${notificationRenderer((notification) => html`...`)}
+ * ></vaadin-notification>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function notificationRenderer(
+  renderer: NotificationLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof NotificationRendererDirective>;

package/src/lit/renderer-directives.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { directive } from 'lit/directive.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+
+export class NotificationRendererDirective extends LitRendererDirective {
+  /**
+   * Adds the renderer callback to the notification.
+   */
+  addRenderer() {
+    this.element.renderer = (root, notification) => {
+      this.renderRenderer(root, notification);
+    };
+  }
+
+  /**
+   * Runs the renderer callback on the notification.
+   */
+  runRenderer() {
+    this.element.requestContentUpdate();
+  }
+
+  /**
+   * Removes the renderer callback from the notification.
+   */
+  removeRenderer() {
+    this.element.renderer = null;
+  }
+}
+
+/**
+ * A Lit directive for populating the content of the notification.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the notification
+ * via the `renderer` property. The renderer is called once to populate the content when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-notification
+ *   ${notificationRenderer((notification) => html`...`)}
+ * ></vaadin-notification>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const notificationRenderer = directive(NotificationRendererDirective);

package/src/vaadin-notification.d.ts

@@ -148,13 +148,13 @@ declare class Notification extends ThemePropertyMixin(ElementMixin(HTMLElement))
   addEventListener<K extends keyof NotificationEventMap>(
     type: K,
     listener: (this: Notification, ev: NotificationEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof NotificationEventMap>(
     type: K,
     listener: (this: Notification, ev: NotificationEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 
   /**

package/src/vaadin-notification.js

@@ -105,8 +105,8 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
       opened: {
         type: Boolean,
         value: false,
-        observer: '_openedChanged'
-      }
+        observer: '_openedChanged',
+      },
     };
   }
 
@@ -144,7 +144,7 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
     const landscape = innerWidth > innerHeight;
     const clientHeight = document.documentElement.clientHeight;
     if (landscape && clientHeight > innerHeight) {
-      this.style.bottom = clientHeight - innerHeight + 'px';
+      this.style.bottom = `${clientHeight - innerHeight}px`;
     } else {
       this.style.bottom = '0';
     }
@@ -277,7 +277,7 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
        */
       duration: {
         type: Number,
-        value: 5000
+        value: 5000,
       },
 
       /**
@@ -288,7 +288,7 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         type: Boolean,
         value: false,
         notify: true,
-        observer: '_openedChanged'
+        observer: '_openedChanged',
       },
 
       /**
@@ -299,7 +299,7 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       position: {
         type: String,
         value: 'bottom-start',
-        observer: '_positionChanged'
+        observer: '_positionChanged',
       },
 
       /**
@@ -311,7 +311,7 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
        * - `notification` The reference to the `<vaadin-notification>` element.
        * @type {!NotificationRenderer | undefined}
        */
-      renderer: Function
+      renderer: Function,
     };
   }
 
@@ -328,6 +328,12 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     processTemplates(this);
   }
 
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.opened = false;
+  }
+
   /**
    * Requests an update for the content of the notification.
    * While performing the update, it invokes the renderer passed in the `renderer` property.
@@ -437,14 +443,18 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
   /** @private */
   _removeNotificationCard() {
-    this._card.parentNode && this._card.parentNode.removeChild(this._card);
+    if (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);
+    if (this._durationTimeoutId) {
+      clearTimeout(this._durationTimeoutId);
+    }
     this._animatedRemoveNotificationCard();
   }
 
@@ -452,7 +462,7 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   _animatedRemoveNotificationCard() {
     this._card.setAttribute('closing', '');
     const name = getComputedStyle(this._card).getPropertyValue('animation-name');
-    if (name && name != 'none') {
+    if (name && name !== 'none') {
       const listener = () => {
         this._removeNotificationCard();
         this._card.removeEventListener('animationend', listener);

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

@@ -184,5 +184,5 @@ registerStyles(
       --_lumo-button-primary-color: var(--lumo-error-text-color);
     }
   `,
-  { moduleId: 'lumo-notification-card' }
+  { moduleId: 'lumo-notification-card' },
 );

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

@@ -22,7 +22,7 @@ registerStyles(
       }
     }
   `,
-  { moduleId: 'material-notification-container' }
+  { moduleId: 'material-notification-container' },
 );
 
 const notificationCard = css`
@@ -152,5 +152,5 @@ const notificationCard = css`
 `;
 
 registerStyles('vaadin-notification-card', [colorDark, notificationCard], {
-  moduleId: 'material-notification-card'
+  moduleId: 'material-notification-card',
 });