{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b5ef7dab0d55b9e6f0acec91be506df26822bd1","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-3.0.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-/WgEDEAox7fkRVKRepbr8CW8EuDjrfeqHcfmJ9rw5Ki1WdwakPqu5/ZmsuFlYoLWfS7/y6IPrnjdoatLiLogZA==","signatures":[{"sig":"MEQCIDKwZoF3STAxXF3ZXCnOmJSnod/VctPZC0mDqFYLloL0AiB4V1f0O8Lgb9+6OlhJ3R4nLuun7Vd3flF6k88xxCkjAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpyCRA9TVsSAnZWagAAXZsP/3ka55q92qNYUrSdDPzS\nPpYolREBV3dqZ9mvkCodGa1lfEW+jpXvTb7ZQPW2a7REHfuKDuZLRpUWo445\nOIYv/CVrNbZ44tgZLlSrNM9Vr2vh8uX9hsW/GMh7z1Q1n6/6WFslaQAW4Uxh\neEB9yKviaj84JPwxZNyXMXLfG9SauR5rn4oIDyu7pZtD3VR+0LCRZ7Q+yPKG\nKzv2/uUliuIKocpUwrExGASQgdo/4KUw6zGJCnUK4UKeb5wAbh+yQ5TIJ7oi\nbl35+sThZMnEngRB9DuhFywSEAg8niZlcwWX9az0QqeCNvDnLj1duSxWS3m8\nZzxe15giulIB9XOceYCkY8n5f3e4iGQK6Girx9h67hmCYqUuxtIh6C2e+8Zm\n+0gRHSpNQYSYOGzBsXWzype/Y3ytma7sLcxS1KVzfOf6coBermsaGLKRf+BE\nNFvglR5NRCEvlZaLtXCfS9ZZYJGHcLmeuAVRZo8qbZ80ntqTos3YxsFgEcFJ\n9FU7oN2/O4ZVZzWSRswb1fMa6OiXIaR1Z62ByDLrv57Vr41RTFrNyue67tjL\nbsgvNg0wiqWGerT/DJ8A2wzwENuVr72JCzNyh6Njlqvp9L5fsg4Z53fcBDXe\nkM0Xn2ykohqgMBmxS9P0fNBuXJ79d6sTrA8kfR5Hx8efUeSdmLlZM/m8ImgN\n7308\r\n=7qzy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.snackbar.js","name":"@material/snackbar","types":"dist/mdc.snackbar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Snackbars\"\nlayout: detail\nsection: components\nexcerpt: \"Snackbars provide brief messages about app processes at the bottom of the screen.\"\niconId: toast\npath: /catalog/snackbars/\n-->\n\n# Snackbars\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/snackbar\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/snackbars.png\" width=\"336\" alt=\"Snackbar screenshot\">\n  </a>\n</div>-->\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-snackbar\">Material Design guidelines: Snackbars</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/snackbar\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-snackbar\">\n  <div class=\"mdc-snackbar__surface\">\n    <div class=\"mdc-snackbar__label\"\n         role=\"status\"\n         aria-live=\"polite\">\n      Can't send photo. Retry in 5 seconds.\n    </div>\n    <div class=\"mdc-snackbar__actions\">\n      <button type=\"button\" class=\"mdc-button mdc-snackbar__action\">Retry</button>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n<div class=\"mdc-snackbar mdc-snackbar--stacked\">\n  ...\n</div>\n```\n\nAlternatively, you can call the `mdc-snackbar-layout-stacked` mixin from Sass:\n\n```scss\n@media (max-width: $mdc-snackbar-mobile-breakpoint) {\n  .my-snackbar {\n    @include mdc-snackbar-layout-stacked;\n  }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn 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) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n<div class=\"mdc-snackbar mdc-snackbar--leading\">\n  ...\n</div>\n```\n\nAlternatively, you can call the `mdc-snackbar-position-leading` mixin from Sass:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n  .my-snackbar {\n    @include mdc-snackbar-position-leading;\n  }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `mdc-snackbar-viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: $mdc-snackbar-mobile-breakpoint) {\n  .my-snackbar {\n    @include mdc-snackbar-viewport-margin($mdc-snackbar-viewport-margin-wide);\n  }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-snackbar-fill-color($color)` | Sets the fill color of the snackbar.\n`mdc-snackbar-label-ink-color($color)` | Sets the color of the snackbar's label text.\n`mdc-snackbar-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-snackbar-min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`mdc-snackbar-max-width($max-width)` | Sets the `max-width` of the snackbar.\n`mdc-snackbar-elevation($z-index)` | Sets the elevation of the snackbar.\n`mdc-snackbar-viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`mdc-snackbar-z-index($z-index)` | Sets the `z-index` of the snackbar.\n`mdc-snackbar-position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar-layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the <kbd>ESC</kbd> key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the snackbar.\n`close(reason: string=) => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the <kbd>ESC</kbd> key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the <kbd>ESC</kbd> key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n    - Chrome\n    - Firefox\n    - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n    - Chrome\n    - Firefox\n    - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the <kbd>ESC</kbd> key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","snackbar"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web snackbar component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/button":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.0","@material/icon-button":"^3.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_3.0.0-alpha.0_1560312433382_0.742249218985424","host":"s3://npm-registry-packages"},"_id":"@material/snackbar@3.0.0-alpha.0","version":"3.0.0-alpha.0"}