New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-notification

Package Overview
Dependencies
Maintainers
16
Versions
253
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-notification - npm Package Compare versions

Comparing version 1.6.1 to 2.0.0-alpha1

src/interfaces.d.ts

80

package.json
{
"name": "@vaadin/vaadin-notification",
"version": "2.0.0-alpha1",
"description": "vaadin-notification",
"main": "vaadin-notification.js",
"module": "vaadin-notification.js",
"repository": "vaadin/vaadin-notification",
"keywords": [

@@ -10,7 +15,2 @@ "Vaadin",

],
"repository": "vaadin/vaadin-notification",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-notification",
"version": "1.6.1",
"main": "vaadin-notification.js",
"author": "Vaadin Ltd",

@@ -21,17 +21,38 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"@types",
"src",
"theme"
],
"resolutions": {
"es-abstract": "1.17.6",
"@types/doctrine": "0.0.3",
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"check-version": "magi check-version",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"lint": "npm run lint:js && npm run lint:css && npm run lint:types",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"lint:types": "tsc",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {

@@ -44,15 +65,30 @@ "@polymer/polymer": "^3.0.0",

},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.12",
"@polymer/iron-component-page": "^4.0.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@vaadin/vaadin-button": "^2.3.0",
"@vaadin/vaadin-checkbox": "^2.3.0",
"@vaadin/vaadin-demo-helpers": "^3.1.0",
"@vaadin/vaadin-radio-button": "^1.3.0",
"@vaadin/vaadin-text-field": "^2.7.0"
"@web/dev-server": "^0.1.4",
"@web/test-runner": "^0.12.3",
"@web/test-runner-saucelabs": "^0.4.0",
"eslint": "^7.18.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.1",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.10",
"typescript": "^4.1.3"
}
}

81

README.md

