@vaadin/vaadin-notification 1.6.0-alpha2 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +11 -11
  2. package/package.json +8 -6
  3. package/src/vaadin-notification.js +18 -1
  4. package/theme/lumo/vaadin-notification-styles.js +4 -0
package/README.md CHANGED
@@ -1,21 +1,21 @@
1
- [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-notification)](https://www.npmjs.com/package/@vaadin/vaadin-notification)
2
- [![Bower version](https://badgen.net/github/release/vaadin/vaadin-notification)](https://github.com/vaadin/vaadin-notification/releases)
3
- [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-notification)
4
- [![Build Status](https://travis-ci.org/vaadin/vaadin-notification.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-notification)
5
- [![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-notification/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-notification?branch=master)
6
- [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
1
+ # <vaadin-notification>
7
2
 
8
- [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
9
- [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-notification.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
3
+ > ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-notification) monorepository.
4
+ > This repository contains the source code and releases of `<vaadin-notification>` for the Vaadin versions 10 to 19.
10
5
 
11
- # &lt;vaadin-notification&gt;
6
+ [&lt;vaadin-notification&gt;](https://vaadin.com/components/vaadin-notification) is a Web Component providing accessible and customizable notifications (toasts), part of the [Vaadin components](https://vaadin.com/components).
12
7
 
13
8
  [Live Demo ↗](https://vaadin.com/components/vaadin-notification/html-examples)
14
9
  |
15
10
  [API documentation ↗](https://vaadin.com/components/vaadin-notification/html-api)
16
11
 
17
-
18
- [&lt;vaadin-notification&gt;](https://vaadin.com/components/vaadin-notification) is a Web Component providing accessible and customizable notifications (toasts), part of the [Vaadin components](https://vaadin.com/components).
12
+ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-notification)](https://www.npmjs.com/package/@vaadin/vaadin-notification)
13
+ [![Bower version](https://badgen.net/github/release/vaadin/vaadin-notification)](https://github.com/vaadin/vaadin-notification/releases)
14
+ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-notification)
15
+ [![Build Status](https://travis-ci.org/vaadin/vaadin-notification.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-notification)
16
+ [![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-notification/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-notification?branch=master)
17
+ [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
18
+ [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-notification.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
19
19
 
20
20
  <!--
21
21
  ```
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "repository": "vaadin/vaadin-notification",
11
11
  "homepage": "https://vaadin.com/components",
12
12
  "name": "@vaadin/vaadin-notification",
13
- "version": "1.6.0-alpha2",
13
+ "version": "1.6.2",
14
14
  "main": "vaadin-notification.js",
15
15
  "author": "Vaadin Ltd",
16
16
  "license": "Apache-2.0",
@@ -25,6 +25,8 @@
25
25
  "theme"
26
26
  ],
27
27
  "resolutions": {
28
+ "es-abstract": "1.17.6",
29
+ "@types/doctrine": "0.0.3",
28
30
  "inherits": "2.0.3",
29
31
  "samsam": "1.1.3",
30
32
  "supports-color": "3.1.2",
@@ -38,16 +40,16 @@
38
40
  "@vaadin/vaadin-material-styles": "^1.3.2"
39
41
  },
40
42
  "scripts": {
41
- "generate-typings": "gen-typescript-declarations --outDir . --verify"
42
- },
43
- "devDependencies": {
43
+ "generate-typings": "gen-typescript-declarations --outDir . --verify"
44
+ },
45
+ "devDependencies": {
44
46
  "@polymer/iron-component-page": "^4.0.0",
45
47
  "@webcomponents/webcomponentsjs": "^2.0.0",
46
48
  "wct-browser-legacy": "^1.0.1",
47
49
  "@vaadin/vaadin-button": "^2.3.0",
48
50
  "@vaadin/vaadin-checkbox": "^2.3.0",
49
- "@vaadin/vaadin-demo-helpers": "^3.1.0-alpha1",
51
+ "@vaadin/vaadin-demo-helpers": "^3.1.0",
50
52
  "@vaadin/vaadin-radio-button": "^1.3.0",
51
- "@vaadin/vaadin-text-field": "^2.6.0-alpha4"
53
+ "@vaadin/vaadin-text-field": "^2.7.0"
52
54
  }
53
55
  }
package/src/vaadin-notification.js CHANGED
@@ -112,12 +112,14 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
112
112
  _openedChanged(opened) {
113
113
  if (opened) {
114
114
  document.body.appendChild(this);
115
+ document.addEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
115
116
  if (this._boundIosResizeListener) {
116
117
  this._detectIosNavbar();
117
118
  window.addEventListener('resize', this._boundIosResizeListener);
118
119
  }
119
120
  } else {
120
121
  document.body.removeChild(this);
122
+ document.removeEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
121
123
  if (this._boundIosResizeListener) {
122
124
  window.removeEventListener('resize', this._boundIosResizeListener);
123
125
  }
@@ -127,6 +129,7 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
127
129
  constructor() {
128
130
  super();
129
131
 
132
+ this._boundVaadinOverlayClose = this._onVaadinOverlayClose.bind(this);
130
133
  if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
131
134
  this._boundIosResizeListener = () => this._detectIosNavbar();
132
135
  }
@@ -144,6 +147,17 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
144
147
  this.style.bottom = '0';
145
148
  }
146
149
  }
150
+
151
+ /** @private */
152
+ _onVaadinOverlayClose(event) {
153
+ // Notifications are a separate overlay mechanism from vaadin-overlay, and
154
+ // interacting with them should not close modal overlays
155
+ const sourceEvent = event.detail.sourceEvent;
156
+ const isFromNotification = sourceEvent && sourceEvent.composedPath().indexOf(this) >= 0;
157
+ if (isFromNotification) {
158
+ event.preventDefault();
159
+ }
160
+ }
147
161
  }
148
162
 
149
163
  /**
@@ -169,6 +183,9 @@ class NotificationCard extends ThemableMixin(PolymerElement) {
169
183
  <style>
170
184
  :host {
171
185
  display: block;
186
+ }
187
+
188
+ [part="overlay"] {
172
189
  pointer-events: auto;
173
190
  }
174
191
  </style>
@@ -270,7 +287,7 @@ class NotificationElement extends ThemePropertyMixin(ElementMixin(PolymerElement
270
287
  }
271
288
 
272
289
  static get version() {
273
- return '1.6.0-alpha2';
290
+ return '1.6.2';
274
291
  }
275
292
 
276
293
  static get properties() {
package/theme/lumo/vaadin-notification-styles.js CHANGED
@@ -136,6 +136,7 @@ const $_documentContainer = html`<dom-module id="lumo-notification-card" theme-f
136
136
  :host([theme~="primary"]) [part="overlay"] {
137
137
  background: var(--lumo-primary-color);
138
138
  color: var(--lumo-primary-contrast-color);
139
+ box-shadow: var(--lumo-box-shadow-l);
139
140
  }
140
141
 
141
142
  :host([theme~="primary"]) {
@@ -148,6 +149,7 @@ const $_documentContainer = html`<dom-module id="lumo-notification-card" theme-f
148
149
  :host([theme~="contrast"]) [part="overlay"] {
149
150
  background: var(--lumo-contrast);
150
151
  color: var(--lumo-base-color);
152
+ box-shadow: var(--lumo-box-shadow-l);
151
153
  }
152
154
 
153
155
  :host([theme~="contrast"]) {
@@ -160,6 +162,7 @@ const $_documentContainer = html`<dom-module id="lumo-notification-card" theme-f
160
162
  :host([theme~="success"]) [part="overlay"] {
161
163
  background: var(--lumo-success-color);
162
164
  color: var(--lumo-success-contrast-color);
165
+ box-shadow: var(--lumo-box-shadow-l);
163
166
  }
164
167
 
165
168
  :host([theme~="success"]) {
@@ -172,6 +175,7 @@ const $_documentContainer = html`<dom-module id="lumo-notification-card" theme-f
172
175
  :host([theme~="error"]) [part="overlay"] {
173
176
  background: var(--lumo-error-color);
174
177
  color: var(--lumo-error-contrast-color);
178
+ box-shadow: var(--lumo-box-shadow-l);
175
179
  }
176
180
 
177
181
  :host([theme~="error"]) {