{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25540ad287d60c78621386c9c687078c9b09a6f9","tarball":"https://registry.npmjs.org/@material/snackbar/-/snackbar-0.35.0.tgz","fileCount":11,"integrity":"sha512-RrKz9Zg5o4tree3h+c+GQrWjTeCnImT7omyMGWge8wdsxu3snXNdLqzvqmeVsZMIB+jMk5VWye7fGjU9wsJT6Q==","signatures":[{"sig":"MEUCIQCAMs24BfHGQqGMDYSbeMhI42dmR/QDnXX59Aa8fSEdrQIgRkvaDHmDoG6bJZ80lI7bgKncbLnrYwVQXWP14i0lDdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDuCRA9TVsSAnZWagAABzMP/iO92tLAC/86oUnQwzqN\n1jsZ96YOY7kBo5gFRZdmsC6X/TsdbUMD6tqotv4RZwRqAzAU2Wa7kmNQf8a+\niWIAlRErhidxHdqkZrK4g9Y9nt4YKKKDUcUE81A1lwJqkRqFiQgXE+ICGru+\naKyBh8xjOJH0FZZbfADi34bkAtbXcv4dP5eGa2v4v3WMI9JtfX4/VDMbzDA1\ned24OFr+CY3ZXHCmMAHCJ3ryR/POEx8GK4pf179JhK2foO3TvFi3T4rpDll4\ng38WvqZBLZBpSvO2u3WI2Y7mu/umLUFnRJvI+Z7Kc5zqqgduf6JN3sc9pAM5\nSoGTqAK+oHRjEACtmiVDcJK0Gszfmvw3A/dYLcVHCbvMVzz2GuqrpkAAJXuB\nYvc7RlQq/MS2NONnCSoVEz5GbaVJwiipBPYiiNNPlHnGSq4yFUY+j4MWZAXe\ndIZLwj3GsLacuDDlVEurVOOqB2GaXX7tguRvXbeFsrPvEFFXgBF0jIUVCRm2\n970p8qENfW5FrB5p3skJte+AjbvIyG5i2AwoVaSK8SLXKHd/SZFD5bLvemya\nM6ZIqeX0zfdBwRbwrs4EsGTqZDkCUT2RSV1EVXx6NLR9C+LATbc9TOw5XPBX\ntEBfg52eHaUk5bdt9zAMVDh8kixt69gwYPVZFJjsHCU070SAsI7LAMM3Bj7a\n7G2p\r\n=My2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/snackbar","readme":"\n\n# Snackbars\n\n\n\nThe MDC Snackbar component is a spec-aligned snackbar/toast component adhering to the\n[Material Design snackbars & toasts requirements](https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs).\nIt requires JavaScript to show and hide itself.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Usage\n\n### Snackbar DOM\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n### Start Aligned Snackbars (tablet and desktop only)\n\nMDC Snackbar can be start aligned (including in RTL contexts). To create a start-aligned\nsnackbar, add the `mdc-snackbar--align-start` modifier class to the root element.\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n### Using the JS Component\n\nMDC Snackbar ships with a Component / Foundation combo which provides the API for showing snackbar\nmessages with optional action.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCSnackbar, MDCSnackbarFoundation} from '@material/snackbar';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcSnackbar = require('mdc-snackbar');\nconst MDCSnackbar = mdcSnackbar.MDCSnackbar;\nconst MDCSnackbarFoundation = mdcSnackbar.MDCSnackbarFoundation;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-snackbar'], mdcSnackbar => {\n const MDCSnackbar = mdcSnackbar.MDCSnackbar;\n const MDCSnackbarFoundation = mdcSnackbar.MDCSnackbarFoundation;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCSnackbar = mdc.snackbar.MDCSnackbar;\nconst MDCSnackbarFoundation = mdc.snackbar.MDCSnackbarFoundation;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the snackbar, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.snackbar.MDCSnackbar.attachTo(document.querySelector('.mdc-snackbar'));\n```\n\n#### Manual Instantiation\n\nSnackbars can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCSnackbar} from '@material/snackbar';\n\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n#### Handling events\n\nWhen snackbar is shown or dismissed, the component will emit a `MDCSnackbar:show` or\n`MDCSnackbar:hide` custom event with no data attached.\n\n### Showing a message and action\n\nOnce you have obtained an MDCSnackbar instance attached to the DOM, you can use\nthe `show` method to trigger the display of a message with optional action. The\n`show` method takes an object for snackbar data. The table below shows the\nproperties and their usage.\n\n| Property | Effect | Remarks | Type |\n|-----------|--------|---------|---------|\n| message | The text message to display. | Required | String |\n| timeout | The amount of time in milliseconds to show the snackbar. | Optional (default 2750) | Integer |\n| actionHandler | The function to execute when the action is clicked. | Optional | Function |\n| actionText | The text to display for the action button. | Required if actionHandler is set | String |\n| multiline | Whether to show the snackbar with space for multiple lines of text | Optional | Boolean |\n| actionOnBottom | Whether to show the action below the multiple lines of text | Optional, applies when multiline is true | Boolean |\n\n### Responding to a Snackbar Action\n\nTo respond to a snackbar action, assign a function to the optional `actionHandler` property in the object that gets passed to the `show` method. If you choose to set this property, you *must _also_* set the `actionText` property.\n\n```html\n
\n
\n
\n \n
\n
\n```\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\n\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\nconst dataObj = {\n message: messageInput.value,\n actionText: 'Undo',\n actionHandler: function () {\n console.log('my cool function');\n }\n};\n\nsnackbar.show(dataObj);\n```\n\n\n### Keep snackbar when the action button is pressed\n\nBy default the snackbar will be dimissed when the user presses the action button.\nIf you want the snackbar to remain visible until the timeout is reached (regardless of\nwhether the user pressed the action button or not) you can set the `dismissesOnAction`\nproperty to `false`:\n\n```\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\nsnackbar.dismissesOnAction = false\n```\n\n### Using the Foundation Class\n\nMDC Snackbar ships with an `MDCSnackbarFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for snackbars must provide the following functions, with correct signatures:\n\n| Method 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| `setAriaHidden() => void` | Sets `aria-hidden=\"true\"` on the root element. |\n| `unsetAriaHidden() => void` | Removes the `aria-hidden` attribute from the root element. |\n| `setActionAriaHidden() => void` | Sets `aria-hidden=\"true\"` on the action element. |\n| `unsetActionAriaHidden() => void` | Removes the `aria-hidden` attribute from the action element. |\n| `setActionText(actionText: string) => void` | Set the text content of the action element. |\n| `setMessageText(message: string) => void` | Set the text content of the message element. |\n| `setFocus() => void` | Sets focus on the action button. |\n| `visibilityIsHidden() => boolean` | Returns document.hidden property. |\n| `registerBlurHandler(handler: EventListener) => void` | Registers an event handler to be called when a `blur` event is triggered on the action button |\n| `deregisterBlurHandler(handler: EventListener) => void` | Deregisters a `blur` event handler from the actionButton |\n| `registerVisibilityChangeHandler(handler: EventListener) => void` | Registers an event handler to be called when a 'visibilitychange' event occurs |\n| `deregisterVisibilityChangeHandler(handler: EventListener) => void` | Deregisters an event handler to be called when a 'visibilitychange' event occurs |\n| `registerCapturedInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler to be called when the given event type is triggered on the `body` |\n| `deregisterCapturedInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler from the `body` |\n| `registerActionClickHandler(handler: EventListener) => void` | Registers an event handler to be called when a `click` event is triggered on the action element. |\n| `deregisterActionClickHandler(handler: EventListener) => void` | Deregisters an event handler from a `click` event on the action element. This will only be called with handlers that have previously been passed to `registerActionClickHandler` calls. |\n| `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when an `transitionend` event is triggered on the root element. Note that you must account for vendor prefixes in order for this to work correctly. |\n| `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from an `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |\n| `notifyShow() => void` | Dispatches an event notifying listeners that the snackbar has been shown. |\n| `notifyHide() => void` | Dispatches an event notifying listeners that the snackbar has been hidden. |\n\n## Avoiding Flash-Of-Unstyled-Content (FOUC)\n\nIf you are loading the `mdc-snackbar` CSS asynchronously, you may experience a brief flash-of-unstyled-content (FOUC) due to the\nsnackbar's translate transition running once the CSS loads. To avoid this temporary FOUC, you can add the following simple style\nbefore the `mdc-snackbar` CSS is loaded:\n\n```css\n.mdc-snackbar { transform: translateY(100%); }\n```\nThis will move the snackbar offscreen until the CSS is fully loaded and avoids a translate transition upon load.\n","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.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":"5.6.0","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":"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"}],"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/snackbar_0.35.0_1524523244895_0.4277541951894821","host":"s3://npm-registry-packages"},"_id":"@material/snackbar@0.35.0","version":"0.35.0"}