@@ -1,11 +0,1 @@

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-notification)](https://www.npmjs.com/package/@vaadin/vaadin-notification)
[![Bower version](https://badgen.net/github/release/vaadin/vaadin-notification)](https://github.com/vaadin/vaadin-notification/releases)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-notification)
[![Build Status](https://travis-ci.org/vaadin/vaadin-notification.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-notification)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-notification/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-notification?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-notification.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
# <vaadin-notification>

@@ -17,16 +7,11 @@

[<vaadin-notification>](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).
<!--
```
<custom-element-demo height="120">
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-notification.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-notification)](https://www.npmjs.com/package/@vaadin/vaadin-notification)
[![Build Status](https://travis-ci.org/vaadin/vaadin-notification.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-notification)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-notification)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-notification.svg)](https://vaadin.com/directory/component/vaadinvaadin-notification)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
```html

@@ -48,27 +33,5 @@ <vaadin-notification opened position="middle" duration="-1"></vaadin-notification>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.
### Polymer 2 and HTML Imports Compatible Version
Install `vaadin-notification`:
```sh
bower i vaadin/vaadin-notification --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-notification/vaadin-notification.html">
```
### Polymer 3 and ES Modules Compatible Version
Install `vaadin-notification`:
```sh
npm i @vaadin/vaadin-notification --save

@@ -93,27 +56,27 @@ ```

`theme/lumo/vaadin-notification.html`
`theme/lumo/vaadin-notification.js`
- The component with the Material theme:
`theme/material/vaadin-notification.html`
`theme/material/vaadin-notification.js`
- Alias for `theme/lumo/vaadin-notification.html`:
- Alias for `theme/lumo/vaadin-notification.js`:
- `vaadin-notification.html`
- `vaadin-notification.js`
## Running API docs and tests in a browser
## Running demos and tests in a browser
1. Fork the `vaadin-notification` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. When in the `vaadin-notification` directory, run `npm install` and then `bower install` to install dependencies.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vaadin-notification` directory, run `npm install` to install dependencies.
1. Run `npm start`, browser will automatically open the component API documentation.
1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:
- http://127.0.0.1:3000/components/vaadin-notification/demo
- http://127.0.0.1:3000/components/vaadin-notification/test
- http://127.0.0.1:3000/test/visual/default.html

@@ -123,8 +86,12 @@

1. When in the `vaadin-notification` directory, run `polymer test`
1. When in the `vaadin-notification` directory, run `npm test`
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Following the coding style
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.

@@ -131,0 +98,0 @@

86

src/vaadin-notification.d.ts

@@ -1,36 +0,13 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-notification.js
*/
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import { NotificationEventMap, NotificationPosition, NotificationRenderer } from './interfaces';
import {templatize} from '@polymer/polymer/lib/utils/templatize.js';
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 {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**
* The container element for all notifications.
*/
declare class NotificationContainer extends
ElementMixin(
ThemableMixin(
PolymerElement)) {
declare class NotificationContainer extends ElementMixin(ThemableMixin(HTMLElement)) {
/**

@@ -42,11 +19,2 @@ * True when the container is opened

declare global {
interface HTMLElementTagNameMap {
"vaadin-notification-container": NotificationContainer;
"vaadin-notification-card": NotificationCard;
"vaadin-notification": NotificationElement;
}
}
/**

@@ -66,7 +34,3 @@ * The container element for the notification

*/
declare class NotificationCard extends
ThemableMixin(
PolymerElement) {
ready(): void;
}
declare class NotificationCard extends ThemableMixin(HTMLElement) {}

@@ -125,8 +89,6 @@ /**

* propagated to the internal `<vaadin-notification-card>`.
*
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
*/
declare class NotificationElement extends
ThemePropertyMixin(
ElementMixin(
PolymerElement)) {
declare class NotificationElement extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
/**

@@ -157,3 +119,3 @@ * The duration in milliseconds to show the notification.

*/
renderer: NotificationRenderer|undefined;
renderer: NotificationRenderer | undefined;

@@ -163,4 +125,4 @@ /**

*/
_notificationTemplate: HTMLTemplateElement|undefined;
ready(): void;
_notificationTemplate: HTMLTemplateElement | undefined;
_setTemplateFromNodes(nodes: Node[]): void;

@@ -182,8 +144,24 @@

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;
}
export {NotificationElement};
declare global {
interface HTMLElementTagNameMap {
'vaadin-notification-container': NotificationContainer;
'vaadin-notification-card': NotificationCard;
'vaadin-notification': NotificationElement;
}
}
import {NotificationPosition} from '../@types/interfaces';
import {NotificationRenderer} from '../@types/interfaces';
export { NotificationElement };

251

src/vaadin-notification.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* 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 { templatize } from '@polymer/polymer/lib/utils/templatize.js';
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
/**
* The container element for all notifications.
*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ElementMixin

@@ -24,69 +23,69 @@ * @mixes ThemableMixin

return html`
<style>
:host {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
bottom: 0;
right: 0;
box-sizing: border-box;
<style>
:host {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
bottom: 0;
right: 0;
box-sizing: border-box;
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] {
display: flex;
flex-direction: column;
align-items: stretch;
pointer-events: none;
}
[region-group="top"] {
justify-content: flex-start;
[region-group] {
flex: 1 1 0%;
display: flex;
}
[region-group="bottom"] {
justify-content: flex-end;
[region-group='top'] {
align-items: flex-start;
}
[region-group='bottom'] {
align-items: flex-end;
}
[region-group] > [region] {
flex: initial;
flex: 1 1 0%;
}
}
</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>
`;
@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>
`;
}

@@ -143,3 +142,3 @@

if (landscape && clientHeight > innerHeight) {
this.style.bottom = (clientHeight - innerHeight) + 'px';
this.style.bottom = clientHeight - innerHeight + 'px';
} else {

@@ -165,3 +164,3 @@ this.style.bottom = '0';

*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ThemableMixin

@@ -172,18 +171,18 @@ */

return html`
<style>
:host {
display: block;
}
<style>
:host {
display: block;
}
[part="overlay"] {
pointer-events: auto;
}
</style>
[part='overlay'] {
pointer-events: auto;
}
</style>
<div part="overlay">
<div part="content">
<slot></slot>
<div part="overlay">
<div part="content">
<slot></slot>
</div>
</div>
</div>
`;
`;
}

@@ -257,6 +256,7 @@

*
* @extends PolymerElement
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
*
* @extends HTMLElement
* @mixes ThemePropertyMixin
* @mixes ElementMixin
* @demo demo/index.html
*/

@@ -266,10 +266,9 @@ class NotificationElement extends ThemePropertyMixin(ElementMixin(PolymerElement)) {

return html`
<style>
:host {
display: none;
}
</style>
<vaadin-notification-card id="vaadin-notification-card" theme\$="[[theme]]">
</vaadin-notification-card>
`;
<style>
:host {
display: none;
}
</style>
<vaadin-notification-card id="vaadin-notification-card" theme$="[[theme]]"> </vaadin-notification-card>
`;
}

@@ -282,3 +281,3 @@

static get version() {
return '1.6.1';
return '2.0.0-alpha1';
}

@@ -351,3 +350,3 @@

this._observer = new FlattenedNodesObserver(this, info => {
this._observer = new FlattenedNodesObserver(this, (info) => {
this._setTemplateFromNodes(info.addedNodes);

@@ -362,3 +361,4 @@ });

_setTemplateFromNodes(nodes) {
this._notificationTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._notificationTemplate;
this._notificationTemplate =
nodes.find((node) => node.localName && node.localName === 'template') || this._notificationTemplate;
}

@@ -447,3 +447,2 @@

this._animatedAppendNotificationCard();
setTimeout(() => this._updateShadyButtonStyles());
} else if (this._card) {

@@ -464,3 +463,3 @@ this._closeNotificationCard();

this._notificationTemplate._Templatizer = templatize(this._notificationTemplate, this, {
forwardHostProp: function(prop, value) {
forwardHostProp: function (prop, value) {
if (this._instance) {

@@ -474,33 +473,20 @@ this._instance.forwardHostProp(prop, value);

const templateRoot = this._notificationTemplate.getRootNode();
const isScoped = templateRoot !== document;
this._card = this.$['vaadin-notification-card'];
this._cardContent = this._card.shadowRoot.querySelector('[part~="content"]');
if (isScoped) {
const templateRoot = this._notificationTemplate.getRootNode();
if (templateRoot !== document) {
if (!this._cardContent.shadowRoot) {
this._cardContent.attachShadow({mode: 'open'});
this._cardContent.attachShadow({ mode: 'open' });
}
if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
// Shady DOM
var shadyStyleScope = templateRoot.host && templateRoot.host.localName;
if (shadyStyleScope && shadyStyleScope.indexOf('-') === -1) {
shadyStyleScope = templateRoot.host.getAttribute('is');
}
if (shadyStyleScope) {
this._cardContent.setAttribute('is', shadyStyleScope);
}
} else {
// Shadow DOM
const scopeCssText = Array.from(templateRoot.querySelectorAll('style'))
.reduce((result, style) => result + style.textContent, '')
// The overlay root’s :host styles should not apply inside the overlay
.replace(/:host/g, ':host-nomatch');
const scopeCssText = Array.from(templateRoot.querySelectorAll('style'))
.reduce((result, style) => result + style.textContent, '')
// The overlay root’s :host styles should not apply inside the overlay
.replace(/:host/g, ':host-nomatch');
if (scopeCssText) {
const style = document.createElement('style');
style.textContent = scopeCssText;
this._cardContent.shadowRoot.appendChild(style);
}
if (scopeCssText) {
const style = document.createElement('style');
style.textContent = scopeCssText;
this._cardContent.shadowRoot.appendChild(style);
}

@@ -539,4 +525,3 @@

if (!this._container.shadowRoot.querySelector(`slot[name="${this.position}"]`)) {
window.console.warn(
`Invalid alignment parameter provided: position=${this.position}`);
console.warn(`Invalid alignment parameter provided: position=${this.position}`);
return;

@@ -582,3 +567,3 @@ }

/** @private */
_positionChanged(position) {
_positionChanged() {
if (this.opened) {

@@ -598,26 +583,2 @@ this._animatedAppendNotificationCard();

}
/** @private */
_updateShadyButtonStyles() {
// ShadyCSS doesn't propagate CSS properties to slotted children,
// so this is done manually to allow vaadin-buttons to be themed
// correctly on IE11
if (window.ShadyCSS && !this.__buttonStylesPending) {
customElements.whenDefined('vaadin-button').then(() => {
const isButton = node => node instanceof customElements.get('vaadin-button');
Array.from(this._card.querySelectorAll('*')).filter(isButton).forEach(btn => {
const styles = ['--_lumo-button-color', '--_lumo-button-background-color',
'--_lumo-button-primary-color', '--_lumo-button-primary-background-color']
.reduce((obj, propName) => {
const propValue = window.ShadyCSS.getComputedStyleValue(this._card, propName);
propValue && (obj[propName] = propValue);
return obj;
}, {});
btn.updateStyles(styles);
});
this.__buttonStylesPending = false;
});
this.__buttonStylesPending = true;
}
}
}

@@ -624,0 +585,0 @@

296

theme/lumo/vaadin-notification-styles.js

@@ -0,1 +1,2 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';

@@ -5,188 +6,185 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';

import '@vaadin/vaadin-lumo-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-notification-card" theme-for="vaadin-notification-card">
<template>
<style>
:host {
position: relative;
margin: var(--lumo-space-s);
}
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);
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='overlay'] {
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
border-radius: var(--lumo-border-radius);
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'] {
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);
}
[part='content'] ::slotted(vaadin-button) {
flex: none;
margin: 0 calc(var(--lumo-space-s) * -1) 0 var(--lumo-space-m);
}
:host([slot^="middle"]) {
width: 20em;
max-width: 80vw;
margin: var(--lumo-space-s) auto;
}
:host([slot^='middle']) {
width: 20em;
max-width: 80vw;
margin: var(--lumo-space-s) auto;
}
:host([slot\$="stretch"]) {
margin: 0;
}
:host([slot\$='stretch']) {
margin: 0;
}
:host([slot\$="stretch"]) [part="overlay"] {
border-radius: 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;
}
@media (min-width: 421px) {
:host(:not([slot\$='stretch'])) {
display: flex;
}
@keyframes lumo-notification-exit-fade-out {
100% {
opacity: 0;
}
:host([slot\$='end']) {
justify-content: flex-end;
}
@keyframes lumo-notification-enter-fade-in {
0% {
opacity: 0;
}
:host([slot^='middle']),
:host([slot\$='center']) {
display: flex;
justify-content: center;
}
}
@keyframes lumo-notification-enter-slide-down {
0% {
transform: translateY(-200%);
opacity: 0;
}
@keyframes lumo-notification-exit-fade-out {
100% {
opacity: 0;
}
}
@keyframes lumo-notification-exit-slide-up {
100% {
transform: translateY(-200%);
opacity: 0;
}
@keyframes lumo-notification-enter-fade-in {
0% {
opacity: 0;
}
}
@keyframes lumo-notification-enter-slide-up {
0% {
transform: translateY(200%);
opacity: 0;
}
@keyframes lumo-notification-enter-slide-down {
0% {
transform: translateY(-200%);
opacity: 0;
}
}
@keyframes lumo-notification-exit-slide-down {
100% {
transform: translateY(200%);
opacity: 0;
}
@keyframes lumo-notification-exit-slide-up {
100% {
transform: translateY(-200%);
opacity: 0;
}
}
:host([slot="middle"][opening]) {
animation: lumo-notification-enter-fade-in 300ms;
@keyframes lumo-notification-enter-slide-up {
0% {
transform: translateY(200%);
opacity: 0;
}
}
:host([slot="middle"][closing]) {
animation: lumo-notification-exit-fade-out 300ms;
@keyframes lumo-notification-exit-slide-down {
100% {
transform: translateY(200%);
opacity: 0;
}
}
:host([slot^="top"][opening]) {
animation: lumo-notification-enter-slide-down 300ms;
}
:host([slot='middle'][opening]) {
animation: lumo-notification-enter-fade-in 300ms;
}
:host([slot^="top"][closing]) {
animation: lumo-notification-exit-slide-up 300ms;
}
:host([slot='middle'][closing]) {
animation: lumo-notification-exit-fade-out 300ms;
}
:host([slot^="bottom"][opening]) {
animation: lumo-notification-enter-slide-up 300ms;
}
:host([slot^='top'][opening]) {
animation: lumo-notification-enter-slide-down 300ms;
}
:host([slot^="bottom"][closing]) {
animation: lumo-notification-exit-slide-down 300ms;
}
:host([slot^='top'][closing]) {
animation: lumo-notification-exit-slide-up 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([slot^='bottom'][opening]) {
animation: lumo-notification-enter-slide-up 300ms;
}
: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([slot^='bottom'][closing]) {
animation: lumo-notification-exit-slide-down 300ms;
}
:host([theme~="contrast"]) [part="overlay"] {
background: var(--lumo-contrast);
color: var(--lumo-base-color);
box-shadow: var(--lumo-box-shadow-l);
}
: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~="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~='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~="success"]) [part="overlay"] {
background: var(--lumo-success-color);
color: var(--lumo-success-contrast-color);
box-shadow: var(--lumo-box-shadow-l);
}
:host([theme~='contrast']) [part='overlay'] {
background: var(--lumo-contrast);
color: var(--lumo-base-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~='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~="error"]) [part="overlay"] {
background: var(--lumo-error-color);
color: var(--lumo-error-contrast-color);
box-shadow: var(--lumo-box-shadow-l);
}
: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~="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);
}
</style>
</template>
</dom-module>`;
: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);
}
document.head.appendChild($_documentContainer.content);
: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' }
);

236

theme/material/vaadin-notification-styles.js

@@ -0,158 +1,156 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/typography.js';
import '@vaadin/vaadin-material-styles/shadow.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-notification-container" theme-for="vaadin-notification-container">
<template>
<style>
registerStyles(
'vaadin-notification-container',
css`
:host {
top: 0;
bottom: 0;
left: 4px;
right: 4px;
}
@media (min-width: 420px) {
:host {
top: 0;
bottom: 0;
left: 4px;
right: 4px;
left: 12px;
right: 12px;
}
}
`,
{ moduleId: 'material-notification-container' }
);
@media (min-width: 420px) {
:host {
top: 0;
bottom: 0;
left: 12px;
right: 12px;
}
}
</style>
</template>
</dom-module><dom-module id="material-notification-card" theme-for="vaadin-notification-card">
<template>
<style include="material-color-dark">
:host {
min-height: 48px;
margin: 8px 4px;
background-color: transparent;
}
registerStyles(
'vaadin-notification-card',
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);
[part='overlay'] {
background-color: var(--material-background-color);
border-radius: 4px;
box-shadow: var(--material-shadow-elevation-6dp);
padding: 14px 16px;
justify-content: stretch;
}
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;
}
[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;
}
/* 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']) {
margin: 0 -4px;
}
:host([slot\$="stretch"]) [part="overlay"] {
border-radius: 0;
}
: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;
}
@media (min-width: 420px) {
:host {
margin: 24px 12px;
}
@keyframes material-notification-exit-fade-out {
100% {
opacity: 0;
}
:host([slot^='middle']) {
width: 372px;
margin: auto;
}
@keyframes material-notification-enter-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
:host([slot\$='stretch']) {
margin: 0 -12px;
}
}
@keyframes material-notification-enter-slide-down {
0% {
transform: translateY(-200%);
opacity: 0;
}
@keyframes material-notification-exit-fade-out {
100% {
opacity: 0;
}
}
@keyframes material-notification-exit-slide-up {
100% {
transform: translateY(-200%);
opacity: 0;
}
@keyframes material-notification-enter-fade-in {
0% {
opacity: 0;
}
@keyframes material-notification-enter-slide-up {
0% {
transform: translateY(200%);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes material-notification-exit-slide-down {
100% {
transform: translateY(200%);
opacity: 0;
}
@keyframes material-notification-enter-slide-down {
0% {
transform: translateY(-200%);
opacity: 0;
}
}
:host([slot="middle"][opening]) {
animation: material-notification-enter-fade-in 300ms;
@keyframes material-notification-exit-slide-up {
100% {
transform: translateY(-200%);
opacity: 0;
}
}
:host([slot="middle"][closing]) {
animation: material-notification-exit-fade-out 300ms;
@keyframes material-notification-enter-slide-up {
0% {
transform: translateY(200%);
opacity: 0;
}
}
:host([slot^="top"][opening]) {
animation: material-notification-enter-slide-down 300ms;
@keyframes material-notification-exit-slide-down {
100% {
transform: translateY(200%);
opacity: 0;
}
}
:host([slot^="top"][closing]) {
animation: material-notification-exit-slide-up 300ms;
}
:host([slot='middle'][opening]) {
animation: material-notification-enter-fade-in 300ms;
}
:host([slot^="bottom"][opening]) {
animation: material-notification-enter-slide-up 300ms;
}
:host([slot='middle'][closing]) {
animation: material-notification-exit-fade-out 300ms;
}
:host([slot^="bottom"][closing]) {
animation: material-notification-exit-slide-down 300ms;
}
</style>
</template>
</dom-module>`;
:host([slot^='top'][opening]) {
animation: material-notification-enter-slide-down 300ms;
}
document.head.appendChild($_documentContainer.content);
: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;
}
`,
{ include: ['material-color-dark'], moduleId: 'material-notification-card' }
);

15

vaadin-notification.d.ts

@@ -1,15 +0,2 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-notification.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-notification.js';
export * from './@types/interfaces';
export * from './src/interfaces';
./@types/interfaces.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc