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

@material/mwc-snackbar

Package Overview
Dependencies
Maintainers
15
Versions
709
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/mwc-snackbar - npm Package Compare versions

Comparing version

0.6.0
to
0.7.0

accessible-snackbar-label-directive.d.ts
accessible-snackbar-label-directive.js
accessible-snackbar-label-directive.js.map
mwc-snackbar-base.d.ts
mwc-snackbar-base.js
mwc-snackbar-base.js.map
src/accessible-snackbar-label-directive.ts
src/mwc-snackbar-base.ts

2

mwc-snackbar-css.js

@@ -18,3 +18,3 @@ /**

import { css } from '@material/mwc-base/base-element';
export const style = css `.mdc-snackbar{z-index:8;margin:8px;display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar__surface{background-color:#333}.mdc-snackbar__label{color:rgba(255,255,255,.87)}.mdc-snackbar__surface{min-width:344px}@media(max-width: 480px),(max-width: 344px){.mdc-snackbar__surface{min-width:100%}}.mdc-snackbar__surface{max-width:672px}.mdc-snackbar__surface{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0,0,0,.12)}.mdc-snackbar__surface{border-radius:4px}.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing{display:flex}.mdc-snackbar--leading{justify-content:flex-start}.mdc-snackbar--stacked .mdc-snackbar__surface{flex-direction:column;align-items:flex-start}.mdc-snackbar--stacked .mdc-snackbar__actions{align-self:flex-end;margin-bottom:8px}.mdc-snackbar__surface{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(0.8);opacity:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);transition:opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);opacity:1;pointer-events:auto}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1);transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-snackbar__label{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.0178571429em;text-decoration:inherit;text-transform:inherit;flex-grow:1;box-sizing:border-box;margin:0;padding:14px 16px}.mdc-snackbar__label::before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{margin-left:0;margin-right:8px;display:flex;flex-shrink:0;align-items:center;box-sizing:border-box}[dir=rtl] .mdc-snackbar__actions,.mdc-snackbar__actions[dir=rtl]{margin-left:8px;margin-right:0}.mdc-snackbar__action:not(:disabled){color:#bb86fc}.mdc-snackbar__action::before,.mdc-snackbar__action::after{background-color:#bb86fc}.mdc-snackbar__action:hover::before{opacity:.08}.mdc-snackbar__action:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__action.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__action:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__action:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss{color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss::before,.mdc-snackbar__dismiss::after{background-color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss:hover::before{opacity:.08}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss.mdc-snackbar__dismiss{width:36px;height:36px;padding:9px;font-size:18px}.mdc-snackbar__dismiss.mdc-snackbar__dismiss svg,.mdc-snackbar__dismiss.mdc-snackbar__dismiss img{width:18px;height:18px}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss,.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl]{margin-left:0;margin-right:8px}`;
export const style = css `.mdc-snackbar{z-index:8;margin:8px;display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar__surface{background-color:#333}.mdc-snackbar__label{color:rgba(255,255,255,.87)}.mdc-snackbar__surface{min-width:344px}@media(max-width: 480px),(max-width: 344px){.mdc-snackbar__surface{min-width:100%}}.mdc-snackbar__surface{max-width:672px}.mdc-snackbar__surface{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0,0,0,.12)}.mdc-snackbar__surface{border-radius:4px}.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing{display:flex}.mdc-snackbar--leading{justify-content:flex-start}.mdc-snackbar--stacked .mdc-snackbar__surface{flex-direction:column;align-items:flex-start}.mdc-snackbar--stacked .mdc-snackbar__actions{align-self:flex-end;margin-bottom:8px}.mdc-snackbar__surface{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(0.8);opacity:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);opacity:1;pointer-events:auto;transition:opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1);transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-snackbar__label{font-family:Roboto, sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.0178571429em;text-decoration:inherit;text-transform:inherit;flex-grow:1;box-sizing:border-box;margin:0;padding:14px 16px}.mdc-snackbar__label::before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{margin-left:0;margin-right:8px;display:flex;flex-shrink:0;align-items:center;box-sizing:border-box}[dir=rtl] .mdc-snackbar__actions,.mdc-snackbar__actions[dir=rtl]{margin-left:8px;margin-right:0}.mdc-snackbar__action:not(:disabled){color:#bb86fc}.mdc-snackbar__action::before,.mdc-snackbar__action::after{background-color:#bb86fc}.mdc-snackbar__action:hover::before{opacity:.08}.mdc-snackbar__action:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__action.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__action:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__action:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss{color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss::before,.mdc-snackbar__dismiss::after{background-color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss:hover::before{opacity:.08}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss.mdc-snackbar__dismiss{width:36px;height:36px;padding:9px;font-size:18px}.mdc-snackbar__dismiss.mdc-snackbar__dismiss svg,.mdc-snackbar__dismiss.mdc-snackbar__dismiss img{width:18px;height:18px}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss,.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl]{margin-left:0;margin-right:8px}slot[name=action]::slotted(mwc-button){--mdc-theme-primary: var(--mdc-snackbar-action-color, #bb86fc)}slot[name=dismiss]::slotted(mwc-icon-button){--mdc-icon-size: 18px;color:rgba(255, 255, 255, 0.87)}`;
//# sourceMappingURL=mwc-snackbar-css.js.map

39

mwc-snackbar.d.ts

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

/**
@license
Copyright 2018 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { BaseElement } from '@material/mwc-base/base-element.js';
import MDCSnackbarFoundation from '@material/snackbar/foundation.js';
import { MDCSnackbarAdapter } from '@material/snackbar/adapter.js';
import { SnackbarBase } from './mwc-snackbar-base.js';
declare global {

@@ -25,21 +7,4 @@ interface HTMLElementTagNameMap {

}
export declare class Snackbar extends BaseElement {
protected mdcFoundation: MDCSnackbarFoundation;
protected readonly mdcFoundationClass: typeof MDCSnackbarFoundation;
protected mdcRoot: HTMLElement;
protected labelElement: HTMLElement;
isOpen: boolean;
timeoutMs: number;
closeOnEscape: boolean;
labelText: string;
stacked: boolean;
leading: boolean;
export declare class Snackbar extends SnackbarBase {
static styles: import("lit-element/lib/css-tag").CSSResult;
render(): import("lit-html/lib/template-result").TemplateResult;
protected createAdapter(): MDCSnackbarAdapter;
open(): void;
close(reason?: string): void;
_handleKeydown(e: KeyboardEvent): void;
_handleActionClick(e: MouseEvent): void;
_handleDismissClick(e: MouseEvent): void;
}

92

mwc-snackbar.js

@@ -23,94 +23,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {

*/
import { BaseElement, html, property, query, observer, customElement, classMap, addHasRemoveClass } from '@material/mwc-base/base-element.js';
import { customElement } from '@material/mwc-base/base-element.js';
import { SnackbarBase } from './mwc-snackbar-base.js';
import { style } from './mwc-snackbar-css.js';
import MDCSnackbarFoundation from '@material/snackbar/foundation.js';
import * as util from '@material/snackbar/util';
const { OPENING_EVENT, OPENED_EVENT, CLOSING_EVENT, CLOSED_EVENT } = MDCSnackbarFoundation.strings;
let Snackbar = class Snackbar extends BaseElement {
constructor() {
super(...arguments);
this.mdcFoundationClass = MDCSnackbarFoundation;
this.isOpen = false;
this.timeoutMs = 5000;
this.closeOnEscape = false;
this.labelText = '';
this.stacked = false;
this.leading = false;
}
render() {
const classes = {
'mdc-snackbar--stacked': this.stacked,
'mdc-snackbar--leading': this.leading,
};
return html `
<div class="mdc-snackbar ${classMap(classes)}" @keydown="${this._handleKeydown}">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label"
role="status"
aria-live="polite">
${this.labelText}
</div>
<div class="mdc-snackbar__actions">
<slot name="action" @click="${this._handleActionClick}"></slot>
<slot name="dismiss" @click="${this._handleDismissClick}"></slot>
</div>
</div>
</div>`;
}
createAdapter() {
return Object.assign({}, addHasRemoveClass(this.mdcRoot), { announce: () => util.announce(this.labelElement), notifyClosed: (reason) => {
this.isOpen = false;
this.dispatchEvent(new CustomEvent(CLOSED_EVENT, { bubbles: true, cancelable: true, detail: { reason: reason } }));
}, notifyClosing: (reason) => this.dispatchEvent(new CustomEvent(CLOSING_EVENT, { bubbles: true, cancelable: true, detail: { reason: reason } })), notifyOpened: () => {
this.isOpen = true;
this.dispatchEvent(new CustomEvent(OPENED_EVENT, { bubbles: true, cancelable: true }));
}, notifyOpening: () => this.dispatchEvent(new CustomEvent(OPENING_EVENT, { bubbles: true, cancelable: true })) });
}
open() {
this.mdcFoundation.open();
}
close(reason = '') {
this.mdcFoundation.close(reason);
}
_handleKeydown(e) {
this.mdcFoundation.handleKeyDown(e);
}
_handleActionClick(e) {
this.mdcFoundation.handleActionButtonClick(e);
}
_handleDismissClick(e) {
this.mdcFoundation.handleActionIconClick(e);
}
let Snackbar = class Snackbar extends SnackbarBase {
};
Snackbar.styles = style;
__decorate([
query('.mdc-snackbar')
], Snackbar.prototype, "mdcRoot", void 0);
__decorate([
query('.mdc-snackbar__label')
], Snackbar.prototype, "labelElement", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], Snackbar.prototype, "isOpen", void 0);
__decorate([
observer(function (value) {
this.mdcFoundation.setTimeoutMs(value);
}),
property({ type: Number })
], Snackbar.prototype, "timeoutMs", void 0);
__decorate([
observer(function (value) {
this.mdcFoundation.setCloseOnEscape(value);
}),
property({ type: Boolean })
], Snackbar.prototype, "closeOnEscape", void 0);
__decorate([
property()
], Snackbar.prototype, "labelText", void 0);
__decorate([
property({ type: Boolean })
], Snackbar.prototype, "stacked", void 0);
__decorate([
property({ type: Boolean })
], Snackbar.prototype, "leading", void 0);
Snackbar = __decorate([

@@ -117,0 +31,0 @@ customElement('mwc-snackbar')

13

package.json
{
"name": "@material/mwc-snackbar",
"version": "0.6.0",
"version": "0.7.0",
"description": "",
"main": "mwc-snackbar.js",
"repository": {
"type": "git",
"url": "https://github.com/material-components/material-components-web-components.git",
"directory": "packages/snackbar"
},
"scripts": {

@@ -12,4 +17,4 @@ "test": "echo \"Error: no test specified\" && exit 1"

"dependencies": {
"@material/mwc-base": "^0.6.0",
"@material/snackbar": "^1.0.0"
"@material/mwc-base": "^0.7.0",
"@material/snackbar": "^3.0.0"
},

@@ -19,3 +24,3 @@ "publishConfig": {

},
"gitHead": "1961a2530cc20bc020bba88f4da76d085ad1f1e0"
"gitHead": "c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db"
}

132

README.md

@@ -1,64 +0,126 @@

# mwc-snackbar
# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)
> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:
> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.
A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
Snackbars provide brief messages about app processes at the bottom of the
screen.
## Getting started
![](https://raw.githubusercontent.com/material-components/material-components-web-components/c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db/packages/snackbar/images/action_button.png)
* The easiest way to try out mwc-snackbar is to use one of these online tools:
[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)
* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
## Installation
* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
[CodePen](https://codepen.io/azakus/pen/deZLja).
```sh
npm install @material/mwc-snackbar
```
* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
> NOTE: The Material Web Components are distributed as ES2017 JavaScript
> Modules, and use the Custom Elements API. They are compatible with all modern
> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional
> tooling step is required to resolve *bare module specifiers*, as well as
> transpilation and polyfills for Edge and IE11. See
> [here](https://github.com/material-components/material-components-web-components#quick-start)
> for detailed instructions.
* When you're ready to use mwc-snackbar in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
## Example usage
1. Ensure the webcomponents polyfills are included in your HTML page
### Standard
- Install webcomponents polyfills
![](https://raw.githubusercontent.com/material-components/material-components-web-components/c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db/packages/snackbar/images/standard.png)
```npm i @webcomponents/webcomponentsjs```
```html
<mwc-snackbar id="photoErrorSnackbar"
labelText="Can't send photo. Retry in 5 seconds.">
</mwc-snackbar>
- Add webcomponents polyfills to your HTML page
<script type="module">
import '@material/mwc-snackbar';
const snackbar = document.querySelector('#photoErrorSnackbar');
sendPhoto.then(...).catch(() => snackbar.open());
</script>
```
```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
### Optional action and dismiss button
1. Add mwc-snackbar to your project:
![](https://raw.githubusercontent.com/material-components/material-components-web-components/c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db/packages/snackbar/images/action_and_dismiss.png)
```npm i @material/mwc-snackbar```
```html
<mwc-snackbar labelText="Can't send photo. Retry in 5 seconds.">
<mwc-button slot="action">RETRY</mwc-button>
<mwc-icon-button icon="close" slot="dismiss"></mwc-icon-button>
</mwc-snackbar>
```
1. Import the mwc-snackbar definition into your HTML page:
### Custom action button color
```<script type="module" src="@material/mwc-snackbar/index.js"></script>```
![](https://raw.githubusercontent.com/material-components/material-components-web-components/c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db/packages/snackbar/images/custom_action_color.png)
Or into your module script:
```css
mwc-snackbar {
--mdc-snackbar-action-color: #64dc17;
}
```
```import {Snackbar} from "@material/mwc-snackbar"```
## Variants
1. Create an instance of mwc-snackbar in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
### Stacked
```<mwc-snackbar></mwc-snackbar>```
Action buttons with long text should be positioned below the label instead of
alongside it. Set the `stacked` attribute or property to enable this layout.
1. Install the Polymer CLI:
![](https://raw.githubusercontent.com/material-components/material-components-web-components/c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db/packages/snackbar/images/stacked.png)
```npm i -g polymer-cli```
### Leading
1. Run the development server and open a browser pointing to its URL:
By default, snackbars are centered horizontally within the viewport. On larger
screens, they can optionally be displayed on the leading edge of the screen
(the left side in LTR, or the right side in RTL). Set the `leading`
attribute or property to enable this layout.
```polymer serve```
## API
> mwc-snackbar is published on [npm](https://www.npmjs.com/package/@material/mwc-snackbar) using JavaScript Modules.
This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
>
> However, since mwc-snackbar uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
### Slots
Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-snackbar.
| Name | Description
| --------- | -----------
| `action` | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.
| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.
## Supported Browsers
### Properties/Attributes
The last 2 versions of all modern browsers are supported, including
Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.
| Name | Type | Description
| ------------------- | --------------------- |------------
| `isOpen` | `boolean` (read-only) | Whether the snackbar is currently open.
| `timeoutMs` | `number` | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).
| `closeOnEscape` | `boolean` | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.
| `labelText` | `string` | The text content the label element.
| `stacked` | `boolean` | Enables the *stacked* layout (see above).
| `leading` | `boolean` | Enables the *leading* layout (see above).
### Methods
| Name | Description
| -------- | -------------
| `open() => void` | Opens the snackbar.
| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.
### Events
| Name | Detail | Description
| --------------------- | ------------------- | -----------
| `MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.
| `MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.
| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).
| `MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).
### CSS Custom Properties
| Name | Default | Description
| ----------------------------- | ------- |------------
| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.
## Additional references
- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)

2

src/mwc-snackbar-css.ts

@@ -19,2 +19,2 @@ /**

export const style = css`.mdc-snackbar{z-index:8;margin:8px;display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar__surface{background-color:#333}.mdc-snackbar__label{color:rgba(255,255,255,.87)}.mdc-snackbar__surface{min-width:344px}@media(max-width: 480px),(max-width: 344px){.mdc-snackbar__surface{min-width:100%}}.mdc-snackbar__surface{max-width:672px}.mdc-snackbar__surface{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0,0,0,.12)}.mdc-snackbar__surface{border-radius:4px}.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing{display:flex}.mdc-snackbar--leading{justify-content:flex-start}.mdc-snackbar--stacked .mdc-snackbar__surface{flex-direction:column;align-items:flex-start}.mdc-snackbar--stacked .mdc-snackbar__actions{align-self:flex-end;margin-bottom:8px}.mdc-snackbar__surface{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(0.8);opacity:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);transition:opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);opacity:1;pointer-events:auto}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1);transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-snackbar__label{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.0178571429em;text-decoration:inherit;text-transform:inherit;flex-grow:1;box-sizing:border-box;margin:0;padding:14px 16px}.mdc-snackbar__label::before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{margin-left:0;margin-right:8px;display:flex;flex-shrink:0;align-items:center;box-sizing:border-box}[dir=rtl] .mdc-snackbar__actions,.mdc-snackbar__actions[dir=rtl]{margin-left:8px;margin-right:0}.mdc-snackbar__action:not(:disabled){color:#bb86fc}.mdc-snackbar__action::before,.mdc-snackbar__action::after{background-color:#bb86fc}.mdc-snackbar__action:hover::before{opacity:.08}.mdc-snackbar__action:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__action.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__action:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__action:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss{color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss::before,.mdc-snackbar__dismiss::after{background-color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss:hover::before{opacity:.08}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss.mdc-snackbar__dismiss{width:36px;height:36px;padding:9px;font-size:18px}.mdc-snackbar__dismiss.mdc-snackbar__dismiss svg,.mdc-snackbar__dismiss.mdc-snackbar__dismiss img{width:18px;height:18px}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss,.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl]{margin-left:0;margin-right:8px}`;
export const style = css`.mdc-snackbar{z-index:8;margin:8px;display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar__surface{background-color:#333}.mdc-snackbar__label{color:rgba(255,255,255,.87)}.mdc-snackbar__surface{min-width:344px}@media(max-width: 480px),(max-width: 344px){.mdc-snackbar__surface{min-width:100%}}.mdc-snackbar__surface{max-width:672px}.mdc-snackbar__surface{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0,0,0,.12)}.mdc-snackbar__surface{border-radius:4px}.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing{display:flex}.mdc-snackbar--leading{justify-content:flex-start}.mdc-snackbar--stacked .mdc-snackbar__surface{flex-direction:column;align-items:flex-start}.mdc-snackbar--stacked .mdc-snackbar__actions{align-self:flex-end;margin-bottom:8px}.mdc-snackbar__surface{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(0.8);opacity:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);opacity:1;pointer-events:auto;transition:opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1);transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-snackbar__label{font-family:Roboto, sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.0178571429em;text-decoration:inherit;text-transform:inherit;flex-grow:1;box-sizing:border-box;margin:0;padding:14px 16px}.mdc-snackbar__label::before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{margin-left:0;margin-right:8px;display:flex;flex-shrink:0;align-items:center;box-sizing:border-box}[dir=rtl] .mdc-snackbar__actions,.mdc-snackbar__actions[dir=rtl]{margin-left:8px;margin-right:0}.mdc-snackbar__action:not(:disabled){color:#bb86fc}.mdc-snackbar__action::before,.mdc-snackbar__action::after{background-color:#bb86fc}.mdc-snackbar__action:hover::before{opacity:.08}.mdc-snackbar__action:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__action.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__action:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__action:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss{color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss::before,.mdc-snackbar__dismiss::after{background-color:rgba(255,255,255,.87)}.mdc-snackbar__dismiss:hover::before{opacity:.08}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus::before,.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24}.mdc-snackbar__dismiss.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-snackbar__dismiss.mdc-snackbar__dismiss{width:36px;height:36px;padding:9px;font-size:18px}.mdc-snackbar__dismiss.mdc-snackbar__dismiss svg,.mdc-snackbar__dismiss.mdc-snackbar__dismiss img{width:18px;height:18px}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss,.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl]{margin-left:0;margin-right:8px}slot[name=action]::slotted(mwc-button){--mdc-theme-primary: var(--mdc-snackbar-action-color, #bb86fc)}slot[name=dismiss]::slotted(mwc-icon-button){--mdc-icon-size: 18px;color:rgba(255, 255, 255, 0.87)}`;

108

src/mwc-snackbar.ts

@@ -17,11 +17,7 @@ /**

*/
import {BaseElement, html, property, query, observer, customElement, classMap, addHasRemoveClass} from '@material/mwc-base/base-element.js';
import {customElement} from '@material/mwc-base/base-element.js';
import {SnackbarBase} from './mwc-snackbar-base.js';
import {style} from './mwc-snackbar-css.js';
import MDCSnackbarFoundation from '@material/snackbar/foundation.js';
import {MDCSnackbarCloseEventDetail} from '@material/snackbar/types';
import * as util from '@material/snackbar/util';
import { MDCSnackbarAdapter } from '@material/snackbar/adapter.js';
const {OPENING_EVENT, OPENED_EVENT, CLOSING_EVENT, CLOSED_EVENT} = MDCSnackbarFoundation.strings;
declare global {

@@ -33,99 +29,5 @@ interface HTMLElementTagNameMap {

@customElement('mwc-snackbar' as any)
export class Snackbar extends BaseElement {
protected mdcFoundation!: MDCSnackbarFoundation;
protected readonly mdcFoundationClass = MDCSnackbarFoundation;
@query('.mdc-snackbar')
protected mdcRoot!: HTMLElement
@query('.mdc-snackbar__label')
protected labelElement!: HTMLElement
@property({type: Boolean, reflect: true})
isOpen = false;
@observer(function(this: Snackbar, value: number) {
this.mdcFoundation.setTimeoutMs(value);
})
@property({type: Number})
timeoutMs = 5000;
@observer(function(this: Snackbar, value: boolean) {
this.mdcFoundation.setCloseOnEscape(value);
})
@property({type: Boolean})
closeOnEscape = false;
@property()
labelText = '';
@property({type: Boolean})
stacked = false;
@property({type: Boolean})
leading = false;
@customElement('mwc-snackbar')
export class Snackbar extends SnackbarBase {
static styles = style;
render() {
const classes = {
'mdc-snackbar--stacked': this.stacked,
'mdc-snackbar--leading': this.leading,
};
return html`
<div class="mdc-snackbar ${classMap(classes)}" @keydown="${this._handleKeydown}">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label"
role="status"
aria-live="polite">
${this.labelText}
</div>
<div class="mdc-snackbar__actions">
<slot name="action" @click="${this._handleActionClick}"></slot>
<slot name="dismiss" @click="${this._handleDismissClick}"></slot>
</div>
</div>
</div>`;
}
protected createAdapter(): MDCSnackbarAdapter {
return {
...addHasRemoveClass(this.mdcRoot),
announce: () => util.announce(this.labelElement),
notifyClosed: (reason: String) => {
this.isOpen = false;
this.dispatchEvent(new CustomEvent(CLOSED_EVENT,
{bubbles: true, cancelable: true, detail: <MDCSnackbarCloseEventDetail>{reason: reason}}))
},
notifyClosing: (reason: String) => this.dispatchEvent(new CustomEvent(CLOSING_EVENT,
{bubbles: true, cancelable: true, detail: <MDCSnackbarCloseEventDetail>{reason: reason}})),
notifyOpened: () => {
this.isOpen = true;
this.dispatchEvent(new CustomEvent(OPENED_EVENT, {bubbles: true, cancelable: true}))
},
notifyOpening: () => this.dispatchEvent(new CustomEvent(OPENING_EVENT, {bubbles: true, cancelable: true})),
};
}
open() {
this.mdcFoundation.open();
}
close(reason = '') {
this.mdcFoundation. close(reason);
}
_handleKeydown(e: KeyboardEvent) {
this.mdcFoundation.handleKeyDown(e);
}
_handleActionClick(e: MouseEvent) {
this.mdcFoundation.handleActionButtonClick(e);
}
_handleDismissClick(e: MouseEvent) {
this.mdcFoundation.handleActionIconClick(e);
}
}
.tsbuildinfo
CHANGELOG.md
tsconfig.json
mwc-snackbar-css.js.map

Sorry, the diff of this file is not supported yet

mwc-snackbar.js.map

Sorry, the diff of this file is not supported yet

src/mwc-snackbar.scss

Sorry, the diff of this file is not supported yet